Huckleberry: Baby Tracker

Colors

• #D3F3FASoft Ice Blue · screen-background
• #344B66Deep Slate Blue · primary-heading-text
• #4A617AMuted Slate Gray · body-subtitle-text
• #89CE36Spring Apple Green · primary-button-background
• #EAF8FCTranslucent Button Fill · secondary-button-background
• #B4E8F4Button Border Cyan · secondary-button-stroke
• #B8BF0FMustard Yellow · illustration-dress-fill

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

• Hero Illustration · illustration

  Center-aligned, spanning the middle body area between text header and action buttons. · Flat vector art depicting a pregnant woman in a lime dress with a sleeping corgi dog at her feet, over faint blue architectural background outlines.

• Get Started Button · button

  Full-width with horizontal margins of approx 80px, height approx 175px, placed in the bottom section. · Fully rounded green pill button with centered white bold text.

• Sign In Button · button

  Full-width with horizontal margins of approx 80px, height approx 175px, positioned 36px below the Get Started button. · Pill button with faint light-blue fill, fine cyan border stroke, and dark slate centered label.

Layout

Single-column welcoming onboard view. Top text header block followed by central narrative illustration, anchored at the bottom by a two-button primary/secondary action stack.

Notes

Typography appears to be Avenir Next Rounded or Nunito / Sofia Pro. Background is solid pastel cyan.