Keiki Learning games for Kids

Colors

• #4b36c4primary-purple · screen background
• #edeafcbubble-white · speech bubble fill · back arrow fill
• #271c66text-dark-purple · speech bubble text · dialogue heading
• #fffffftext-white · avatar name title · description text · indicator dot active
• #42d93eaccent-green · progress fill
• #6250cdbutton-purple-tint · bottom button background · option card surface
• #8477d9indicator-inactive · carousel indicator inactive dots · caption text

Type

• bubble-dialogueNunito · 34px · 800 · #271c66
• avatar-nameNunito · 48px · 900 · #ffffff
• body-descriptionNunito · 30px · 700 · #e0dcfa
• caption-instructionNunito · 26px · 600 · #9f93ee
• cta-buttonNunito · 36px · 800 · #c4beee

Elements

• Progress bar · indicator

  Top bar, full width minus margins (~960px wide, ~26px high), aligned left-to-right next to back arrow · Translucent purple track with a rounded bright green filled progress segment on the left

• Speech Bubble Prompt · callout

  Upper section, positioned next to the small mascot icon, ~650px wide with dynamic text wrapping · Soft rounded rectangular speech bubble with leftward-pointing pointer, solid pale lavender fill

• Avatar Carousel Centerpiece · graphic_display

  Center of screen, displaying 'Jack' the firefighter cactus character (~520px wide) with adjacent avatar partially visible on the right edge · Vector illustration in bright red, green, blue water hose, and brown shoes with a soft drop shadow underneath

• Carousel Dots · page_indicator

  Centered horizontally beneath the description text, 5 horizontal dots spaced ~14px apart · Circular dots, first dot is pure white, remaining four dots are muted lavender-purple

• Choose Jack CTA · button

  Bottom of screen, fixed full-width padded container (~960px wide, ~132px high) · Semi-translucent rounded button in lilac-purple tone with centered muted text

Layout

Single-column mobile onboarding flow screen with top progress header, character speech prompt, middle swipeable carousel stage, and pinned primary CTA button at the bottom.

Notes

Font could plausibly be Nunito, Fredoka, or a customized rounded sans geometric child-friendly font. Exact image dimensions are 1080x2340.