BounceBox Design System

BounceBox Design System mockup preview
Click to expand

BounceBox is a bubbly, rainbow-energy design system designed for kids' entertainment and game platforms targeting ages 3-8. Every element is oversized, pill-shaped, and bursting with playful depth through coral, teal, and sunshine yellow. The system prioritizes large touch targets, bold colors, and a joyful visual language that makes interaction feel like play.

Color Primary#FF6B6B
Color Secondary#4ECDC4
Color Tertiary#FFE66D
Surface Base#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Titan One · 48px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Titan One · 36px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Titan One · 28px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Titan One · 22px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyPoppins · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallPoppins · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsPoppins · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

BounceBox is a bubbly, rainbow-energy design system designed for kids' entertainment and game platforms targeting ages 3-8. Every element is oversized, pill-shaped, and bursting with playful depth through coral, teal, and sunshine yellow. The system prioritizes large touch targets, bold colors, and a joyful visual language that makes interaction feel like play.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

defaultsuccesswarningerror

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-coral
shadow-teal
shadow-sunny

Do's & Don'ts

Do

make every interactive element at least 44px tall with generous padding for small fingers.
use pill-shaped buttons and rounded cards consistently to maintain the bubbly toy-like feel.
use bright, saturated colors from the palette; muted or pastel tones undermine the energy.
use the sunshine yellow for rewards, stars, and celebration animations.
add colored glow shadows to primary CTAs to make them irresistible to tap.
use dashed dividers and thick borders to reinforce the hand-drawn, playful aesthetic.

Don't

use small text below 14px anywhere in the interface; legibility for young readers is critical.
use complex iconography; prefer simple, chunky icons with thick 3px strokes.
use harsh error states; frame mistakes as 'Oops, try again!' with the coral color gently.
place more than three interactive options on screen at once for the target age group.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 7.0 KB
Downloads 0
bold kids light mobile-app playful

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/bouncebox and implement it in my code

Don't have the MCP? Install it here