Quizlet: More than Flashcards

Colors

• #0b0c1escreen-bg · background canvas
• #7381ffsearch-border · search bar active focus border
• #0b0c1esearch-bg · focused search bar interior
• #383c48keyboard-key-bg · virtual keyboard letter keys
• #007affkeyboard-accent · blue check confirm key
• #21283ecard-surface · popular exam cards surface

Type

• page-headerHurme Geometric Sans · 56px · 700 · #ffffff
• section-titleHurme Geometric Sans · 32px · 600 · #ffffff
• item-primaryHurme Geometric Sans · 36px · 600 · #ffffff
• item-secondaryHurme Geometric Sans · 30px · 400 · #a4adbf

Elements

• search-input · input_field

  full width with 68px horizontal margin, height 126px, below header · pill shaped field with light purple border, search glass icon, and placeholder text

• exam-card-ielts · list_item

  full width with 68px margins, height 180px · dark rectangular card with title 'IELTS Academic' and subtitle

• exam-card-sat · list_item

  full width with 68px margins, height 180px, 24px below first card · dark rectangular card with title 'SAT' and subtitle 'Scholastic Assessment Test'

• software-keyboard · keyboard

  anchored to screen bottom, covering lower 42% of viewport · system dark iOS QWERTY keyboard with blue primary return action key

Layout

Step navigation bar with back arrow and 50% filled progress indicator, large centered header, focused full-width search input, and scrollable results partially obscured by on-screen software keyboard.

Notes

The progress indicator advances from step 5 to ~50% completion.