Gizmo: AI Tutor

Colors

• #F8F9FBCanvas Background · Screen background fill
• #FFFFFFCard Surface · Permissions group card surface
• #1B2234Text Primary · Headings · List item labels · Display text
• #6027BCPrimary Purple · Progress bar active fill
• #EAEBEEProgress Track · Progress bar empty track
• #4C566AButton Dark Slate · Bottom Continue button surface
• #D82D46Target Red Accent · Dartboard illustration target

Type

• Brand LabelNunito · 40px · 800 · #1B2234
• Screen TitleNunito · 54px · 800 · #1B2234
• Illustration SubtitleNunito · 38px · 600 · #1B2234
• Illustration DisplayNunito Black · 80px · 900 · #1B2234
• List Option LabelNunito · 40px · 600 · #1B2234
• Button TextNunito · 42px · 700 · #FFFFFF

Elements

• Progress Track Bar · Progress bar

  Top navigation row, height ~24px, span ~80% width · Light gray rounded capsule filled ~75% with purple gradient

• Target Mascot Artwork · Graphic illustration

  Centered middle region below 'Better grades' header · Isometric 3D red target board with cyan arrow fletching

• Permissions Container Card · Card / Group

  Centered horizontally below illustration, width ~90% screen, stacked 2 rows · White rounded container with subtle gray border/shadow, divided horizontally

• Checkbox - Checked · Checkbox indicator

  Right side of row 1, ~64x64px square · Dark navy/black fill with rounded corners and white checkmark icon

• Checkbox - Unchecked · Checkbox indicator

  Right side of row 2, ~64x64px square · Transparent center with dark outline border and rounded corners

• Continue CTA Button · Button

  Pinned near bottom edge, horizontal span ~90%, height ~136px · Dark slate blue solid pill button with centered white text

Layout

Single-column linear onboarding screen with top progress header, playful motivational illustration center, permission toggle card group, and persistent bottom CTA.

Notes

Typography features heavy rounded sans letterforms; Nunito or Fredoka One are visual approximations.