Whispy AI: Create Your Story

Colors

• #1F1F24Dark Charcoal · Primary SSO button backgrounds
• #FFFFFFPure White · Email button background · Button labels · Card titles
• #D1D5DBLight Border Grey · Email button outline
• #C93782Romance Magenta · Subtitle headline text · Flame icon tint
• #6B7280Muted Grey · Legal disclaimer text
• #000000Overlay Glass Black · Card metadata background pill overlays with opacity

Type

• Tagline / Value PropositionSF Pro Text · 42px · 400 · #C93782
• Character NameSF Pro Display · 52px · 600 · #FFFFFF
• Card Subtitle / TagSF Pro Text · 34px · 400 · #E5E7EB
• SSO Button LabelSF Pro Text · 46px · 500 · #FFFFFF
• Legal FooterSF Pro Text · 30px · 400 · #6B7280

Elements

• Character Carousel Card · card

  Center stage carousel card, approx 680px wide by 940px high with adjacent cards peeking on both sides · Photographic portrait filled with dark bottom gradient overlay, white typography, and translucent dark chip pills for tags

• Continue with Apple Button · button

  Full width with side margins, height 140px, rounded pill · Dark charcoal solid fill with white Apple logo icon and white centered text

• Continue with Google Button · button

  Full width with side margins, height 140px, rounded pill · Dark charcoal solid fill with multicolor Google 'G' glyph and white text

• Continue with Email Button · button

  Full width with side margins, height 140px, rounded pill · White background with 2px grey outline, grey envelope icon, and dark charcoal text

Layout

Onboarding landing screen featuring an interactive horizontal character card carousel above a punchy single-line value proposition and three stacked authentication buttons with legal footer.

Notes

Cole Ryder card is currently centered in the carousel view.