---
version: alpha
name: "Knoll"
description: "Vignelli-lineage precision — white canvas, Helvetica Neue sans and Times serif in tandem, a single red-orange wordmark accent, and no ornament that can't justify itself structurally"

colors:
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-dark: "#1a1a1a"
  ink: "#000000"
  ink-secondary: "#333333"
  ink-muted: "#666666"
  primary: "#f04e23"           # Knoll red-orange — wordmark + link accent
  on-primary: "#ffffff"
  primary-hover: "#cc3d18"     # darkened for hover states
  text-hover: "#f04e23"        # links shift to primary on hover
  focus-ring: "#f04e23"
  border: "#cccccc"
  border-dark: "#000000"
  shadow-soft: "#e0e0e0"
  error: "#f04e23"             # semantic error shares the brand red-orange

typography:
  display-hero:
    fontFamily: "HelveticaNeueW01-75Bold, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "HelveticaNeueW01-75Bold, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "HelveticaNeueW01-65Medi, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  heading-sub:
    fontFamily: "HelveticaNeueW01-65Medi, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Times, Times New Roman, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "HelveticaNeueW01-55Roma, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0px
  body-serif:
    fontFamily: "Times, Times New Roman, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "HelveticaNeueW01-55Roma, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "HelveticaNeueW01-75Bold, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "HelveticaNeueW01-55Roma, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-ui:
    fontFamily: "HelveticaNeueW01-75Bold, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 1px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  nav-item-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Knoll Design System

## Overview

Knoll's web presence is a direct extension of Massimo Vignelli's 1966 visual identity program — one of the most studied and imitated design systems in American corporate history. The site opens on a pure white canvas with the wordmark set in Helvetica, the Knoll red-orange (`{colors.primary}`) stamped cleanly at the upper left. There is no hero photograph fighting for dominance, no gradient overlay softening the edges. Instead, two large editorial photographs sit side-by-side in a strict grid: a living room arrangement and a workplace installation, equally weighted, symmetrical in proportion. The copy beneath them reads like a product brief from 1970: "Shop for Home" with an arrow, "Plan for Workplace" with an arrow. These arrows (`→`) are the site's most repeated interaction pattern — understated, directional, structurally inevitable.

The typographic architecture is one of the most distinctive in the design-furniture category, because it uses two typeface families as distinct voices. Helvetica Neue (served as web-font variants `HelveticaNeueW01-75Bold` and `HelveticaNeueW01-55Roma`) handles all navigation, UI chrome, headings, and interactive labels. Times handles body copy, editorial descriptions, and object language. This is a conscious reference to the Vignelli canon's use of contrasting voices: the sans-serif system (rational, authoritative, architectural) and the roman serif (cultured, editorial, humanist). Together they form a complete reading experience that never collapses into monotony or cacophony. No third typeface is ever introduced.

Color is purely functional. `{colors.ink}` black handles all headings and structure. `{colors.ink-secondary}` charcoal carries body weight. `{colors.primary}` — a warm red-orange — appears only in the wordmark, link hover states, and the rare CTA accent, where it operates as a stamp of institutional authority rather than a conversion-optimization lever. The surface palette never departs from white and a near-invisible off-white (`{colors.surface}`). There are no gradients, no tinted sections, no editorial washes of brand color. The photography — space-filling architectural interiors and product-lit furniture studies — carries every chromatic note the page needs.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with zero surface tinting — white as design intention, not default
- Knoll red-orange (`{colors.primary}`) restricted to wordmark, link-hover, and accent — its scarcity is its power
- Two-family type system: Helvetica Neue for system/UI voice, Times for editorial/body voice
- Display headings at `{typography.display-hero}` weight 700, tight line-height 1.0 — architectural, not expressive
- Arrow (`→`) as the primary interactive affordance — a Vignelli typographic signature
- Strict rectangular grid: `{rounded.none}` on every interactive element including buttons and inputs
- No drop shadows in the system — depth from photography and whitespace, never from blur
- `{typography.button-ui}` with `1px` letter-spacing and weight 700 — labels read as wayfinding signs
- Link underline on hover with color shift to `{colors.primary}` — the only kinetic color event
- 45+ breakpoints — a dense responsive grid tuned to furniture photography proportions

## Colors

### Primary Brand
- **Knoll Red-Orange** (`{colors.primary}`): The wordmark accent and the entire brand's chromatic signature. Applied to the logo, link-hover states, and focus rings. When it appears, it reads as an institutional stamp — the same red-orange that has marked Knoll objects and documents since the Vignelli identity era.
- **Primary Hover** (`{colors.primary-hover}`): A darkened variant of the brand red-orange for interactive depth on CTA hover states.

### Canvas & Surface
- **White** (`{colors.background}`): The dominant surface — every page, card, and panel defaults to pure white. This is not a neutral choice; it is the brand's deliberate statement that objects and photography provide all the necessary visual interest.
- **Near-White Surface** (`{colors.surface}`): A barely-there off-white for alternate background stripes and hover states on cards.
- **Dark Surface** (`{colors.surface-dark}`): Used for the footer bar and promotional dark sections — a charcoal-near-black that pairs cleanly with white text.

### Ink Scale
- **Primary Ink** (`{colors.ink}`): All headings, strong labels, active navigation, button fills. Pure black — the structural tone of the system.
- **Secondary Ink** (`{colors.ink-secondary}`): Body copy, secondary text, supporting navigation items. A warm charcoal (`#333333`) that eases reading without losing authority.
- **Muted Ink** (`{colors.ink-muted}`): Tertiary text, metadata, placeholder copy, and fine-print descriptions.

### Borders & Structure
- **Standard Border** (`{colors.border}`): Light grey dividers for card separation and content grouping.
- **Dark Border** (`{colors.border-dark}`): Hard black borders for emphasized containers and focused inputs.
- **Shadow Soft** (`{colors.shadow-soft}`): Used for the lightest shadow expressions — barely visible separation between stacked elements.

## Typography

### Font Family
- **Sans-Serif (UI/System voice)**: `HelveticaNeueW01-75Bold` (Bold, weight 700) and `HelveticaNeueW01-55Roma` (Roman, weight 400), both with fallbacks `Arial, Helvetica`. These are premium Linotype web-font variants of Helvetica Neue, not system fonts — Knoll pays for the real thing.
- **Serif (Editorial voice)**: `Times`, with fallbacks `Times New Roman, Georgia, serif`. The dembrandt extraction confirms Times as a genuine and active typographic choice, not an accidental fallback.
- **OpenType Features**: No variable font axis or stylistic sets — both faces are served as fixed-weight webfont files. The typographic personality comes from selection and sizing, not OpenType variation.

*Note: For implementations outside Knoll's licensed environment, substitute Helvetica Neue (system) for the W01 variants. Inter at weight 400/700 is a structurally acceptable alternative. For the serif voice, Georgia serves better than system Times for screen rendering.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Major page headings, welcome statements, primary marketing callouts. 50px, tight 1.0 line-height. |
| `display` | Section openers, product category headers. 40px. |
| `heading-section` | Midweight section titles. 26px, Helvetica Neue Medium weight. |
| `heading-sub` | Sub-section labels, product group headings. 24px. |
| `body-large` | Editorial descriptions, opening paragraph copy — set in Times. 18px, 1.6 leading. |
| `body` | UI body copy, nav descriptions, form labels — Helvetica Neue Roman. 15px, 1.47 leading. |
| `body-serif` | Long-form content paragraphs set in Times for reading comfort. 16px, 1.6 leading. |
| `nav-link` | Navigation items, utility links. 14px, tracked 0.5px. |
| `button-ui` | All button labels, CTAs, action chips. 14px, tracked 1px, bold. |
| `caption` | Image captions, metadata, secondary labels. 13px. |
| `label-ui` | Category labels, eyebrows, micro UI. 12px, tracked 1px, bold. |

### Principles
- **Two voices, strict separation**: Helvetica Neue for system and wayfinding; Times for editorial content. The two families never mix within a single text block.
- **Weight discipline**: Bold (700) for headings and CTAs; Roman (400) for body and navigation. No intermediate weights in the active system.
- **Tight display leading**: Headings at line-height 1.0–1.05 read as architectural blocks, not editorial passages. They are system components, not art direction.
- **Generous body leading**: Times body copy at 1.6 line-height reads like printed matter, not a web page — deliberate reference to print tradition.
- **Positive letter-spacing on UI labels**: `button-ui` and `label-ui` carry 1px tracking — a wayfinding convention from the Vignelli signage system, lending UI labels the weight of a museum placard.

## Layout

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

The spacing system is architecturally generous — section padding typically runs in the `{spacing.2xl}`–`{spacing.3xl}` range, giving the furniture photography enough negative space to breathe. Component-level spacing is tighter: `{spacing.md}`–`{spacing.lg}` for card padding, `{spacing.sm}`–`{spacing.md}` for intra-content gaps. The effect is a page that alternates between large, quiet photographic expanses and dense, precise text blocks — the rhythm of a well-designed exhibition catalogue.

### Grid & Container
- Max content width: approximately 1280px, centered
- Two-column editorial grid as the primary layout module (matching the screenshot's home/workplace split)
- Product grids: 3–4 columns on desktop with generous gutters
- Hero sections: full-bleed photography with text overlay or adjacent text columns
- No decorative borders around content columns — grid lines are implied by alignment, never drawn

### Whitespace Philosophy
- **Space as material**: Knoll's whitespace is not absence — it is a structural element in the Bauhaus tradition, as deliberate as a wall dimension.
- **Photography breathes**: Product images are always surrounded by meaningful white margin. Nothing touches an edge without purpose.
- **Section rhythm via padding**: Major content breaks use `{spacing.3xl}`–`{spacing.4xl}` vertical padding. There are no thin-ruled dividers between sections; whitespace does the work alone.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every surface by default — cards, inputs, panels, navigation |
| Subtle Border (Level 1) | `1px solid {colors.border}` | Card separators, list dividers |
| Structural Border (Level 2) | `1px solid {colors.border-dark}` | Focused inputs, section frames, emphasized containers |
| Section Dark (Level 3) | Background shift to `{colors.surface-dark}` | Footer, promotional dark sections |
| Focus Ring | `2px solid {colors.primary}` | Keyboard accessibility on interactive elements |

**Shadow Philosophy**: Knoll has no drop shadows in the production system. The dembrandt extraction confirms no box-shadow values across the site. This is a signature Vignelli trait: depth is expressed through contrast between adjacent tonal planes, not through computed blur. A product card is elevated not by a subtle shadow but by the fact that photography occupies it — the chromatic and tonal richness of the image distinguishes the card from the white surface it sits on. Shadows would soften the architectural precision that is the brand's entire visual claim.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every interactive and structural element without exception — buttons, inputs, cards, nav items, modals |
| `pill` | 9999px | Reserved for toggles, search pills, and filter tags if they appear |

Knoll is a zero-radius system. Every rectangle is a hard rectangle. This is not minimalism by default — it is a direct reference to modernist grid orthodoxy, the same sensibility that produced the Barcelona Pavilion's sharp travertine planes and the Saarinen Tulip table's clean base-to-surface junction. Introducing rounded corners at even 4px would rupture the design language's conceptual foundation.

## 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`** — Black fill (`{colors.ink}`), white text, `{typography.button-ui}`, zero radius, 12×24px padding. The brand's primary action button. Hover shifts fill to Knoll red-orange (`{colors.primary}`), maintaining the rectangular geometry while introducing the brand accent.
- **`button-secondary`** — White fill with black text; border `1px solid {colors.ink}` implied by proximity to dark elements. Ghost sibling to the primary. Hover inverts to black fill.
- **`button-ghost`** — No background, no border, text only with `→` arrow suffix. The site's most common interactive pattern: "Shop for Home →", "Plan for Workplace →". Hover shifts text color to `{colors.primary}`.

### Cards

Cards have no border, no shadow, and no radius. A card at Knoll is a photography-first container: the image occupies the upper portion at full bleed, the text annotation sits below in the same column width. There is no chrome. Separation between adjacent cards is achieved through grid gutter whitespace alone.

### Inputs

Sharp-cornered rectangles (`{rounded.none}`), standard grey border at rest (`{colors.border}`), black border on focus (`{colors.border-dark}`). No glow, no color shift on interaction beyond the border weight. Labels sit above the field in `{typography.label-ui}`. Placeholder text in `{colors.ink-muted}`.

### Badges / Tags

Category labels and product tags use `{typography.label-ui}` on `{colors.surface}` backgrounds with zero radius. They function as museum object-label typography — classification before decoration.

### Navigation

The primary navigation is white background, horizontal layout, Helvetica Neue 14px with 0.5px letter-spacing. The Knoll wordmark in red-orange (`{colors.primary}`) anchors the left edge. Navigation link hover states shift text color to `{colors.primary}` — the link becomes a red-orange indicator, matching the wordmark's chromatic frequency. No underline at default; underline appears on hover as a secondary confirmation of interaction state.

## Do's and Don'ts

### Do
- Use pure white (`{colors.background}`) as the default canvas — never tint it with brand color or neutral grey
- Reserve `{colors.primary}` for the wordmark, link hover states, and focus rings — scarcity is its power
- Set display headings in `{typography.display-hero}` or `{typography.display}` at line-height 1.0 — they should read as architectural blocks, not expressive headlines
- Use Times (`{typography.body-large}` or `{typography.body-serif}`) for all long-form editorial and product description copy
- Use Helvetica Neue (`{typography.body}`, `{typography.nav-link}`) for all navigation, UI chrome, and interactive labels
- Apply `{rounded.none}` to every interactive element without exception — zero radius is non-negotiable
- Use the arrow symbol (`→`) for link suffixes and wayfinding labels — it is the system's primary interaction idiom
- Give photography ample whitespace: `{spacing.2xl}` minimum clear margin around any image used as a content anchor
- Use `{typography.button-ui}` with 1px letter-spacing for all actionable labels — the tracked caps read as a sign system, not marketing copy

### Don't
- Don't introduce rounded corners at any value — not `2px`, not `4px`, not `8px`. The radius scale is `{rounded.none}` only.
- Don't use `{colors.primary}` as a section background or fill color — it belongs only to the wordmark and interaction states
- Don't add drop shadows to cards, panels, or navigation — the system is explicitly shadow-free
- Don't use a third typeface alongside Helvetica Neue and Times — the two-voice contract is the entire typographic strategy
- Don't introduce display headings above `1.05` line-height — loose display leading reads as editorial, not architectural
- Don't use intermediate font weights (300, 500, 600) — the system runs on Regular (400) and Bold (700) only
- Don't add gradients to any surface — not section backgrounds, not buttons, not photographic overlays
- Don't center-align body text — Knoll's grid is left-aligned, flush-left, grid-locked
- Don't color the standard body copy text with `{colors.primary}` — red-orange text outside link contexts violates the stamp-quality restriction

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile S | <375px | Single column, stacked photography, hamburger nav |
| Mobile | 375–640px | Single column throughout, compact nav bar |
| Mobile L | 640–768px | 2-column product grids begin |
| Tablet | 768–992px | Primary nav visible, 2-column editorial splits |
| Tablet L | 992–1100px | 3-column product grids, full nav |
| Desktop | 1100–1300px | Full layout, max editorial spread |
| Large Desktop | >1300px | Container centers, additional whitespace added |

The dembrandt extraction captured 45 distinct breakpoints (280px through 2400px), mirroring Knoll's care about furniture photography proportions at every intermediate viewport size.

### Touch Targets
- Arrow-link areas: minimum 44px touch height via padding expansion on mobile
- Navigation items: 44px+ height on mobile drawer
- Product card images: full-width tap targets on mobile, linking to product detail
- Button CTAs: 48px height on mobile via adjusted vertical padding

### Collapsing Strategy
- **Navigation**: Horizontal text nav collapses to hamburger drawer on mobile; wordmark remains visible and left-anchored; the Knoll red-orange persists as the nav's only color identity
- **Two-column editorial splits**: Stack to single column on mobile, image above text
- **Product grids**: 4-up → 3-up → 2-up → 1-up with maintained gutter proportions
- **Hero photography**: Maintains full-bleed width at all viewports using `object-fit: cover`; text overlay or adjacent text block stacks below on mobile
- **Spacing compression**: Section vertical padding scales from `{spacing.3xl}` desktop to `{spacing.2xl}` tablet to `{spacing.xl}` mobile

### Image Behavior
- Product photography at full bleed in card containers — `object-fit: cover` with `aspect-ratio` locking
- No art direction breakpoints detected — images scale proportionally
- All photography uses controlled studio or architectural lighting that reads clearly at any size
- No scrim or gradient overlays on images — clean direct presentation is the brand standard

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}`
- Border: `{colors.border}`
- CTA fill: `{colors.ink}` (black button, not brand-red)
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Create a Knoll hero section on pure white (`{colors.background}`). Place the wordmark 'Knoll' in Helvetica Neue Bold 28px, color `{colors.primary}` (red-orange), upper-left. Below, a 50px display heading in `{typography.display-hero}` color `{colors.ink}`, line-height 1.0, weight 700: 'Welcome to Knoll / How can we help you today?' No decorative elements. Below the heading, two equal-width image tiles side-by-side in a grid with 24px gutter, each with a caption label in `{typography.body}` and an arrow link: 'Shop for Home →' in 14px Helvetica Neue, `{colors.ink}`, hover color `{colors.primary}`."

- "Design a Knoll product card with zero border-radius and no shadow. Full-bleed product photograph in a 4:3 aspect ratio container. Below the image: product name in `{typography.heading-sub}`, `{colors.ink}`, weight 500. Designer credit in `{typography.caption}`, `{colors.ink-muted}`. Price in `{typography.body}`, `{colors.ink-secondary}`. An arrow link 'View Details →' in 14px Helvetica Neue weight 700, color `{colors.ink}`, hover to `{colors.primary}`. No card border. Padding: `{spacing.lg}` bottom, 0 sides."

- "Build a Knoll primary button: background `{colors.ink}` (black), text `{colors.background}` (white), font `{typography.button-ui}` — 14px Helvetica Neue Bold, 1px letter-spacing, line-height 1.0. Padding 12px 24px. Border-radius 0 (sharp rectangle). No shadow. Hover: background shifts to `{colors.primary}` (Knoll red-orange), text stays white. Focus: 2px solid `{colors.focus-ring}` outline."

- "Create a Knoll navigation bar: white background (`{colors.background}`), left-aligned Knoll wordmark in `{colors.primary}` (Helvetica Neue Bold, 24px). Horizontal nav links in `{typography.nav-link}` — 14px Helvetica Neue Roman, `{colors.ink}`, 0.5px letter-spacing, no underline at rest. Hover: text color shifts to `{colors.primary}`, underline appears. Right-side utility icons (search, account) in `{colors.ink}`. Full-width bar, no background tint, no bottom border. Sticky at top."

- "Design a Knoll editorial body section: white background. Section label in `{typography.label-ui}` — 12px Helvetica Neue Bold, 1px letter-spacing, `{colors.ink-muted}`, all-caps. Below, a 26px section heading in `{typography.heading-section}`, `{colors.ink}`, Helvetica Neue Medium. Editorial body copy in `{typography.body-serif}` — Times 16px, `{colors.ink-secondary}`, line-height 1.6. Three paragraphs maximum per section. Below body, an arrow link: 'Explore the Collection →' in `{typography.button-ui}` — 14px Helvetica Neue Bold, 1px tracking, `{colors.ink}`, hover to `{colors.primary}`. Section vertical padding: `{spacing.3xl}` top and bottom."

### Iteration Guide

1. Start with pure white (`{colors.background}`) — never add tint or surface color to the canvas
2. Set headings in Helvetica Neue Bold at line-height 1.0; set body paragraphs in Times at line-height 1.6 — the two-voice contrast is the system's foundation
3. Apply zero border-radius everywhere — the moment a rounded corner appears, the Vignelli reference dissolves
4. Use `{colors.primary}` only for the wordmark and link-hover states — if you find yourself reaching for it to fill a button background, you are outside the system
5. Button fills are black (`{colors.ink}`), not brand-red — the hover shift to red-orange is the only place the accent lands on an interactive element
6. Add drop shadows to nothing — use whitespace and photography to create hierarchy
7. Arrow links (`→`) are the primary interaction idiom — use them for every navigational label and CTA that does not require a full button
8. Maintain 1px letter-spacing on `{typography.button-ui}` and `{typography.label-ui}` — the tracked caps are the wayfinding system's typographic voice

---

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