№ warbyparker-com

Warbyparker

Warm, muted earth tones and clean, open spacing evoke understated, confident clarity.

Feature Stackminimalism editorial swiss fashion ecommercelight

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · earthy · warm

SwatchHexOKLCHSuggested roleCopy

Hex#2d60c9
OKLCHoklch(51.6% 0.173 263)
RoleDominant
find sites →
Hex#0d2a6e
OKLCHoklch(31.3% 0.123 263)
RoleSurface
find sites →
Hex#6494e4
OKLCHoklch(66.8% 0.130 260)
RoleInk
find sites →
Hex#96847b
OKLCHoklch(62.7% 0.026 48)
RoleAccent
find sites →
Hex#e4d4cc
OKLCHoklch(88.1% 0.021 48)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	fontIvoryLl	55px	400	1.11	-0.55px	Aa Bb Cc
h2	fontIvoryLl	55px	400	1.11	-0.55px	Aa Bb Cc
h3	fontAbcSocial	20px	700	1.5	-0.2px	Aa Bb Cc
body	sans-serif	16px	400	1.4	0	Aa Bb Cc
caption	fontAbcSocial	13px	400	2.03	0.32px	Aa Bb Cc
button	fontAbcSocial	16px	600	1.63	0	Aa Bb Cc

Spacing scale

4px

8px

12px

16px

24px

32px

200px

Radius scale

0px

4px

8px

16px

36px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #2d60c9;
  --color-surface: #0d2a6e;
  --color-ink: #6494e4;
  --color-accent: #96847b;
  --color-detail: #e4d4cc;
}

/* CSS variables exposed by source */
:root {
  --k-preference-tabs-purposes-header-link-color: rgba(0, 0, 0, 1);
  --wp-color-support-dark-red: #bf0025;
  --k-consentGate-header-background: rgba(255, 255, 255, 1);
  --wp-space-7: 28px;
  --wp-color-core-blues-ink: #072369;
  --k-banner-buttons-primary-background-color: rgba(18, 18, 18, 1);
  --wp-space-2: 8px;
  --k-modal-gpcBanner-outline-color: rgba(255, 255, 255, 1);
  --k-modal-footer-actionButton-text-color: rgba(18, 18, 18, 1);
  --k-banner-container-background-color: rgba(255, 255, 255, 1);
  --k-consentGate-container-background-color: rgba(255, 255, 255, 1);
  --k-preference-header-title-color: rgba(0, 0, 0, 1);
  --k-preference-tabs-requests-home-header-description-color: rgba(0, 0, 0, 1);
  --safe-area-inset-bottom: 0px;
  --k-preference-tabs-requests-rightForm-actionButton-text-color: rgba(255, 255, 255, 1);
  --wp-color-support-light-orange: #ffecce;
  --wp-grid-tablet-count: 8;
  --k-preference-navigation-layout-item-arrowIcon-color: rgba(18, 18, 18, 1);
  --wp-transition-productiveP1S: .1s cubic-bezier(.25, 0, .35, .95);
  --k-preference-tabs-purposes-purposeList-actionButton-cornerRadius: 0px;
  --k-preference-tabs-purposes-purposeList-switchButtons-off-background-color: rgba(193, 198, 200, 1);
  --k-modal-gpcBanner-fill-color: rgba(235, 237, 237, 1);
  --k-banner-gpcBanner-fill-color: rgba(235, 237, 237, 1);
  --k-preference-tabs-requests-rightForm-header-returnButton-background-color: rgba(235, 237, 237, 1);
  --wp-grid-desktop-offset: 48;
  --wp-transition-expressiveE4S: .4s cubic-bezier(.25, .85, .35, 1);
  --k-preference-exitButton-text-color: rgba(0, 162, 225, 1);
  --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-text-color: rgba(255, 255, 255, 1);
  --k-preference-tabs-purposes-purposeList-purposeListItems-purposeFill-color: rgba(235, 237, 237, 1);
  --k-preference-tabs-welcome-welcomeMsg-link-color: rgba(16, 80, 208, 1);
  --wp-grid-desktop-pattern: columns;
  --k-consentGate-consentBlock-purposes-list-items-purposeOutline-color: rgba(193, 198, 200, 1);
  --k-preference-tabs-subscriptions-list-switchButton-on-thumb-color: rgba(255, 255, 255, 1);
  --k-banner-buttons-tertiary-text-color: rgba(18, 18, 18, 1);
  --k-modal-gpcBanner-link-text-color: rgba(0, 0, 0, 1);
  --k-preference-tabs-purposes-gpcBanner-outline-color: rgba(255, 255, 255, 1);
  --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-background-color: rgba(0, 0, 0, 1);
  --k-consentGate-consentBlock-purposes-list-items-purposeLinks-color: rgba(0, 0, 0, 1);
  --k-consentGate-consentBlock-button-text-color: rgba(255, 255, 255, 1);
  --wp-shadow-6: 0px 6px 24px 0px #1212123d;
  --wp-shadow-4: 0px 2px 24px 0px #1212121f;
  --k-preference-tabs-purposes-purposeList-switchButtons-on-icon-color: rgba(255, 255, 255, 1);
  --k-consentGate-container-cornerRadius: 0;
  --k-preference-tabs-subscriptions-unsubscribeAll-switchButton-off-text-color: rgba(0, 0, 0, 1);
  --wp-transition-expressiveE55S: .55s cubic-bezier(.25, .85, .35, 1);
  --wp-space-8: 32px;
  --k-preference-tabs-purposes-footer-actionButton-text-color: rgba(255, 255, 255, 1);
  --wp-space-16: 64px;
  --k-preference-tabs-purposes-purposeListHeader-rejectAllButton-background-color: rgba(0, 0, 0, 1);
  --k-modal-description-text-color: rgba(18, 18, 18, 1);
  --k-preference-tabs-purposes-purposeList-purposeListItems-purposeContent-color: rgba(0, 0, 0, 1);
  --k-consentGate-actionBlock-button-background-color: rgba(0, 0, 0, 1);
  --k-preference-tabs-purposes-purposeList-actionButton-unselected-background-color: rgba(255, 255, 255, 1);
  --wp-z-index-app-overlay: 4;
  --k-preference-tabs-subscriptions-list-checkbox-unselected-outline-color: rgba(193, 198, 200, 1);
  --k-preference-tabs-subscriptions-list-checkbox-selected-label-color: rgba(0, 0, 0, 1);
  --k-modal-purposeList-checkbox-unselected-background-color: rgba(193, 198, 200, 1);
  --k-preference-tabs-subscriptions-footer-actionButton-text-color: rgba(255, 255, 255, 1);
  --k-preference-tabs-requests-submitted-header-title-color: rgba(0, 0, 0, 1);
  --wp-space-27: 108px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Warbyparker.
Reference design system (extracted from the live site):
- Palette: #2d60c9, #0d2a6e, #6494e4, #96847b, #e4d4cc
- Typefaces: fontIvoryLl, sans-serif, fontAbcSocial
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/warbyparker-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

fontIvoryLl

55px

400

1.11

-0.55px

Aa Bb Cc

fontIvoryLl

55px

400

1.11

-0.55px

Aa Bb Cc

fontAbcSocial

20px

700

1.5

-0.2px

Aa Bb Cc

body

sans-serif

16px

400

1.4

Aa Bb Cc

caption

fontAbcSocial

13px

400

2.03

0.32px

Aa Bb Cc

button

fontAbcSocial

16px

600

1.63

Aa Bb Cc

:root { --color-dominant: #2d60c9; --color-surface: #0d2a6e; --color-ink: #6494e4; --color-accent: #96847b; --color-detail: #e4d4cc; } /* CSS variables exposed by source */ :root { --k-preference-tabs-purposes-header-link-color: rgba(0, 0, 0, 1); --wp-color-support-dark-red: #bf0025; --k-consentGate-header-background: rgba(255, 255, 255, 1); --wp-space-7: 28px; --wp-color-core-blues-ink: #072369; --k-banner-buttons-primary-background-color: rgba(18, 18, 18, 1); --wp-space-2: 8px; --k-modal-gpcBanner-outline-color: rgba(255, 255, 255, 1); --k-modal-footer-actionButton-text-color: rgba(18, 18, 18, 1); --k-banner-container-background-color: rgba(255, 255, 255, 1); --k-consentGate-container-background-color: rgba(255, 255, 255, 1); --k-preference-header-title-color: rgba(0, 0, 0, 1); --k-preference-tabs-requests-home-header-description-color: rgba(0, 0, 0, 1); --safe-area-inset-bottom: 0px; --k-preference-tabs-requests-rightForm-actionButton-text-color: rgba(255, 255, 255, 1); --wp-color-support-light-orange: #ffecce; --wp-grid-tablet-count: 8; --k-preference-navigation-layout-item-arrowIcon-color: rgba(18, 18, 18, 1); --wp-transition-productiveP1S: .1s cubic-bezier(.25, 0, .35, .95); --k-preference-tabs-purposes-purposeList-actionButton-cornerRadius: 0px; --k-preference-tabs-purposes-purposeList-switchButtons-off-background-color: rgba(193, 198, 200, 1); --k-modal-gpcBanner-fill-color: rgba(235, 237, 237, 1); --k-banner-gpcBanner-fill-color: rgba(235, 237, 237, 1); --k-preference-tabs-requests-rightForm-header-returnButton-background-color: rgba(235, 237, 237, 1); --wp-grid-desktop-offset: 48; --wp-transition-expressiveE4S: .4s cubic-bezier(.25, .85, .35, 1); --k-preference-exitButton-text-color: rgba(0, 162, 225, 1); --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-text-color: rgba(255, 255, 255, 1); --k-preference-tabs-purposes-purposeList-purposeListItems-purposeFill-color: rgba(235, 237, 237, 1); --k-preference-tabs-welcome-welcomeMsg-link-color: rgba(16, 80, 208, 1); --wp-grid-desktop-pattern: columns; --k-consentGate-consentBlock-purposes-list-items-purposeOutline-color: rgba(193, 198, 200, 1); --k-preference-tabs-subscriptions-list-switchButton-on-thumb-color: rgba(255, 255, 255, 1); --k-banner-buttons-tertiary-text-color: rgba(18, 18, 18, 1); --k-modal-gpcBanner-link-text-color: rgba(0, 0, 0, 1); --k-preference-tabs-purposes-gpcBanner-outline-color: rgba(255, 255, 255, 1); --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-background-color: rgba(0, 0, 0, 1); --k-consentGate-consentBlock-purposes-list-items-purposeLinks-color: rgba(0, 0, 0, 1); --k-consentGate-consentBlock-button-text-color: rgba(255, 255, 255, 1); --wp-shadow-6: 0px 6px 24px 0px #1212123d; --wp-shadow-4: 0px 2px 24px 0px #1212121f; --k-preference-tabs-purposes-purposeList-switchButtons-on-icon-color: rgba(255, 255, 255, 1); --k-consentGate-container-cornerRadius: 0; --k-preference-tabs-subscriptions-unsubscribeAll-switchButton-off-text-color: rgba(0, 0, 0, 1); --wp-transition-expressiveE55S: .55s cubic-bezier(.25, .85, .35, 1); --wp-space-8: 32px; --k-preference-tabs-purposes-footer-actionButton-text-color: rgba(255, 255, 255, 1); --wp-space-16: 64px; --k-preference-tabs-purposes-purposeListHeader-rejectAllButton-background-color: rgba(0, 0, 0, 1); --k-modal-description-text-color: rgba(18, 18, 18, 1); --k-preference-tabs-purposes-purposeList-purposeListItems-purposeContent-color: rgba(0, 0, 0, 1); --k-consentGate-actionBlock-button-background-color: rgba(0, 0, 0, 1); --k-preference-tabs-purposes-purposeList-actionButton-unselected-background-color: rgba(255, 255, 255, 1); --wp-z-index-app-overlay: 4; --k-preference-tabs-subscriptions-list-checkbox-unselected-outline-color: rgba(193, 198, 200, 1); --k-preference-tabs-subscriptions-list-checkbox-selected-label-color: rgba(0, 0, 0, 1); --k-modal-purposeList-checkbox-unselected-background-color: rgba(193, 198, 200, 1); --k-preference-tabs-subscriptions-footer-actionButton-text-color: rgba(255, 255, 255, 1); --k-preference-tabs-requests-submitted-header-title-color: rgba(0, 0, 0, 1); --wp-space-27: 108px; }

Build a landing page in the visual style of Warbyparker. Reference design system (extracted from the live site): - Palette: #2d60c9, #0d2a6e, #6494e4, #96847b, #e4d4cc - Typefaces: fontIvoryLl, sans-serif, fontAbcSocial - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/warbyparker-com