---
version: alpha
name: "Architectural Digest"
description: "Condé Nast's luxury shelter magazine design system — warm ivory canvas, ink-dark editorial type, Adobe Garamond Pro headlines, CNSans utility chrome, and a strictly monochromatic palette that lets photography command every page."

colors:
  # Canvas / surface
  background: "#ffffff"
  surface: "#f7f7f7"    # light warm tint — section rails, newsletter panels
  surface-dark: "#1c1c1c"    # cinematic feature panels, dark hero modules

  # Ink / text
  ink: "#000000"
  ink-editorial: "#2b2b2b"   # body copy — warm near-black, softer than pure ink
  on-background: "#2b2b2b"
  on-surface: "#2b2b2b"

  # Brand accent — no chromatic accent; AD is monochromatic
  primary: "#000000"         # all primary CTAs run in ink-black
  on-primary: "#ffffff"
  primary-container: "#f7f7f7"  # tinted surface for subscription panels

  # Text interaction states
  text-hover: "#767676"      # link hover — muted mid-gray
  ink-muted: "#767676"       # bylines, timestamps, metadata
  ink-disabled: "#bababa"    # inactive nav items, disabled controls

  # Borders & dividers
  border: "#e5e5e5"          # hairline rules between feed items
  border-strong: "#000000"   # ink border on inputs, ghost buttons

  # Focus
  focus-ring: "#000000"      # hard black focus outline — 2px

  # Shadows
  shadow-soft: "#2b2b2b"     # was rgba(0,0,0,0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "EB Garamond, Adobe Garamond Pro, Times New Roman, Times, serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.04
    letterSpacing: -0.5px
  display:
    fontFamily: "EB Garamond, Adobe Garamond Pro, Times New Roman, Times, serif"
    fontSize: 34px
    fontWeight: 300
    lineHeight: 1.06
    letterSpacing: 0px
  heading-section:
    fontFamily: "EB Garamond, Adobe Garamond Pro, Times New Roman, Times, serif"
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "EB Garamond, Adobe Garamond Pro, Times New Roman, Times, serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Crimson Text, Georgia, Times New Roman, Times, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.1px
  body:
    fontFamily: "Crimson Text, Georgia, Times New Roman, Times, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.1px
  nav-link:
    fontFamily: "CN Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 1.5px
  button-ui:
    fontFamily: "CN Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 1.5px
  label-category:
    fontFamily: "CN Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.64
    letterSpacing: 1.1px
  caption:
    fontFamily: "CN Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 1.0px
  meta:
    fontFamily: "Inter, CN Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.1px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.primary}
  button-primary-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 2px solid {colors.border-strong}
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-editorial}"
    rounded: "{rounded.none}"
    padding: 0px
    borderBottom: 1px solid {colors.border}
  card-feature:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 48px 48px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-editorial}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    border: 1px solid {colors.border-strong}
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-editorial}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-editorial}"
    typography: "{typography.label-category}"
    rounded: "{rounded.none}"
    padding: 0px
  badge-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-category}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-editorial}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-item-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
---

# Architectural Digest Design System

## Overview

Architectural Digest operates in the rarest lane of editorial design: a luxury shelter magazine that has spent a century training its readers to trust the photography above everything else. The design system's primary ambition is quiet disappearance. The canvas is a stark pure white (`{colors.background}`), the type is dark and classical, and no chromatic accent color is permitted to compete with the room-as-photograph that fills each lead position. When you strip away the image, what remains is one of the most rigorous monochromatic systems in shelter publishing — ink-dark on white, with no gradient, no color splash, and no margin of typographic ambiguity.

The typographic architecture is a two-family split familiar to Condé Nast readers. **Adobe Garamond Pro** (at light weight 300 for display, weight 400 for standfirsts) handles every headline, sub-headline, and display moment. It is a choice of deliberate authority: Garamond is the typeface of architectural drawing titles, of folio volumes on Palladian villas, of art-world auction catalogues. At 56px and weight 300, the headline barely presses on the page — confidence through restraint. **Crimson Text** (a Google Fonts stand-in for the proprietary face) carries the body column, paired with **CN Sans** at 12px uppercase for navigation chrome, category labels, and all UI furniture. The CN Sans labels always run with generous tracking (1.0–2.2px) and uppercase transforms — the convention of luxury retail, borrowed into shelter media.

The system's signature is its devotion to the hairline. Where other editorial publications use shadow, tinted panels, or card chrome to organize their hierarchy, AD uses `1px solid {colors.border}` and generous vertical space. Every article in the feed is separated by a hairline rule and 32–48px of breathing room. Cards have no radius, no shadow, no background fill — only the image, the Garamond headline, and a ruled gap beneath. The only structural use of dark backgrounds is the occasional cinematic feature panel (`{colors.surface-dark}`), which inverts the system for covers and hero spreads without introducing any new color.

**Key Characteristics:**
- Adobe Garamond Pro at weight 300 for all display text — headline as whisper, not declaration
- Pure white canvas (`{colors.background}`) — no warm ivory, no off-white tint outside tinted surface panels
- Strictly monochromatic palette — `{colors.ink}`, `{colors.ink-editorial}`, `{colors.ink-muted}`, and `{colors.border}` carry the entire hierarchy
- CN Sans at 12px uppercase with 1.5px tracking for all navigation and category labels — the luxury retail labeling convention
- Hairline rules (`{colors.border}`) as the primary structural device; no shadows on cards
- `{rounded.none}` throughout — zero border-radius on every interactive element, input, and card
- `{colors.surface-dark}` panels for cinematic features — the only full-chromatic inversion
- Photography is content; layout is support — maximum image, minimum chrome
- Long uppercase category labels (e.g., "INTERIORS", "TRAVEL") precede every headline in CN Sans — editorial rhythm, not decoration
- `{typography.body}` and `{typography.body-large}` in Crimson Text at 20px weight 400, wide-set at 1.40 line-height for immersive article reading
- Transition animations at 0.2s ease-in-out for links and buttons — present but imperceptible
- The AD monogram wordmark lives in the header at 110×72px — never cropped or colorized

## Colors

### Primary
- **Pure White** (`{colors.background}`): The magazine page. Every article list, every article body, every nav background. AD never uses a warm off-white or cream — the white is press-white.
- **Near-Black Editorial** (`{colors.ink-editorial}`): Primary body text, headline text, and link color. #2b2b2b rather than pure #000000 — a warmth reduction that reads as "ink on paper" rather than "pixel on screen."
- **Ink Black** (`{colors.ink}`): Hard graphic moments — the wordmark, thick border lines, button fills, category rubric tops. Reserved for structural ink, not running text.

### Brand Accent
- **No chromatic accent.** Architectural Digest's primary (`{colors.primary}`) is ink-black. The closest thing to an accent is the category label system — also black, but at 12px uppercase — and the cinematic dark panel (`{colors.surface-dark}`). There is no editorial red, no AD gold, no shelter-magazine sage. Photography provides all chromatism.

### Neutrals & Text States
- **Metadata Gray** (`{colors.ink-muted}`): Bylines, timestamps, photographer credits, secondary nav links, link hover state.
- **Disabled / Inactive** (`{colors.ink-disabled}`): Inactive navigation items, disabled form controls.
- **Hairline** (`{colors.border}`): The system's primary spatial device — 1px solid rules between feed items, section breaks, card bottoms.
- **Border Strong** (`{colors.border-strong}`): Ghost button borders, form input strokes. Full ink, not hairline.
- **Light Surface** (`{colors.surface}`): Newsletter signup modules, sidebar rail backgrounds, footer panels.
- **Dark Feature** (`{colors.surface-dark}`): Cinematic cover features, editorial spotlight panels. Inverts the system.

### Focus & Interaction
- **Focus Ring** (`{colors.focus-ring}`): 2px hard black outline — keyboard accessibility without softness.
- **Text Hover** (`{colors.text-hover}`): Link hover degrades from near-black to this mid-gray — the link bleaches rather than highlights.

## Typography

### Font Family
- **Display / Headlines**: `EB Garamond` (closest Google Font match for Adobe Garamond Pro), with fallbacks: `Adobe Garamond Pro, Times New Roman, Times, serif`. Used for all h1/h2/h3 display moments and standfirsts. Weight 300 at large sizes is AD's signature — the lightest a quality Garamond will run without falling apart.
- **Body Reading**: `Crimson Text`, with fallbacks: `Georgia, Times New Roman, Times, serif`. The body serif: 20px, 1.40 line-height, 0.1px letter-spacing. Generous line-height appropriate for long-form shelter features.
- **UI / Navigation**: `CN Sans` (Condé Nast's proprietary grotesque), with fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`. All navigation, category labels, captions, and button text. Always uppercase with wide tracking in structural moments.
- **Auxiliary**: `Inter` for form elements and certain meta-level controls.
- **OpenType Features**: Standard ligatures in Garamond body; proportional figures in CN Sans UI.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Homepage lead headline, cover features — 56px Garamond weight 300 |
| `display` | Section front headlines, major article cards — 34px Garamond weight 300 |
| `heading-section` | Secondary article cards, grid standfirsts — 27px Garamond weight 400 |
| `heading-sub` | Tertiary headlines, sidebar leads, related content — 21px Garamond |
| `body-large` | Article standfirst / intro paragraph — 20px Crimson Text |
| `body` | Article body column — 20px Crimson Text, 1.40 line-height |
| `nav-link` | Navigation, section labels — 12px CN Sans uppercase, 1.5px tracking |
| `button-ui` | CTAs ("SUBSCRIBE", "DON'T MISS OUT") — 12px CN Sans uppercase |
| `label-category` | Category rubrics above headlines — 11px CN Sans uppercase, tight |
| `caption` | Photo credits, figure captions — 11px CN Sans uppercase |
| `meta` | Bylines, timestamps, article metadata — 14px Inter or CN Sans |

### Principles
- Garamond at weight 300 is the house display voice — avoid weight 500 or bold for any headline
- CN Sans uppercase is the only sans permitted in the running layout — never set body copy in CN Sans
- The two-family split is structural: Garamond = editorial authority; CN Sans = navigational utility; never swap them
- Body type at 20px is intentionally generous — AD's readers are reading on-screen what a print reader would encounter at comfortable lounging distance
- Letter-spacing in CN Sans labels (1.0–2.2px) is non-negotiable for the luxury-retail register the system maintains

## Layout

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

AD's layout is built on generous vertical intervals. The editorial rhythm prioritizes breathing room between articles — each card in the feed gets 32–48px of vertical separation, hairline-ruled. Horizontal padding is similarly generous: article columns rarely fill the viewport at full width on large desktop.

### Grid & Container
- Max content width: 1280px (desktop), with a 1600px large-desktop scale variant
- Homepage: 12-column grid; lead feature spans 8 or 12 columns full-bleed
- Article feed: 3-column desktop grid, 2-column tablet, 1-column mobile
- Article reading column: ~700–740px max — luxury shelter reads long
- Breakpoints: 320px, 375px, 570px, 768px, 1024px, 1280px, 1600px

### Whitespace Philosophy
- **Photography breathes first**: lead images are never constrained to a card frame — they fill their column width with no border, no radius, no shadow
- **Vertical separation is structural**: hairlines and 32–64px gaps organize hierarchy without shadows or backgrounds
- **Horizontal margins are editorial**: the reading column never fills the desktop viewport — line measure is capped for comfort, leaving white flanks

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, article columns, image regions |
| Hairline (Level 1) | `1px solid {colors.border}` | Feed item separators, section dividers, card base rules |
| Ink Border (Level 2) | `1px solid {colors.border-strong}` | Form inputs, ghost buttons |
| Dark Feature (Level 3) | `{colors.surface-dark}` background panel | Cinematic homepage features, editorial spotlight modules |
| Focus Ring | `2px solid {colors.focus-ring}`, 0px offset | Keyboard navigation on all interactive elements |

**Shadow Philosophy**: Architectural Digest has no drop shadows. Like its Condé Nast sibling The New Yorker, AD communicates depth through tonal alternation and hairline rules, never through atmospheric blur. The only "depth" in the system is the `{colors.surface-dark}` cinematic panel — and that is depth through contrast, not through shadow. This is the typographic discipline of print: the page is flat, the photograph is luminous, and the layout declines to compete.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every button, card, input, image container, badge, and structural element |
| `pill` | 9999px | Reserved for circular avatar crops only; not used in the standard editorial layout |

AD is among the sharpest-cornered editorial systems on the web. The zero-radius binary is an absolute rule — there are no 4px inputs, no 8px cards, no softened CTAs. The system's visual language is right-angle architecture, which mirrors the subject matter of the magazine itself.

## Components

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

### Button Variants

- **`button-primary`** — Solid ink-black fill (`{colors.primary}`), white CN Sans uppercase label at 12px with 1.5px tracking, `{rounded.none}`, 2px border. The system's only CTA style: "SUBSCRIBE", "DON'T MISS OUT". On hover: darkens to `{colors.surface-dark}`.
- **`button-ghost`** — Transparent background, ink-black text, `{rounded.none}`, `2px solid {colors.border-strong}`. Used for secondary actions — "SIGN IN", "VIEW MORE". On hover: fills to solid ink-black, text inverts to white.

### Cards

- **`card`** — No background fill, no radius, no shadow. Consists of a full-width image, a `{typography.label-category}` category rubric, a Garamond headline, a byline in `{typography.meta}`, and a bottom hairline rule. The image is content; the rule is structure.
- **`card-feature`** — Cinematic dark panel (`{colors.surface-dark}`) for lead homepage features. Full padding (48px), inverted type (white Garamond headline, white CN Sans category label). Used sparingly — one per page at most.

### Inputs

- **`input`** — White background, `{rounded.none}`, 1px full-ink border, Crimson Text at 20px. Focus state thickens the border to 2px black with no glow or halo.
- Email newsletter fields pair flush with adjacent black submit button — no gap, no radius, no ambiguity.

### Badges / Labels

- **`badge`** — Pure typographic category labels: CN Sans 11px uppercase, `{colors.ink-editorial}`, no background, no border. E.g., "INTERIORS", "TRAVEL", "DESIGN". These are not pill badges — they are label blocks above the headline.
- **`badge-dark`** — Inverted label for dark feature panels: same CN Sans uppercase, white text on `{colors.surface-dark}` fill.

### Navigation

- Top header: white background with the AD wordmark (110×72px SVG) centered/left-positioned
- Nav links: `{typography.nav-link}` — CN Sans 12px uppercase, 1.5px letter-spacing, `{colors.ink-editorial}`
- Hover: color shifts to `{colors.text-hover}` (mid-gray) — bleaching, not highlighting
- Sticky on scroll; at mobile breakpoints, collapses to hamburger drawer
- "DON'T MISS OUT" is the primary CTA button in the nav bar: `{components.button-primary}`

## Do's and Don'ts

### Do
- Use `{typography.display-hero}` and `{typography.display}` in Adobe Garamond Pro (or EB Garamond) at weight 300 for all headlines
- Set every category rubric in `{typography.label-category}` — 11px CN Sans uppercase, generous tracking
- Separate feed items with `1px solid {colors.border}` hairline rules and 32–48px vertical spacing
- Keep the canvas `{colors.background}` — never tint the main editorial surface
- Use `{colors.surface-dark}` for cinematic features and reserve it for one module per page
- Allow photography to fill its column at full width — no card chrome, no container border
- Set focus rings as `2px solid {colors.focus-ring}`, hard and immediate — no glow
- Keep all interactive elements at `{rounded.none}` — zero radius, always
- Pair newsletter inputs flush with the submit button — no gap, no radius break between them
- Use `{colors.ink-muted}` for all metadata (bylines, timestamps, credits) — never body-text weight

### Don't
- Don't introduce any chromatic accent color — there is no AD gold, no editorial red, no brand color outside black and white
- Don't use bold Garamond for headlines — weight 300 is the voice; weight 700 is a foreign language here
- Don't round any corner with a value between 1px and 9998px — the system is binary: `{rounded.none}` or `{rounded.pill}` (and pill is only for avatars)
- Don't add drop shadows to cards, images, or navigation — the system is flat without exception
- Don't set body copy in CN Sans — Crimson Text carries all reading content; CN Sans is UI chrome only
- Don't introduce new colors for hover states — hover degrades to `{colors.text-hover}` or inverts to dark background; no new hue
- Don't set category labels in sentence case — CN Sans labels are always uppercase, always tracked
- Don't compress the body line-height below 1.35 or the display line-height below 1.04
- Don't break photography into a card frame — images live flush to their column container
- Don't introduce gradient overlays on images for text legibility — the editorial hierarchy relies on a separate text block below the image, not text-on-photo

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, display-hero scales to 28px, body 18px |
| Mobile | 375–569px | Single column, headline 32px, nav collapses to hamburger |
| Tablet | 768–1023px | 2-column article grid, headline 34px |
| Desktop | 1024–1279px | 3-column grid, full nav bar, headline 40–56px |
| Large Desktop | ≥1280px | Max 1280px container, display-hero 56px, generous column gutters |

### Touch Targets
- All nav links and CTAs: minimum 44px tap height
- Article cards: full-row tappable on mobile — no nested clickable regions within the card
- Mobile drawer nav: each section link at 44px row height with 16px horizontal padding

### Collapsing Strategy
- **Nav**: Horizontal section bar collapses to hamburger below 768px; drawer reveals stacked CN Sans 12px uppercase section links with hairline rules
- **Feed Grid**: 3-column → 2-column → single column; hairline separators persist at all widths
- **Lead Feature**: Full-bleed image above fold at all widths; headline and dek scale with type scale
- **Reading Column**: Caps at ~740px on large desktop; compresses to 100% minus 32px margin on mobile

### Image Behavior
- Photography always fills the column at full width — no fixed-height crop unless explicitly art-directed
- Feature cover images break to full-viewport-width on mobile; interior images remain at column width
- No background tint overlays on images — captions sit below, never on top of the photograph
- Image credits in `{typography.caption}` CN Sans 11px uppercase below or flush with the image edge

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Editorial body text: `{colors.ink-editorial}` (#2b2b2b)
- Hard ink / structural: `{colors.ink}` (#000000)
- Metadata / byline: `{colors.ink-muted}` (#767676)
- Hairline border: `{colors.border}` (#e5e5e5)
- Dark feature surface: `{colors.surface-dark}` (#1c1c1c)
- Primary CTA: `{colors.primary}` (#000000)
- Focus ring: `{colors.focus-ring}` (#000000)

### Example Component Prompts

- "Create an Architectural Digest–style article card on `{colors.background}`. Full-width image at top (no radius, no border). Below: category rubric in `{typography.label-category}` (CN Sans 11px uppercase, `{colors.ink-editorial}`, 1.1px tracking). Headline in `{typography.display}` (EB Garamond 34px weight 300, line-height 1.06, `{colors.ink-editorial}`). Byline in `{typography.meta}` (14px Inter, `{colors.ink-muted}`). Bottom: `1px solid {colors.border}` rule. No shadow, no radius, no background tint."
- "Build an AD-style feature hero: full-viewport-width image, then a centered 740px reading column below. Headline at `{typography.display-hero}` (EB Garamond 56px weight 300, line-height 1.04). Category label above headline in `{typography.label-category}`. Body opens at `{typography.body-large}` (Crimson Text 20px, 1.40 line-height). No drop cap — AD body opens flush."
- "Design an AD subscription CTA panel on `{colors.surface}` (#f7f7f7): 48px padding, EB Garamond 34px headline 'Design, delivered.', Crimson Text 20px subline. Email input (`1px solid {colors.border-strong}`, `{rounded.none}`, 12px 16px padding) with flush-attached black submit button ('SUBSCRIBE' in CN Sans 12px uppercase, white on `{colors.primary}`)."
- "Create an AD-style navigation bar: white background, AD monogram centered-left at 72px height. Horizontal section links in `{typography.nav-link}` (CN Sans 12px uppercase, 1.5px tracking, `{colors.ink-editorial}`). Rightmost item: primary CTA button ('DON'T MISS OUT', `{components.button-primary}`). On hover: links shift to `{colors.text-hover}` (#767676)."
- "Build an Architectural Digest cinematic feature panel: `{colors.surface-dark}` (#1c1c1c) background, 48px padding. Category label in CN Sans 11px uppercase white. Headline in EB Garamond 56px weight 300 white, line-height 1.04. Ghost-inverted CTA button: white text 'EXPLORE THE STORY', `2px solid #ffffff` border, `{rounded.none}`, CN Sans 12px uppercase. No gradient, no drop shadow."

### Iteration Guide

1. Start with `{colors.background}` (#ffffff) — the magazine page is always press-white, not ivory
2. Garamond at weight 300 is non-negotiable for display — avoid bold Garamond regardless of hierarchy level
3. Every structural element earns its position from `{colors.border}` hairlines and generous vertical spacing, not from shadows or fills
4. CN Sans uppercase with 1.0–2.2px tracking for all navigation, labels, and buttons — this is the luxury-retail register
5. Photography is always presented at full column width, flush, no chrome — the image is the editorial content
6. `{colors.surface-dark}` (#1c1c1c) for cinematic features only — one per page max; never use it as a neutral card background
7. All interactive shapes at `{rounded.none}` — the zero-radius rule is absolute

---

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