№ farfetch-com

Farfetch

Cool, spacious gallery— muted earth tones, clean sans-serif, crisp visual hierarchy.

Ecosystem Indexminimalism editorial fashion ecommercelight

The layout prioritizes visual presentation of product categories through high-quality photography. Clean typography and ample white space create a sophisticated, uncluttered feel, emphasizing the curated selection. · luxury fashion, online retailer, clothing store, fashion e-commerce, minimalist design, editorial layout, product showcase

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 · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#be936f
OKLCHoklch(69.5% 0.072 61)
RoleDominant
find sites →
Hex#855d3f
OKLCHoklch(51.4% 0.068 57)
RoleSurface
find sites →
Hex#e1b49d
OKLCHoklch(80.4% 0.061 48)
RoleInk
find sites →
Hex#ab7a59
OKLCHoklch(62.1% 0.077 55)
RoleAccent
find sites →
Hex#c7bca6
OKLCHoklch(79.8% 0.033 85)
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	Sample
h2	Farfetch Basis	22px	700	1.27	Aa Bb Cc
h3	Farfetch Basis	30px	700	1.27	Aa Bb Cc
body	Farfetch Basis	15px	400	1.33	Aa Bb Cc
button	Farfetch Basis	15px	700	1.33	Aa Bb Cc

Spacing scale

24px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #be936f;
  --color-surface: #855d3f;
  --color-ink: #e1b49d;
  --color-accent: #ab7a59;
  --color-detail: #c7bca6;
}

/* CSS variables exposed by source */
:root {
  --colors-forms-secondary-default-readonly-surface: #e6e6e6;
  --spacers-c48: 4.8rem;
  --colors-forms-secondary-default-hover-validation-icon: #222;
  --colors-pos-generic-enabled-label: #222;
  --spacers-c10: 1rem;
  --colors-notifications-dark-info-default-stroke: #fff;
  --fontSizeXL: 2.2rem;
  --colors-cards-light-hover-surface: #f5f5f5;
  --colors-navigation-primary-active-icon: #222;
  --colors-cards-light-enabled-surface: #fff;
  --colors-actions-ghost-light-loading-label: #fff;
  --colors-navigation-primary-hover-surface: hsla(0,0%,100%,0);
  --colors-cards-light-hover-stroke: #b6b6b6;
  --colors-forms-secondary-default-selected-surface: #e6e6e6;
  --colors-actions-secondary-selected-label: #222;
  --colors-forms-secondary-error-hover-placeholder: #727272;
  --colors-access-bronze-02: #dd9388;
  --colors-actions-ghost-light-active-label: #fff;
  --colors-actions-tertiary-active-surface: hsla(0,0%,71%,.75);
  --colors-actions-ghost-dark-selected-label: #222;
  --colors-forms-primary-default-focus-label: #222;
  --colors-actions-tertiary-selected-icon: #fff;
  --colors-forms-secondary-default-hover-icon: #222;
  --colors-actions-secondary-selected-surface: #fff;
  --colors-actions-ghost-dark-disabled-icon: #b6b6b6;
  --colors-forms-primary-error-disabled-validation-icon: #b6b6b6;
  --colors-forms-primary-success-disabled-surface: #f5f5f5;
  --colors-forms-primary-success-selected-icon: #222;
  --colors-forms-primary-default-readonly-stroke: hsla(0,0%,100%,0);
  --colors-notifications-dark-info-default-surface: #222;
  --fontSizeTomXS: 2.2rem;
  --colors-cards-highlight-hover-stroke: #e6e6e6;
  --colors-forms-primary-success-enabled-validation-icon: #048273;
  --colors-notifications-light-error-default-stroke: #ffeff1;
  --colors-general-error02: #ffeff1;
  --colors-cards-highlight-enabled-text: #222;
  --colors-forms-secondary-success-readonly-surface: #e6e6e6;
  --colors-actions-primary-active-surface: #b6b6b6;
  --colors-content-primary-selected-stroke: #e6e6e6;
  --colors-content-primary-disabled-subtext: #b6b6b6;
  --colors-cards-light-hover-text: #222;
  --colors-actions-wishlist-loading-icon: #727272;
  --colors-actions-secondary-hover-icon: #222;
  --colors-actions-wishlist-selected-label: #222;
  --colors-actions-ghost-light-selected-label: #fff;
  --colors-cards-highlight-hover-overlay: rgba(34,34,34,.04);
  --colors-messaging-quaternary-enabled-surface: #e6e6e6;
  --colors-forms-secondary-error-enabled-icon: #222;
  --colors-forms-primary-success-enabled-label: #222;
  --colors-forms-secondary-default-focus-placeholder: #727272;
  --colors-forms-secondary-success-hover-validation-icon: #048273;
  --colors-content-primary-enabled-icon: #222;
  --colors-actions-ghost-light-selected-stroke: hsla(0,0%,100%,0);
  --colors-forms-secondary-success-disabled-label: #b6b6b6;
  --colors-navigation-secondary-hover-indicator: hsla(0,0%,100%,0);
  --colors-forms-secondary-error-selected-stroke: #c41429;
  --colors-actions-wishlist-active-label: #222;
  --colors-pos-generic-enabled-surface: #e6e6e6;
  --colors-access-silver-02: #b4b4b6;
  --colors-navigation-primary-enabled-stroke: #e6e6e6;
}

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 Farfetch.
Reference design system (extracted from the live site):
- Palette: #be936f, #855d3f, #e1b49d, #ab7a59, #c7bca6
- Typefaces: Farfetch Basis
- Macrostructure: Ecosystem Index
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/farfetch-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Farfetch Basis

22px

700

1.27

Aa Bb Cc

Farfetch Basis

30px

700

1.27

Aa Bb Cc

body

Farfetch Basis

15px

400

1.33

Aa Bb Cc

button

Farfetch Basis

15px

700

1.33

Aa Bb Cc

:root { --color-dominant: #be936f; --color-surface: #855d3f; --color-ink: #e1b49d; --color-accent: #ab7a59; --color-detail: #c7bca6; } /* CSS variables exposed by source */ :root { --colors-forms-secondary-default-readonly-surface: #e6e6e6; --spacers-c48: 4.8rem; --colors-forms-secondary-default-hover-validation-icon: #222; --colors-pos-generic-enabled-label: #222; --spacers-c10: 1rem; --colors-notifications-dark-info-default-stroke: #fff; --fontSizeXL: 2.2rem; --colors-cards-light-hover-surface: #f5f5f5; --colors-navigation-primary-active-icon: #222; --colors-cards-light-enabled-surface: #fff; --colors-actions-ghost-light-loading-label: #fff; --colors-navigation-primary-hover-surface: hsla(0,0%,100%,0); --colors-cards-light-hover-stroke: #b6b6b6; --colors-forms-secondary-default-selected-surface: #e6e6e6; --colors-actions-secondary-selected-label: #222; --colors-forms-secondary-error-hover-placeholder: #727272; --colors-access-bronze-02: #dd9388; --colors-actions-ghost-light-active-label: #fff; --colors-actions-tertiary-active-surface: hsla(0,0%,71%,.75); --colors-actions-ghost-dark-selected-label: #222; --colors-forms-primary-default-focus-label: #222; --colors-actions-tertiary-selected-icon: #fff; --colors-forms-secondary-default-hover-icon: #222; --colors-actions-secondary-selected-surface: #fff; --colors-actions-ghost-dark-disabled-icon: #b6b6b6; --colors-forms-primary-error-disabled-validation-icon: #b6b6b6; --colors-forms-primary-success-disabled-surface: #f5f5f5; --colors-forms-primary-success-selected-icon: #222; --colors-forms-primary-default-readonly-stroke: hsla(0,0%,100%,0); --colors-notifications-dark-info-default-surface: #222; --fontSizeTomXS: 2.2rem; --colors-cards-highlight-hover-stroke: #e6e6e6; --colors-forms-primary-success-enabled-validation-icon: #048273; --colors-notifications-light-error-default-stroke: #ffeff1; --colors-general-error02: #ffeff1; --colors-cards-highlight-enabled-text: #222; --colors-forms-secondary-success-readonly-surface: #e6e6e6; --colors-actions-primary-active-surface: #b6b6b6; --colors-content-primary-selected-stroke: #e6e6e6; --colors-content-primary-disabled-subtext: #b6b6b6; --colors-cards-light-hover-text: #222; --colors-actions-wishlist-loading-icon: #727272; --colors-actions-secondary-hover-icon: #222; --colors-actions-wishlist-selected-label: #222; --colors-actions-ghost-light-selected-label: #fff; --colors-cards-highlight-hover-overlay: rgba(34,34,34,.04); --colors-messaging-quaternary-enabled-surface: #e6e6e6; --colors-forms-secondary-error-enabled-icon: #222; --colors-forms-primary-success-enabled-label: #222; --colors-forms-secondary-default-focus-placeholder: #727272; --colors-forms-secondary-success-hover-validation-icon: #048273; --colors-content-primary-enabled-icon: #222; --colors-actions-ghost-light-selected-stroke: hsla(0,0%,100%,0); --colors-forms-secondary-success-disabled-label: #b6b6b6; --colors-navigation-secondary-hover-indicator: hsla(0,0%,100%,0); --colors-forms-secondary-error-selected-stroke: #c41429; --colors-actions-wishlist-active-label: #222; --colors-pos-generic-enabled-surface: #e6e6e6; --colors-access-silver-02: #b4b4b6; --colors-navigation-primary-enabled-stroke: #e6e6e6; }

Build a landing page in the visual style of Farfetch. Reference design system (extracted from the live site): - Palette: #be936f, #855d3f, #e1b49d, #ab7a59, #c7bca6 - Typefaces: Farfetch Basis - Macrostructure: Ecosystem Index 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/farfetch-com