Huckleberry: Baby Tracker

Colors

• #D3F3FASoft Ice Blue · screen-background
• #344B66Deep Slate Blue · primary-heading-text · secondary-button-label
• #4A617AMuted Slate Gray · subtitle-text
• #89CE36Spring Apple Green · primary-button-background
• #31B9D7Bright Teal Blue · illustration-shirt-fill
• #47596FCharcoal Slate · illustration-trousers-fill
• #EAF8FCGhost Button Fill · secondary-button-background

Type

• TitleAvenir Next · 56px · 700 · #344B66
• SubtitleAvenir Next · 38px · 400 · #4A617A
• Primary Button LabelAvenir Next · 42px · 700 · #FFFFFF
• Secondary Button LabelAvenir Next · 42px · 700 · #344B66

Elements

• Father and Newborn Illustration · illustration

  Horizontally centered in the middle screen area between header and action buttons. · Vector illustration of a standing father in a turquoise shirt holding a swaddled infant sleeping wrapped in lilac cloth.

• Get Started Button · button

  Bottom-pinned container, approx 175px height, horizontal margin 80px. · Pill-shaped solid lime-green fill with white bold text.

• Sign In Button · button

  Placed 36px below Get Started button, approx 175px height, horizontal margin 80px. · Pill-shaped very light cyan background with faint cyan outline and dark slate text.

Layout

Vertical onboarding carousel screen identical in structure to Screen 1 with swiped illustration content.

Notes

Shared layout template with Screen 1.