BounceBox Brand Style Guide
← Color Fonts

BounceBox design system

Bubbly, rainbow energy for kids' games and entertainment (ages 3 to 8). Oversized pill buttons with coral glow, 24px cards, thick borders, dashed dividers and sunshine yellow saved for rewards.

Source: designmd.ai/chef/bouncebox · by @chef · MIT License

Typography

Titan One + Poppins
Heading system
Titan One
Specimen · 400 · 48px · lh 1.2 (h1 48 / h2 36 / h3 28 / h4 22px)
Body system
Poppins
Body 18px / 400 / 1.5 · Small 16px / 400 · XS 14px / 600 / 1.4 (badges) · never below 14px
Drag the star into the box. If it does not fit, try again: you have all the time you need.
Mono · Roboto Mono (no sizes in source)
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 · 128 stars · level 3
Original: Titan One / Poppins / Roboto Mono -> HTML: Titan One / Poppins / Roboto Mono (all on Google Fonts, loaded as is)

Colors

Light · coral, teal, yellow
Primary · Coral#FF6B6B
Secondary · Teal#4ECDC4
Tertiary · Sunshine#FFE66D
Surface Base#FFFFFF
Info #60A5FA
Destructive #EF4444
Border #E5E7EB
Tooltip #2D2D2D

Background #FFFFFF · Success #4ECDC4 · Warning #FFE66D · Error #FF6B6B · Border #E5E7EB / hover #A1A1AA · Accent #FF6B6B

Content text has no hex in the source; the preview uses the tooltip dark #2D2D2D.

Overview

Kids 3 to 8
AudienceKids' games, ages 3 to 8
Touch target44px min · 16px padding
Options on screenThree at most
Dividers2px dashed #E5E7EB

Content width and grid: (not specified).

Components

Rebuilt from recipe
AnimalsCorrectHintTry again
Only letters, please
Oops, try again!
Sound Easy Hard
Tap the star to collect it

Buttons

Pill · 9999px
Primary Secondary Ghost Delete
Small Medium Large Off
Primary#FF6B6B · hover #E85D5D
Secondary#4ECDC4 · hover #3DBEB5
Ghost3px #FF6B6B · hover 15%
Sizes40 / 48 / 56px · 16 / 18 / 22px

Spacing

8px base
Level 3
Shapes and colors
Cards pad 24px. Every tap target gets at least 16px of padding.
Let's go
Scale
xs 4sm 8md 16lg 24xl 322xl 483xl 64

Elevation & Depth

Material + glow

Material shadows give a tactile, toy-like depth. Calls to action add a colored glow: coral for primary, teal for secondary, sunny yellow for rewards.

smresting
mdhover
lgmodals
coralprimary
tealsecondary
sunnyrewards
sm / md / lg0 2px 4px .08 · 0 4px 10px .12 · 0 8px 20px .15
Glows0 4px 14px · coral .35 · teal .35 · sunny .40

Shapes

Very rounded
8px checkbox
16px inputs
24px cards
9999px pills
Buttons / chips9999px
IconsChunky, 3px strokes

Do's and Don'ts

Guardrails

Do

Make every interactive element at least 44px tall, with generous padding.
Use pill buttons and rounded cards everywhere to keep the toy-like feel.
Use bright, saturated palette colors; pastels kill the energy.
Save sunshine yellow for rewards, stars and celebrations.
Add colored glow shadows to primary CTAs.
Use dashed dividers and thick borders for a hand-drawn look.

Don't

Use text below 14px anywhere.
Use complex icons; keep them simple with thick 3px strokes.
Use harsh errors: say "Oops, try again!" in gentle coral.
Show more than three interactive options at once.

Motion

Patient

The only timing in the source: tooltips wait 400ms before showing (longer on purpose, for kids) and hide instantly. Yellow carries celebration animations. Durations and easing are not specified.

Tooltip show400ms delay
Tooltip hideinstant
Generated from DESIGN.md · design-md-styleguide · BounceBox by @chef (MIT)
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #FF6B6B;
  --color-primary-hover: #E85D5D;
  --color-secondary: #4ECDC4;
  --color-secondary-hover: #3DBEB5;
  --color-tertiary: #FFE66D;
  --color-surface-base: #FFFFFF;
  --color-success: #4ECDC4;
  --color-warning: #FFE66D;
  --color-error: #FF6B6B;
  --color-info: #60A5FA;
  --color-destructive: #EF4444;
  --color-destructive-hover: #DC2626;
  --color-border: #E5E7EB;
  --color-border-hover: #A1A1AA;
  --color-surface-disabled: #F9FAFB;
  --color-error-surface: #FFF5F5;
  --color-tooltip: #2D2D2D;
  --color-status-success-bg: #D1FAE5;
  --color-status-success-fg: #166534;
  --color-status-warning-bg: #FEF9C3;
  --color-status-warning-fg: #854D0E;
  --color-status-error-bg: #FEE2E2;
  --color-status-error-fg: #991B1B;
  --font-display: "Titan One";
  --font-body: "Titan One";
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --radius-checkbox: 8px;
  --space-base: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-touch-min-padding: 16px;
}
@theme {
  --color-primary: #FF6B6B;
  --color-primary-hover: #E85D5D;
  --color-secondary: #4ECDC4;
  --color-secondary-hover: #3DBEB5;
  --color-tertiary: #FFE66D;
  --color-surface-base: #FFFFFF;
  --color-success: #4ECDC4;
  --color-warning: #FFE66D;
  --color-error: #FF6B6B;
  --color-info: #60A5FA;
  --color-destructive: #EF4444;
  --color-destructive-hover: #DC2626;
  --color-border: #E5E7EB;
  --color-border-hover: #A1A1AA;
  --color-surface-disabled: #F9FAFB;
  --color-error-surface: #FFF5F5;
  --color-tooltip: #2D2D2D;
  --color-status-success-bg: #D1FAE5;
  --color-status-success-fg: #166534;
  --color-status-warning-bg: #FEF9C3;
  --color-status-warning-fg: #854D0E;
  --color-status-error-bg: #FEE2E2;
  --color-status-error-fg: #991B1B;
  --font-display: "Titan One";
  --font-body: "Titan One";
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --radius-checkbox: 8px;
  --spacing-base: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-touch-min-padding: 16px;
}
{
  "colors": {
    "primary": "#FF6B6B",
    "primary-hover": "#E85D5D",
    "secondary": "#4ECDC4",
    "secondary-hover": "#3DBEB5",
    "tertiary": "#FFE66D",
    "surface-base": "#FFFFFF",
    "success": "#4ECDC4",
    "warning": "#FFE66D",
    "error": "#FF6B6B",
    "info": "#60A5FA",
    "destructive": "#EF4444",
    "destructive-hover": "#DC2626",
    "border": "#E5E7EB",
    "border-hover": "#A1A1AA",
    "surface-disabled": "#F9FAFB",
    "error-surface": "#FFF5F5",
    "tooltip": "#2D2D2D",
    "status-success-bg": "#D1FAE5",
    "status-success-fg": "#166534",
    "status-warning-bg": "#FEF9C3",
    "status-warning-fg": "#854D0E",
    "status-error-bg": "#FEE2E2",
    "status-error-fg": "#991B1B"
  },
  "typography": {
    "h1": {
      "fontFamily": "Titan One",
      "fontSize": "48px",
      "fontWeight": "400",
      "lineHeight": "1.2"
    },
    "h2": {
      "fontFamily": "Titan One",
      "fontSize": "36px",
      "fontWeight": "400",
      "lineHeight": "1.2"
    },
    "h3": {
      "fontFamily": "Titan One",
      "fontSize": "28px",
      "fontWeight": "400",
      "lineHeight": "1.25"
    },
    "h4": {
      "fontFamily": "Titan One",
      "fontSize": "22px",
      "fontWeight": "400",
      "lineHeight": "1.3"
    },
    "body": {
      "fontFamily": "Poppins",
      "fontSize": "18px",
      "fontWeight": "400",
      "lineHeight": "1.5"
    },
    "small": {
      "fontFamily": "Poppins",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "1.5"
    },
    "xs": {
      "fontFamily": "Poppins",
      "fontSize": "14px",
      "fontWeight": "600",
      "lineHeight": "1.4"
    },
    "mono": {
      "fontFamily": "Roboto Mono"
    }
  },
  "rounded": {
    "md": "16px",
    "lg": "24px",
    "pill": "9999px",
    "checkbox": "8px"
  },
  "spacing": {
    "base": "8px",
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "2xl": "48px",
    "3xl": "64px",
    "touch-min-padding": "16px"
  }
}
---
version: "alpha"
name: "BounceBox"
description: "A bubbly, rainbow-energy design system for kids' entertainment and game platforms (ages 3 to 8). Oversized, pill-shaped elements with playful depth in coral, teal and sunshine yellow, large touch targets and a joyful visual language."
source: "https://designmd.ai/chef/bouncebox"
author: "@chef"
license: "MIT"
colors:
  primary: "#FF6B6B"
  primary-hover: "#E85D5D"
  secondary: "#4ECDC4"
  secondary-hover: "#3DBEB5"
  tertiary: "#FFE66D"
  surface-base: "#FFFFFF"
  success: "#4ECDC4"
  warning: "#FFE66D"
  error: "#FF6B6B"
  info: "#60A5FA"
  destructive: "#EF4444"
  destructive-hover: "#DC2626"
  border: "#E5E7EB"
  border-hover: "#A1A1AA"
  surface-disabled: "#F9FAFB"
  error-surface: "#FFF5F5"
  tooltip: "#2D2D2D"
  status-success-bg: "#D1FAE5"
  status-success-fg: "#166534"
  status-warning-bg: "#FEF9C3"
  status-warning-fg: "#854D0E"
  status-error-bg: "#FEE2E2"
  status-error-fg: "#991B1B"
typography:
  h1:
    fontFamily: "Titan One"
    fontSize: "48px"
    fontWeight: 400
    lineHeight: 1.2
  h2:
    fontFamily: "Titan One"
    fontSize: "36px"
    fontWeight: 400
    lineHeight: 1.2
  h3:
    fontFamily: "Titan One"
    fontSize: "28px"
    fontWeight: 400
    lineHeight: 1.25
  h4:
    fontFamily: "Titan One"
    fontSize: "22px"
    fontWeight: 400
    lineHeight: 1.3
  body:
    fontFamily: "Poppins"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.5
  small:
    fontFamily: "Poppins"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
  xs:
    fontFamily: "Poppins"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: 1.4
  mono:
    fontFamily: "Roboto Mono"
rounded:
  md: "16px"
  lg: "24px"
  pill: "9999px"
  checkbox: "8px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  touch-min-padding: "16px"
shadows:
  sm: "0 2px 4px rgba(0,0,0,0.08)"
  md: "0 4px 10px rgba(0,0,0,0.12)"
  lg: "0 8px 20px rgba(0,0,0,0.15)"
  coral: "0 4px 14px rgba(255,107,107,0.35)"
  teal: "0 4px 14px rgba(78,205,196,0.35)"
  sunny: "0 4px 14px rgba(255,230,109,0.40)"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.pill}"
    hoverBackground: "{colors.primary-hover}"
    glow: "{shadows.coral}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.pill}"
    hoverBackground: "{colors.secondary-hover}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    border: "3px solid {colors.primary}"
    rounded: "{rounded.pill}"
    hoverBackground: "rgba(255,107,107,0.15)"
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "#FFFFFF"
    rounded: "{rounded.pill}"
    hoverBackground: "{colors.destructive-hover}"
  button-size-small:
    fontSize: "16px"
    height: "40px"
    padding: "10px 20px"
  button-size-medium:
    fontSize: "18px"
    height: "48px"
    padding: "12px 28px"
  button-size-large:
    fontSize: "22px"
    height: "56px"
    padding: "16px 36px"
  button-disabled:
    opacity: "0.4"
  card-default:
    backgroundColor: "#FFFFFF"
    border: "2px solid {colors.border}"
    rounded: "{rounded.lg}"
    padding: "24px"
    shadow: "{shadows.sm}"
    hoverShadow: "{shadows.md}"
    hoverBorder: "{colors.secondary}"
  card-elevated:
    backgroundColor: "#FFFFFF"
    rounded: "{rounded.lg}"
    padding: "24px"
    shadow: "{shadows.md}"
    hoverShadow: "{shadows.lg}"
  input:
    backgroundColor: "#FFFFFF"
    rounded: "{rounded.md}"
    padding: "12px 16px"
    typography: "Poppins 18px"
    border: "2px solid {colors.border}"
    hoverBorder: "2px solid {colors.border-hover}"
    focusBorder: "3px solid {colors.primary}"
    focusRing: "4px rgba(255,107,107,0.25)"
    errorBorder: "3px solid {colors.destructive}"
    errorBackground: "{colors.error-surface}"
    errorRing: "4px rgba(239,68,68,0.20)"
  input-label:
    typography: "Poppins 600 16px"
    marginBottom: "6px"
  input-helper:
    typography: "Poppins 400 14px"
    marginTop: "6px"
  chip-filter:
    backgroundColor: "rgba(255,107,107,0.20)"
    textColor: "{colors.primary}"
    border: "2px solid rgba(255,107,107,0.40)"
    rounded: "{rounded.pill}"
    fontSize: "14px"
    padding: "6px 16px"
  chip-status:
    rounded: "{rounded.pill}"
    fontSize: "14px"
    padding: "6px 16px"
  list-row:
    height: "56px"
    padding: "0 20px"
    divider: "2px dashed {colors.border}"
    typography: "Poppins 18px"
    hoverBackground: "#FFF5F5"
    activeBackground: "rgba(255,107,107,0.15)"
    activeText: "{colors.primary}"
  checkbox:
    size: "24px"
    rounded: "{rounded.checkbox}"
    border: "3px solid {colors.border}"
    checkedBackground: "{colors.secondary}"
    focusRing: "4px rgba(78,205,196,0.25)"
  radio:
    size: "24px"
    border: "3px solid {colors.border}"
    selectedBorder: "3px solid {colors.secondary}"
    innerDot: "12px {colors.secondary}"
  tooltip:
    backgroundColor: "{colors.tooltip}"
    textColor: "#FFFFFF"
    typography: "Poppins 14px"
    padding: "8px 16px"
    rounded: "{rounded.md}"
    arrow: "8px"
    maxWidth: "220px"
    showDelay: "400ms"
---

## Overview

BounceBox is a bubbly, rainbow-energy design system for kids' entertainment and game platforms targeting ages 3 to 8. Every element is oversized, pill-shaped and full of playful depth in coral, teal and sunshine yellow. The system puts large touch targets, bold colors and a joyful visual language first, so interaction feels like play.

- **Composition cues:** big rounded cards, pill buttons, thick borders and dashed dividers. No more than three interactive options on screen at once. Content width and grid: (no especificado).

## Colors

Light system on a white page (#FFFFFF), with three saturated brand colors doing all the talking.

- **Primary (#FF6B6B):** coral. Primary actions, main highlights. Hover #E85D5D.
- **Secondary (#4ECDC4):** teal. Supporting accents, navigation. Hover #3DBEB5.
- **Tertiary (#FFE66D):** sunshine yellow. Rewards, stars, celebration.
- **Surface Base (#FFFFFF):** page background.
- **Success (#4ECDC4):** correct, completed.
- **Warning (#FFE66D):** hints, gentle alerts.
- **Error (#FF6B6B):** "Oops, try again".
- **Info (#60A5FA):** new, tips.

Component colors from the source: destructive #EF4444 (hover #DC2626), border #E5E7EB (hover #A1A1AA), error input surface #FFF5F5, disabled surface #F9FAFB, tooltip #2D2D2D. Status chips: success #D1FAE5 / #166534, warning #FEF9C3 / #854D0E, error #FEE2E2 / #991B1B.

The source names content-primary and content-secondary text tokens but gives no hex for them: (no especificado).

## Typography

- **Headline font:** Titan One.
- **Body font:** Poppins.
- **Mono font:** Roboto Mono.

Scale: h1 48px regular, line height 1.2 (game titles). h2 36px, 1.2 (section titles). h3 28px, 1.25 (card titles). h4 22px, 1.3 (sub-headings). Body 18px regular, 1.5 (instructions). Small 16px regular, 1.5 (labels). XS 14px semibold, 1.4 (badges). Nothing goes below 14px.

## Layout

Base unit: 8px, with generous padding throughout.

- **xs 4px:** inline icon gaps.
- **sm 8px:** minimal internal gaps.
- **md 16px:** standard padding.
- **lg 24px:** card padding, section gaps.
- **xl 32px:** layout margins.
- **2xl 48px:** hero spacing.
- **3xl 64px:** major section breaks.

Every interactive element gets extra padding (16px minimum) so small fingers can tap it.

## Elevation & Depth

Material shadows for playful depth and a tactile feel, plus colored glows for calls to action.

- **shadow-sm:** `0 2px 4px rgba(0,0,0,0.08)`. Resting cards.
- **shadow-md:** `0 4px 10px rgba(0,0,0,0.12)`. Hovered elements.
- **shadow-lg:** `0 8px 20px rgba(0,0,0,0.15)`. Modals, pop-ups.
- **shadow-coral:** `0 4px 14px rgba(255,107,107,0.35)`. Primary CTA glow.
- **shadow-teal:** `0 4px 14px rgba(78,205,196,0.35)`. Secondary glow.
- **shadow-sunny:** `0 4px 14px rgba(255,230,109,0.40)`. Reward glow.

## Shapes

- **16px (radius-md):** inputs, smaller elements, tooltips.
- **24px (radius-lg):** cards, panels, game boards.
- **9999px (radius-pill):** buttons, chips, badges, pills.
- **8px:** checkboxes.

Everything is very rounded. Buttons and chips are pills; cards use 24px for a soft, toy-like feel.

## Components

### Buttons
All buttons are pills (9999px) with a 44px minimum touch target.
- **Primary:** coral #FF6B6B fill, white text, no border. Hover #E85D5D. Sizes: small 16px text, 40px tall, 10px 20px; medium 18px, 48px, 12px 28px; large 22px, 56px, 16px 36px.
- **Secondary:** teal #4ECDC4 fill, white text. Hover #3DBEB5.
- **Ghost:** transparent, coral text, 3px coral border. Hover fills with coral at 15%.
- **Destructive:** #EF4444 fill, white text. Hover #DC2626.
- **Disabled:** 0.4 opacity, disabled cursor, no hover, focus or glow.

### Cards
- **Default:** white, 2px #E5E7EB border, shadow-sm, 24px radius, 24px padding. Hover lifts to shadow-md and the border turns teal.
- **Elevated:** white, no border, shadow-md, 24px radius, 24px padding. Hover deepens to shadow-lg.

### Inputs
White, 16px radius, 12px 16px padding, Poppins 18px. Default border 2px #E5E7EB; hover 2px #A1A1AA; focus 3px coral with a 4px coral ring at 25%. Error: 3px #EF4444 border over #FFF5F5 with a 4px red ring at 20%. Disabled: 2px #E5E7EB, #F9FAFB fill, 0.5 opacity. Labels Poppins 16px semibold with 6px below; helper text Poppins 14px regular with 6px above.

### Chips
- **Filter:** coral at 20% fill, coral text, 2px coral border at 40%, pill, 14px text, 6px 16px.
- **Status:** pill, no border, 14px, 6px 16px. Success #D1FAE5 / #166534, warning #FEF9C3 / #854D0E, error #FEE2E2 / #991B1B.

### Lists
Rows 56px tall, 0 20px padding, separated by a 2px dashed #E5E7EB divider. Poppins 18px. Hover #FFF5F5. Active row: coral at 15% with coral text.

### Checkboxes and radios
Checkbox: 24px, 8px radius, 3px #E5E7EB border on white; checked fills teal with a thick white check; focus adds a 4px teal ring at 25%. Radio: 24px circle, 3px #E5E7EB border; selected turns the border teal with a 12px teal dot. Labels sit 10px away in Poppins 18px.

### Tooltips
#2D2D2D fill, white Poppins 14px, 8px 16px padding, 16px radius, 8px arrow, max width 220px. Shows after 400ms and hides instantly.

## Do's and Don'ts

### Do
- Make every interactive element at least 44px tall with generous padding for small fingers.
- Use pill buttons and rounded cards consistently to keep the bubbly, toy-like feel.
- Use bright, saturated colors from the palette; muted or pastel tones undermine the energy.
- Use 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 look.

### Don't
- Use text below 14px anywhere; 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!" in gentle coral.
- Place more than three interactive options on screen at once for this age group.

## Motion

Tooltips show after a 400ms delay (longer on purpose, for kids) and hide instantly. Yellow drives celebration animations. Durations, easing and scroll patterns: (no especificado).

## HTML notes

Titan One, Poppins and Roboto Mono load from Google Fonts as is. The content text color has no hex in the source; the styleguide renders it with the tooltip dark #2D2D2D.

---

Source: designmd.ai/chef/bouncebox · by @chef · MIT License. Converted to this format keeping the original license notice.