---
version: alpha
name: "i-D"
description: "Pure white canvas, Univers Next Variable at extreme negative tracking, full-bleed fashion photography, and the winking i-D logotype as the only ornament."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f0f0f0"

  # Text / ink
  ink: "#000000"
  on-background: "#000000"
  on-surface: "#000000"

  # Brand accent — i-D is intentionally near-achromatically neutral; black is the only "brand color"
  primary: "#0a0a0a"
  on-primary: "#ffffff"
  primary-container: "#f0f0f0"

  # State / interaction
  text-hover: "#000000"  # was rgba(0,0,0,0.85) — Google format requires hex
  focus-tint: "#f0f0f0"
  focus-ring: "#0a0a0a"

  # Borders
  border: "#e0e0e0"

  # Shadow tints
  shadow-soft: "#cccccc"  # was rgba(0,0,0,0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -2.16px
  display:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.68px
  heading-section:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: 0px
  button-ui:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.144px
  label-mono:
    fontFamily: "New Letter Gothic, Menlo, Monaco, Lucida Sans Typewriter, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.4px
  caption:
    fontFamily: "Univers Next Variable, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    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: 8px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-item:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  nav-item-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# i-D Design System

## Overview

i-D is the purest expression of the "magazine-as-logo" design philosophy: the entire visual identity hinges on a single typographic conceit — the winking face (i-D) rendered in Helvetica-weight grotesque — and then everything else retreats. The homepage sits on near-pure white (`{colors.background}`) with `{colors.ink}` black as the only real typographic color, and the design's entire visual weight is delegated to fashion photography. Chrome is reduced to near zero. No navigation bars thick with brand color, no gradient overlays, no editorial pull-quotes fighting for room. The photography does the shouting; the page holds the frame.

The typographic voice is Univers Next Variable — a variable-font grotesque with the optical DNA of Univers, the Swiss modernist staple that defined the look of twentieth-century design publishing. i-D runs it with aggressive negative letter-spacing (`-2.16px` at display size), collapsing letterforms into something that reads less like type and more like a texture. At 50px it feels editorial and kinetic; at 14px caption size it relaxes into legibility. The occasional injection of New Letter Gothic monospace for section labels introduces a deliberate lo-fi-editorial tension, as if a typewriter bled into a fashion typesetting system.

The third defining trait is radical negative space. Where most media sites pack modules end to end, i-D maintains generous breathing room between featured stories. The page's grid is spare — one hero article fills the viewport, subsequent stories are surfaced in understated card rows. The only ornament that consistently repeats is the i-D logotype itself: stark, oversized, black on white, a recurring motif that functions more like a magazine cover watermark than a navigation element.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) — photography is the only surface color
- `{colors.ink}` black as the exclusive typographic and brand color; the system is intentionally achromatic
- Univers Next Variable for all display and UI text — Swiss grotesque precision with variable-axis flexibility
- Extreme negative letter-spacing (`-2.16px` at 50px) collapses display type into editorial texture
- New Letter Gothic monospace (`{typography.label-mono}`) for section labels and category kickers — lo-fi-editorial accent
- Zero border-radius on all interactive chrome (`{rounded.none}`) — no softening, no friendliness, strict editorial formalism
- Full-bleed photography with no overlay, no gradient dimming — images fill containers edge to edge
- Minimal navigation: i-D logotype, a sparse horizontal link row, search, subscribe
- `0.8` line-height on nav text — letters stack tightly, turning category labels into design objects
- Motion is moderate: `0.3s ease` link transitions, `0.5s ease` media fades, `0.8s` hero entrances

## Colors

### Primary
- **White** (`{colors.background}`): The dominant canvas. Every page, every section, every modal opens on white. Photography provides all saturation.
- **Black** (`{colors.ink}`): All text, all logotype instances, all borders. The only color that occurs in UI chrome.

### Brand Accent
- **Near-Black** (`{colors.primary}`): Used for primary CTAs, icon fills, and any moment the system needs a "dark surface" that isn't pure black. The difference from `{colors.ink}` is imperceptible to most users — it is a system distinction, not an editorial one.

### Surface & Container
- **Off-White** (`{colors.surface}`): Light-mode hover state for interactive rows and card backgrounds on hover. Also used for `{colors.primary-container}` tinting.
- **Soft Border** (`{colors.border}`): Hairline rules between articles, underlines in the footer link grid, separator between header zones.

### Text States
- **Hover Ink** (`{colors.text-hover}`): Link hover color — effectively identical to default black, with transition delivering the state cue rather than a hue shift.
- **Focus Ring** (`{colors.focus-ring}`): A thin black outline. No color drama; accessibility is handled by shape and position, not accent saturation.

### Shadows
- **Shadow Soft** (`{colors.shadow-soft}`): Barely-visible shadow used under sticky nav at small breakpoints and modal overlays. The system is essentially flat; this token is a safety valve, not a design statement.

## Typography

### Font Family
- **Primary**: `Univers Next Variable`, with fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`. A variable-axis grotesque with weight and width axes. i-D exploits the weight axis for fine display-to-caption differentiation while keeping the same humanist skeleton throughout.
- **Accent Monospace**: `New Letter Gothic`, with fallbacks: `Menlo, Monaco, Lucida Sans Typewriter, monospace`. Deployed exclusively for section kickers and category labels — an editorial lo-fi signal that reads "editorial desk, not digital product."
- **OpenType Features**: Standard variable-font axis usage (wght). No explicit `font-feature-settings` observed in the extracted CSS, but Univers Next Variable supports optical size and width variation in modern browsers.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Hero article headlines — 50px Univers Next, `1.05` line-height, `-2.16px` tracking |
| `display` | Secondary feature headlines — 46px, `1.0` line-height, `-1.68px` tracking |
| `heading-section` | Article-grid headings, bold variants for sub-feature story titles |
| `heading-sub` | Standard weight sub-headlines within article grids |
| `body-large` | Lead body copy, section intros |
| `body` | Default reading copy in articles and cards |
| `nav-link` | Top-nav categories — 16px, `0.8` line-height, tight stacking |
| `button-ui` | Subscribe / search CTAs — 14px, weight 600, subtle letter-spacing |
| `label-mono` | New Letter Gothic section kickers and UPPERCASE category labels |
| `caption` | Bylines, timestamps, photo credits |

### Principles
- **One face, total command**: Univers Next Variable carries everything except section kickers. The single-family discipline is what gives i-D its typographic austerity — no expressive serif pulling in the opposite direction, no geometric contrasting with the humanist grain.
- **Negative tracking is editorial identity**: The `-2.16px` at 50px and `-1.68px` at 46px are not defaults — they are the active design decision that transforms Swiss workhorse grotesque into fashion-press texture.
- **Weight over size**: i-D differentiates hierarchy primarily through weight (400 vs 600 vs 700) rather than size steps. The jump between 50px and 14px is contextual; the weight difference is the signal.
- **Monospace as editorial counterpoint**: New Letter Gothic functions the way a rubber stamp functions on a printed magazine — it reads as "typed annotation," not "digital label."
- **Extreme line-height compression on nav**: `0.8` on navigation text means ascenders touch descenders in multi-line contexts. This is accepted because the nav is single-line; the compression creates visual weight without mass.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

i-D's spacing reads generous relative to its media-site peers. Section transitions breathe with 48–64px gaps. Article cards maintain at least 24px vertical rhythm. The page is not dense — it is curated. Each featured story gets space to be seen.

### Grid & Container
- Max content width: approximately 1800px (takes advantage of wide viewports for full-bleed photography)
- Hero: full-viewport-width photograph with `absolute`-positioned logotype overlay, no text overlay
- Article grid: typically 2-up or 3-up on desktop with generous gutters; single-column on mobile
- Nav: centered horizontal link row, logotype centered or left-aligned

### Whitespace Philosophy
- **Photography is the content, not decoration**: i-D's generous padding exists to isolate photographs so they can function as the primary communicative act — the way a magazine layout lets a print photograph breathe.
- **No decorative fill**: The white canvas is not a failure to use color — it is the editorial stance. White means "the fashion and the person in front of you."
- **Hierarchy through isolation**: Story importance is signaled by how much space surrounds it, not by color or size alone.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default state for all story tiles, article cards, body content |
| Subtle (Level 1) | `box-shadow: 0 1px 4px {colors.shadow-soft}` | Sticky nav drop shadow at scroll on small viewports |
| Card (Level 2) | `box-shadow: 0 2px 8px {colors.shadow-soft}` | Modal overlays, subscription interstitials |
| Elevated (Level 3) | Not used | — |
| Dialog (Level 4+) | `box-shadow: 0 4px 24px {colors.shadow-soft}` | Full-screen overlays and menus |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: i-D's shadow system is deliberately vestigial. The publication uses essentially flat hierarchy — no card lifts off the page, no button glows. When elevation appears, it is purely functional (sticky nav needs a visual boundary when it scrolls over content). The editorial and commercial metaphor is print: ink on paper has no shadow.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything: cards, buttons, inputs, image wrappers, nav elements |
| `sm` | 2px | Rare — only observed on minor interactive microelements |
| `pill` | 9999px | Tag chips and category badges only |

The shape philosophy is binary and severe: no corner radius on any structural element, `9999px` pill only for tag labels. This is the typographic discipline expressed in geometry — Univers Next is a grotesque without apology, and the cards that frame its type share its refusal to soften.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Flat black fill, white type, zero radius, `10px 20px` padding. The subscribe / sign-up CTA. Presence without ornamentation.
- **`button-primary-hover`** — Inverts to white fill, black type, black border appears. Color inversion as the sole interaction cue.
- **`button-secondary`** — White fill, black type, border implied by context. Used for secondary editorial actions ("Read More", "See All").
- **`button-ghost`** — Transparent background, black type. Inline and low-emphasis actions.

### Cards

**Article Card**
- Background: `{colors.background}` (white)
- Border-radius: `{rounded.none}`
- Padding: `0px` — the card has no internal chrome; the photograph bleeds to its edges, caption text sits below
- On hover: headline shifts to `{colors.primary}` (visual-weight near-black), transition `0.3s ease`

### Inputs

- Background: `{colors.background}`
- Border: `1px solid {colors.border}` at rest
- Border on focus: `1px solid {colors.focus-ring}` (black)
- Border-radius: `{rounded.none}`
- Typography: `{typography.body}`
- Padding: `8px 12px`
- Placeholder: `{colors.surface}` tinted — shown via opacity on the text, not a separate color token

### Badges / Tags

- New Letter Gothic monospace (`{typography.label-mono}`) in UPPERCASE
- Background: `{colors.surface}`
- Border-radius: `{rounded.pill}` — the only rounded element in the system
- Padding: `4px 10px`
- Used for section kickers ("FASHION", "BEAUTY", "POLITICS") and content-type labels

### Navigation

- Top bar: i-D logotype (oversized, center or left), minimal horizontal link row — Latest, Shop, Subscribe, Search
- Link typography: `{typography.nav-link}` at `0.8` line-height — densely stacked
- Active or hover: text opacity shift with `0.3s ease` transition
- No background color, no bottom border at rest; shadow appears only when sticky on scroll

## Do's and Don'ts

### Do
- Use `{colors.background}` white as the default canvas — photography provides all hue and saturation
- Apply `{typography.display-hero}` at 50px with `-2.16px` letter-spacing for hero headlines — this is the editorial fingerprint
- Use `{typography.label-mono}` New Letter Gothic UPPERCASE for section kickers and content-type labels
- Default to `{rounded.none}` on all structural components — buttons, cards, inputs, image wrappers
- Allow full-bleed photographs to fill containers edge-to-edge with no overlay, no border-radius
- Use `0.3s ease` transitions on link hover and `0.5s ease` on media loads — the pacing matches editorial gravity
- Keep navigation minimal: logotype + sparse link row + search/subscribe only
- Use `{colors.border}` hairline rules sparingly to separate header zones and footer grids
- Apply `{rounded.pill}` only on tag chips and category badges — it is the single permissible softness
- Treat the i-D logotype as a typographic motif, not a locked-up brand unit — it can be large, cropped, or used as a watermark

### Don't
- Don't add color accents to UI chrome — the system is intentionally achromatic; any color belongs to photography, not interface
- Don't soften button or card corners with intermediate radii (4px–16px) — the system is `{rounded.none}` or `{rounded.pill}`, nothing in between
- Don't overlay text on hero photography — the i-D convention is image first, headline below or in a separate zone
- Don't vary font families for editorial expression — Univers Next Variable covers the full register; serif or display swaps break the discipline
- Don't reduce negative letter-spacing at display sizes — the `-2.16px` tracking is identity, not a bug to fix at small breakpoints
- Don't use drop shadows on cards — the system is flat; elevation is expressed through spacing isolation, not shadow blur
- Don't apply `{colors.primary-container}` tinting to photography containers — never tint imagery with system colors
- Don't introduce decorative dividers or rules between editorial sections — whitespace is the separator
- Don't use the monospace `{typography.label-mono}` for body copy or headlines — it is a category-label accent only
- Don't reduce the hero photograph to less than 50vw — the image is the content; cropping it signals a misunderstanding of the format

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column, hero photograph full-viewport height, logotype scales to ~80px |
| Mobile | 425–699px | Single-column, category nav collapses to icon row, caption below image |
| Tablet | 700–1023px | 2-up article grid, nav expands partially, photography at 50vw |
| Desktop | 1024–1400px | 3-up article grid, full horizontal nav, hero fills ~70vw |
| Large Desktop | >1400px | Full-bleed hero up to 1800px, 3-up grid with generous gutters |

### Touch Targets
- Navigation links: minimum 44px tap height via generous vertical padding
- Subscribe CTA: full-width on mobile, maintaining `10px 20px` horizontal padding
- Article tiles: entire card area is the tap target — no tap-to-reveal

### Collapsing Strategy
- **Navigation**: Horizontal link row collapses to hamburger or icon-only row under 700px
- **Hero photograph**: Maintains aspect ratio (typically 3:4 portrait crop on mobile)
- **Display type**: `display-hero` 50px scales down to approximately 32px on mobile — letter-spacing proportionally reduced
- **Article grid**: 3-up → 2-up → 1-up; gutters tighten from 32px to 16px

### Image Behavior
- Full-bleed hero images fill the container with `object-fit: cover` — no background color shows
- Article card thumbnails maintain a fixed aspect ratio (commonly 4:5 portrait for fashion)
- Images fade in via `opacity 0.5s ease` — no layout shift

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.on-surface}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build an i-D style hero: full-bleed fashion photograph on `{colors.background}` white, no text overlay. Below the image: 50px Univers Next Variable weight 400 headline at `1.05` line-height and `-2.16px` letter-spacing in `{colors.ink}` black. A 14px Univers Next weight 400 byline below in `{colors.ink}` at `1.4` line-height."
- "Create a minimal article card grid (3-up): each card is a zero-radius photograph filling edge-to-edge, headline in `{typography.heading-section}` below, byline in `{typography.caption}`. On hover the headline transitions to `{colors.primary}` over `0.3s ease`. No shadows, no card chrome."
- "Design an i-D navigation bar: `{colors.background}` white, i-D logotype centered in `{typography.display-hero}` Univers Next black. Below: horizontal link row — 'Latest · Shop · Subscribe · Search' — at `{typography.nav-link}` 16px weight 400 `0.8` line-height. Hairline `{colors.border}` bottom rule."
- "Create an i-D category kicker badge: New Letter Gothic 14px weight 500 UPPERCASE 'FASHION', `{colors.surface}` background, `4px 10px` padding, `{rounded.pill}` radius. Stack it above a 46px Univers Next Variable headline with `-1.68px` letter-spacing."
- "Build an i-D subscribe CTA button: `{colors.primary}` fill, `{colors.on-primary}` white text, `{typography.button-ui}` 14px weight 600, zero radius, `10px 20px` padding. On hover: invert to `{colors.background}` white fill, `{colors.ink}` black text and border, `0.2s ease-out`."

### Iteration Guide

1. Start with `{colors.background}` white — the canvas is the constraint. Photography provides all color.
2. Apply `{typography.display-hero}` with `-2.16px` letter-spacing for hero text — the tracking is non-negotiable identity.
3. Use `{rounded.none}` on every structural element. Soften only tag chips with `{rounded.pill}`.
4. No shadows on cards or buttons — isolation through spacing is the elevation language.
5. Use `{typography.label-mono}` New Letter Gothic UPPERCASE for category kickers only.
6. Navigation is minimal: logotype, sparse link row, no mega-menu, no background color.
7. Full-bleed photography, no overlay, no tint — the image is the content.

---

## 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 i-D. Brand names and trademarks belong to their respective owners.