---
version: alpha
name: "Lemonade"
description: "Lemonade makes insurance feel unusually lightweight: white space, Merriweather display type, thin neighborhood line art, Lato navigation, and a single electric pink CTA that owns the otherwise grayscale page."
colors:
  bg: "#ffffff"
  bg-soft: "#f7f7f7"
  surface: "#ffffff"
  surface-muted: "#f7f7f7"
  text: "#4a4a4a"
  text-strong: "#000000"
  text-soft: "#7b7b7b"
  text-muted: "#9b9b9b"
  brand: "#ff0083"
  brand-hover: "#e00074"
  brand-soft: "#ffe3f1"
  illustration: "#4a4a4a"
  illustration-soft: "#b7b7b7"
  border: "#b7b7b7"
  border-soft: "rgba(183, 183, 183, 0.50)"
  shadow-pink: "rgba(255, 0, 131, 0.22)"
  success: "#2f9d68"
  warning: "#d99226"
  danger: "#d93b65"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "Merriweather"
    fontSize: "44px"
    lineHeight: 1.5
    letterSpacing: "0"
  body:
    fontFamily: "Lato"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Lemonade is sparse, bright, and unusually quiet for insurance. The page is mostly white, with grayscale line art framing the bottom edges and a centered editorial headline.

The electric pink CTA is the only loud color in the first viewport. That restraint makes the action feel decisive without making the page feel aggressive.

**Key Characteristics**
- White page shell.
- Merriweather serif hero headline.
- Lato navigation and buttons.
- Thin grayscale neighborhood illustration.
- One electric pink CTA.
- Centered composition.
- Minimal top navigation with product categories.
- Soft pink glow under the primary button.

## Colors

Use `bg #ffffff` as the dominant surface. Supporting sections can move to `bg-soft #f7f7f7`, but the first viewport should remain clean.

The brand color is `brand #ff0083`. It should appear on primary conversion actions and tiny brand marks, not across every heading.

Text uses `text #4a4a4a`, with `text-soft #7b7b7b` for secondary nav and support copy. Illustration strokes should stay grayscale.

## Typography

| Role | Font | Size | Weight | Notes |
| --- | --- | ---: | ---: | --- |
| Hero | Merriweather | 55 | 400 | Calm, centered insurance reset |
| Display | Merriweather | 44 | 400 | Section statements |
| H1 | Merriweather | 36 | 400 | Detail pages |
| H2 | Merriweather | 30 | 400 | Support sections |
| H3 | Lato | 20 | 700 | Product cards |
| Body large | Lato | 18 | 400 | Hero subcopy |
| Body | Lato | 16 | 400 | Product copy |
| Button | Lato | 18 | 700 | Pink CTA |

The serif headline provides the brand's softness. Keep it centered and avoid uppercase display text outside buttons.

## Layout

Center the hero copy and CTA vertically in the first viewport. Place illustration groups along the lower left and right edges so they create a stage around the headline.

Keep the logo centered in the header, with insurance categories on the left and account access on the right.

The top nav is product-category oriented: renters, homeowners, car, pet, life, and giveback. It signals scope without adding a large menu.

Account access stays far right and quiet. It should not compete with the CTA.

## Elevation & Depth

Use very little elevation. The primary depth cue is the soft pink glow under the CTA.

Cards later in the page should use pale backgrounds and faint borders rather than heavy shadows.

## Shapes

| Tier | Value | Use |
| --- | ---: | --- |
| Micro | 2 | tiny marks |
| Small | 5 | primary CTA |
| Medium | 8 | later cards or inputs |
| Large | 12 | product modules |
| Extra large | 20 | rare panels |
| Pill | 9999 | avoid in the hero |

The design is more about whitespace and line art than rounded surfaces. Keep shapes simple.

## Components

Primary buttons are pink rectangles with a 5px radius and generous horizontal padding. Use a subtle pink shadow so the button floats without adding card chrome.

Navigation links are plain text. Do not put product categories in pills or tabs; the header should feel effortless.

Line illustrations should be thin, low-detail, and mostly monochrome. They frame the page rather than acting as product cards.

CTA hover can darken to `brand-hover #e00074` and slightly reduce the shadow. Navigation links can use simple underline or opacity changes.

Illustration motion, if any, should be light and slow. Insurance onboarding should feel quick, not theatrical.

Use reset language and simple promises: instant, affordable, generous, transparent. Keep copy concise and friendly.

Avoid dense policy terminology in the hero. Save coverage detail for the quote flow.

The first action is a price check, not a newsletter signup. Make the CTA direct and prominent.

If adding a form step, keep it modal or flow-based after the CTA. Do not clutter the landing page with policy fields.

Illustrations should use simple outlines, domestic scenes, and generous negative space. Houses, cars, pets, benches, and clouds fit the system.

Keep illustration fill minimal. The page loses its lightness if the drawings become colorful scenes.

Pink buttons on white have strong visual priority, but ensure white button text remains legible. Use weight and size, not only saturation.

Large serif text should keep line height around 1.3 so the centered headline remains readable on narrow screens.

## Do's and Don'ts

Do not add gradient backgrounds, heavy photography, or dark insurance dashboards. They conflict with Lemonade's plain-spoken feel.

Do not overuse pink. The palette works because pink is reserved for action.

Avoid boxed hero cards. The hero should be open and centered.

- Use a white first viewport.
- Center the serif hero headline.
- Set the CTA to `#ff0083`.
- Keep nav links plain.
- Add thin grayscale illustration around the hero.
- Use Lato for interface copy.
- Avoid extra card chrome in the hero.
- Reserve pink for conversion and small brand details.