Skip to content
Library

Quizlet. A quiet study desk where four pastel flashcards are the only splash of color against cool gray walls and a single indigo highlighter mark.

  • Productivity
  • Light theme
  • 10 colors
  • 2 typefaces

Quizlet presents an educational workspace on a soft blue-white canvas: a calm, distraction-free study environment where four vivid feature cards (cyan, magenta, brand violet, peach) inject personality into an otherwise restrained palette. Typography is geometric and approachable—Hurme Geometric Sans at weight 400 carrying most of the load, avoiding the over-bolded weight 700 headlines common in SaaS. Components are flat and soft-edged: 4px radius on controls, 8px on cards, 200px pill on filled buttons, with subtle rgba(40,46,62,0.1) shadows providing gentle elevation rather than dramatic depth. The single brand violet #4255ff is the focal point of the interface—links, active states, and filled interactive elements all draw from it, creating a consistent accent against the neutral charcoal #282e3 text and the cool gray canvas #f6f7fb. White card surfaces (#ffffff) and tinted lilac panels (#edefff) create a clear two-level surface hierarchy without ever needing heavy borders or saturated backgrounds.

Screenshot of Quizlet
Captured from quizlet.com on October 11, 2026

Quizlet design system

Quizlet

Brand1

  • Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

Neutrals9

  • App store download badges, maximum-contrast text on light tinted panels, occasional icon detail

  • Primary text, headings, body copy, footer headings, icon strokes — near-black navy that reads warmer than pure #000 on light surfaces

  • Secondary body text, supporting copy where Ink Charcoal would feel too heavy

  • Muted helper text, secondary metadata, tertiary nav items, subtle icon fills

  • Placeholder text, disabled states, hairline icon strokes, low-emphasis borders

  • Hairline dividers, card edges, input borders, separator lines

  • Tinted section backgrounds, subtle highlight zones, promotional banner fills

  • Page background, page-level canvas behind cards and content sections

  • Card surfaces, modal backgrounds, input fields, raised panel fills

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper White on Iris Bolt

5.28 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.