Whispy AI: Create Your Story

Colors

• #E62A76Avatar Pink · Avatar background circle · Add gem button fill · Active indicator dot
• #FFFFFFCard Surface White · Information and stats card backgrounds · Floating nav bar fill
• #F8F5FBBackground Tint · Base view background
• #111827Primary Dark Text · Title · Username · Metric headers · Active tab label
• #6B7280Secondary Grey · UID label · Subtitles · Inactive tab label
• #111111FAB Black · Floating action button background

Type

• Screen TitleSF Pro Display · 64px · 700 · #111827
• User Display NameSF Pro Text · 52px · 600 · #111827
• UID LabelSF Pro Text · 34px · 400 · #6B7280
• Card SubheaderSF Pro Text · 42px · 500 · #111827
• Tab Header ActiveSF Pro Text · 44px · 600 · #111827
• Tab Header InactiveSF Pro Text · 44px · 500 · #6B7280

Elements

• User Profile Header · list_item / cell

  Horizontal row with pink circular avatar (170px diameter), user info block, and right navigation arrow · Solid pink circle avatar with white user silhouette; copy icon next to UID

• Gem Currency Card · card

  Full width rounded rectangle divided into Red Gems and Blue Gems columns · White background with subtle shadow, ruby and diamond vector icons, gem counts, and a pink '+' button

• Daily Tasks Card · card

  Full width rounded rectangle split into 'Daily Check-in' and 'Daily Tasks' · White background, progress bar line, chevrons for navigation

• Character Sub-navigation Tabs · tab_bar

  Horizontal text tab row: 'My Character(s)' and 'Favorited' · Active tab features a small pink rounded underline pill

• Empty State Loader · indicator

  Centered horizontally and vertically in the character content section · Three horizontal pink dot pagination/loading indicators

• Floating Action Button (FAB) · button

  Positioned at bottom right, 160px by 160px circle, floating above bottom navigation · Solid black circle with centered white plus icon and drop shadow

• Bottom Navigation Bar · tab_bar

  Floating horizontal capsule at bottom center, width ~700px, height 140px · Off-white pill container with dark grey home and chat icons, profile tab active in pink

Layout

Profile screen with top header, user identity row, two dual-metric status cards, tabbed character section with empty state, and bottom floating controls (FAB and navigation pill).

Notes

Profile icon in the bottom floating bar is currently highlighted.