Keiki Learning games for Kids

Colors

• #4C32BFprimary-background · screen background
• #EAE4FCbubble-surface · speech bubble background
• #5A40CEoption-surface · selection card background
• #4BC347progress-accent · progress fill
• #FFFFFFtext-primary · card titles · helper subtitle
• #3A2175text-bubble · question title
• #5B44BCbutton-disabled-bg · disabled continue button background

Type

• bubble-questionNunito · 42px · 800 · #3A2175
• subtitleNunito · 34px · 600 · #FFFFFF
• option-bodyNunito · 38px · 700 · #FFFFFF
• button-labelNunito · 42px · 800 · #9282D8

Elements

• speech-bubble-dialog · card

  Upper section beside mascot, width ~680px, height ~180px · Rounded speech callout bubble in soft lilac

• skills-options · list

  Vertical column of 4 items with heights ranging 140px-180px depending on multi-line wrapping · Dark purple translucent pills with unselected ghost checkmarks on right edge

• continue-button · button

  Fixed near bottom, 140px height pill · Disabled state pill container

Layout

Multi-select survey screen formatting speech milestone options with an avatar guide.

Notes

Text lines inside cards wrap naturally up to 2 lines without breaking card alignment.