Copied to clipboard!
Brand Style Guide

🛒 KidCart
Brand System

Everything you need to build consistent, on-brand experiences — colors, typography, components, voice, and more.

02 — Color

Color Palette

KidCart's palette is built around gender-neutral purple — distinct from every major retailer — with semantic greens and reds for user actions and attention-grabbing orange for badges. Click any swatch to copy its hex value.

Primary — Brand Gradient
145deg · Purple → Indigo → Blue
#7c3aed0%
#4f46e550%
#2563eb100%
CSS: linear-gradient(145deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%)
#7c3aed
Purple
#7c3aed
Buttons, accents, primary brand
#4f46e5
Indigo
#4f46e5
Gradient midpoint
#2563eb
Blue
#2563eb
Gradient end, commerce trust
#a78bfa
Purple Light
#a78bfa
Badges, highlights, tags
#ede9fe
Purple Pale
#ede9fe
Icon backgrounds, tints
#10b981
Green
#10b981
Approve, want, success
#ef4444
Red
#ef4444
Decline, skip, block
#f59e0b
Orange
#f59e0b
Badges, pending counts
#0071dc
Walmart Blue
#0071dc
Walmart-specific CTAs only
#1a1523
Near Black
#1a1523
Body text, headings, footer
#6b6880
Gray
#6b6880
Secondary text, descriptions
#f8f7ff
Page Background
#f8f7ff
App & site background
Category Card Backgrounds
Snacks
#fef3c7
Frozen
#dbeafe
Produce
#d1fae5
Candy
#fce7f3
Toys
#ede9fe
03 — Typography

Type System

KidCart uses the system font stack — no custom font download required. The app feels native on every platform. Weight does all the heavy lifting.

Font Stack
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
iPhone / Mac
San Francisco (SF Pro)
Android
Roboto
Windows
Segoe UI
Fallback
system-ui, sans-serif
Display / Logo
Size: 48–80px+
Weight: 900
Letter-spacing: -1 to -2px
Use: Hero headings, logo wordmark
KidCart
Heading 1
Size: 32–44px
Weight: 900
Letter-spacing: -0.5px
Use: Section titles
Shopping, but actually fun
Heading 2
Size: 20–24px
Weight: 800
Use: Card titles, feature names
Approve or decline anything
Body
Size: 14–17px
Weight: 400
Line-height: 1.6
Use: Descriptions, copy
Review every item your kid picked before a single dollar is spent. KidCart never sees your payment info — you pay directly through Walmart, Amazon, or Target.
Label / Eyebrow
Size: 11–13px
Weight: 700–800
Letter-spacing: 2px
Transform: uppercase
Use: Section labels, tags
How it works
Built for parents
Button / CTA
Size: 14–16px
Weight: 700
Use: All interactive elements
Tagline
Size: 18–22px
Weight: 400–500
Letter-spacing: 4–8px
Transform: capitalize or sentence
Use: Brand tagline only
Swipe. Pick. Shop.
04 — Components

UI Components

The core building blocks of the KidCart interface. All interactive elements use the same radius, shadow, and feedback patterns for consistency.

Buttons
Primary — gradient, 100px radius
Ghost — border, pale hover
Semantic — parent approval actions
Swipe Card
🍪
WANT
Oreo Cookies
Nabisco · $4.99
Radius: 20px
Shadow: 0 8px 40px rgba(0,0,0,0.12)
WANT stamp: Green, rotate(-15deg)
NOPE stamp: Red, rotate(15deg)
Image bg: Category pastel
Parent PIN Pad
Badges & Tags
4 pending
Orange — pending cart count
Coming Soon
Purple pale — status tags
Coming Soon
Live badge — glass style
Step / Feature Card
1
👆
Kids Swipe
Swipe right to want it, left to skip. No more store aisle chaos.
Gradient top bar appears on hover only
Glass / Mode Button
👶
I'm a Kid
Swipe on stuff you want
👩
I'm a Parent
Review cart & manage
rgba(255,255,255,0.12) + backdrop-filter:blur(12px)
05 — Voice & Tone

Brand Voice

KidCart speaks to two audiences at once — kids who want fun, and parents who want control. The voice is warm and confident without being patronizing to either.

🎯
Direct
"Swipe. Pick. Shop." — three words, done.
😊
Warm
Friendly without being saccharine. Real, not corporate.
🔒
Trustworthy
Parents need confidence. We're specific about safety.
⚡
Energetic
Fun for kids. Never boring. The product is a game.
✓ Do say
Swipe. Pick. Shop.
Kids swipe. Parents approve.
Free forever for families
KidCart never sees your card
Buy All at Walmart
No surprises. Ever.
Shopping trips just got easier
✗ Don't say
Leverage synergies to optimize
Our proprietary platform
End-to-end shopping solution
We process your transaction
Click here to purchase
KidCart — the #1 kids shopping app
Monetize family shopping behavior
06 — Spacing & Shape

Spacing Scale & Border Radius

Consistent spacing and corner rounding make the app feel unified. The 20px card radius is the signature shape of KidCart — rounded enough to feel touchable, not so round it looks like a bubble.

Spacing Scale
8px
xs — icon gaps
12px
sm — inline gaps
16px
md — card padding
24px
lg — grid gap
32px
xl — card padding
48px
2xl — section gaps
64px
3xl — section padding
80–100px
4xl — page sections
Border Radius Scale
4px
Stamp / code
8px
Inputs / tags
12px
Icon wraps
16px
Small cards
Signature
20px
Swipe cards
36px
Phone frames
100px
Buttons / pills
Elevation / Shadows
Subtle
0 2px 8px rgba(0,0,0,0.06)
Store pills, tags
Card
0 4px 24px rgba(124,58,237,0.07)
Step cards, feature cards
Lifted
0 8px 40px rgba(0,0,0,0.12)
Swipe cards — "floating"
CTA Glow
0 4px 16px rgba(124,58,237,0.3)
Primary buttons
07 — Favicon & App Icon

Icon Scale

The KidCart icon is the 🛒 emoji centered on the brand gradient background with rounded corners. It scales cleanly from 16px browser favicon all the way to 256px app store icon.

🛒
16px favicon
🛒
32px favicon
🛒
48px browser tab
🛒
64px homescreen
🛒
128px notification
🛒
256px app store
Favicon link tag
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Corner radius rule
~25% of icon size is the target radius
32px icon → 8px radius · 128px icon → 28px radius