Design system warbyparker.com

---
version: alpha
name: "warbyparker.com"
description: "Design system extracted from https://www.warbyparker.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  foreground: "#414b56"
  primary: "#00a2e1"
  on-primary: "#111111"
  border: "#fcfcfc"
typography:
  headline-display:
    fontFamily: "utopia-std"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: "1.25"
  headline-lg:
    fontFamily: "proxima-nova"
    fontSize: "32px"
    fontWeight: 600
    lineHeight: "1.4"
  headline-md:
    fontFamily: "proxima-nova"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "proxima-nova"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.63"
  label-md:
    fontFamily: "proxima-nova"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
  button:
    fontFamily: "proxima-nova"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.4"
rounded:
  none: "0px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "12px"
  2: "16px"
  3: "24px"
  4: "48px"
components:
---

# warbyparker.com

## Overview

Warby Parker: Warby Parker

Sharp, squared-off controls, flat surfaces separated by hairlines, restrained display type at 24px / 700, a single teal accent on neutrals. The site ships in light mode by default. Measured from 15 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| foreground | `#414b56` | Primary text |
| primary | `#00a2e1` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| border | `#fcfcfc` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): .

The accent `#00a2e1` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **utopia-std** for h1: unknown source; use **Inter** as the stand-in if it does not load.
- **proxima-nova** for body: unknown source; use **Montserrat** as the stand-in if it does not load.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | utopia-std | 24px | 700 | 1.25 | normal |
| headline-lg | proxima-nova | 32px | 600 | 1.4 | normal |
| headline-md | proxima-nova | 24px | 600 | 1.4 | normal |
| body-md | proxima-nova | 16px | 400 | 1.63 | normal |
| label-md | proxima-nova | 13px | 500 | 1.4 | normal |
| button | proxima-nova | 14px | 500 | 1.4 | normal |

Type scale in use: 12px, 16px, 24px. Base body size 16px.

The H1 renders at 24px / 700, center aligned, up to 476px wide. Sample: "Warby Parker is currently down for scheduled maintenance.".

## Layout

- Spacing unit: 4px. Scale in use: 12, 16, 24, 48 (px).
- Content max width: not detected (fluid).
- Header: 60px tall, static, background `rgba(0, 0, 0, 0)`, bottom hairline 1px solid rgb(210, 214, 217); 0 nav links at nullpx / null.

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 0px
- Inputs: 0px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, full 9999px

## Components

### Link

Colour `#00a2e1`, no underline at rest, weight 400.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 500px | 482px | 16px | 24px, 2 lines, center | 60px, 0 links | text only |  | content-width |
| laptop 1024px | 500px | 274px | 16px | 24px, 2 lines, center | 60px, 0 links | text only |  | content-width |
| tablet 768px | 500px | 146px | 16px | 24px, 2 lines, center | 60px, 0 links | text only |  | content-width |
| phone 390px | fluid | 24px | 16px | 24px, 2 lines, center | 60px, 0 links | text only |  | content-width |

- H1 goes 24px → 24px (100%), 2 → 2 lines.
- Nav never collapses to a hamburger (0 links still visible at 390px).
- Body text stays 16px at every width.
- Phone side gutter 24px.
- Horizontal overflow at 390px (the source has a responsive bug; do not copy it).

## Interaction & Motion

No CSS transitions on rendered elements: state changes are instant.

- Hover on body-link ("In the meantime, entertain yourself by w"): no visible change; cursor pointer.
- Focus on body-link: outline 1px auto rgb(16, 16, 16), offset 1px.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- No dropdown menus found in the header.
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#00a2e1` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in proxima-nova and headings in utopia-std.
- Do match corner radii per element class (buttons 0px, cards 0px); do not pick one radius for everything.
- Don't add drop shadows; this design is flat.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.