Keiki Learning games for Kids

Colors

• #4C3EC8primary-purple · screen background
• #5F50DCfocused-input-fill · email input field background
• #E0DCFAfocused-input-border · email input field outline
• #1F1A3Akeyboard-dark · virtual keyboard background
• #38315Ekeyboard-key · virtual keyboard individual key fill
• #1E88E5keyboard-action-blue · keyboard return/done button fill
• #FFFFFFpure-white · headings · keyboard key letters · checkbox label
• #4ECE42vibrant-green · checkbox fill

Type

• screen-titleNunito · 72px · 800 · #FFFFFF
• subtitleNunito · 40px · 600 · #AEA5E6
• input-textNunito · 40px · 500 · #AEA5E6
• keyboard-key-labelRoboto · 44px · 400 · #FFFFFF

Elements

• Focused Email Input Field · input_field

  Upper mid-screen, full width within margins, height ~140px. · Lavender-purple fill with a distinct ~4px off-white/light lilac border stroke and a circular clear ('x') icon on the right.

• Password Input Field · input_field

  Directly beneath email field, height ~140px. · Unfocused state with soft lavender fill, no outer border stroke, eye visibility icon.

• Virtual On-Screen Keyboard · keyboard

  Fixed to bottom of screen occupying lower ~42% of total height. · Dark slate/indigo system-style keyboard layout with rounded square keys and bright blue checkmark confirmation key.

Layout

Input interaction state of Screen 3 with virtual software keyboard active and covering the bottom CTA button and footer.

Notes

System keyboard appearance closely matches Android Gboard styled to match dark theme.