Keiki Learning games for Kids

Colors

• #5B3BD8primary-purple · background
• #56D529progress-fill · progress-indicator
• #E7DCFEspeech-bubble-fill · bubble-background
• #271B66text-bubble · speech-bubble-text

Type

• question-promptNunito · 38px · 800 · #271B66

Elements

• back-navigation-arrow · button

  Top-left header area, aligned with the progress bar. · White rounded leaf-like leftward arrow shape.

• step-progress-bar · progress-bar

  Top header track running horizontally beside the back arrow. · Dark violet track with lime green active segment.

• mascot-header-cluster · container

  Row in the upper third containing the mascot holding phone and speech bubble. · Rounded speech bubble reading 'Let Daniel pick a learning' pointing to the pink dragonfruit character.

Layout

Onboarding step header rendered while content below is either transitioning or loading, presenting abundant purple negative space.

Notes

The lower portion of the screen is empty violet background, typical of a mid-transition state.