Quizlet: More than Flashcards

Colors

• #0b0c1eapp-background · page background
• #1b1e3brole-selected-bg · selected student toggle fill
• #7381ffrole-selected-border · selected role pill stroke outline
• #21283erole-unselected-bg · unselected teacher pill fill
• #4255ffactive-cta · sign up active primary button fill
• #e0e4efpicker-active-text · selected date row text

Type

• picker-selected-itemHurme Geometric Sans · 48px · 600 · #e0e4ef
• toggle-labelHurme Geometric Sans · 38px · 600 · #ffffff

Elements

• filled-date-field · input_field

  full width with 68px horizontal margins, height 140px · shows selected value '2 Mar 2002' in high contrast white text with label above

• student-toggle-pill · toggle_button

  left half of row below picker, 48% width, height 120px · dark purple surface with prominent purple-blue border and checkmark icon next to text

• teacher-toggle-pill · toggle_button

  right half of row below picker, 48% width, height 120px · unselected solid dark gray-blue fill without border

• active-signup-button · button

  full width with 68px margin, height 130px, near bottom of screen · bright brand blue pill button with bold white centered text

Layout

Progressive disclosure flow: valid date selection in the wheel picker reveals a 2-up role selection row ('Student' / 'Teacher') and activates the primary 'Sign up' CTA.

Notes

Checkmark icon inside the 'Student' pill indicates active selection state.