Gizmo: AI Tutor

Colors

• #F8F9FABackground Off-White · screen background
• #FFFFFFCard Surface White · leaderboard cards · promo banner button · action buttons
• #111827Text Primary Slate · user name title · section headers · tab text
• #1E65B8Promo Banner Blue Gradient · super hearts promotion card background
• #6B7280Muted Text Gray · school details · follower counts · rank subtitles
• #FF3B69Heart Pink Red · leaderboard heart icon

Type

• Profile Name HeadingNunito · 44px · 800 · #111827
• Profile Bio / School InfoNunito · 24px · 500 · #111827
• Promo Banner TitleNunito · 48px · 900 · #FFFFFF
• Section HeaderNunito · 30px · 800 · #111827
• List Tile TitleNunito · 26px · 700 · #111827

Elements

• Avatar Display · avatar

  Left of user bio info, circular badge containing axolotl character · Soft circular gradient background with 2D/3D illustrated character

• Action Button Group · button_group

  Horizontal row featuring dark 'Find friends' pill, edit pencil button, and share button · Dark navy pill for primary action, white circular buttons with borders for secondary

• Promo Banner Card · promo_card

  Full width rounded banner containing 3D floating hearts, offer headline, and invite button · Vibrant cyan to deep blue gradient background with glossy floating 3D hearts

• Leaderboard Container · list_group

  Stacked list of rank items displaying icon, title, rank position, and chevron · White rounded card with interior divider rules and soft drop shadow

Layout

Scrollable profile screen structured with profile header, social action buttons, section tabs, promotional banner, and leaderboard lists.

Notes

Bottom bar shows fourth tab (profile axolotl icon) highlighted as active.