Quizlet: More than Flashcards

Colors

• #0b0c1escreen-bg · main background
• #21283ecard-surface · list item container surface
• #21283esearch-surface · search bar surface
• #7381ffprogress-fill · progress bar fill
• #fffffftext-primary · headings · card titles
• #a4adbftext-secondary · card subtitles · input placeholder

Type

• page-headerHurme Geometric Sans · 56px · 700 · #ffffff
• section-labelHurme Geometric Sans · 32px · 600 · #ffffff
• card-titleHurme Geometric Sans · 36px · 600 · #ffffff
• card-subtitleHurme Geometric Sans · 30px · 400 · #a4adbf

Elements

• progress-bar · progress_bar

  top bar, left of Skip, width ~600px, height 24px · horizontal pill track showing ~80% filled progress

• search-input · input_field

  full width with 68px horizontal margin, height 126px · unfocused dark gray-blue capsule pill with search icon and placeholder text

• exam-list · list

  vertical stack of 5 visible full-width rounded cards, 24px spacing · cards with title and secondary description text: IELTS Academic, SAT, English Standard HSC, TOEIC Listening and Reading, NEET UG

Layout

Vertical onboarding list view with progress bar and Skip button in header, title, unfocused search field, and scrollable list of popular exam cards visible in full after keyboard dismissal.

Notes

Full list view visible when keyboard is hidden.