Copied to clipboard!
Brand Style Guide

KidCart 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 — 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
05 — 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
06 — Favicon & App Icon

Icon Scale

The KidCart icon is the custom happy cart 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