What is Farfetch's primary brand color?

Farfetch does not have a primary brand color in the conventional sense. The extraction captured exactly one hex value across the entire page: #000000, at frequency 348 — 174 occurrences as text and 174 as border. There is no CTA fill color, no accent voltage, no hairline gray separate from canvas white. The themeColor meta tag on the captured URL returns #fffffe — a near-white that is effectively canvas. This is a genuinely monochrome system: the brand's visual authority comes from the geometry of the wordmark and the product photography, not from a held-in-reserve saturated accent.

What typefaces does Farfetch use, and what are good substitutes?

Farfetch runs two custom grotesques. Farfetch Basis handles every body, nav, and label surface — declared as `--fontNormal: 'Farfetch Basis','Helvetica Neue',Arial,sans-serif` and `--fontCondensed: 'Farfetch Basis','Helvetica Neue',Arial,sans-serif`. Nimbus Sans Extended D handles the large display tier (38px / --displayLargeFontFamily). Font sizes are declared in rem against a 10px base: 1.3rem (13px) for XS labels and nav links, 1.5rem (15px) for body, 2rem (20px) for medium headings, 2.2rem (22px) for XL labels, 3.8rem (38px) for the display tier. For Farfetch Basis substitutes, Helvetica Neue is the declared fallback; Inter or DM Sans at comparable weights approximate the contemporary grotesque feel. For Nimbus Sans Extended D, Extended or Condensed cuts of Aktiv Grotesk or Neue Haas Grotesk are the closest licensed substitutes.

What corner-radius scale does Farfetch use?

The radius scale is 0px throughout — no borderRadius value above 0px appeared in the extraction across 660 scanned elements. Every nav link, button, input, and label block renders as a pure rectangle. The 0px discipline is the luxury-fashion convention: ZARA, SSENSE, and Aesop all run near-zero radius scales. For Farfetch, the rectangular geometry reinforces the broadsheet-editorial register — softening any corner would push the surface toward the rounded-pill language of consumer marketplaces like Airbnb or Etsy.

Why does Farfetch use rem units instead of px for font sizes?

Farfetch's CSS custom-property system declares all font sizes in rem against a 10px root (set via `html { font-size: 62.5%; }` or equivalent), which makes rem values read as direct pixel multiples: 1.3rem = 13px, 1.5rem = 15px, 2rem = 20px, 3.8rem = 38px. This is a common enterprise-scale pattern — it preserves browser accessibility scaling (users who set a larger root font size get proportionally larger text) while keeping the authored values readable as decimals rather than fractions. For React implementations, the DESIGN.md converts these to px for clarity; the underlying rem values are in the CSS variables.

Can I use this DESIGN.md to build a luxury fashion marketplace or editorial shopping UI?

Yes — the file is structured for Claude, Cursor, or any AI tool that reads the Google Labs DESIGN.md spec. The agent will reproduce Farfetch's captured moves: pure black (#000000) as the sole ink and border color with no accent, Farfetch Basis sans for every label and body surface, Nimbus Sans Extended D at 38px for display moments, 0px corners universally, and 10px-anchored spacing. The token references resolve cleanly — `{colors.ink}` for all text and border, `{colors.canvas}` for the page floor, `{typography.display-xl}` for the 38px display tier. Note: because no brand-layer color exists in the extraction, `button-primary` uses a black fill with white text — the standard monochrome luxury convention — rather than a CTA accent. Supplement with sale-chip or promotion-band colors from the actual storefront if building a full shopping experience.

Farfetch Design System

Farfetch's luxury fashion marketplace design system as a DESIGN.md file.

About Farfetch DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source farfetch.com

E-commerce & Retail
Marketplaces

Farfetch's marketing chrome does what the luxury fashion category reserves for its most confident members: it removes every chromatic signal and lets the monochrome geometry carry the brand. The captured page renders 348 color occurrences — 174 as text, 174 as border — and every single one is pure black (#000000) on a white canvas. No sale-chip orange, no CTA fill, no hover accent, no hairline gray. The FARFETCH wordmark in all-caps sits centered in the top nav at the same black as every other element. Where Farfetch's marketplace rival SSENSE achieves monochrome by using a warm graphite (#333333) as its dominant ink, Farfetch goes to true black — a distinction that reads as a colder, more surgical minimalism at 1440px.

The DESIGN.md file packages the captured system into a machine-readable spec for React tooling. Inside: 3 color tokens (ink black, canvas white, hairline for borders) reflecting the genuine monochrome extraction; 12 typography tokens spanning Farfetch Basis from 13px nav labels up through a 38px Nimbus Sans Extended D display tier, declared on a 10px root rem scale; a single-value radius (0px) covering the entire surface; 10px-anchored spacing; and 15 component definitions covering the centered wordmark nav, mega-menu categories, newsletter form, email input, and primary CTA — the surfaces visible in the captured page.

Feed this file to Claude or Cursor to reproduce Farfetch's captured moves: true black on white with no accent, Farfetch Basis at 13–20px for every utility surface, Nimbus Sans Extended D at 38px for the single display moment, 0px corners universally, and the CSS rem-scale font system. The reason the monochrome discipline is worth studying: Farfetch's product is luxury designer garments at price points where brand trust lives in restraint, not color. The marketing chrome signals that trust by refusing to decorate itself — the boutique photography carries every chromatic job. Most fashion marketplaces that attempt this restraint eventually add a sale-red or a CTA-orange; Farfetch does not.

What makes it distinct

Total monochrome discipline#000000 accounts for all 348 captured color occurrences (174 text, 174 border); no saturated accent exists in the marketing chrome
Two custom grotesquesFarfetch Basis (body, nav, label) pairs with Nimbus Sans Extended D (38px display tier), a combination that reads fashion-broadsheet rather than retail-generic
rem-scale type systemfont sizes declared in rem against a 10px root: 1.3rem nav labels, 1.5rem body, 2rem medium heading, 3.8rem display — each step precise and non-arbitrary
Zero rounding everywhere0px borderRadius on every captured element; the rectangular geometry is the luxury fashion convention, not a default
10px dominant spacingthe most frequent spacing value (6 occurrences) anchoring nav-link padding, label gaps, and the newsletter form rhythm

Live at farfetch.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

farfetch.com

Explore Farfetch

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Farfetch design system FAQ

Common questions about Farfetch's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Farfetch — official site

Farfetch's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.