Keiki Learning games for Kids

Colors

• #4C32BFprimary-background · screen background
• #EAE4FCbubble-surface · question speech bubble background
• #5A40CEoption-surface · choice card surface
• #4BC347accent-green · progress fill
• #3A2175text-bubble · prompt text
• #FFFFFFtext-light · option item text
• #5B44BCbutton-disabled-bg · disabled continue button background
• #9282D8button-disabled-text · disabled continue button text

Type

• prompt-textNunito · 42px · 800 · #3A2175
• choice-textNunito · 40px · 700 · #FFFFFF
• button-textNunito · 42px · 800 · #9282D8

Elements

• progress-indicator · progress_bar

  Upper section below top notch, spanning ~85% width, height 38px · Green progress bar filled to roughly 45% along dark purple track

• question-bubble · card

  Top-right of mascot, height ~180px, rounded container · Off-white/light lavender solid fill with pointed speech tail

• duration-options-list · list

  Center-to-lower column, 4 rounded pill cards, height ~146px each, spacing 24px · Solid medium-violet background, left-aligned bold white text without icons

• continue-button · button

  Bottom anchored, height 140px, matching horizontal margins of options · Disabled state rounded pill

Layout

Sequential single-select screen with conversational header, time-duration options list, and bottom sticky CTA.

Notes

Visual consistency with Screen 0; options lack leading icons due to shorter textual nature.