Keiki Learning games for Kids

Colors

• #4C3EC8primary-purple · screen background
• #5648D6card-purple · timeline card container background
• #4ECE42vibrant-green · timeline node dots · timeline connector line · primary cta background
• #FFFFFFpure-white · screen headline text · timeline day labels · primary cta label text
• #C2BCEFsoft-lavender · timeline activity description text · final level label
• #EE1977magenta-badge · child name pill badge
• #9B8CE6avatar-ring · avatar circle background

Type

• screen-titleNunito · 68px · 800 · #FFFFFF
• avatar-badge-textNunito · 34px · 700 · #FFFFFF
• timeline-day-titleNunito · 42px · 700 · #FFFFFF
• timeline-day-descriptionNunito · 42px · 500 · #C2BCEF
• cta-button-textNunito · 46px · 800 · #FFFFFF

Elements

• Plan Summary Card · card

  Centered horizontally, inset ~48px from left and right, extending from upper third to lower quarter. · Slightly lighter purple container (#5648D6) with large rounded corners and an overlapping avatar at top center.

• User Avatar & Badge · avatar

  Overlapping the top edge of the plan card, circle diameter approx 240px, with pink badge centered beneath. · Light purple circle containing illustrated white bunny; overlapping magenta pill containing 'Daniel, 2'.

• 7-Day Vertical Stepper · timeline

  Inside plan card, vertical stack with a solid green connector line connecting circular green nodes on the left. · Green circles (diameter ~26px) joined by a vertical green path, paired with 'Day X' and description strings.

• Set Up Learning Button · button

  Full width spanning within screen margins, height ~130px, positioned ~64px above screen bottom. · Vibrant solid green pill button with centered bold white text and subtle rounded corners.

Layout

Vertical linear layout consisting of top title, central boxed 7-day schedule with overlapping avatar badge, and bottom-anchored primary action button.

Notes

The font style is consistently rounded, matching Nunito or Quicksand.