Gizmo: AI Tutor

Colors

• #F8F9FBBackground Off-White · Base canvas background
• #171D2DHeading Dark · Main headline · Friend profile names
• #505869Secondary Muted Text · User grade/school subtitle · Search placeholder
• #DCE0E7Input Stroke · Search field border · Skip button border
• #151B2AButton Dark Solid · Follow button fill · Follow all button fill
• #6027BCProgress Active Purple · Top progress segment fill

Type

• TitleNunito · 52px · 800 · #171D2D
• Search PlaceholderNunito · 40px · 500 · #505869
• User NameNunito · 42px · 800 · #171D2D
• User DetailNunito · 34px · 500 · #505869
• Follow Button LabelNunito · 36px · 700 · #FFFFFF
• Bottom Button LabelNunito · 42px · 700 · #FFFFFF

Elements

• Friend Search Input · Text input field

  Below header, span ~90% screen width, height ~124px · White capsule container with light gray border, leading magnifying glass icon

• Friend Item Row · List row

  Horizontal row spanning ~90% width, height ~160px, avatar on left, info middle, button right · Clean row with thin bottom separator border

• Follow Button · Button

  Trailing edge of friend row, width ~230px, height ~100px · Solid dark navy pill button with white text

• Follow All Button · Button

  Bottom stack upper button, span ~90% screen width, height ~136px · Solid dark navy pill button with white label

• Skip Button · Button

  Bottom stack lower button, span ~90% screen width, height ~136px, ~24px below Follow all · White pill button with thin gray outline and dark text

Layout

Vertical list view with top search bar, scrollable/stacked contact suggestions, and a two-button sticky action footer at the base.

Notes

Friend avatars contain custom icons (e.g. penguin cartoon and blank placeholder circle).