# Warby Parker — Marketing site Design Spec

> Source: warbyparker.com (live DOM, computed styles), 2026-07-28. Publishes a
> real `--wp-color-*` / grid token system (authoritative source). Coverage: home.
> 0 stylesheets cross-origin. `#414b56` in the focus ring is the slate token.
> Reality check: hint ("Eyewear — friendly optical retail, blue accent,
> prescription-flow UI") is accurate and enriched: the "blue" is a two-part
> system — a bright **Blueprint #1050d0** primary and a deep **Ink navy #072369**
> (bar + secondary CTA); the type is the real signature, an **Ivory LL serif**
> display over an **ABC Social** grotesque; controls are fully-round **100px
> pills**; and responsive is unusually **container-query-driven (21 CQs)**.

## 1. Visual Theme & Atmosphere

Warm, optimistic optical retail. A deep-navy #072369 announcement bar caps a
mostly-white page whose warmth comes from ivory (#fcfbf9) and parchment
(#f6f0e9) tints rather than pure white. The recognisable move is typographic: a
soft **Ivory LL serif** carries the display ("Find your new favorite frames") at
a light weight 400 over an **ABC Social** grotesque for all UI and body. Colour
is a disciplined two-blue system — bright Blueprint #1050d0 for the primary CTA,
deep Ink navy #072369 for the bar and secondary — with a full semantic support
set (green, red, orange) held for status. Controls are fully-round 100px pills;
photography of faces-in-frames does the emotional work. Feels: friendly,
premium-approachable, editorial, trustworthy.

## 2. Color Palette & Roles

| Token (--wp-color-) | Hex | Role / usage |
|---|---|---|
| grayscale-cosmos | #121212 | primary ink (1404×) |
| grayscale-slate | #3a434c | secondary text, focus-ring outer |
| grayscale-graphite | #72777c | 1px borders, tertiary text |
| core-blues-blueprint | #1050d0 | PRIMARY CTA + link blue |
| core-blues-dark-blueprint | #1144a9 | blueprint hover/pressed |
| core-blues-ink | #072369 | navy bar, secondary CTA, link hover |
| core-blues-jet-ink | #021a57 | darkest navy |
| core-blues-warby | #00a2e1 | brand cyan accent |
| grayscale-nimbus | #e1e5e6 | grey section fill |
| grayscale-draft | #eeedec | soft panel |
| grayscale-ivory | #fcfbf9 | warm off-white canvas |
| grayscale-parchment | #f6f0e9 | warm band |
| support-classroom-green | #09624d | success text |
| support-light-green | #dfebe8 | success tint |
| support-red | #d6003c | sale / error |
| support-light-red | #ffe5ec | error tint |
| support-orange | #c93700 | warning |

Rules: the two blues never blur — Blueprint #1050d0 owns the primary action, Ink
#072369 the bar + secondary. Support colours are semantic only (status/sale),
never decorative. Warmth is ivory/parchment, not pure white.

## 3. Typography Rules

Display **Ivory LL** (Lineto serif). UI/body **ABC Social** (Dinamo grotesque).
Specimen stand-ins: **Fraunces** for Ivory LL, **Inter** for ABC Social (both
Google Fonts) — the site ships the licensed faces; note the swap.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display h1 | Ivory LL | 55/61px | 400 | -0.55px |
| Section h2 | Ivory LL | 30/36px | 400 | -0.3px |
| Sub h3 | ABC Social | 20/30px | 700 | -0.2px |
| Body p | ABC Social | 14/24px | 400 | -0.13px |
| Nav link | ABC Social | 16px | 600 | normal |
| Button | ABC Social | 16px | 400 | normal |

Patterns: the serif display is set LIGHT (weight 400), never bold — elegance
from the letterforms, not weight. ABC Social carries 400 body / 600 nav / 700
sub-heads. Tracking is a slight negative on the serif, near-normal on the sans.
No uppercase except the spaced wordmark in the bar.

## 4. Component Stylings

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | #1050d0 fill, #fff, 100px radius, 48px h, pad 13-24 | darken toward #1144a9 | double ring: #fff 0 0 0 2px + #414b56 outer | #1144a9 | not captured |
| Secondary CTA | #072369 fill, #fff, 100px radius, 48px h | (JS) | same ring | — | — |
| Ghost / Sign in | transparent, 1px #121212 border, 100px radius, 50px h | fill toward ink | ring | — | — |
| Text link | #1050d0 (or ink) | color → #072369, `outline:0` | color #072369 | outline:0 | — |
| Text input | transparent, inline, placeholder #121212 | — | `outline:none` (anti-pattern) | — | — |

Every button is a **fully-round 100px pill** at 48–50px. Focus is a real double
box-shadow ring (white 2px inner + slate outer) — but links/inputs set
`outline:0`; keep the box-shadow ring, don't copy the outline removal.

## 5. Layout Principles

Full-width navy announcement bar (spaced-uppercase wordmark centred) over a
sticky white nav. Hero is a split: left-aligned Ivory serif headline + pill CTAs
against a full-bleed photographic right (with a bottom photo scrim). Sections
alternate white / ivory / nimbus grey. Uses a published grid token set
(`--wp-grid-*`, 4-col mobile, 12-gutter). Container-query-driven components.

## 6. Depth & Elevation

Radius scale (by frequency): 50% (221×, icon buttons), 100px (25×, pill CTAs),
16px (cards), 4px, plus 36/20/12/8px one-offs. Shadows are soft and layered:
`rgba(0,0,0,0.02) 0 4px 12px` + `rgba(0,0,0,0.04) 0 1px 4px` for cards, and a
white `0 0 0 1px` ring for chips. Focus ring:
`#fff 0 0 0 2px, #414b56 0 0 0 4px` (double ring). Borders: 1px #72777c
(graphite, 17×), 1px #e1e5e6. Elevation is gentle — soft shadow + hairline, never
heavy.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.2s | cubic-bezier(0.25,0,0.35,0.95) | hover/press chrome (91×) |
| opacity | 0.2s | cubic-bezier(0.25,0,0.35,0.95) | fades (80×) |
| box-shadow | 0.2s | cubic-bezier(0.25,0,0.35,0.95) | focus/card rings (78×) |
| color | 0.35s | cubic-bezier(0.25,0.85,0.35,1) | link/text colour (48×) |

House transition is **all 0.2s cubic-bezier(0.25,0,0.35,0.95)**; text colour uses
a gentler 0.35s curve. Keyframes are CSS-module-scoped: `animationFadeIn`,
`animationFadeOut`, `animationScaleIn`, `skeleton-shimmer-slide` (loading).
**Ships 5 `prefers-reduced-motion` blocks** — thorough. No scroll library.

## 8. Backgrounds, Effects & WebGL

Photography-led: **2 hero videos**, functional photo-scrim gradients only
(`linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%)` to seat text), no
backdrop-filter, no canvas/WebGL, no grain, 0 decorative raster background
layers. Atmosphere is entirely product/lifestyle imagery over solid brand fills.

## 9. Do's and Don'ts

### Do
- Use the two blues by role: Blueprint #1050d0 = primary action, Ink #072369 = bar + secondary.
- Set the serif display LIGHT (Ivory LL, weight 400); pair with ABC Social sans.
- Make every button a fully-round 100px pill at 48px.
- Warm the neutrals with ivory #fcfbf9 / parchment #f6f0e9, not pure white.
- Keep the double box-shadow focus ring (white 2px + slate).

### Don't
- Don't bold the serif display or swap it for a sans.
- Don't use support green/red/orange decoratively — they are semantic only.
- Don't square the buttons; the pill is the signature.
- Don't strip focus (links/inputs do `outline:0` — restore a ring).

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| ≤767 | mobile: nav → hamburger, hero stacks |
| min 768 / min 1024 | tablet → desktop columns |
| min 1200 / 1440 / 1920 | wide layouts |

Very dense device-targeted ladder (320→1920, ~36 seams) PLUS **21 container
queries** — a real share of layout is component-driven, not viewport-driven. 0
`prefers-color-scheme: dark` blocks (no dark theme), 5 reduced-motion blocks.

## 11. Agent Prompt Guide

- Canvas `#ffffff`/ivory `#fcfbf9` · Text `#121212` · Muted `#3a434c` · Border `#72777c` · Primary `#1050d0` · Navy `#072369`
- Font: Ivory LL serif (Fraunces) display / ABC Social (Inter) UI · Body 14/24px 400 · Radius 100px pills / 16px cards · Button height 48px
- Focus: `#fff 0 0 0 2px, #414b56 0 0 0 4px` double ring · Hover: link → #072369, primary → #1144a9

<warby-parker-marketing_design_language>
Warm optical-retail storefront on a published --wp-color-* token system. A deep
navy #072369 bar caps a mostly-white page warmed by ivory #fcfbf9 and parchment
#f6f0e9. The signature is type: an Ivory LL serif (Fraunces stand-in) display set
LIGHT at weight 400 (55/61, -0.55px) over an ABC Social grotesque (Inter
stand-in) at 14/24 400 body / 600 nav / 700 sub-heads. Colour is a two-blue
system — bright Blueprint #1050d0 for the primary CTA and links, deep Ink navy
#072369 for the bar and secondary — plus a semantic-only support set (green
#09624d, red #d6003c, orange #c93700). Ink is cosmos #121212, borders 1px
graphite #72777c. Every button is a fully-round 100px pill at 48px; cards use 16px
radius with soft layered shadows; focus is a double box-shadow ring (white 2px +
slate #414b56). House transition all 0.2s cubic-bezier(0.25,0,0.35,0.95), colour
on a gentler 0.35s curve; ships 5 reduced-motion blocks and drives layout with 21
container queries. Feels: friendly, premium-approachable, editorial. Avoid:
bolding the serif, squaring buttons, decorative use of the semantic colours, or
stripping the focus ring.
</warby-parker-marketing_design_language>