Gizmo: AI Tutor

Colors

• #F7F8FABackground Off-White · screen background
• #FFFFFFCard Surface White · streak card background · leaderboard card background
• #111827Primary Dark Slate · screen heading · primary buttons · section titles
• #D6FCE6XP Badge Mint · XP badge background
• #0F994CXP Text Green · XP pill text
• #FF3B5CFlame Red · streak flame indicator · active date dot
• #717B8AMuted Text Gray · weekday headers · dates · secondary labels

Type

• Screen TitleNunito · 44px · 800 · #111827
• Card HeadlineNunito · 34px · 800 · #111827
• Subhead HighlightNunito · 26px · 700 · #111827
• Button LabelNunito · 24px · 700 · #FFFFFF
• Filter Tab LabelNunito · 22px · 700 · #111827

Elements

• Streak Card · card

  Centered block containing streak info, 7-day calendar row, and action CTA button · White rounded card with thin boundary border and soft drop shadow

• Start Streak Button · cta_button

  Full width inside streak card with controller icon and centered text · Solid dark navy/black fill with white typography and colorful icon

• Leaderboard Time Selector · segmented_control

  Row of 4 pill tabs: Day, Week, Month, All Time spanning leaderboard container · White pills with subtle outline; active pill has dark solid fill with white text

• Floating Tab Bar · bottom_navigation

  Floating horizontally near bottom screen margin with 4 navigation icons · Frosted glass translucent pill with soft outer shadow and glowing indicator pill

Layout

Vertical stack with top status row, level progression row, large streak tracker card, leaderboard section, and floating navigation bar.

Notes

Bottom bar shows active streak flame icon. Calendar displays dots under active streak days.