Gizmo: AI Tutor

Colors

• #F8F9FBBackground Light · Main page canvas background
• #6027BCHeader Purple · Progress bar fill · Brand character accents
• #1B2234Text Main · Main titles · Display heading · Option labels
• #FFFFFFCard Surface · Option list container background
• #1B2234Checkbox Checked · Selected checkbox background
• #1B2234Button Dark Slate · Bottom Continue button background

Type

• TitleNunito · 54px · 800 · #1B2234
• Headline ArchedNunito Black · 80px · 900 · #1B2234
• List LabelNunito · 40px · 600 · #1B2234
• Button LabelNunito · 42px · 700 · #FFFFFF

Elements

• Dual Permissions Card · Card / List container

  Centered, span ~90% screen width, containing 2 rows · White rounded panel with subtle outline stroke and horizontal row divider

• Checkmark Item 1 · Checkbox indicator

  Row 1 trailing end, ~64x64px · Dark navy rounded square with white check icon

• Checkmark Item 2 · Checkbox indicator

  Row 2 trailing end, ~64x64px · Dark navy rounded square with white check icon

• Active Continue CTA · Button

  Bottom anchored, ~90% screen width, height ~136px · Full dark slate rounded pill button with high contrast white text

Layout

Completed state of the permissions onboarding step showing both permissions successfully enabled before continuing.

Notes

Both checkboxes are in enabled/checked state; Continue button is active.