Huckleberry: Baby Tracker

Colors

• #D3F4FBSoft Cyan Wash · screen-background
• #354A64Deep Slate Navy · headline-text · recent-activity-title · navigation-arrow-icon
• #4D637AMuted Slate Gray · description-text · badge-label-text
• #768697Activity Time Gray · timestamp-caption-text
• #30BED9Active Pagination Dot · carousel-indicator-active
• #89C5D4Inactive Pagination Dot · carousel-indicator-inactive
• #29B4CESkip Link Cyan · skip-button-text
• #F3784AActivity Coral · bottle-feed-icon-fill
• #27BAD6Activity Cyan · sleep-log-icon-fill

Type

• TitleAvenir Next · 54px · 700 · #354A64
• SubtitleAvenir Next · 38px · 400 · #4D637A
• Card Activity TitleAvenir Next · 38px · 700 · #354A64
• Card TimestampAvenir Next · 30px · 400 · #768697
• Navigation Action TextAvenir Next · 42px · 700 · #29B4CE

Elements

• Feature Infographic Orbit · diagram

  Center section of screen, circular constellation around baby icon inside light blue circle container. · White circular badges (Reports, Berry, Sleep Plans, SweetSpot, Insights) connected with light cyan spoke lines, with overlapping recent sleep and feeding record cards below.

• Activity Feed Card - Sleep · list_item_card

  Overlapping lower orbit hub, horizontal card width approx 880px, height approx 140px. · White rounded rectangular pill card with round cyan sleep icon and activity text.

• Activity Feed Card - Bottle · list_item_card

  Stacked beneath sleep card with 20px spacing. · White rounded rectangular pill card with orange bottle icon and feeding details.

• Pagination Indicator · page_control

  Centered horizontally at bottom bar, 6 dots aligned side by side. · Elongated teal capsule for active page dot, small muted circles for inactive pages.

• Skip Button · button

  Bottom-left corner, aligned vertically with pagination controls. · Plain text button with medium-bold cyan font.

• Next Step Arrow · icon_button

  Bottom-right corner, aligned vertically with pagination controls. · Dark navy right-pointing directional arrow glyph.

Layout

Walkthrough carousel slide layout. Top centered header/summary copy, large illustrative product mock visual in middle, and persistent bottom navigation bar containing Skip, pagination indicators, and forward arrow.

Notes

Slide 1 of 6 in the feature introduction carousel.