Screenshot of Warby Parker

Warby Parker

www.warbyparker.com

a calm, trustworthy retail-optometry site that pairs a near-black ink (#121212) with a confident royal blue (#1050D0), runs a custom grotesque against a custom serif, and lets warm lifestyle photography and a fast 0.2s ease carry the polish.

Health Eyewear Optometry flagship

Design tokens

ink
black
white
blue
navy
grey-fill
off-white
slate
display
Ivory LL
body
ABC Social
mono
none

Do / Don't

Reference it for

  • Retail-service nav that puts booking, insurance and a guided quiz beside product categories, exactly what an optometry or eyewear practice needs surfaced.
  • A single royal-blue action colour (#1050D0) on an ink-and-white base, used only for buttons and links so every click target reads instantly.
  • The filled-pill plus outline-pill CTA pair, 100px radius, as a clean primary/secondary pattern.
  • Trust strips (free shipping, returns, vision benefits accepted) placed directly under the hero to do reassurance before the pitch.
  • A custom grotesque (ABC Social) for UI with a serif (Ivory LL) reserved for editorial headlines, a calm, premium pairing.
  • A near-invisible 0.2s house transition that makes the whole site feel responsive without any animation library.

Do not copy

  • ABC Social and Ivory LL are licensed custom faces; map to an open grotesque plus a warm serif rather than lifting them.
  • The exact royal blue and the lifestyle photography are Warby Parker's brand equity; pick the client's own accent and shoot their own faces.
  • The third-party stack (Bazaarvoice reviews, Vimeo, freshpaint analytics) is retail-scale plumbing a small practice does not need.

Signature moves

service-first retail nav plus trust strip

the nav surfaces booking, insurance and a guided quiz beside product categories, and a trust strip (free shipping, returns, vision benefits accepted) sits directly under the hero to reassure before the pitch.

single royal-blue on ink-and-white

one royal blue (#1050d0) on a near-black ink (#121212) and white base is used only for buttons and links so every click target reads instantly.

filled-pill plus outline-pill CTA pair

a filled pill and an outline pill at 100px radius form a clean primary/secondary action pair, with a grotesque (ABC Social) for UI and a serif (Ivory LL) reserved for editorial headlines.