---
version: alpha
name: "Farfetch"
website: "https://www.farfetch.com"
description: >-
  A global luxury fashion marketplace that runs an uncompromising monochrome system — pure black (#000000) covering all 348 captured text and border occurrences on a white canvas, with zero saturated accent voltage anywhere in the marketing chrome. Farfetch Basis handles every body, label, and nav surface while Nimbus Sans Extended D carries the large display tier, both declared via CSS custom properties on a 10px root scale. Corner radii are 0px universally; buttons render as bare-black rectangular outlines or fills; the FARFETCH wordmark in centered all-caps is the chromatic event of the page.

seo:
  title: "Farfetch Design System for React — monochrome #000000, Farfetch Basis, Nimbus Sans Extended D, 15 components"
  metaDescription: "Farfetch's luxury fashion marketplace design system as a DESIGN.md file. Pure monochrome, Farfetch Basis sans, Nimbus Sans Extended D display, 0px corners everywhere. For React, Next.js, and AI coding tools."
  highlights:
    - "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 grotesques — Farfetch 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 system — font 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 everywhere — 0px borderRadius on every captured element; the rectangular geometry is the luxury fashion convention, not a default"
    - "10px dominant spacing — the most frequent spacing value (6 occurrences) anchoring nav-link padding, label gaps, and the newsletter form rhythm"
  tags:
    - "E-commerce & Retail"
    - "Marketplaces"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.

  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.farfetch.com"
      title: "Farfetch — official site"
      description: "Farfetch's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Farfetch's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typefaces does Farfetch use, and what are good substitutes?"
      answer: "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."
    - id: "rounding"
      title: "What corner-radius scale does Farfetch use?"
      answer: "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."
    - id: "rem-scale"
      title: "Why does Farfetch use rem units instead of px for font sizes?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a luxury fashion marketplace or editorial shopping UI?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#000000"
  canvas: "#ffffff"
  hairline: "#000000"

typography:
  display-xl:
    fontFamily: "'Nimbus Sans Extended D', Helvetica, 'Arial Bold', sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  heading-lg:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2727
    letterSpacing: 0
  heading-md:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  body-md:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.3333
    letterSpacing: 0
  body-sm:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.3077
    letterSpacing: 0
  label-md:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.3333
    letterSpacing: 0
  label-sm:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.3077
    letterSpacing: 0
  button-md:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: "normal"
    letterSpacing: 0
  nav-link:
    fontFamily: "'Farfetch Basis', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: "normal"
    letterSpacing: 0

rounded:
  none: "0px"

spacing:
  xs: "2px"
  sm: "8px"
  base: "10px"
  md: "12px"
  lg: "40px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "10px 12px"
    border: "0"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "10px 12px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "10px 12px"
    height: "44px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "10px 12px"
    height: "44px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "10px"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "10px 12px"
    height: "44px"
    borderColor: "{colors.hairline}"
  mega-menu:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.none}"
    padding: "10px 12px"
    borderColor: "{colors.hairline}"
  mega-menu-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    padding: "10px 0px"
  newsletter-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "40px 10px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    padding: "40px 10px"
    borderColor: "{colors.hairline}"
  wordmark:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "10px 0px"
---

## Overview

Farfetch's marketing chrome is one of the most severe monochrome systems in global fashion retail. **Ink totality**: 348 color occurrences on the captured page, all of them #000000, split evenly between text and border. No gray midtone, no hairline-gray softener, no accent — just pure black on white at every scale from the 38px Nimbus Sans Extended D wordmark down to the 13px Farfetch Basis nav link. Where SSENSE (its closest comparable in the luxury multi-brand digital category) moderates the contrast by running graphite #333333 as its dominant ink, Farfetch goes to true black — a choice that reads colder and more architecturally precise at the 1440px viewport.

Typography splits between two custom grotesques with a strict size boundary. Farfetch Basis handles every surface below the display tier — nav links at 13px, body at 15px, labels at 13–15px, buttons at 13px. Nimbus Sans Extended D, an extended-width geometric grotesque, takes the 38px display moment. The pairing is deliberate: Nimbus Sans Extended D's wide tracking at large sizes reads broadsheet-masthead, while Farfetch Basis at small sizes reads contemporary fashion retail. Unlike ZARA's Helvetica Now Text / Didot serif split (where the contrast is grotesque-vs-serif), Farfetch keeps both voices in the grotesque register — the distinction is extended-vs-normal width at the size boundary.

**Key Characteristics:**
- Genuine monochrome: 348 color occurrences, every one pure black (#000000). The most committed single-color system in the luxury fashion category.
- Two-grotesque display split — Nimbus Sans Extended D at 38px, Farfetch Basis at 13–20px — all within the same sans-serif register.
- rem-based type scale against a 10px root: 1.3rem (13px) nav / 1.5rem (15px) body / 2rem (20px) heading / 3.8rem (38px) display.
- 0px corner radius across 660 scanned elements. Every surface is a pure rectangle.
- 10px dominant spacing (6 occurrences) anchoring label gaps and nav-link padding.
- Mega-menu rendered in the same monochrome as every other surface — no panel shadow, no surface-color lift, just a hairline-bordered white panel.
- Newsletter section uses a bare-outline email input and a black-fill "Sign Up" button — the CTA pattern in the absence of any brand voltage.

## Colors

### Structural

- **Ink** (`#000000`): frequency 348. Used as text (174), border (174). The only color in the system. Carries the FARFETCH wordmark, every nav link, every body paragraph, every 1px hairline border, every button outline and fill. Not near-black, not graphite — true zero-lightness black, consistent across every surface. The equal split between text and border uses (174 each) reflects a system where borders and text are treated as equivalent graphic elements.
- **Canvas** (`#ffffff`): the page floor — white background used implicitly throughout. Low extraction count because it is the default, not declared repeatedly on children.

## Typography

### Font Families

The system runs two grotesque families with a clear size-based split. **Farfetch Basis** (a proprietary grotesque commissioned for the brand, declared as `--fontNormal` and `--fontCondensed` in CSS custom properties) covers every utility tier from 13px to 20px. **Nimbus Sans Extended D** (a commercially licensed extended grotesque, declared as `--displayLargeFontFamily`) covers the 38px display moment. Fallbacks walk to Helvetica Neue and Arial for Farfetch Basis, and to Helvetica / Arial Bold for Nimbus Sans Extended D.

The two-grotesque strategy is unusual in luxury fashion, where the editorial convention pairs a serif display face with a grotesque body (SSENSE: JHA Times Now + Favorit SSENSE Inter; Burberry: custom serif + sans; Aesop: Tiempos + HelveticaNow). Farfetch stays entirely within the grotesque register, letting extended width at 38px do the work that a serif would do elsewhere. The effect is closer to contemporary editorial design (032c, System Magazine) than to heritage luxury branding.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Nimbus Sans Extended D | 38px | 400 | 1.2 | Large display heading, centered FARFETCH wordmark context |
| `{typography.heading-lg}` | Farfetch Basis | 22px | 700 | 1.2727 | XL-tier promotional headings |
| `{typography.heading-md}` | Farfetch Basis | 20px | 400 | 1.2 | Medium section headings |
| `{typography.body-md}` | Farfetch Basis | 15px | 400 | 1.3333 | Body paragraphs, newsletter copy |
| `{typography.body-sm}` | Farfetch Basis | 13px | 400 | 1.3077 | Caption and secondary body |
| `{typography.label-md}` | Farfetch Basis | 15px | 400 | 1.3333 | Form labels, mega-menu subcategory text |
| `{typography.label-sm}` | Farfetch Basis | 13px | 400 | 1.3077 | Footer links, chip labels |
| `{typography.button-md}` | Farfetch Basis | 13px | 700 | normal | CTA buttons, mega-menu section headings |
| `{typography.nav-link}` | Farfetch Basis | 13px | 400 | normal | Top-nav links (Womenswear, Menswear, Kidswear) |

### Note on Font Substitutes

Farfetch Basis is a proprietary licensed typeface. Helvetica Neue is the declared fallback; for open-source alternatives, Inter at the same weights approximates the contemporary grotesque proportions. For Nimbus Sans Extended D, Aktiv Grotesk Extended or Neue Haas Grotesk Extended are the closest commercially licensed alternatives; there is no widely-available open-source extended grotesque at the same width.

## Layout

### Spacing System

- **Base unit:** 10px — the most frequent spacing value (6 occurrences), anchoring nav-link padding, input height margins, and label gaps.
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 12px · `{spacing.lg}` 40px.
- **Nav-link padding:** 10px vertical, 12px horizontal — the measured values from the extracted nav-link component (44px height, 10×12px padding).
- **Section padding:** ~40px on the newsletter section.

### Grid & Container

The captured page shows: a centered top-nav bar with the FARFETCH wordmark centered between left-side category links (Womenswear, Menswear, Kidswear with dropdown indicators) and right-side utility icons (search, bag, account). A mega-menu panel open below the nav showing nested category groups (Womenswear › New In, Clothing, Bags, Shoes; Menswear; Kidswear). A newsletter sign-up section at the bottom with bare-outline email input and a black-fill Sign Up button.

### Rhythm

The page is sparse — nav + mega-menu + newsletter. No section-padding rhythm established from the captured surface beyond the 40px newsletter section padding. The mega-menu presents category groups as left-aligned label columns with 10px vertical spacing between items.

## Elevation

No shadow tier exists in the captured system. The mega-menu panel sits over the page content with no box-shadow — the top and bottom 1px hairline borders delineate it. This is the same approach as ZARA and Aesop: no drop shadow on any surface, with hairline borders carrying all depth delineation. The choice reads as a fashion-editorial convention (magazine-page layouts use rules rather than shadows) rather than as a UI oversight.

## Shapes

The radius scale is **zero** across 660 scanned elements. Every nav link, button, input, mega-menu panel, and card renders as a pure rectangle with 0px corners. This rectilinear geometry is the most consistent signal in the luxury fashion category: SSENSE (0px on product cells), ZARA (0px primary, 2px single-step rare), Farfetch (0px total). The rectangular form factor reinforces the system's broadsheet-editorial register and distinguishes it from consumer marketplaces (Airbnb, Etsy, Amazon) that soften corners to signal approachability.

## Components

**`button-primary`** — Black fill, white text, Farfetch Basis 13px / weight 700, 0px radius, 10×12px padding. "Sign Up" in the newsletter section is the canonical instance — a pure-black rectangle with no border.

**`button-secondary`** — White fill, black text, 1px black outline, 0px radius, 10×12px padding. The outlined secondary-action pattern.

**`top-nav`** — White canvas, ink text in Farfetch Basis 13px, 1px bottom hairline border. 44px height. Centered FARFETCH wordmark at the display tier, left-aligned category links, right-aligned utility icons.

**`nav-link`** — Transparent background, ink text in Farfetch Basis 13px, 10×12px padding, 44px height. Measured values from the extraction. Includes dropdown chevron indicators for Womenswear, Menswear, Kidswear.

**`hero-heading`** — Transparent background, ink text in Nimbus Sans Extended D 38px / weight 400. The display tier.

**`section-heading`** — Transparent background, ink text in Farfetch Basis 20px / weight 400. Mid-tier headings.

**`body-paragraph`** — Transparent background, ink text in Farfetch Basis 15px / weight 400.

**`card`** — White canvas, 1px ink border, 0px radius, 10px padding. Product and content card.

**`text-input`** — White canvas, ink text in Farfetch Basis 13px, 1px ink border, 0px radius, 10×12px padding, 44px height. Email input in the newsletter section — bare outline, no fill.

**`mega-menu`** — White canvas, ink text in Farfetch Basis 13px, 1px top and bottom hairline border, 0px radius. Houses nested category groups as left-aligned label columns.

**`mega-menu-heading`** — Transparent background, ink text in Farfetch Basis 13px / weight 700. Section heading within the mega-menu (Womenswear, Menswear, Kidswear headings).

**`newsletter-section`** — White canvas, ink text in Farfetch Basis 15px, 40×10px padding. "Never miss a thing" promotional band.

**`footer`** — White canvas, ink text in Farfetch Basis 13px, 1px top hairline border, 40×10px padding.

**`wordmark`** — The centered FARFETCH logotype. Rendered in the display-xl tier — Nimbus Sans Extended D at 38px or similar — as the single largest typographic element in the nav.

## Do's and Don'ts

**Do** keep every ink and border occurrence at true black (#000000). The system's distinction from SSENSE is that it uses #000000 rather than graphite #333333 — the color temperature difference is the brand signal. Shifting to a warm graphite would read as a different brand.

**Do** let Farfetch Basis handle every surface below 22px and Nimbus Sans Extended D handle the single 38px display moment. The two-grotesque split with a hard size boundary is the typographic system's load-bearing move; introducing Farfetch Basis at 38px or Nimbus Sans Extended D at 15px collapses the distinction.

**Do** use 0px corners on every surface. Adding even 4px to a button or input would import the consumer-marketplace rounded convention and contradict the rectilinear broadsheet register.

**Do** treat the newsletter Sign Up button — ink-black fill, white label, 0px radius — as the template for every primary CTA in the absence of a brand accent color. The monochrome CTA pattern is an intentional system decision, not a placeholder.

**Don't** add a hover color or a background accent to the mega-menu panel. The system has no surface-color elevation — the mega-menu appears on a white canvas with 1px hairline borders. Adding a light-gray panel fill would import a UI-kit convention that breaks the system's monochrome discipline.

**Don't** use weight 400 for button labels. The extraction shows Farfetch Basis at weight 700 for the Sign Up CTA and for mega-menu section headings. Using weight 400 for a button label would make it visually indistinguishable from surrounding body text — the weight difference is the only typographic differentiation available without color.

**Don't** declare any font size between 20px and 38px. The CSS variable system jumps from `--fontSizeL: 2rem` (20px) to `--displayLargeFontSize: 3.8rem` (38px) with nothing between — the 22px `--fontSizeXL` is declared for a different context (promotional labels). Filling the 20–38px gap with interpolated sizes creates a false ladder that doesn't exist in the extracted system.

**Don't** use a near-invisible gray hairline in place of pure black for borders. The 174 border occurrences are all pure black — the system deliberately draws 1px black rules rather than softening them to a mid-gray. A softened hairline would read as generic e-commerce template rather than as Farfetch's razor-line editorial borders.

## Known Gaps

- **Product grid and PDP**: the extractor landed on the mega-menu-open state of the Farfetch Israel localized page. The product grid, product detail page (PDP), size-selector, and add-to-bag button are not captured.
- **Sale and promotion states**: Farfetch runs seasonal sale campaigns with percentage-off labels. Sale chip colors (typically a red or high-contrast accent used only in promotional contexts) are not present in the monochrome extraction.
- **Farfetch Basis weight variants**: the extraction captured weight 400 and 700; the full Farfetch Basis family may include a condensed, light, or bold cut used on product-grid pricing or sub-category labels.
- **Localization and locale-specific overrides**: the captured URL is the Israel locale (farfetch.com/il/). The CSS variable `--fontCondensedNonTranslated` suggests some locales use different typographic settings for non-Latin text.
- **Dark mode and app surfaces**: Farfetch's iOS and Android apps may use different surface and text-color tokens not exposed on the web marketing site.
- **Focus and hover states**: no hover-state or focus-ring color was captured. For accessibility compliance, Farfetch likely uses a visible focus ring — its color is not documented here.
- **Motion**: the mega-menu opens and closes with a transition animation; easing values and duration are not captured.