Keiki Learning games for Kids

Colors

• #5B3BD8primary-purple · background
• #4D31B7progress-track · progress-bar-track
• #56D529progress-fill · progress-bar-indicator
• #E7DCFEspeech-bubble-fill · bubble-background
• #4C2EC4option-card-fill · age-button-background
• #FFFFFFtext-primary · button-number-labels
• #CEC3F7text-secondary · subtitle-guidance
• #271B66text-bubble · speech-bubble-text

Type

• question-promptNunito · 42px · 800 · #271B66
• helper-subtitleNunito · 34px · 700 · #CEC3F7
• age-card-labelNunito · 64px · 900 · #FFFFFF

Elements

• step-progress-bar · progress-bar

  Full width with ~48px margin near top of screen, height ~24px. · Dark violet pill track with an initial bright lime-green circular/pill segment at the far left.

• mascot-header-cluster · container

  Row positioned ~60px below the progress bar, left-aligned mascot with right speech bubble. · Mini mascot character peering from hole alongside an asymmetric speech bubble with left-facing tail.

• age-selection-grid · grid

  3-column, 2-row grid pinned near the bottom screen, with ~24px horizontal and vertical gaps. · Six uniformly sized rounded rectangular tiles filled with deep purple.

Layout

Multi-step onboarding form layout: top progress indicator, character question speech bubble, centered instruction caption, and bottom 3x2 grid of age buttons.

Notes

Large open space between helper text and bottom grid accommodates keyboard or dynamic height transitions.