---
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.