CURATED · OPEN · FREE

Warby Parker

A clean, premium e-commerce interface for eyewear that balances large photography with crisp, minimal typography.

ecommerceeyewear
Warby Parker screenshot
↓ Download design system (41 MB)Open in OpenDesign

Visit: https://www.warbyparker.com

📦 Browse pack contents →

01

Identity DNA

PremiumApproachableStylishDirect-to-consumerEyewear

A refined, accessible boutique for modern essentials.

02

Color

#1050D0Accent
#121212Ink
#3A434CInk soft
#FCFBF9BG
#FFFFFFBG soft
#E1E5E6BG quiet
#072369Muted
rgba(18,18,18,0.12)Line

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

03

Typography

transitional-serif · geometric-sans

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

04

Spacing

4px
8px
12px
16px
24px
32px
48px
64px
96px

Consistent 4px base grid with generous padding on interactive elements (13px 24px).

05

Surfaces

sm · 4px
md · 12px
lg · 16px
pill · 100px

Thin 1px solid borders used for outlines and dividers.

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

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

Motion & Interaction

200msmicro
350mssmall
800msmedium
cubic-bezier(0.25, 0, 0.35, 0.95)easing

Smooth opacity and box-shadow transitions on hover. · Color transitions for text and interactive elements.

Subtle opacity changes and box-shadow elevations. · Immediate response with no complex animations.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Warby Parker — 桌面首屏（hero）
桌面首屏（hero）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko