Whispy AI: Create Your Story

Colors

• #FFFFFFModal Sheet Surface · Bottom sheet card background
• #F3F4F6Input / Pill Background · Text input field · Unselected option chips
• #B5B9BEDisabled Button Grey · Confirm CTA button fill
• #1F2937Primary Text Charcoal · Sheet title · Form section labels · Input text value
• #6B7280Muted Description Text · Form instructions · Counter text · Unselected option labels
• #D83582Header Gradient Pink · Top-right '+ Create' button

Type

• Modal TitleSF Pro Display · 54px · 600 · #1F2937
• Modal DescriptionSF Pro Text · 36px · 400 · #6B7280
• Field Section HeaderSF Pro Text · 44px · 600 · #1F2937
• Form Input ValueSF Pro Text · 40px · 400 · #1F2937
• Selection Pill LabelSF Pro Text · 38px · 500 · #4B5563
• Primary CTA LabelSF Pro Text · 44px · 600 · #FFFFFF

Elements

• Personalization Bottom Sheet · sheet / dialog

  Bottom-anchored modal occupying lower two-thirds of the viewport · Pure white background, heavily rounded top corners, subtle drop shadow

• Name Input Box · input_field

  Full width within modal content margins, height 120px · Light grey solid fill, no border, text on left, character count '13/24' on right

• Gender Options · segmented_control

  Horizontal row of 3 equally proportioned pill chips · Light grey solid pill chips with dark grey typography

• Age Options · segmented_control

  Horizontal row of 4 equally proportioned pill chips · Light grey solid pill chips with dark grey typography

• Confirm Button · button

  Full width at bottom of modal, height 136px · Flat muted grey disabled state with white text

• Background Skeleton Feed · container

  Underneath sheet overlay across entire upper half · Dimmed grey placeholders representing loading feed cards and search bar

Layout

Onboarding profile setup modal presented as a bottom sheet over a dimmed skeleton loading feed view.

Notes

Confirm button is visually disabled; no gender or age option is yet selected.