Keiki Learning games for Kids

Colors

• #4C3EC8primary-purple · screen background
• #5F50DCinput-purple · text field background fill
• #4ECE42vibrant-green · checkbox fill · primary cta background · sign-in text link
• #FFFFFFpure-white · screen title · checkbox label · primary cta text · footer base text
• #AEA5E6muted-lavender · subtitle text · input placeholder text · skip button text

Type

• nav-actionNunito · 44px · 700 · #AEA5E6
• screen-titleNunito · 72px · 800 · #FFFFFF
• subtitleNunito · 40px · 600 · #AEA5E6
• input-placeholderNunito · 40px · 500 · #AEA5E6
• checkbox-labelNunito · 34px · 600 · #FFFFFF
• cta-button-textNunito · 44px · 800 · #FFFFFF
• footer-linkNunito · 38px · 700 · #4ECE42

Elements

• Skip Button · button

  Top-right corner of screen, aligned with upper padding, plain text button. · Muted lavender semibold text without container outline or fill.

• Email Input Field · input_field

  Full width spanning between 48px margins, height ~140px, placed in mid-upper screen. · Rounded rectangle with muted lavender fill, inset text placeholder 'Email'.

• Password Input Field · input_field

  Directly below Email field with ~32px vertical separation, height ~140px. · Rounded rectangle with lavender fill, placeholder 'Password (6+characters)', and an eye icon on right edge.

• Opt-in Checkbox · checkbox

  Row positioned ~36px below password field, left-aligned with margins. · Rounded green square with white checkmark icon beside descriptive white label text.

• Start Tracking Button · button

  Full width spanning within screen margins, height ~130px, situated in bottom third. · Bright green solid pill button with centered white text.

• Sign In Footer Link · link

  Centered horizontally below primary CTA button, ~48px margin. · White text 'Have an account? ' followed by green bold 'Sign in'.

Layout

Top-aligned onboarding account creation form with prominent header, sequential input controls, bottom CTA, and secondary sign-in navigation.

Notes

Unfocused state showing placeholder values.