Keiki Learning games for Kids

Colors

• #5B3BD8primary-purple · background
• #56D529progress-fill · progress-indicator
• #47C448cta-green · submit-button-fill
• #1F173Ckeyboard-dark · virtual-keyboard-background
• #3A305Bkeyboard-key · keyboard-keycap-fill
• #FFFFFFtext-primary · input-value · button-text · keyboard-characters
• #CEC3F7text-caption · privacy-subtitle
• #271B66bubble-text · speech-bubble-text

Type

• question-promptNunito · 38px · 800 · #271B66
• privacy-captionNunito · 34px · 700 · #CEC3F7
• input-textNunito · 64px · 800 · #FFFFFF
• cta-labelNunito · 44px · 800 · #FFFFFF
• keyboard-key-labelSF Pro Text · 44px · 400 · #FFFFFF

Elements

• back-navigation-arrow · button

  Top-left header area, adjacent to progress bar. · Heart/petal-shaped white directional arrow icon pointing left.

• step-progress-bar · progress-bar

  Top bar extending from back button to right screen margin. · Dark purple track with lime green active filled segment extending slightly beyond previous step.

• mascot-header-cluster · container

  Upper area row with mascot on the left and speech bubble 'What should I call your kid?'. · Pale lavender speech bubble with pointing tail connected to dragonfruit mascot.

• text-input-field · input-field

  Centered horizontally above CTA button, displaying 'Daniel' with active blinking cursor line. · Border-less inline text field with centered white bold text and thin white cursor.

• submit-button · button

  Placed ~48px above the software keyboard, spanning full width with ~48px side padding, height ~130px. · Solid vibrant green rounded rectangle button with bold white text 'Let's go!'.

• on-screen-keyboard · keyboard

  Pinned to the bottom of the display covering roughly the lower third of the screen. · Dark purple custom iOS keyboard layout with rounded slate-purple keys.

Layout

Name-entry step with active keyboard docked at bottom, green CTA resting directly above the keyboard, centered text input in the mid-region, and mascot question at the top.

Notes

The soft keyboard layout is themed in dark violet tones matching the app palette.