Keiki Learning games for Kids

Colors

• #4b36c4primary-purple · screen background
• #edeafcbubble-white · speech bubble fill · back arrow fill
• #271c66text-dark-purple · speech bubble text
• #42d93eaccent-green · progress fill
• #5742cfcard-purple · option card background
• #fffffftext-white · option title text
• #9f93eetext-light-purple · subheading helper text · option description text · inactive button text
• #5745b7button-disabled-purple · disabled continue button

Type

• bubble-dialogueNunito · 34px · 800 · #271c66
• helper-textNunito · 28px · 700 · #9f93ee
• option-label-singleNunito · 36px · 800 · #ffffff
• option-descriptionNunito · 26px · 600 · #9f93ee
• cta-buttonNunito · 36px · 800 · #8c82cb

Elements

• Relationship Option Cards · list_group

  Vertical stack of 5 rounded rectangles, each ~960px wide, heights varying between ~150px and ~190px, 24px vertical gap · Subtle lighter-tint purple card containers with left-aligned bold titles and optional subtitle descriptions

• Disabled Continue Button · button

  Bottom pinned container (~960px wide, ~132px high), centered horizontally · Semi-transparent muted purple surface with low contrast gray-purple text indicating disabled state

Layout

Vertical single-selection survey screen with character question header, guidance caption, 5 stacked choice cards, and disabled primary button at bottom.

Notes

None of the option cards are currently selected, leaving the CTA in an inactive disabled state.