Lemonade Design System

Overview

Lemonade's marketing site opens with a typographic move that no other insurance brand in the category attempts. Serif-as-disruption: the hero h1 — "Forget everything you know about insurance" — runs in Merriweather serif at 55px and weight 400, warm charcoal text on white. Below it, Lato takes over every functional surface. The serif does not reappear anywhere beneath the hero fold. Unlike GEICO, which uses a mascot to carry personality and stays in a single custom sans; or Progressive, which anchors on lifestyle photography with a proprietary condensed sans; Lemonade puts the brand's positioning statement in a typeface that signals editorial authority, then drops immediately into a sans-serif functional system. The serif is not decoration — it is the challenge itself.

The single chromatic brand voltage is hot magenta ({colors.primary} — #ff0083, wired as --primary-color, --text-link-color, --border-focus-color). At 113 total occurrences, it is everywhere interactive: CTA fills, link text, focus rings, star-rating icons, shadow accents on the mobile illustration. Every "CHECK OUR PRICES" pill button in the product-category grid renders the same flat magenta with no gradient, no hover animation visible in the capture. The background is white; the ink is warm charcoal {colors.ink} (#4a4a4a) rather than near-black — at oklch lightness 0.41, it sits in a warmer register than the deep near-black GEICO uses, making the overall page feel lighter despite identical canvas values.

The hero illustration — hand-drawn line art of a neighborhood — is the second unusual design move. It renders in the same {colors.ink} charcoal as the headline text, making the illustration feel typographically consistent with the prose rather than decorative. Below the illustration is the page's only photography: real-person testimonial avatars and lifestyle photos in the "Why Progressive" grid. The rest of the page alternates between white product cards with 10px corner radius and the same magenta pill CTAs repeated at each category.

Key Characteristics:

• Hot magenta {colors.primary} (#ff0083) is the sole chromatic brand voltage — 113 occurrences, crossing every interactive role simultaneously (fill, text, border, shadow).
• Merriweather serif at 55px/400 appears once — in the hero h1 — and nowhere else; Lato runs every subsequent tier.
• Warm charcoal {colors.ink} (#4a4a4a) is the dominant text color (758 occurrences), sitting lighter than near-black and warmer than neutral grey.
• Full-pill 50px radius on every primary CTA — the "CHECK OUR PRICES" buttons are the visual signature of the product-category grid.
• Hand-drawn line-art hero illustration in charcoal — the only non-photographic illustration in the above-fold section.
• Pure white canvas throughout; no tinted or gradient backgrounds until the cookie consent dark bar.

Colors

Brand

• Primary Magenta ({colors.primary} — #ff0083): frequency 113. Used as text (47), background (13), border (45), shadow (8). Wired as --primary-color, --text-link-color, --border-focus-color, --pink-color, --background-pink-color. The system's single chromatic voltage — every interactive surface renders this value.
• Primary Dark ({colors.primary-dark} — #dc0073): frequency 0 rendered but wired as --dark-pink-color, --background-pink-hover-color, --dark-primary-color. The hover state for primary buttons and links.
• Primary Pressed ({colors.primary-pressed} — #b40060): frequency 0 rendered but wired as --background-pink-pressed-color, --darker-primary-color, --darker-pink-color, --text-link-pressed-color. The pressed/active state for CTAs.
• Primary Light ({colors.primary-light} — #ffe4f2): frequency 3 as background. Used for tinted chip and badge fills — the pale-pink reading of the magenta system.

Structural

• Ink ({colors.ink} — #4a4a4a): frequency 758. Used as text (379), border (372), gradient (6), background (1). Wired as --text-primary-color, --matterhorn-color, --border-dark-color, --night-color, --gray-night-color. The page's dominant voice — warm, medium-dark charcoal.
• Ink Muted ({colors.ink-muted} — #7b7b7b): frequency 3 as background. Wired as --text-secondary-color, --boulder-color, --divider-gray-color. Secondary text and divider tones.
• Ink Disabled ({colors.ink-disabled} — #b7b7b7): frequency 193. Used as text (97), border (96). Wired as --text-disabled-color, --metal-color, --inverted-text-secondary-color. Placeholder text and disabled-state UI.
• Ink Secondary ({colors.ink-secondary} — #a9a9a9): frequency 10. Used as text (5), border (5). Wired as --dark-gray-color. A lighter mid-grey for tertiary metadata.
• Canvas ({colors.canvas} — #ffffff): frequency 91. Used as background (41), text (29), border (20), gradient (1). Wired as --background-primary-color, --white-color, and many others. The page floor for every content section.

Hairline

• Hairline ({colors.hairline} — #ececec): frequency 3 as border. Wired as --border-primary-color, --background-quaternary-color, and many related neutral names. Card borders, dividers, and section separators.
• Hairline Dark ({colors.hairline-dark} — #dadada): frequency 3 as border. Wired as --background-disabled-color, --border-hover-color. Hover-state borders and disabled input fields.

Semantic

• Surface Dark ({colors.surface-dark} — #161616): frequency 3 as background. Wired as --darkest-night-color, --nero-color. Appears in the cookie-consent dark bar only.
• Shadow ({colors.shadow} — #000000): frequency 51. Used as shadow (49), text (1), border (1). Wired as --black-color. Box shadow ink throughout card and mobile-illustration treatments.
• Positive ({colors.positive} — #2ad5bd): frequency 0 rendered but wired as --background-positive-color, --text-positive-color, --green-color. Declared for success states and positive indicators in the product flow.

Typography

Font Families

The system runs two voices:

• Merriweather (serif) — hero h1 only ("Forget everything you know about insurance" at 55px / weight 400). Not used anywhere else in the captured marketing surface. CSS declares it as an alt font via --alt-font-family: 'Merriweather', Georgia, serif.
• Lato (humanist sans) — every other surface. Primary font via --main-font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif. Default weight 400, bold weight 700.

The split is explicit: the serif makes the brand's positioning statement, then hands off entirely to the sans for every functional surface that follows.

Hierarchy

Principles

Merriweather at weight 400 reads as editorial authority — the lowercase challenge headline feels like a print ad, not a SaaS hero. Lato at weight 700 handles the h2 tier that appears immediately below, and from there the system works entirely in Lato. Weight 700 Lato headlines are common; the Merriweather/Lato handoff is the distinctive pattern. Label buttons use 14px/700 in uppercase — the only uppercase treatment in the system.

Substitutes

Merriweather is open-source (Google Fonts). Playfair Display or PT Serif at the same size and weight transfer cleanly. For Lato, Inter or DM Sans at weights 400 and 700 work at every tier in the system.

Layout

Spacing System

• Base unit: 20px (33 occurrences) and 15px (27 occurrences) — a 5px-step scale.
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 15px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 32px.
• Card internal padding: 20px across product cards and bundle comparison tiles.
• Section rhythm: ~40px vertical separation between major sections; the product-category grid and bundle strip use tighter 15px internal gaps.

Grid & Container

• Hero: centered single column, illustration spans the full content width behind the headline; CTA pill centered beneath.
• Product category grid: 5-column row (Renters, Homeowners, Car, Pet, Term Life) with icon above, category title, description, and magenta pill CTA at bottom of each card.
• Bundle comparison strip: 3-column row (Pet+Renters, Car+Renters, Car+Home) with savings badge in magenta.
• Testimonial row: 4 avatar + quote cards in a horizontal scroll; star rating section uses large magenta stars above h3 text.
• "How Lemonade Works" strip: 3-step horizontal flow with phone illustrations.

Rhythm

The page is evenly spaced and repetitive by design — the 5-column product grid, the 3-column bundle strip, and the 4-column testimonial row all share the same 10px card radius and white card surface. This grid repetition enforces trust at scale: every product category gets the same weight, same card treatment, same magenta CTA.

Elevation

The system uses light shadow + hairline borders for elevation. The shadow token (#000000) appears 51 times, predominantly as box-shadow on the mobile phone illustrations in the "Instant everything" section. Card elevation across the product and bundle grids comes from 1px {colors.hairline} borders rather than from shadows — the same pattern as Cloudflare and GEICO. The magenta CTA buttons carry a 8px shadow in the brand primary magenta at some sizes (8 shadow occurrences in the extraction), giving them a subtle glow effect against the white canvas.

Shapes

The radius scale is bimodal: a 10px default for cards and a full-pill 50px for all CTAs.

• {rounded.none} 0px — hero text blocks, footer dividers, section separators.
• {rounded.sm} 5px (18 occurrences) — small chips, badge fills, icon frames.
• {rounded.md} 10px (23 occurrences, dominant) — every product card, bundle card, testimonial card, and the main illustrated tiles.
• {rounded.lg} 15px (3 occurrences) — larger promotional tiles.
• {rounded.xl} 24px (3 occurrences) — large surface cards in the product flow.
• {rounded.pill} 50px (3 occurrences) — primary CTA buttons; the signature "CHECK OUR PRICES" pill shape.
• {rounded.full} 50% (18 occurrences) — circular avatar images, round icon containers.

There is no mid-range 20–30px radius tier. The system jumps from 10px (cards) directly to 50px (CTAs), with no intermediate option. This is the same binary logic as Cloudflare's small-step-plus-pill scale, applied at different values.

Components

button-primary — Hot magenta {colors.primary} fill, white text at {typography.label-md}, 50px pill radius, 12×24px padding, 48px height. "CHECK OUR PRICES" is the canonical instance, appearing once per product category card and in the hero.

button-primary-hover — Background shifts to {colors.primary-dark} (#dc0073) — a slightly deeper magenta. Same pill radius and padding.

button-secondary — Transparent fill, magenta {colors.primary} text and 1px magenta border, 50px pill, 10×20px padding, 44px height. Used for "CHECK PRICES AND SWITCH" in the competitor-switch section.

top-nav — White canvas, ink text, Lato body-lg, no border, 56px height. Lemonade wordmark centered (script logo), product links left, "My Account" right.

nav-link — Transparent fill, ink {colors.ink} text at {typography.body-lg}, 15px horizontal padding. Nav links render in charcoal, not magenta — links become magenta only in body prose and CTAs.

hero-heading — Ink charcoal text at {typography.display-serif} (55px Merriweather/400). Sits above the line-art neighborhood illustration in the hero column.

section-heading — Ink charcoal at {typography.display-lg} (44px Lato/700) for the below-fold section h2s ("Incredible Prices. Monthly Subscription. Bundle Discounts.").

body-paragraph — Ink charcoal at {typography.body-lg} (16px Lato/400). Default running text.

product-card — White canvas, 1px hairline border, {rounded.md} 10px radius, 20px padding. Contains icon, category title, description, and the magenta pill CTA beneath.

bundle-card — White canvas, {rounded.md} 10px radius, 15px padding. Used in the Pet+Renters, Car+Renters, Car+Home bundle comparison strip. A magenta savings badge floats at the top right corner.

stat-badge — Light magenta {colors.primary-light} (#ffe4f2) fill, magenta {colors.primary} text at {typography.label-md}. Used as the "Save up to $XXX/yr" tag overlaid on bundle cards.

star-rating — Magenta {colors.primary} used for the five-star icons in the "(Almost) 5 Star Insurance Company" section. Display-md Lato text above.

text-input — White canvas, ink text, 1px hairline border, {rounded.md} 10px radius, 12×15px padding, 48px height. Focus border shifts to 2px {colors.primary} magenta.

footer — White canvas, ink-muted text at {typography.body-sm}, multi-column link layout with Lemonade wordmark above, 24×20px padding.

testimonial-card — White canvas, 1px hairline border, {rounded.md} 10px radius, 20px padding. Holds avatar, name, review text, magenta @username link, social platform indicator.

Do's and Don'ts

Do reserve Merriweather for the hero h1 challenge copy only. The typeface switch is the brand's positioning statement — applying Merriweather to section headings or sub-copy would undermine the handoff to Lato and make the serif feel like a default rather than a deliberate moment.

Do use the flat magenta fill on primary CTAs with no gradient. The system's CTA discipline is flat color plus pill radius — adding a gradient would shift the visual register from DTC-app toward traditional fintech, and that is precisely what "forget everything you know about insurance" is positioned against.

Do treat {colors.ink} (#4a4a4a) as the text default, not a dark-mode variant or a muted secondary. At 758 total occurrences it is the dominant ink color; replacing it with a near-black measurably shifts the warmth of the page.

Do apply the {rounded.md} 10px radius uniformly across product cards, bundle tiles, and testimonial cards. The visual consistency of the card grid at 10px is what makes the product offerings feel equivalent in weight.

Don't use {colors.ink-disabled} (#b7b7b7) for anything other than disabled states and placeholder text — it has 97 text occurrences and 96 border occurrences in the captured page, all in disabled/placeholder contexts. Applying it to secondary running text or section labels would read as broken state rather than intentional muting.

Don't introduce a shadow tier on the primary CTA buttons. The 8 shadow occurrences on the magenta primary use the brand magenta itself as the shadow ink — the pink glow effect. Replacing this with neutral black shadows would shift the CTA from brand-owned to commodity fintech.

Don't use {colors.primary} (#ff0083) for heading or display text. The magenta is reserved exclusively for interactive surfaces — CTAs, links, focus rings, star ratings. Applying it to a section heading would collapse the distinction between brand voltage and content hierarchy.

Don't break the 5-column product grid to 4 or 6 columns. The product categories — Renters, Homeowners, Car, Pet, Term Life — are five, and the grid is designed for five equal columns. Uneven columns introduce a visual hierarchy among insurance products where none should exist.

Known Gaps

• Hover and focus animations: the magenta hover state (#dc0073) and pressed state (#b40060) are declared as CSS variables but not visible in the static capture. The focus ring uses 2px magenta outline which is documented from the CSS variable mapping, not from a rendered state.
• Dark mode: the system is light-only on the captured marketing surface. The CSS declares several dark-mode variables (--inverted-background-primary-color pointing to a very dark near-black, --darkest-night-color pointing to a deep charcoal) suggesting an inverted canvas exists in-product, but it does not appear in the marketing page.
• Form quote flow: Lemonade's inline quote widget (clicking "CHECK OUR PRICES" opens a guided form) is not captured; the multi-step form component set (radio selections, ZIP input, progress indicator) is not represented.
• Positive and negative semantic colors: the {colors.positive} (#2ad5bd) and the extracted negative-state red (wired as --background-negative-color, --text-negative-color) are declared and used in the app/claims flow but do not appear in the marketing capture.
• App in-product surfaces: Lemonade's mobile app and web dashboard use a richer token system; the CSS variables expose ~200 named color values for in-product states (pending, positive, negative, disabled tiers) that are not surfaced on the marketing page.
• Signature typeface: Dancing Script is declared via --signature-font-family for the digital signature component in the claims flow but does not appear in the marketing capture.