Heyyyy: Stories that text back

Colors

• #FAF9FEbackground · screen_background
• #FFFFFFpicker_card_fill · wheel_container_background
• #E9E5FCpicker_highlight · selected_row_highlight
• #1A1B4Btext_primary · header_text · selected_picker_text · zodiac_title
• #84889Etext_muted · unselected_picker_text
• #6D728Dtext_quote · zodiac_quote
• #9B42B8zodiac_badge · zodiac_icon_background
• #7600ECcta_gradient_start · cta_button_gradient_left
• #4C46EFcta_gradient_end · cta_button_gradient_right

Type

• header_titleSF Pro Display · 54px · 700 · #1A1B4B
• picker_selectedSF Pro Text · 44px · 600 · #1A1B4B
• picker_unselectedSF Pro Text · 40px · 400 · #84889E
• zodiac_headlineSF Pro Display · 46px · 700 · #1A1B4B
• zodiac_quoteSF Pro Text · 36px · 400 · #6D728D
• cta_labelSF Pro Text · 42px · 600 · #FFFFFF

Elements

• date_picker · wheel_picker

  Centered three-column wheel card for Month, Day, and Year; dimensions approx 780x560px · White card container with rounded corners and subtle light blue/lilac selection band across center

• zodiac_card · info_card

  Placed directly below date picker, full-width with matching horizontal padding, height approx 380px · White background, thin light periwinkle border, centered purple zodiac glyph, title and italicized descriptor

• continue_button · button

  Bottom-pinned full width pill button with standard side margins · Vibrant violet-to-indigo linear horizontal gradient with white centered text

Layout

Top back navigation and centered header, followed by a segmented wheel date selector, an auto-updating horoscope status card, and a primary gradient CTA pinned at the bottom.

Notes

The quote under 'You're a Gemini' is rendered in oblique/italic style.