Gizmo: AI Tutor

Colors

• #F9FAFCBackground Off-White · Screen background
• #111827Primary Dark · Title text · Back button · Secondary button text
• #6F32E6Primary Purple · Progress bar active indicator
• #5A6E85Muted Slate Blue · Disabled/Default CTA button fill
• #9CA3AFWheel Picker Text Muted · Age numbers unselected
• #6B7280Terms Text Gray · Legal disclaimer text
• #D1D5DBButton Border Gray · Outline button border

Type

• Screen TitleSF Pro Display · 38px · 800 · #111827
• Picker Unselected NumberSF Pro Display · 36px · 700 · #9CA3AF
• Terms DisclaimerSF Pro Text · 22px · 400 · #6B7280
• Primary Button LabelSF Pro Text · 26px · 700 · #FFFFFF
• Secondary Button LabelSF Pro Text · 26px · 700 · #111827

Elements

• Navigation Bar · Header

  Top row containing chevron back button and top progress track · Simple vector back arrow on left, slim track with purple indicator dot

• Age Wheel Picker · Wheel Picker / Scroller

  Vertically centered column showing fading numbers with placeholder dash in center · Text elements stacked vertically with opacity falloff towards edges

• Terms and Privacy Notice · Caption / Disclaimer

  Centered horizontally above the action buttons · Two lines of centered gray body text

• Continue Button · Primary Button

  Full-width pill button above secondary action · Solid desaturated slate blue-gray background, white text

• Already have an account Button · Secondary Button

  Full-width pill button at bottom of layout · White background, thin outline border, dark text

Layout

Step layout with back navigation and progress track at top, large vertical wheel picker in center, and sticky action group (disclaimer + 2 buttons) at the bottom.

Notes

Current selection in the wheel picker shows '--', indicating unset state, which matches the disabled slate color of the Continue button.