Gizmo: AI Tutor

Colors

• #F8F9FBCanvas Background · Screen background
• #FFFFFFCard Tile Surface · Action grid cards · Study input card · Live pill
• #1B2234Text Primary · Navigation header · Tile labels · Prompt text
• #171D2DFloating Action Button · Game controller FAB background
• #8940EAMascot Purple · Axolotl 3D character main body

Type

• Screen HeaderNunito · 60px · 900 · #1B2234
• Illustration Sub-headerNunito · 42px · 700 · #3B4252
• Illustration TitleNunito Black · 92px · 900 · #334155
• Grid Tile LabelNunito · 38px · 700 · #1B2234
• Input Card PromptNunito · 40px · 500 · #64748B

Elements

• Live Status Badge · Button / Pill

  Top-right header row, height ~90px, pill shape · White pill surface with purple cube icon and 'Live' text

• History Icon Button · Button

  Top-right beside Live pill, ~90x90px circle · White circular button with centered clock counter-clockwise icon

• Action Grid Tiles · Card grid

  2x2 grid of tiles (Upload file, Paste, YouTube video, Photo), gap ~30px · White squircle cards with subtle drop shadow and centered icon + label

• See More Options Pill · Button

  Centered below 2x2 grid, height ~90px, width ~500px · White rounded capsule with downward chevron icon

• Floating Action Button · FAB

  Floating above bottom tab bar on the right side, ~160x160px · Circular dark navy button with blue/purple gamepad controller icon

• Floating Tab Bar · Tab bar

  Anchored along screen bottom edge with margin, floating capsule shape · Translucent white frosted blur surface with colorful navigation icons (Home, Fire, Folder, Mascot)

Layout

Dashboard home screen consisting of top bar with utility pills, mascot hero header, 2x2 creation quick actions, expandable text prompt container, floating action button, and floating dock navigation bar.

Notes

Mascot is a 3D rendered purple meditating axolotl.