Keiki Learning games for Kids

Colors

• #4C32BFprimary-background · main screen background
• #4BC347progress-green · completed goal checkmark circle · progress bar fill
• #EAE4FCbottom-prompt-surface · in-line question bubble background
• #D3CBF5option-button-surface · segmented choice button background
• #FFFFFFtext-primary · header title · progress section headers
• #25155Etext-prompt-heading · prompt card subtitle and question title
• #25155Etext-button · yes/no button labels

Type

• page-titleNunito · 62px · 800 · #FFFFFF
• section-headerNunito · 40px · 700 · #FFFFFF
• percentage-labelNunito · 40px · 800 · #FFFFFF
• prompt-introNunito · 32px · 600 · #25155E
• prompt-questionNunito · 42px · 800 · #25155E
• choice-button-textNunito · 38px · 800 · #25155E

Elements

• mascot-tablet-illustration · image

  Upper center area, mascot leaning against an upright tablet showing an alphabet book · Playful 2D vector graphic with rounded shapes and sparkles

• goals-status-row · row

  Mid-lower section, horizontal row with 'Goals' on left and green checkmark circle on right · Plain row with circular check icon

• content-progress-bar · progress_bar

  Full width under 'Picking content 12%' label, height 30px · Deep purple track with short green progress segment on far left

• clarification-card · card

  Bottom docked large speech card with top upward triangle pointer, height ~400px · Soft lavender card containing prompt text and horizontal side-by-side 'No' and 'Yes' selection buttons

• choice-buttons · segmented_control

  Inside clarification card at bottom, 2 equal columns with 24px gap · Light periwinkle pill buttons with dark navy rounded text

Layout

Personalization loading/config screen with active progress bars and an interactive bottom dialog card requiring user input to resume loading.

Notes

Combines a system-loading animation state with an inline question prompt card.