---
version: alpha
name: "Jil Sander"
description: "German purist luxury rendered digitally — bone-white canvas, a custom geometric Futura, ink-black CTAs, and a geometry so austere that negative space becomes the primary ornament."

colors:
  # Surface / canvas
  background: "#fbfbf6"        # site's dominant canvas — warm near-white, not pure white
  surface: "#ffffff"           # pure white for overlay panels, modals, secondary fills
  surface-dark: "#080f21"      # deep navy-black used on campaign hero sections

  # Ink / text
  ink: "#000000"               # primary text, wordmark, all structural type
  ink-secondary: "#363638"     # secondary labels, sub-navigation, product metadata
  ink-ghost: "#585856"         # placeholder text, hover on light background links

  # Brand — Jil Sander has no chromatic accent; black carries all authority
  primary: "#080f21"           # CTA fill — deep navy-near-black, not pure black
  on-primary: "#fbfbf6"        # text on dark CTA surface — warm near-white

  # Interactive states
  primary-hover: "#000000"     # CTA hover deepens to absolute black
  text-hover: "#000000"        # link hover deepens from near-black to black

  # Borders
  border: "#111111"            # was rgba(0,0,0,0.4) — Google format requires hex; button outlines, structural rules
  border-subtle: "#d5d5d1"     # was rgba — hairline dividers, section rules

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0.24) — Google format requires hex; card/modal shadow tint

typography:
  display-hero:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0.8px
  display:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.4px
  heading-section:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.8px
  heading-sub:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.28px
  body-large:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  body:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0.2px
  nav-link:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.2px
  button-ui:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Jil-Futura, Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  pill: 9999px    # accessibility toggle only — functional, not brand

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary-hover}"

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderBottom: "1px solid {colors.border-subtle}"
  input-focus:
    borderBottom: "1px solid {colors.border}"
    outline: "1px solid {colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 0px

  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 0px
    textTransform: uppercase
---

# Jil Sander Design System

## Overview

Jil Sander's digital presence is controlled geometry held to an extraordinary standard of restraint. The canvas is `{colors.background}` — a warm near-white borrowed from fine paper stock rather than the cold clinical white of a laboratory — and almost nothing sits on it that is not absolutely necessary. The brand wordmark, "JIL SANDER", is set in capital letters at the top of the page in a proprietary geometric typeface, Jil-Futura, rendered at the precise size where it reads as a statement rather than a shout. Navigation is a flat horizontal bar: five categories on the left, two utilities on the right, the brand name ruling the center. Nothing floats, nothing lifts. The architecture of the page mirrors the architecture of the clothes — structure declared and held.

The photography does the speaking. On landing, two full-width panels fill the screen edge to edge: a woman in linen shirting, a man in a striped coat, both shot against a near-white studio background that dissolves into the page canvas. The section labels — "SALE WOMEN", "SALE MEN" — appear in bold uppercase Jil-Futura directly over the image, and the primary CTAs below them are solid `{colors.primary}` rectangles with "SHOP NOW" in small white caps. No shadow, no radius, no gradient: a stamp of intention, not an invitation. The entire interaction language is architectural — you do not hover into softness here, you arrive at a surface and press.

Color exists in a range from black to near-white with no chromatic interruption. `{colors.ink}` carries the wordmark, navigation, body copy, and structural rules. `{colors.on-primary}` appears only on the CTA surface. The nearest thing to an accent is the `{colors.ink-secondary}` warm dark-gray used in supporting metadata — and even that reads as a quiet step down from black rather than a distinct hue. Jil Sander has always understood that restraint is not the absence of a decision but its most committed expression. The digital system honors that exactly.

**Key Characteristics:**
- Warm near-white canvas (`{colors.background}`) — not pure white, but a creamy off-white that reads like fine paper
- Single proprietary typeface, **Jil-Futura** (a custom geometric sans based on Futura), across every typographic role
- No chromatic brand accent — `{colors.ink}` black and `{colors.primary}` deep navy-black carry all CTA authority
- Hard-corner geometry everywhere: `{rounded.none}` on buttons, cards, inputs, image frames, navigation panels
- Uppercase typography as a systemic rule — navigation, CTAs, category labels, product headings all set in capitals
- Generous letter-spacing (0.8–1.28px on headings) renders the geometric face at its most precise
- Full-bleed split-screen photography on landing — the image grid IS the page, UI orbits at the edges
- Motion economy: `0.15s–0.3s ease-in-out` on color and opacity only; no transforms, no lifts, no parallax
- `{typography.button-ui}` at 12px with no tracking — authority through form and fill, not typographic scale
- Hairline `{colors.border-subtle}` underlines on inputs — no box, no background shift, no glow on focus
- Spatial rhythm built on 4px–16px micro-precision with 80–120px macro breathing room between sections
- The brand wordmark is always centered and always in its custom Futura — never substituted, never scaled down

## Colors

### Surface & Canvas
- **Warm Near-White** (`{colors.background}`): The primary canvas — `#fbfbf6`, a warm tone that recalls uncoated print stock. Used for every page surface, product tiles, and the space the photography dissolves into.
- **Pure White** (`{colors.surface}`): Secondary fills, modal panels, overlay drawers. Slightly colder than the canvas — the shift is registered subconsciously.
- **Deep Navy-Black** (`{colors.surface-dark}`): Campaign hero backgrounds when the brand flips to a dark-ground mode. `#080f21` — not pure black, which would be graphic; this has a faint blue depth that reads as photographic.

### Ink / Text
- **Black** (`{colors.ink}`): All primary text, the wordmark, navigation, structural rules. Pure `#000000`.
- **Dark Charcoal** (`{colors.ink-secondary}`): Product metadata, supporting navigation items, secondary labels. `#363638` — a nearly imperceptible step away from black.
- **Mid Warm Gray** (`{colors.ink-ghost}`): Placeholder text, hover states on light backgrounds, fine print. `#585856`.

### Brand Accent
- **Deep Navy-Black CTA** (`{colors.primary}`): The only filled surface in the system, used on primary CTAs. `#080f21` — rich and slightly warmer than pure black, which reads as software; this reads as material.
- **Warm Near-White on Dark** (`{colors.on-primary}`): CTA label text. Matches the canvas `{colors.background}` so the button surface and the page share the same warm paper tone, just inverted.

### Text States
- **Hover Absolute Black** (`{colors.primary-hover}`): CTA hover, deepens from `{colors.primary}` to `#000000`. A shift of perhaps 5% luminance — felt, not seen.
- **Link Hover** (`{colors.text-hover}`): Navigation link hover, deepens to pure black. Hover feedback through value, never through hue.

### Borders
- **Structural Border** (`{colors.border}`): Button outlines and input focus rules. `#111111` — was rgba(0,0,0,0.4), flattened to opaque for token format.
- **Subtle Divider** (`{colors.border-subtle}`): Resting input underlines and section hairlines. `#d5d5d1` — barely-there, like a fold in paper.

## Typography

### Font Family
- **Primary**: `Jil-Futura`, with fallbacks: `Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif`. A proprietary geometric sans serving every typographic role across display, body, navigation, and UI. Based on Futura's architecture but fine-tuned for screen rendering — the circular geometry is preserved at every weight.
- **OpenType Features**: Uppercase transformation applied in CSS (`text-transform: uppercase`) rather than via OpenType small-caps. Letter-spacing values (0.8px–1.28px) are set per-context rather than as a global feature. No stylistic alternates or ligature suppression found in CSS.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 48px Bold — campaign section titles, "SALE WOMEN / SALE MEN" over photography |
| `display` | 32px Regular — secondary feature moments, editorial subheadings |
| `heading-section` | 20px Bold / 0.8px tracking — category headings, editorial group headers |
| `heading-sub` | 16px Regular / 1.28px tracking — product card names, section sub-labels |
| `body-large` | 20px Regular — editorial paragraphs, expanded descriptions |
| `body` | 14px Regular / 0.2px tracking — product descriptions, form labels, running copy |
| `nav-link` | 14px Regular — desktop top navigation, footer link lists |
| `button-ui` | 12px Medium / uppercase — CTA and action labels: "SHOP NOW", "ADD TO BAG" |
| `caption` | 10px Regular — size selectors, color swatch labels, legal fine print |

### Principles
- **Geometric discipline**: Jil-Futura is Futura's rigorous geometry — circular Os, precise stroke modulation — applied with the same conviction the brand applies to cut and construction. The face is not decorative; it is structural.
- **Uppercase as default**: Navigation, CTAs, category labels, section headings all set in capitals. Lowercase appears only in body copy and editorial paragraphs — it signals relaxation within an otherwise formal hierarchy.
- **Tracking as architecture**: At 1.28px on `{typography.heading-sub}` and 0.8px on headings, the letter-spacing opens the geometric face into something monumental. On body and nav at 0.2px, it recedes.
- **Weight as punctuation**: Two weights — Regular (400) for reading and navigation, Bold (700) for declaration. No intermediate weights deployed. Bold is reserved for moments that must land.
- **Scale under control**: 48px is the ceiling. Most UI operates between 10–20px. Jil Sander never uses type scale for emphasis — the black fill and the uppercase setting do that work.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 4px. The most common spacing values are 4px (micro-precision, icon gaps), 16px (component internal padding), and 40–120px (section breathing room).

Jil Sander's pages breathe with editorial conviction. Section gaps approach `{spacing.4xl}` (120px) on desktop. The photography fills the viewport, and the UI elements exist in the negative space around it. The overall rhythm is more architectural floor plan than e-commerce grid.

### Grid & Container
- Max content width: approximately 1200px, with interior gutters around 16–32px
- Desktop product grid: 3–4 columns, minimal equal gutters, no card chrome
- Hero sections: full-bleed or split two-column photography panels, image fills 100% width
- Navigation: horizontal bar; JIL SANDER wordmark centered; left nav (WOMEN, MEN, SHOES, SALE, ABOUT) and right utilities (United States / English, Customer Service, account, search)

### Whitespace Philosophy
- The canvas is the garment's background — it must never compete, only recede
- Photography-first composition: imagery covers the full viewport; type and CTA float at lower left of each panel
- No decorative chrome between sections — no ruled fills, no alternating backgrounds, no tinted bands

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All page surfaces — the entire product experience is categorically flat |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Resting input underlines, section dividers |
| Input Focus (Level 1) | `border-bottom: 1px solid {colors.border}` + `outline: 1px solid {colors.border}` | Input focus state |
| Button Border (Level 1) | `1px solid {colors.border}` | Primary and secondary button outlines |
| Hard Shadow (Level 2) | `box-shadow: 2px 2px 0px 0px {colors.shadow-soft}` | Specific functional panels — a graphic, offset shadow with zero blur |
| Soft Modal (Level 3) | `box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.24)` | Overlay drawers, cart panels |

**Shadow Philosophy**: When Jil Sander uses shadow, it is zero-blur and offset — a graphic device from print design, not a softening gesture. The 2px offset with 0px spread creates a hard duplicate silhouette, like a rubber stamp slightly misaligned. This is rare; the system is otherwise perfectly flat.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, inputs, image frames, navigation panels — all primary UI |
| `pill` | 9999px | Accessibility toggle control only — functional infrastructure, not brand expression |

The system is absolutely square. Not nearly square — absolutely. The single pill-radius element (the accessibility toggle) is functional infrastructure that the brand has not styled to its own language. Every designed UI element — buttons, cards, inputs, category tiles, drawers — is hard-cornered. The Jil Sander aesthetic is architectural precision: the corner is not a gesture, it is a decision.

## Components

The complete component spec lives in the `components:` token block.

### Button variants
- **`button-primary`** — `{colors.primary}` fill (deep navy-black `#080f21`), `{colors.on-primary}` warm near-white text, `{rounded.none}`, 12px Jil-Futura Medium uppercase, `1px solid {colors.border}` outline, `padding: 12px 16px`. Hover deepens to `{colors.primary-hover}` via `0.15s ease-in-out`. Used for "SHOP NOW", "ADD TO BAG", primary category CTAs over photography.
- **`button-secondary`** — Transparent fill, `{colors.ink}` text, same geometry, `1px solid {colors.border}` outline, uppercase. Hover fills to `{colors.surface}`. Used for "WOMEN'S BAGS", "VIEW ALL", tertiary actions.

### Cards
- **`card`** — Flat `{colors.background}` surface, no border, no shadow, `{rounded.none}`, `padding: 0px`. Product photography fills the tile edge to edge; `{typography.heading-sub}` name text and `{typography.body}` price appear below as text-only labels. The card is a presentation frame, not a chrome container.

### Inputs
- **`input`** — `{colors.background}` fill, `border-bottom: 1px solid {colors.border-subtle}` only, no box border, `{rounded.none}`, `{typography.body}` 14px Jil-Futura, `{colors.ink}` text. Focus: underline updates to `{colors.border}` + `outline: 1px solid {colors.border}`. No glow, no background shift, no box-shadow.

### Badges / Tags
- **`badge`** — No fill, 10px uppercase Jil-Futura in `{colors.ink}`. Typographic-only label, positioned absolutely over product tiles for "NEW", "SALE" designation. No chip background, no border.

### Navigation
- **`nav-bar`** — `{colors.background}` fill, `{colors.ink}` text, `{typography.nav-link}` (14px Regular, 0.2px tracking). JIL SANDER wordmark centered in spaced capitals. Link hover transitions `color` to `{colors.text-hover}` and adds `text-decoration: underline` in `0.2s ease`. No background highlight, no bottom border animation.

## Do's and Don'ts

### Do
- Use `{colors.background}` (`#fbfbf6`) as the only canvas — the warm near-white is the system's signature temperature; never replace it with pure white or gray
- Keep all UI elements at `{rounded.none}` — every button, card, input, image frame, and panel is hard-cornered without exception
- Set navigation, CTAs, category labels, and product headings in uppercase — the geometric face demands capital setting to reach its full authority
- Apply generous letter-spacing (0.8–1.28px on headings) — it is how the system transforms a 14–20px heading into a declaration
- Use `{colors.primary}` fill exclusively for primary CTAs — the deep navy-black stamp is the system's single highest-authority visual element
- Let full-bleed photography carry the visual weight — overlay labels and CTAs at lower left; never center-crop the image with type
- Animate only via `color` and `opacity` at `0.15–0.3s ease-in-out` — no transforms, no scale lifts, no shadow-on-hover
- Use the hard-shadow pattern (`2px 2px 0px 0px {colors.shadow-soft}`) when a panel must appear elevated — never use a soft gaussian blur

### Don't
- Don't introduce a chromatic accent — not a seasonal warm, not a sale red, not a hover blue; the system has zero chroma beyond the photography itself
- Don't round corners beyond `{rounded.none}` on any designed element — the single pill-radius exception is the accessibility toggle and should not be replicated
- Don't introduce a second typeface — Jil-Futura and its Futura fallback are the only permitted family; no serif contrast, no monospace code block
- Don't use body copy in mixed case for headlines — uppercase is not a style option for display-level roles, it is mandatory
- Don't increase button font-size for emphasis — the system uses fill and border to declare urgency, not typographic scale
- Don't add box-shadows or hover lifts to product cards — flatness is a signal of confidence, not minimalism as trend
- Don't use `{colors.ink-ghost}` or `{colors.ink-secondary}` as link colors — they are metadata and placeholder roles; interactive links belong to `{colors.ink}`
- Don't vary the wordmark placement — "JIL SANDER" is always centered in the nav bar, always in its custom Futura, always at the same typographic weight

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | < 480px | Single-column; hamburger nav; hero type ~28px; stacked product panels |
| Mobile | 480–767px | Single-column product grid; nav collapsed to hamburger; compact section spacing |
| Tablet | 768–1024px | Two-column product grid; nav still collapsed; wider inner padding |
| Desktop | 1024–1919px | Full horizontal nav; two-column hero panels; 3–4 column product grid |
| Large Desktop | ≥ 1920px | Max container ~1200px centered; full editorial section gaps at `{spacing.4xl}` |

### Touch Targets
- Primary buttons use `padding: 12px 16px` — effective tap height around 40–44px
- Navigation links on mobile expand to full tap-row height in the hamburger drawer
- Product tiles are fully tappable card regions, not just the title text
- Input fields expand to full-width on mobile with minimum 44px effective height

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger icon on mobile; full-screen overlay panel with flat list links in `{typography.nav-link}` style, uppercase
- **Type scale**: `{typography.display-hero}` scales from 48px toward 28–32px on mobile; body and nav-link hold at 14px
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; equal gutters maintained; no card chrome at any breakpoint
- **Spacing**: `{spacing.4xl}` (120px) vertical gaps compress to `{spacing.3xl}` (80px) on tablet and `{spacing.2xl}` (48px) on mobile

### Image Behavior
- Campaign photography is always full-bleed with no max-width cap on hero panels
- Product tile images maintain a consistent portrait aspect ratio at every breakpoint
- Image frames are always `{rounded.none}` — photography never clips to a rounded container
- Studio near-white photography backgrounds dissolve into `{colors.background}` — no visible seam between image and page canvas

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm near-white (`{colors.background}`)
- Primary text: Black (`{colors.ink}`)
- CTA fill: Deep navy-black (`{colors.primary}`)
- CTA text: Warm near-white (`{colors.on-primary}`)
- Secondary text: Dark charcoal (`{colors.ink-secondary}`)
- Section divider: `{colors.border-subtle}`
- Input border resting: `{colors.border-subtle}`
- Input border focus: `{colors.border}`
- Campaign dark ground: `{colors.surface-dark}`

### Example Component Prompts

- "Build a full-bleed split-screen campaign hero on `{colors.background}` (`#fbfbf6`). Divide the viewport into two equal portrait panels — each a studio photograph against a near-white sweep. At lower left of each panel, place a `{typography.display-hero}` (48px Jil-Futura Bold, uppercase, `letter-spacing: 0.8px`) section label in `{colors.ink}`. Below the label, a `{components.button-primary}`: `{colors.primary}` fill, `{colors.on-primary}` text, `{typography.button-ui}` (12px uppercase), `padding: 12px 16px`, `border-radius: 0`, `border: 1px solid {colors.border}`. No overlay, no tint, no decorative element."

- "Create a primary CTA button: `{colors.primary}` fill (`#080f21`), `{colors.on-primary}` text (`#fbfbf6`), `{typography.button-ui}` (12px Jil-Futura Medium, `text-transform: uppercase`), `border-radius: 0`, `padding: 12px 16px`, `border: 1px solid {colors.border}`. Hover: `background-color` transitions to `{colors.primary-hover}` (`#000000`) via `transition: background-color 0.15s ease-in-out`. No shadow, no scale, no lift."

- "Design a product card: `{colors.background}` surface (`#fbfbf6`), `border-radius: 0`, no shadow, no border. Full-width portrait product image edge-to-edge at top — studio near-white background dissolves into page canvas. Below: `{typography.heading-sub}` (16px Jil-Futura, 1.28px tracking, uppercase) product name in `{colors.ink}`, then `{typography.body}` (14px, 0.2px tracking) price in `{colors.ink-secondary}`. No card chrome — frame, not container."

- "Build a desktop navigation bar on `{colors.background}`. JIL SANDER wordmark centered — `{typography.heading-section}` (20px Jil-Futura Bold, 0.8px tracking, uppercase), `{colors.ink}`. Left nav items (WOMEN, MEN, SHOES, SALE, ABOUT) and right utilities (region selector, CUSTOMER SERVICE, account icon, search icon) — all `{typography.nav-link}` (14px Regular). Hover: `color` transitions to `{colors.text-hover}` + `text-decoration: underline`, `0.2s ease`. No background highlight, no bottom border, no shadow."

- "Create a text input: `{colors.background}` fill, no box border, `border-bottom: 1px solid {colors.border-subtle}`, `border-radius: 0`, `{typography.body}` (14px Jil-Futura Regular, 0.2px tracking), `{colors.ink}` text, `{colors.ink-ghost}` placeholder. Focus state: `border-bottom: 1px solid {colors.border}` + `outline: 1px solid {colors.border}`. No glow, no box-shadow, no fill shift. Pair with a `{components.button-primary}` 'SEARCH' button on the right."

- "Render a product grid: 4-column layout on desktop, 16px gutters (`{spacing.md}`), `{colors.background}` surface throughout. Each tile is a `{components.card}` (zero chrome, portrait image top, name in `{typography.heading-sub}` uppercase, price in `{typography.body}`). Section heading above grid: `{typography.heading-section}` (20px Bold, uppercase, 0.8px tracking) in `{colors.ink}`. Between sections: `{spacing.4xl}` (120px) vertical gap."

### Iteration Guide

1. Start on `{colors.background}` (`#fbfbf6`) — not pure white. If any element uses `#ffffff` as the page canvas, replace it. The warm near-white temperature is the system's primary signature.
2. Set every typographic role in Jil-Futura. If a second typeface appears, remove it. Confirm uppercase transformation is applied to all navigation, headings, and CTA labels.
3. Apply `border-radius: 0` to every UI element including buttons, inputs, cards, and image frames. The only pill-radius element is the accessibility toggle.
4. Check that `{colors.primary}` (deep navy-black) appears only on CTA fills. If it appears elsewhere — as a border, a hover highlight, an accent — replace it with `{colors.ink}` or `{colors.border}`.
5. Verify letter-spacing: display and heading roles should carry 0.8–1.28px spacing. Body and nav hold at 0.2px. Button-ui has 0px — the uppercase setting does the work without additional tracking.
6. Confirm motion uses `0.15–0.3s ease-in-out` on `color`, `opacity`, and `text-decoration` only. Remove any transform, translate, or scale animation.
7. Audit shadows: the only permitted shadow is the hard 2px offset type (`2px 2px 0px 0px`) on specific panels, or the `0 1px 2px` soft tint on overlays. No gaussian blurs on product surfaces.
8. Enforce section rhythm: desktop vertical gaps between major sections should approach `{spacing.4xl}` (120px). If the page feels cramped or commercial, add air — restraint requires space.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Jil Sander. Brand names and trademarks belong to their respective owners.