Quizlet: More than Flashcards

Colors

• #0b0c1ebg-navy · screen canvas background
• #21283eprogress-track · progress bar background track
• #7381ffprogress-fill · progress bar active segment fill
• #21283eoption-card-bg · selection card background surface
• #fffffftext-primary · title text · card labels · skip button
• #d1d5e5text-muted · subheading instructions

Type

• skip-actionHurme Geometric Sans · 34px · 700 · #ffffff
• onboarding-titleHurme Geometric Sans · 60px · 700 · #ffffff
• onboarding-subtitleHurme Geometric Sans · 34px · 400 · #ffffff
• option-titleHurme Geometric Sans · 36px · 600 · #ffffff

Elements

• onboarding-progress-bar · progress_bar

  top navigation row, left-aligned, width ~600px, height 24px · horizontal capsule track filled approximately 25% with soft periwinkle blue

• skip-button · link

  top right navigation area, aligned vertically with progress bar · plain text button in bold white

• option-card-exam · list_item

  full width with 68px horizontal margin, height 170px, centered vertically · dark charcoal rounded box with magenta certificate icon and bold title

• option-card-flashcards · list_item

  full width with 68px horizontal margin, height 170px, 32px below first card · dark charcoal rounded box with layered blue card icon and bold title

• option-card-other · list_item

  full width with 68px horizontal margin, height 170px, 32px below second card · dark charcoal rounded box with pink/purple search icon and bold title

Layout

Single column survey question format: header with progress bar and Skip button, centered primary headline and description, followed by three large option cards with distinctive colored iconography.

Notes

Options serve as selection triggers leading to specific study pathways.