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
• #43329ccheckmark-unselected · unselected checkmark indicator
• #9f93eeinstruction-purple · subheading count text
• #5745b7button-disabled-purple · disabled continue button

Type

• bubble-dialogueNunito · 34px · 800 · #271c66
• instruction-subtitleNunito · 28px · 700 · #9f93ee
• option-labelNunito · 32px · 800 · #ffffff
• cta-buttonNunito · 36px · 800 · #8c82cb

Elements

• Multi-select Goal Cards · list_group

  Vertical column of 6 rows, each ~960px wide by ~160px high, spaced 20px apart · Rounded rectangle card containing an icon on the left, left-aligned white title text, and a subtle unselected checkmark icon on the far right

• Disabled Continue Button · button

  Bottom pinned container (~960px wide, ~132px high) · Muted lavender-purple button with low-contrast inactive text

Layout

Multi-select survey screen with goal counter ('Pick up to 3 extra goals'), 6 icon-annotated selectable row items, and sticky CTA at the bottom.

Notes

Right-aligned checkmark symbols indicate multi-select capability.