--- version: alpha name: "Aimé Leon Dore" website: "https://www.aimeleondore.com" description: >- A New York City menswear and lifestyle brand founded in 2014 by Teddy Santis, running a near-black ink (#181818) on pure white with a silver-gray mid-tone (#c4c4c4) as the only structural accent — the chrome is severely monochrome, trusting sepia-toned analog-film editorial photography and a dual-typeface system of Financier Display serif at headline moments and Sohne grotesque at 10-12px with 1.4px uppercase tracking for every operational label and nav link to carry the brand's downtown-New York aesthetic without a single chromatic UI token. seo: title: "Aimé Leon Dore Design System for React — near-black #181818, Financier Display + Sohne, 16 components" metaDescription: "Aimé Leon Dore's menswear storefront as a DESIGN.md file. Near-black ink #181818, Financier Display serif, Sohne grotesque, 1.4px uppercase tracking, 5 colors, 16 components. For React and AI tools." highlights: - "Financier Display at the editorial tier — a contemporary serif (Frank Ruhl Libre-adjacent) reserved for seasonal campaign headlines; Sohne covers every operational role from 10px nav caps to button labels" - "Near-black ink (#181818) rather than pure black — 87 total occurrences split 44 text / 42 border; the slight lift from pure black gives the system warmth without introducing a second color" - "1.4px uppercase tracking at 10px — every nav link and operational label runs at this tracking, giving the chrome the measured authority of a luxury house without the weight of a bold tier" - "Sepia-toned analog-film photography as the brand's chromatic vocabulary — editorial images carry all warm tones; the chrome stays rigorously monochrome" - "No declared brand voltage — no accent, no brand color, no hover-state tint; the system's aesthetic weight comes from photography and typographic restraint rather than from a declared hex" tags: - "E-commerce & Retail" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Aimé Leon Dore's website is one of the few menswear storefronts that treats the browser as a gallery wall. The hero is a full-bleed film photograph — shot on analog, processed with a sepia wash that gives the image a 1970s archival quality. Below the fold the layout is two-column: a large warm-toned vintage photograph fills the left panel, and the right panel holds a season identifier ("Spring / Summer '26") in Financier Display and an email capture field. The chrome around these photographs is so minimal it nearly disappears: a near-black (#181818) ink against pure white, a silver-gray (#c4c4c4) for nav labels at 10px with 1.4px uppercase tracking, and no accent color anywhere. Where Kith runs a black-on-white storefront with occasional red accent moments, and where Noah NYC leans on a navy-on-white prep aesthetic, ALD holds a complete chromatic vacancy in the chrome and trusts the photography to carry every brand signal. The DESIGN.md file packages this system into a machine-readable spec for React and AI tools. Inside: 5 color tokens drawn directly from the extraction's 1012-element scan — near-black ink (#181818) at 87 total occurrences, white canvas (#ffffff) at 62 total occurrences, silver-gray mid-tone (#c4c4c4) at 34 total occurrences, deep black accent (#000000) at 6 occurrences, and a light hairline gray (#e5e5e5) at 2 occurrences; 10 typography tokens spanning Financier Display at the seasonal headline tier and Sohne at six operational sizes from 10px nav caps to 12px span labels; a 2-step radius vocabulary that is effectively all zeros except for a single 15px pill on the newsletter sign-up; and 16 component entries covering the full-bleed film-photo hero, the flat monochrome nav, the season-header editorial panel, the email capture field, and the product grid. Feed this file to Claude or Cursor and the agent reproduces ALD's downtown-gallery discipline: near-black rather than pure-black ink, Financier Display for the seasonal season marker, Sohne at 10px with 1.4px tracking for every nav cap and label, no accent, no rounded CTAs, photography-first hierarchy. The system is a useful reference for any brand that wants the aesthetic weight of luxury chrome without the conventional luxury signals — no serif-heavy type ladder, no champagne accent, no pill-button warmth. ALD achieves authority through reduction: the fewer chromatic and geometric decisions the chrome makes, the more the photograph has to say. 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.aimeleondore.com" title: "Aimé Leon Dore — official site" description: "Aimé Leon Dore's public marketing and e-commerce 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 Aimé Leon Dore's primary brand color?" answer: "Aimé Leon Dore does not declare a brand accent color. The dominant structural token is near-black (#181818) at 87 total occurrences — 44 as text, 42 as border, and 1 as background fill — used for every typographic surface, every hairline, and every interactive outline. The canvas is pure white (#ffffff) at 62 occurrences split equally between text-on-dark and border contexts. The only third color in the system is a silver-gray (#c4c4c4) at 34 occurrences used exclusively for nav-link labels in resting state. There is no brand accent, no CTA highlight color, no seasonal tint. All chromatic identity is delegated to the analog-film photography — the sepia tones, the warm grain, the archival color palette of the editorial images. This places ALD in a very small category of e-commerce brands (alongside some Aesop surfaces) that run a genuinely zero-voltage chrome." - id: "typography" title: "What typefaces does Aimé Leon Dore use, and what are their roles?" answer: "ALD runs two families with a strict division of labor. Financier Display (a contemporary serif from Commercial Type, close in spirit to Frank Ruhl Libre and Tiempos Headline) carries the single editorial headline role — the seasonal identifier like 'Spring / Summer '26' extracted at 24px / weight 500 / 24px leading. It appears once above the fold and nowhere else in the captured chrome. Sohne (Klim Type Foundry's grotesque) handles every operational surface: nav links at 10px / 1.4px uppercase tracking, span labels at 12px / 0.6px tracking, button labels at 11px, and the email input at 10px. The system's characteristic voice is the Sohne nav label: 10px, uppercase, 1.4px tracked — the same measured authority as a luxury RTW house's physical hang-tag. Substitutes: Tiempos Headline or ABC Arizona Serif for Financier Display; Inter or ABC Diatype for Sohne at the same tracking values." - id: "photography-role" title: "How does analog-film photography function in ALD's system?" answer: "Photography is not a decoration in ALD's system — it is the system's primary chromatic and emotional content. The hero is a full-bleed film image, shot on analog or processed with analog simulation, that carries all warm tones (sepia, amber, grain, blown-out highlights) that the monochrome chrome deliberately withholds. The screenshot shows a young man on a tropical shore above the fold, and a warm vintage family photograph below the fold in the left column — both images processed with the same analog-warmth grade. The chrome makes no attempt to echo or complement these tones; it stays near-black and white, so the photographic color reads against it with maximum contrast. This is the inverse of what most apparel brands do (matching the seasonal accent color to the photography palette); ALD creates contrast between the photography's warmth and the chrome's severity." - id: "tracking-and-nav" title: "What is the significance of 1.4px letter-spacing at 10px in the nav?" answer: "The 1.4px tracking on 10px Sohne uppercase is the system's most legible typographic signal. At 10px, text is at the minimum readable size for a desktop UI; the 1.4px tracking (equivalent to 140em at this scale) is extraordinarily wide — most luxury brands run 0.5–1px tracking at small sizes, and most DTC brands run 0.2–0.4px. ALD's 1.4px tracking at 10px makes the nav labels feel engraved rather than typeset: each letter sits in space, separated from its neighbors, evoking the embossed lettering on a heritage luggage tag or a watch caseback. The extraction confirms 17 nav-link occurrences at exactly this setting. The DIN W01 button font runs at 1.1px tracking at 11px — slightly less open, but still wide by category standards." - id: "use-in-project" title: "Can I use this DESIGN.md to build a menswear or luxury apparel interface?" answer: "Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce ALD's zero-voltage chrome: near-black ink (#181818) rather than pure black, Financier Display for the single editorial headline, Sohne at 10px with 1.4px uppercase tracking for nav, 0px radius on every interactive surface, and no declared brand accent. Reference tokens directly: {colors.ink} for #181818, {colors.canvas} for #ffffff, {colors.ink-muted} for #c4c4c4, {typography.display-md} for Financier Display at 24px, {typography.nav-link} for Sohne 10px / 1.4px tracking. The critical constraint: do not add a brand accent color. The system's authority comes specifically from having no accent — the moment you introduce a teal or burgundy hover state, the chrome starts speaking over the photography. ALD's system only works if the chrome stays silent." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#181818" canvas: "#ffffff" ink-muted: "#c4c4c4" ink-deep: "#000000" hairline: "#e5e5e5" typography: display-md: fontFamily: "\"Financier Display\", \"Times New Roman\", Times, serif" fontSize: 24px fontWeight: 500 lineHeight: 24px letterSpacing: 0 nav-link: fontFamily: "Sohne, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 10px letterSpacing: "1.4px" nav-link-span: fontFamily: "Sohne, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 38px letterSpacing: "0.6px" label-sm: fontFamily: "Sohne, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 10px letterSpacing: "0.6px" label-xs: fontFamily: "Sohne, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 14px letterSpacing: "1.5px" button-md: fontFamily: "\"DIN W01 Regular\", Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 13px letterSpacing: "1.1px" heading-sm: fontFamily: "\"DIN W01 Regular\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 23px letterSpacing: "1.6px" category-label: fontFamily: "\"DIN W01 Regular\", Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 16px letterSpacing: "1.1px" caption: fontFamily: "Sohne, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 17px letterSpacing: "0.6px" input-label: fontFamily: "Sohne, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 10px letterSpacing: "1.5px" rounded: none: "0px" pill: "15px" spacing: xs: "5px" sm: "10px" md: "15px" lg: "20px" xl: "25px" 2xl: "30px" 3xl: "40px" 4xl: "50px" components: button-primary: backgroundColor: "{colors.ink-deep}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "10px 20px" height: "37px" border: "0" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "10px 20px" height: "37px" borderColor: "{colors.ink}" top-nav: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "5px 0px" height: "20px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.nav-link}" padding: "5px 0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0" hero-section: backgroundColor: "{colors.ink-deep}" textColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "0" editorial-panel: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "20px 25px 25px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.caption}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-sm}" rounded: "{rounded.none}" padding: "{spacing.md}" product-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.category-label}" rounded: "{rounded.none}" padding: "0" text-input: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.input-label}" rounded: "{rounded.none}" padding: "0px 52px 0px 12px" height: "12px" borderColor: "{colors.ink}" newsletter-pill: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "0px 25px" borderColor: "{colors.ink}" region-selector: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-sm}" rounded: "{rounded.none}" padding: "10px 20px" height: "37px" borderColor: "{colors.ink}" modal-overlay: backgroundColor: "{colors.ink-deep}" textColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "36px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.nav-link}" padding: "50px 15px" category-nav: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link-span}" padding: "5px 0px" --- ## Overview Aimé Leon Dore's chrome is so minimal it reads as a deliberate act of restraint. **Photographed silence.** Where Supreme runs a red-on-white brand block, and where Kith toggles a black-and-red accent system, ALD gives the chrome nothing to say — near-black ink (#181818), pure white canvas, a silver-gray (#c4c4c4) for nav labels, and zero chromatic accent anywhere in the UI. The design vocabulary delegates entirely to photography: sepia-toned analog-film images carry every warm tone, every brand signal, every emotional content. The chrome is a white gallery wall that holds the photographs without competing with them. The typographic system divides into two precise voices. Financier Display (a contemporary serif from Commercial Type) surfaces exactly once in the captured page: the seasonal identifier "Spring / Summer '26" at 24px / weight 500 / tight 24px leading — placed in the right-column editorial panel beside a warm vintage family photograph. Sohne (Klim Type Foundry) handles every other role: nav links at 10px uppercase with 1.4px tracking, span labels at 12px with 0.6px tracking, input text at 10px. The 1.4px uppercase tracking at 10px is the system's most distinctive tonal choice — the letters sit apart with the measured air of a luxury label, not the compressed efficiency of an e-commerce UI. The radius vocabulary is nearly absent. `{rounded.none}` (0px) governs every interactive surface — button, input, region selector, product tile. One exception: the newsletter sign-up sits inside a 15px-radius pill (`{rounded.pill}`), and it is the only rounded element in the system. Every other surface holds hard right angles. **Key Characteristics:** - Five total color tokens, all achromatic: near-black ink (`{colors.ink}` — #181818), white canvas (`{colors.canvas}` — #ffffff), silver-gray muted (`{colors.ink-muted}` — #c4c4c4), deep black accent (`{colors.ink-deep}` — #000000), and a light hairline gray (`{colors.hairline}` — #e5e5e5). - Financier Display serif at the single editorial headline tier (24px / 500 / 24px leading) — reserved exclusively for the seasonal campaign identifier. - Sohne grotesque at 10px / uppercase / 1.4px tracking for every nav link — the system's most legible typographic brand signature. - 0px radius on every interactive surface except one 15px newsletter pill — the hard-angle geometry holds authority without a serif brand convention. - Sepia-toned analog-film photography carries all chromatic identity; the chrome withholds color to maximize the photography's tonal authority. - 1012 elements scanned in extraction — the richest data set of the three brands — confirming the monochrome discipline holds across the full DOM. - DIN W01 Regular as the third typeface for heading and button roles — a compressed, functional grotesk that handles mid-hierarchy labels between Financier Display headlines and Sohne nav caps. ## Colors ### Structural - **Ink** (`{colors.ink}` — #181818): frequency 87. Used as text (44), border (42), background (1). The dominant structural tone — text, hairlines, interactive outlines. Not pure black; the near-black sits at approximately lightness 0.209 in OKLCH, which softens the ink's severity against the pure white canvas and gives the system a quality of depth that pure black-on-white would not achieve. - **Canvas** (`{colors.canvas}` — #ffffff): frequency 62. Used as text-on-dark (30) and border (31). The page floor and every light surface. Wired as the site's `themeColor`. Pure white with no warmth offset — the photography provides all temperature. ### Mid-tone - **Ink Muted** (`{colors.ink-muted}` — #c4c4c4): frequency 34. Used as text (17) and border (17). The sole mid-tone in the system — wired exclusively to nav-link labels in their resting state. At 10px with 1.4px uppercase tracking, the silver-gray reads as a deliberate quieting: the nav is present but not insistent. On hover or active state, links would conventionally shift to `{colors.ink}` — the color change acts as the interaction signal in a system with no fill-based hover states. ### Accent + Hairline - **Ink Deep** (`{colors.ink-deep}` — #000000): frequency 6. Used as text (3), background (1), border (2). Pure black appears in limited contexts — the "skip to content" accessibility button and certain structural borders where the near-black ink isn't assertive enough. Not a brand accent; a structural override. - **Hairline** (`{colors.hairline}` — #e5e5e5): frequency 2. Used as border (2). The lightest surface separator — appears on secondary dividers and the email-capture field's bottom rule. Not the dominant border tone (that's `{colors.ink}` at 42 occurrences); a rare softer-edge moment. ## Typography ### Font Families The system runs three families with rigorously assigned roles. **Financier Display** (Commercial Type) at the editorial display tier — a contemporary serif with high contrast and a slightly bracketed stroke that reads as considered rather than institutional. **Sohne** (Klim Type Foundry) as the operational grotesque — tight, geometric, precise — running every nav link, label, and input role. **DIN W01 Regular** as the mid-hierarchy industrial grotesk — slightly compressed, less optically precise than Sohne, used for heading-sm and button-md roles where a utilitarian register is appropriate. The three-family system is a signal in itself: the brand has enough typographic intentionality to assign a distinct voice to display, operational, and functional tiers. ### Hierarchy | Token | Size | Weight | Line Height | Tracking | Use | |---|---|---|---|---|---| | `{typography.display-md}` | 24px | 500 | 24px | 0 | Financier Display — seasonal campaign headline | | `{typography.heading-sm}` | 16px | 400 | 23px | 1.6px | DIN W01 — section heading, region selector label | | `{typography.nav-link}` | 10px | 400 | 10px | 1.4px | Sohne — nav caps, primary navigation (uppercase) | | `{typography.nav-link-span}` | 12px | 400 | 38px | 0.6px | Sohne — secondary nav span labels (uppercase) | | `{typography.button-md}` | 11px | 400 | 13px | 1.1px | DIN W01 — button labels (uppercase) | | `{typography.category-label}` | 11px | 400 | 16px | 1.1px | DIN W01 — product category sub-labels | | `{typography.label-sm}` | 10px | 400 | 10px | 0.6px | Sohne — general UI labels, metadata | | `{typography.label-xs}` | 10px | 400 | 14px | 1.5px | Sohne — footer micro-labels, subscription labels | | `{typography.caption}` | 12px | 400 | 17px | 0.6px | Sohne — body copy, editorial captions | | `{typography.input-label}` | 10px | 400 | 10px | 1.5px | Sohne — email input placeholder | ### The 1.4px tracking at 10px The nav-link setting deserves its own note. 1.4px at 10px is a tracking ratio of 140 per-mille — most luxury brands sit at 50–100 per-mille at small sizes, and most DTC brands run 20–40. ALD's 1.4px tracking at 10px places letters into a separation that reads as deliberate space, not as a technical default. Seventeen nav-link instances extracted at this exact specification across the captured DOM confirm that the value holds consistently. The tracking makes the 10px Sohne labels feel larger and more intentional than their point size would suggest. ### Substitutes Financier Display is licensed. **ABC Arizona Serif** or **Tiempos Headline** at weight 500 approximate the high-contrast contemporary serif voice. For Sohne at the nav-link tier, **ABC Diatype** is the closest optical match; **Inter** at the same tracking values is the accessible substitute. DIN W01 Regular maps cleanly to **Input Sans** or the free **DIN Alternate**. ## Layout ### Spacing System The dominant spacing unit is 15px — extracted at count 19 across padding and gap applications. The scale follows a 5px base: `{spacing.xs}` 5px · `{spacing.sm}` 10px · `{spacing.md}` 15px · `{spacing.lg}` 20px · `{spacing.xl}` 25px · `{spacing.2xl}` 30px · `{spacing.3xl}` 40px · `{spacing.4xl}` 50px. This 5px base is unusual — most apparel brands anchor on 4px or 8px. The 5px unit gives the layout a slightly non-standard feeling: product-grid gutters don't snap to the 8px grid convention, and nav padding runs 5px vertical / 0 horizontal on nav links. ### Grid & Container The hero section is full-bleed (1424px wide, matching the extracted component width). Below the fold the layout is two-column at desktop: the left column holds a large editorial photograph (approximately 50% viewport width), and the right column holds the season identifier, email capture, and mailing list CTA. This two-column format is not a product grid — it is an editorial split — which places ALD's homepage format closer to a fashion magazine layout than to a standard e-commerce product-first homepage. ### Rhythm Section padding is generous at the editorial level — 50px at the footer, 36px in the region-modal, 20–25px in the editorial panel. The 5px base spacing unit and the 1.4px uppercase tracking combine to give the layout more air per pixel than the numbers suggest; the effect is an unhurried cadence that differs from the compressed inventory-density of most e-commerce homepages. ## Elevation The system has no shadow tier. The 1012-element extraction records zero shadow values. Depth in the system comes from the monochrome photography — the film grain, the tonal depth of the sepia-processed images — rather than from any UI-layer drop shadow or surface-ladder elevation. The region-selector modal overlays the hero using an ink-black scrim rather than a gray shadow; the scrim connects the modal to the same pure-black vocabulary as the site's darkest surface rather than introducing a shadow-color convention. ## Shapes The radius scale is near-zero. `{rounded.none}` (0px) governs every interactive surface in the operational chrome: button, input, region-selector, product tile, and every card surface. The single exception is `{rounded.pill}` (15px), which appears once — on the newsletter sign-up element. The 15px value is modest as pills go (not 9999px full-pill), which keeps the rounded element from reading as a soft or approachable surface and instead reads as a field boundary. The hard-angle discipline is consistent with the brand's editorial austerity: right angles don't apologize for taking up space. ## Components **`button-primary`** — Deep black `{colors.ink-deep}` fill, white text in DIN W01 at `{typography.button-md}` (11px / 1.1px tracking / uppercase), `{rounded.none}` 0px radius, 10×20px padding, 37px height. Captured as the "skip to content" accessibility button — the only button with a background fill. Production use: "Add to bag" and primary checkout CTAs would inherit this treatment. **`button-secondary`** — Transparent fill, ink text, 1px ink border, `{rounded.none}` 0px radius. Used for the "Save" button in the region-selector modal. The ghost treatment gives secondary actions presence without fill-weight. **`top-nav`** — Transparent surface over the hero image, nav links in silver-gray `{colors.ink-muted}` at `{typography.nav-link}` (10px / 1.4px tracking / uppercase). No height declared as a fixed bar — the nav sits over the full-bleed hero as a typographic layer. **`nav-link`** — Silver-gray `{colors.ink-muted}` text at `{typography.nav-link}` (10px / uppercase / 1.4px tracking), 5×0px padding. "ALL PRODUCTS" is the extracted canonical instance. 17 nav-link instances in the DOM at this exact specification. **`hero-section`** — Full-bleed ink-deep `{colors.ink-deep}` canvas carrying the analog-film hero photograph. Zero padding on the image frame; the photograph fills the section edge-to-edge. The darkened state (seen in the screenshot when the region-selector modal is open) shows the hero at reduced opacity beneath the scrim. **`hero-heading`** — Ink `{colors.ink}` text at `{typography.display-md}` (Financier Display, 24px / weight 500 / 24px leading). The captured instance: "Spring / Summer '26" — a season identifier, not a marketing headline. Located in the right-column editorial panel rather than over the hero photograph. **`editorial-panel`** — White `{colors.canvas}` surface, 20×25×25px padding. The right column below the fold: holds the Financier Display season identifier, the email capture field, and the mailing list CTA. No border, no surface contrast against the page canvas — the panel lives against the canvas without a card frame. **`body-paragraph`** — Ink text at `{typography.caption}` (Sohne, 12px / 0.6px tracking), used for editorial body copy in the two-column section and any in-page descriptive content. **`card`** — White canvas surface, near-black ink text at `{typography.label-sm}`, `{rounded.none}` 0px radius, 15px padding. No declared border in the base state; hairline border may appear on hover. **`product-tile`** — White canvas surface, photography fills the tile edge-to-edge without overlay; DIN W01 category label appears below at `{typography.category-label}` (11px / 1.1px tracking / uppercase) in near-black ink. **`text-input`** — Transparent background, near-black ink text at `{typography.input-label}` (10px / 1.5px tracking), `{rounded.none}` 0px radius, 0 horizontal / 52px right (arrow button space) padding, 1px ink border on the bottom only — an underline-style input rather than a full-border box. **`newsletter-pill`** — Transparent fill with 15px radius (`{rounded.pill}`), near-black ink border, DIN W01 button label at `{typography.button-md}` (11px / 1.1px tracking / uppercase). The only rounded element in the operational chrome. **`region-selector`** — White canvas fill, near-black ink text, 1px ink border, `{rounded.none}` 0px radius, 10×20px padding, 37px height. The dropdown for country selection in the region modal — a standard select styled to the system's flat, hard-edge convention. **`modal-overlay`** — Deep black `{colors.ink-deep}` scrim, 36px padding, no radius. The region-selector modal uses a full-page ink scrim rather than a centered card with drop shadow. The scrim background connects the modal to the darkest surface in the system. **`footer`** — White canvas, silver-gray `{colors.ink-muted}` text at `{typography.nav-link}` (10px / 1.4px tracking / uppercase), 50×15px padding. The footer's typographic treatment is identical to the nav — the same Sohne caps at the same tracking — which makes the footer feel like an extension of the navigation rather than a separate information tier. **`category-nav`** — Transparent surface, near-black ink text at `{typography.nav-link-span}` (Sohne, 12px / 38px leading / 0.6px tracking / uppercase). The secondary category navigation band below the primary nav, used for product-type browsing. ## Do's and Don'ts **Do** hold the chrome at zero chromatic accent. The system's authority comes precisely from withholding — no hover tint, no CTA highlight, no seasonal accent. The moment a brand accent color appears in the chrome, the photography's tonal identity has to compete with it. The monochrome discipline only works if it is total. **Do** use `{colors.ink}` (#181818) — not pure `#000000` — for the dominant ink. The near-black sits 0.209 in OKLCH lightness above pure black; this slight lift is what separates the ink from the photographic shadows in the editorial images, giving text a presence distinct from the darkest tones in the photography. Pure black (#000000) should be reserved for the scrim and specific structural overrides. **Do** run Sohne nav links at exactly `{typography.nav-link}` — 10px / uppercase / 1.4px tracking. Any reduction in tracking (say, 0.8px) shifts the register from luxury-measured to standard-compact. The 1.4px tracking at 10px is legible at desktop viewing distance and illegible on mobile — which is why the mobile nav collapses to a burger or larger type. **Do** constrain Financier Display to the seasonal headline role. The serif appears once in the extracted DOM; using it across headings, sub-headings, or product names would dilute the deliberate contrast between the operational Sohne voice and the editorial serif moment. **Don't** introduce a hover background fill on nav links or buttons. The system has no declared hover-state fill colors — the only hover signal is a text-color shift from `{colors.ink-muted}` to `{colors.ink}` on nav links. Adding a gray or cream fill on hover would introduce a third surface color into a system that runs on two. **Don't** use `{colors.hairline}` (#e5e5e5) as a text color. It appears only 2 times in the extraction, both as a border value. At 10-16px body sizes it falls below the WCAG AA contrast threshold against both the white canvas and the near-black ink surfaces. Reserve it for the softest possible structural separator only. **Don't** apply `{rounded.pill}` (15px) beyond the newsletter sign-up element. The system has one rounded surface; expanding that vocabulary to buttons, inputs, or product tiles would make the geometric language ambiguous. Right angles are the system's default; the single 15px pill is the exception that makes the rule legible. **Don't** use weights above 500 in any typographic role. The system's heaviest weight is 500 on the Financier Display headline. DIN W01 and Sohne both run at weight 400 everywhere. Introducing a 600 or 700 weight for emphasis — even on a product name or CTA — would assert a hierarchical forcefulness the system deliberately avoids. ## Known Gaps - **Product detail page**: the PDP variant selector, size grid, fit details, and add-to-bag CTA are not captured in the homepage extraction. The add-to-bag CTA likely follows the button-primary treatment but this is inferred, not extracted. - **Cart and checkout surfaces**: drawer cart, checkout form, payment fields, and order confirmation are absent. These surfaces may introduce form-specific affordances (floating labels, validation states) not visible in the marketing extraction. - **Hover and active states**: the only documented state transition is the inferred nav-link color shift from silver-gray to near-black. Full interactive state matrices are not captured from the static marketing page extraction. - **Mobile breakpoints**: the desktop-first extraction does not capture the collapsed nav, mobile hero format, or single-column product grid. The 10px / 1.4px tracking nav caps are likely replaced with larger type or a burger menu at mobile widths. - **Product photography conventions**: the editorial sepia-processing and analog-film grading visible in the screenshot are not formally specified as image treatment tokens; this is an art-direction convention rather than a CSS system. - **Drop-shadow on modal**: the region-selector modal uses an ink-black scrim; the presence or absence of a box-shadow on the modal panel itself is not confirmed in the extraction.