Lemonade Design System

Lemonade's marketing site opens with a serif challenge: "Forget everything you know about insurance" at 55px Merriweather in weight 400, warm charcoal on white, with no gradient backdrop and no photography. The headline sits over a hand-drawn line-art illustration of a neighborhood — houses, cars, a dog — rendered in the same charcoal as the text. Below it, a single magenta pill: "CHECK OUR PRICES." This combination — editorial serif over naive illustration, pure magenta CTA, no decorative chrome — is unusual enough in the insurance category that it reads as a consumer-app brand masquerading as an insurance product. Where GEICO leads with a mascot and deep navy authority, and Progressive leads with lifestyle photography, Lemonade leads with a typographic statement.

The DESIGN.md file packages the system into 14 color tokens anchored on hot magenta (#ff0083, wired as --primary-color, --text-link-color, --border-focus-color, and --pink-color), a warm charcoal ink (#4a4a4a at 758 total occurrences), and a pure white canvas. Typography runs two families: Merriweather (serif, proprietary-adjacent) for the hero h1 only, and Lato for every subsequent heading, body, button, and label. Twelve typography tokens capture the full range from the 55px display serif to 12px uppercase labels. Fifteen components cover the magenta pill CTA, the product-category card grid, the bundle comparison strip, the star-rating section, and the "How Lemonade Works" step strip.

Feed this spec to Claude or Cursor and it reproduces Lemonade's specific moves: Merriweather serif for the hero challenge copy, Lato for every functional tier, flat magenta pills with no gradient, charcoal-not-near-black ink, and the 50px full-pill radius that makes every CTA read as a soft, tappable button rather than a rectangular action. The one move worth studying is the typeface split: using a serif only at the hero h1 tier — where the brand makes its positioning statement — and then switching to a humanist sans for everything functional below it. The serif does not appear again after the h1.