Huckleberry: Baby Tracker

Colors

• #FFFFFFBackground White · screen background · keyboard keys
• #84CC37Primary Green · progress indicator active segment · cta button background
• #E0E3E8Progress Track Grey · inactive progress bar track
• #3CBED6Active Cyan Accent · focused input border · clear icon
• #3A4560Navy Text · main question heading · entered input text
• #768298Muted Slate · subtitle text
• #D1D5DBKeyboard Background · system keyboard area

Type

• TitleNunito · 54px · 800 · #3A4560
• SubtitleNunito · 34px · 600 · #768298
• Entered TextNunito · 40px · 400 · #3A4560
• Button LabelNunito · 38px · 700 · #FFFFFF

Elements

• Progress Bar · progress_indicator

  Directly below back button, span across width with horizontal margin, height 12px · Rounded track filled ~10% with green #84CC37, remainder very light grey

• Active Name Text Field · text_input

  Full width with 68px horizontal margins, height 116px · Highlighted state with 3px cyan outline (#3CBED6), vertical cursor, and circular clear button on the right

• Clear Input Button · icon_button

  Right-aligned inside text field, 54x54px · Cyan circle (#5391A8) containing a white 'x' icon

• Keyboard Toolbar · toolbar

  Spans width immediately above software keyboard, height 96px · White rounded card background with grey up/down chevron arrows and checkmark button

• Software Keyboard · keyboard

  Anchored to screen bottom, standard QWERTZ layout · System keyboard appearance with light grey background and rounded white keys

Layout

Keyboard-pushed layout where content shifts up, showing partially cropped illustration at top, followed by progress bar, header, active input field, and compact CTA button positioned directly above keyboard accessory bar.

Notes

Illustration is pushed upward and cropped under the header as keyboard takes up lower screen half.