Gizmo: AI Tutor

Colors

• #F9FAFCBackground Off-White · Screen background
• #111827Primary Dark · Heading text · Option labels · Icon strokes · Back icon
• #6F32E6Brand Purple · Progress bar active fill
• #D1D5DBCard Outline · Option pill button border
• #FFFFFFCard Fill · Option pill background

Type

• Screen TitleSF Pro Display · 38px · 800 · #111827
• Option Button LabelSF Pro Text · 26px · 700 · #111827
• Tertiary Action LabelSF Pro Text · 26px · 700 · #111827

Elements

• Progress Track · Progress Bar

  Near top header beside back button · Gray track filled ~40% with vibrant purple

• University Option Card · Option Button

  Stacked vertically in center list, full width with side margins · White background, thin gray outline, centered icon and label

• School Option Card · Option Button

  Second item in vertical stack · White background, thin gray outline, centered icon and label

• Work Option Card · Option Button

  Third item in vertical stack · White background, thin gray outline, centered icon and label

• Other Option · Text Button

  Below the outlined option pills, centered horizontally · Frameless bold text link

Layout

Centered multiple-choice question layout: top navigation and progress indicator, left-aligned dynamic greeting question, vertically stacked option pills, and bottom borderless fallback option.

Notes

Options feature line-art iconography inside a 3-item card list followed by a plain text button.