Warby Parker
www.warbyparker.coma 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.
Design tokens
- 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.
Related references
Dear Sundays
strongBeauty
a non-toxic nail studio and polish brand that reads like a calm wellness ritual, warm sand-beige surfaces, Baskerville serif headings over Lato body, soft 40px pill buttons, line-drawn "promise" icons and product-led editorial photography.
Larry King
flagshipOther
A London salon group and haircare line that fuses warm putty-cream calm with editorial fashion confidence - big half-and-half image panels, GT America, and a leopard-print swagger - so it feels both welcoming and clearly cool.
Ace And Tate
strongHealth
a near-monochrome Amsterdam eyewear store that lets warm product photography and one editorial serif carry all the personality, set on a soft grey field with ink-black type, calm spacing and almost no decoration.
Aesop
flagshipConsumer Brand
an editorial e-commerce reference where Suisse Intl on warm-cream `#fffef2`, a modular 1.13 type ratio, and full-bleed photography do all the work - no display face, no accent colour, no motion of consequence.