# Warby Parker · Design system migration spec

> Source: https://www.warbyparker.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in modern e-commerce design, balancing premium editorial aesthetics with a highly functional and accessible shopping experience.

## 1. Identity DNA

Warby Parker's design system is built like a refined, accessible boutique for modern essentials. It balances the polish of a premium brand with the directness of a direct-to-consumer interface, creating an environment that feels both stylish and unpretentious.

**One-liner:** A clean, premium e-commerce interface for eyewear that balances large photography with crisp, minimal typography.
**Keywords:** Premium · Approachable · Stylish · Direct-to-consumer · Eyewear
**Analogy:** A refined, accessible boutique for modern essentials.

## 2. Color

The color system operates on a principle of high contrast and clear hierarchy. A base of soft off-whites and deep ink establishes a clean, readable foundation, while a vibrant primary blue serves as the decisive accent for calls to action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCFBF9` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#E1E5E6` | quiet area |
| `--ink` | `#121212` | body text |
| `--ink-soft` | `#3A434C` | secondary text |
| `--muted` | `#072369` | placeholder |
| `--accent` | `#1050D0` | single accent |
| `--line` | `rgba(18,18,18,0.12)` | divider |

**Color principle:** High-contrast base palette with deep navy and bright blue accents to guide actions.

The palette's restraint ensures that product photography remains the focal point, with color used sparingly to guide rather than decorate.

## 3. Typography

Typographic voice is split for clarity: a humanist sans-serif handles all functional text with confident legibility, while a transitional serif is reserved for primary editorial headlines. This pairing separates utility from narrative, allowing large product imagery to breathe against crisp, minimal type.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display-lg | 56px | 1.0 | 400 | -1px | Hero headlines |
| display-sm | 40px | 1.1 | 400 | -0.4px | Section headlines |
| body-lg | 18px | 1.5 | 400 | 0.36px | Subheadings and navigation |
| body | 16px | 1.5 | 400 | 0.32px | General body text and buttons |

**Type rules:**
- Use sans-serif for all functional text, navigation, and buttons.
- Use serif only for primary editorial headlines.
- Maintain generous line-height for readability.

## 4. Spacing

A consistent 4px base grid underpins the entire layout, establishing a steady rhythm. Spacing is deliberate and generous, particularly around interactive elements, to create clarity and reduce visual noise.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous padding on interactive elements (13px 24px).

## 5. Surfaces

Surfaces are defined by depth and clarity. Subtle, layered shadows lift cards and interactive elements just enough to suggest hierarchy, while thin 1px borders provide clean delineation without heaviness.

- **Radius:** sm 4px · md 12px · lg 16px · pill 100px
- **Shadows:**
  - rgba(0, 0, 0, 0.04) 0px 1px 4px 0px
  - rgba(0, 0, 0, 0.02) 0px 4px 12px 0px
  - rgba(18, 18, 18, 0.12) 0px 8px 12px 0px
- **Borders:** Thin 1px solid borders used for outlines and dividers.

## 6. Layout

The layout skeleton is a spacious 12-column grid with wide gutters, designed to host large, immersive photography alongside clear content blocks. Max-width containers ensure a controlled reading line and a focused shopping experience on any screen.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** 12-column grid with wide gutters and max-width containers for content and products.

## 7. Motion & Interaction

Motion is treated as functional polish rather than embellishment. The system uses smooth, consistent transitions—primarily opacity and shadow shifts—to acknowledge interaction and guide focus without disrupting the user's task.

- **Durations:** micro 200ms · small 350ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0, 0.35, 0.95)`
- **Patterns:**
  - Smooth opacity and box-shadow transitions on hover.
  - Color transitions for text and interactive elements.

- **Hover:** Subtle opacity changes and box-shadow elevations.
- **Click:** Immediate response with no complex animations.
- **Transition:** Standardized 0.2s ease-out for most state changes.
- **Keyboard:** Focus states indicated by clear outlines (white/black rings).

## 8. Voice & Don'ts

The editorial voice is confident, direct, and helpful, mirroring the brand's approachable premium position. Headlines are bold and concise, often punchy in all-caps, while calls to action use clear, action-oriented phrases.

- **Tone:** Confident, direct, and helpful.
- **Headline style:** Bold, concise, and often punchy all-caps for impact.
- **CTA style:** Action-oriented and clear, using short phrases like 'Start with a quiz'.
- **Avoid:** Jargon / Aggressive sales language / Cluttered layouts

### Don'ts
- ❌ don't use complex gradients — screenshot shows flat color blocks and clean photography instead
- ❌ don't use drop shadows on text — screenshot shows crisp text directly on images or solid backgrounds
- ❌ don't use highly rounded cards — screenshot shows mostly flat surfaces or subtly rounded elements
- ❌ don't use a cluttered header — screenshot shows a spacious, well-organized navigation bar
- ❌ don't use decorative fonts for body text — screenshot uses clean sans-serif for all functional text
- ❌ don't use neon or highly saturated accent colors — screenshot uses controlled blues and deep navys

The system deliberately avoids jargon, aggressive sales language, and cluttered layouts in favor of clean, purposeful communication.

## System Prompt (paste into AI tool)

```
Warby Parker is a premium, direct-to-consumer eyewear brand with a clean, editorial, and approachable e-commerce interface. The design DNA is built on a palette of soft whites (#FCFBF9, #FFFFFF), light grays (#E1E5E6), deep ink (#121212), and deep navy (#072369) with a primary action blue (#1050D0). Typography features a humanist/geometric sans-serif for body and a transitional serif for display headlines. Key constraints: maintain generous white space and a 12-column grid; use large, high-quality photography; keep buttons pill-shaped and highly legible; avoid cluttered layouts and unnecessary decorative elements; and ensure high contrast for accessibility.
```
