---
name: Warby Parker
description: "This site is a masterclass in modern e-commerce design, balancing premium editorial aesthetics with a highly functional and accessible shopping experience."
version: alpha

colors:
  background: "#FCFBF9"
  primary: "#121212"
  secondary: "#3A434C"
  tertiary: "#1050D0"
  neutral: "#072369"
  bg-soft: "#FFFFFF"
  bg-quiet: "#E1E5E6"
  line: "rgba(18,18,18,0.12)"

typography:
  display-lg:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  display-sm:
    fontFamily: transitional-serif
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.4px"
  body-lg:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.36px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.32px"

rounded:
  sm: 4px
  md: 12px
  lg: 16px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A refined, accessible boutique for modern essentials.*

## Colors

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

- **Background (`#FCFBF9`)** — uses `bg` token
- **Primary text (`#121212`)** — uses `ink` token
- **Secondary text (`#3A434C`)** — uses `ink-soft` token
- **Accent (`#1050D0`)** — uses `accent` token
- **Muted (`#072369`)** — uses `muted` token
- **Borders (`rgba(18,18,18,0.12)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** 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.

## Layout

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

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

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 16px
- `pill`: 100px

## Components

- **button:** Pill-shaped with bold sans-serif text, using primary blue or dark navy fills.
- **card:** Clean containers with subtle or no shadows, often featuring large imagery.
- **chip:** Pill-shaped labels with thin outlines or subtle backgrounds.
- **input:** Clean bordered fields with generous padding.
- **hero:** Full-width immersive photography with overlaid bold typography and CTAs.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```