A warm optical-retail storefront built on a published --wp-color-* / grid token system, and a rare consumer-health commerce entry whose try-on and prescription flow has no neighbour in the library. A deep navy #072369 announcement bar (spaced-uppercase serif wordmark centred) caps a mostly-white page whose warmth comes from ivory #fcfbf9 and parchment #f6f0e9 rather than pure white. The signature is typographic: a soft Ivory LL serif carries the display, and crucially it is set LIGHT at weight 400 (“Find your new favorite frames”, 55/61, -0.55px) rather than bold, so the elegance comes from the letterforms, while an ABC Social grotesque runs all UI and body at 14/24 400 with 600 nav and 700 sub-heads. Colour is a disciplined two-blue system that never blurs its roles — a bright Blueprint #1050d0 owns the primary CTA and links, a deep Ink navy #072369 the bar and secondary CTA — backed by a full semantic support set (green #09624d, red #d6003c, orange #c93700) held strictly for status and sale, never decoration. Every button is a fully-round 100px pill at 48–50px; cards use a 16px radius with soft layered shadows (rgba(0,0,0,.02) 0 4px 12px over rgba(0,0,0,.04) 0 1px 4px), and focus is a real double box-shadow ring, white 2px inner plus a slate #414b56 outer. Ink is cosmos #121212 on 1px graphite #72777c hairlines. The house transition is all 0.2s cubic-bezier(0.25,0,0.35,0.95) with text colour on a gentler 0.35s curve; the site ships five reduced-motion blocks and drives a real share of its layout with twenty-one container queries rather than viewport breakpoints alone, over lifestyle photography and two hero videos.
⚠ needs-dashboard
Browse Warby Parker in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.#414b56in 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).
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.
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.