Whispy AI: Create Your Story

Colors

• #FBE8F0Selected Pill Background · Selected gender chip background fill
• #D83582Selected Pill Border & Text · Selected gender chip outline and text label
• #F3F4F6Unselected Pill Background · Unselected gender and age options
• #FFFFFFModal Sheet Surface · Bottom modal background
• #B5B9BECTA Button Inactive · Confirm button fill
• #1F2937Text Primary · Heading · Section labels · Input text

Type

• Modal TitleSF Pro Display · 54px · 600 · #1F2937
• Selected Chip LabelSF Pro Text · 38px · 500 · #D83582
• Unselected Chip LabelSF Pro Text · 38px · 500 · #4B5563

Elements

• Selected Gender Chip (Male) · selection_control

  Leftmost pill in Gender row, width approx 330px, height 108px · Pastel pink fill with a delicate magenta border (1.5px) and magenta text

• Unselected Gender Chips · selection_control

  Remaining pills in Gender row (Female, Non-binary) · Flat light grey fill without border, medium grey text

• Age Pill Selection Group · segmented_control

  Row of 4 pill options: 18-24, 25-34, 35-44, 45+ · Flat light grey fills, unselected

• Loaded Backdrop Feed Cards · card

  Dimmed background behind bottom sheet · High-fidelity cards (Hockey Roommates, dark portrait) now rendered behind the overlay scrim

Layout

Bottom sheet personalization form with 'Male' gender chip selected; background feed has completed loading content behind scrim.

Notes

Confirm button remains disabled since age selection is not yet chosen.