Huckleberry: Baby Tracker

Colors

• #FFFFFFBackground White · screen background
• #84CC37Primary Green · progress bar active · info icon and text · cta button background
• #3A4560Navy Text · main question heading
• #768298Muted Slate · explanatory copy · field labels
• #CCD3DCInput Border Grey · unfocused input borders

Type

• TitleNunito · 56px · 800 · #3A4560
• Body TextNunito · 36px · 500 · #768298
• Action LinkNunito · 36px · 700 · #84CC37
• Input Field TextNunito · 36px · 500 · #768298
• Footer HintNunito · 30px · 500 · #768298
• Button LabelNunito · 38px · 700 · #FFFFFF

Elements

• Progress Bar · progress_indicator

  Top, below back button, span with margins, height 12px · Light grey rail with left portion filled green

• Learn More Row · button

  Centered below body description, horizontal group · Circled exclamation point icon paired with bold green 'Learn more' text

• Month Dropdown Selector · select

  First segmented field in row of three, width ~30%, height 120px · Pill outline with text 'Month' and dropdown chevron icon

• Day Input Field · text_input

  Middle field in row, width ~30%, height 120px · Pill outline with placeholder 'Day'

• Year Input Field · text_input

  Third field in row, width ~30%, height 120px · Pill outline with placeholder 'Year'

• Next CTA Button · button

  Pinned to bottom, full width minus horizontal padding, height 150px · Solid lime green (#84CC37) pill button with white text

Layout

Single-column form containing centered title, description, inline info action link, three-part date input cluster, secondary hint paragraph, and bottom-anchored primary button.

Notes

Clean onboarding form step for baby's birthday.