Quizlet: More than Flashcards

Colors

• #0b0c1ebackground-navy · screen background
• #4255ffbrand-blue · primary button fill · login link accent
• #ffffffpure-white · headline text · apple button fill · button text
• #21283edark-surface · email button fill
• #9ba3b8muted-gray · disclaimer body text · secondary footer text
• #000000near-black · apple button text and icon

Type

• headlineHurme Geometric Sans · 54px · 700 · #ffffff
• legal-bodyHurme Geometric Sans · 28px · 500 · #ffffff
• button-labelHurme Geometric Sans · 36px · 600 · #ffffff
• footer-promptHurme Geometric Sans · 34px · 500 · #ffffff

Elements

• hero-illustration · illustration

  centered horizontally in top third of screen, circular crop with stylized speech bubble tail · circular photo cutout of student studying on phone with purple hand-drawn accent squiggle overlay

• google-sso-button · button

  full width with 68px horizontal margin, height 126px, centered content · solid brand blue fill with white 'G' logo glyph and white label

• apple-sso-button · button

  full width with 68px horizontal margin, height 126px, 28px below google button · solid white fill with black Apple logo icon and black label

• email-signup-button · button

  full width with 68px horizontal margin, height 126px, 28px below apple button · dark charcoal-blue solid fill with light blue-gray envelope icon and white label

• login-footer · link

  centered horizontally near bottom safe area, 60px below email button · inline text link with bolded purple-blue active link text

Layout

Single column vertical layout, vertically distributed with hero graphic at top, headline copy in center, and three stacked full-width pill action buttons followed by account login prompt.

Notes

Hurme Geometric Sans is Quizlet's corporate brand face; alternates include Circular Std, Montserrat, or Gilroy. Button radius follows fully rounded pill styling.