Keiki Learning games for Kids

Colors

• #4C3EC8primary-purple · screen background
• #4ECE42vibrant-green · progress indicator · completion badge fill · illustration screen element
• #FFFFFFpure-white · primary heading text · list item title text · percentage text
• #E7E8FDlavender-surface · dialog callout bubble background
• #271E74deep-indigo · prompt text · dialog heading text
• #CFD3FAmuted-indigo-button · dialog button background
• #B7B0EBsoft-lavender · metadata label text
• #3E30ACtrack-purple · progress bar track fill

Type

• screen-titleNunito · 64px · 800 · #FFFFFF
• status-labelNunito · 44px · 700 · #FFFFFF
• status-valueNunito · 44px · 700 · #FFFFFF
• metadata-subtitleNunito · 34px · 600 · #B7B0EB
• dialog-subheadNunito · 34px · 600 · #271E74
• dialog-headlineNunito · 50px · 800 · #271E74
• dialog-button-textNunito · 40px · 700 · #271E74

Elements

• Progress Graphic · illustration

  Centered horizontally in the upper-mid screen, dimensions approx 500x560px. · Stylized smartphone graphic with cyan frame, green screen showing numbered blocks 1-2-3, and a dragon-fruit character beside it.

• Step Checklist · list

  Vertical stack centered across screen width with ~44px horizontal inset; items spaced ~36px apart. · Text labels on left with circular green checkmark badges and numeric percentage badges on the right.

• Difficulty Progress Bar · progress_bar

  Full width spanning between content margins, height ~24px, located directly below 'Adjusting game difficulty'. · Deep purple background track with a rounded bright green fill indicator at ~12% width.

• Clarification Dialog Bubble · card

  Pinned near screen bottom with a triangular speech pointer pointing upward toward the checklist, rounded corners, height approx 440px. · Solid light lavender fill (#E7E8FD), containing centered question text and a two-button action row.

• Binary Decision Buttons · button_group

  Two horizontal side-by-side buttons ('No' and 'Yes') inside the bottom card, split 50/50 with ~24px gap. · Light periwinkle purple rounded rectangle pills with dark navy/indigo bold text.

Layout

Single-column onboarding progression screen with top hero title, central character illustration, linear status list, and bottom anchored modal prompt.

Notes

Typography exhibits soft, rounded geometric terminals resembling Nunito or SF Pro Rounded. Watermark header at top ignored.