Heyyyy: Stories that text back

Colors

• #503ce8primary-purple · modal icon glyph · primary action button fill · send button fill
• #ffffffcard-surface · modal card background
• #000000scrim-overlay · dimming backdrop behind modal
• #f1f3f6button-secondary-bg · secondary action button fill
• #1b1d28text-primary · modal headline · secondary button text
• #6b7280text-secondary · modal body description · cancel text button

Type

• modal-titleSF Pro Display · 44px · 700 · #1b1d28
• modal-bodySF Pro Text · 32px · 400 · #6b7280
• primary-button-labelSF Pro Text · 34px · 600 · #ffffff
• secondary-button-labelSF Pro Text · 34px · 600 · #1b1d28
• cancel-button-labelSF Pro Text · 32px · 500 · #6b7280

Elements

• modal_dialog_card · dialog

  Centered horizontally and vertically over dimmed background, approx 920px wide by 820px tall · Solid white card with 48px corner radius and deep drop shadow

• camera_modal_icon · icon_badge

  Centered horizontally near top of modal card, approx 90px wide by 66px tall · Vibrant purple camera glyph on clean background

• take_selfie_button · button

  Full-width inside modal margins, approx 780px wide by 115px tall capsule · Solid purple #503ce8 fill, centered camera emoji and white bold label

• choose_library_button · button

  Centered below primary button, 780px wide by 115px tall capsule · Light gray #f1f3f6 fill, centered framed photo emoji and dark grey bold label

• cancel_button · text_button

  Centered below secondary button, approx 40px margin · Plain text button with medium gray 'Cancel' label, no background fill

Layout

Centered modal dialog overlay with a semi-transparent dark backdrop obscuring the underlying chat conversation.

Notes

Modal invoked by selecting the Couple Selfie action option from the previous attachment menu.