Keiki Learning games for Kids

Colors

• #4C32BFprimary-background · screen background
• #EAE4FCsurface-light · speech bubble fill · back button fill
• #5A40CEoption-card-surface · option item background fill
• #4228ABprogress-track · progress bar background rail
• #4BC347accent-green · progress bar active fill
• #FFFFFFtext-light · option label text · subtitle text
• #3A2175text-bubble-dark · question headline text
• #5B44BCbutton-disabled-bg · disabled action button container fill
• #9282D8button-disabled-text · disabled action button label

Type

• question-bubbleNunito · 44px · 800 · #3A2175
• instruction-labelNunito · 34px · 600 · #FFFFFF
• option-titleNunito · 38px · 700 · #FFFFFF
• primary-buttonNunito · 42px · 800 · #9282D8

Elements

• top-progress-bar · progress_bar

  Fixed near top; starts right after back icon with pill track across upper width, height 38px · Deep purple rounded capsule track filled approximately one-third with bright green rounded fill

• back-navigation-button · button

  Top-left aligned, roughly 68x68px pill/leaf shape · Off-white curved shape with inward chevron-like cutout

• mascot-question-prompt · card

  Upper third, horizontal flex arrangement of illustrated dragonfruit mascot next to speech bubble · Light lavender speech bubble container with pointer tail directed to mascot

• multi-select-cards · list

  Vertical stack of 5 full-width rounded cards, height roughly 140px each, gap 24px · Semi-translucent medium purple rounded rectangles with leading colored emoji/icon and trailing subtle checkmark indicator

• continue-button · button

  Bottom anchored, horizontally centered, full width with margins, height 140px · Muted purple pill container, disabled state

Layout

Single-column mobile questionnaire layout with top navigation/progress, conversational avatar prompt header, vertical multi-choice list, and bottom-docked continuation button.

Notes

Rounded sans-serif font resembles Nunito or Quicksand. Disabled bottom button indicates required user selection.