---
version: alpha
name: "Carl Hansen & Søn"
description: "Warm craft-white canvas, Basis Grotesque Pro at weight 300, zero border-radius, and Wegner-heritage furniture photography as the sole decoration — a Danish atelier that speaks in restraint"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f6f6f6"            # subtle alternate background for secondary panels /* estimated */
  surface-warm: "#f0ede8"       # warm off-white for editorial sections, wood-toned /* estimated */

  # Text / ink
  ink: "#1a202c"                # primary text — deep charcoal-blue from extracted data (rgb(26,32,44))
  ink-dark: "#000000"           # pure black for button fills and maximum contrast headings
  ink-muted: "#888888"          # secondary text, captions, metadata
  on-background: "#1a202c"
  on-surface: "#1a202c"

  # Brand accent — CSS variable confirms deep forest green
  primary: "#2c622c"            # --main-color forest green, anchors brand CTAs
  primary-hover: "#234923"      # --hover-color darkened green for button/link hover states
  on-primary: "#ffffff"
  primary-container: "#e8f0e8"  # pale green tint for tagged/selected states /* estimated */

  # Interaction states
  focus-ring: "#000000"         # 2px black outline on focus, per extracted input data
  focus-shadow: "#000000"       # box-shadow 0 0 0 1px black on focus inset /* was rgba(0,0,0,1) — opaque */
  text-hover: "#234923"         # nav link hover — same as primary-hover

  # Borders
  border: "#000000"             # primary 1px solid border on buttons, inputs
  border-muted: "#e5e7eb"       # subtle divider for secondary separators (rgb(229,231,235))
  border-light: "#f6f6f6"       # near-invisible rule for panel edges /* estimated */

  # Shadow
  shadow-soft: "#000000"        # rgba(0,0,0,0.08) shadow base — flattened /* was rgba(0,0,0,0.08) — Google format requires hex */

typography:
  display-hero:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0px
  heading-section:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.75px
  heading-sub:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  body-large:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px
  label-caps:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "BasisGrotesquePro, Basis Grotesque Pro, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 40px
  2xl: 48px
  3xl: 80px
  4xl: 130px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 16px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-dark}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 12px
  button-secondary-hover:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 12px
  button-disabled:
    backgroundColor: "{colors.border-muted}"
    textColor: "{colors.ink-muted}"
    borderColor: "{colors.border-muted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 12px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    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
  select:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-item-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
---

# Carl Hansen & Søn Design System

## Overview

Carl Hansen & Søn's website is the digital equivalent of a Copenhagen atelier with the blinds half-open — calm, cool morning light, craftsmanship visible in every surface, no noise that might disturb the objects on display. The canvas is pure white (`{colors.background}`), a neutral backdrop that performs the same function as the seamless paper in a furniture photographer's studio: it removes all context except the object. The typographic temperature of the site matches the wood grain in its products — warm enough to feel human, precise enough to feel made. The brand uses a single proprietary typeface, Basis Grotesque Pro, across every context. No serif counterpart, no mono escape hatch. One voice.

That voice is fundamentally light. The dominant weight across body copy, navigation, and headline text is 300 — a weight most brands reserve for captions or footnotes. Carl Hansen & Søn sets its hero headline at 48px weight 300, line-height 1.0, with zero letter-spacing, and the result is a headline that whispers authority rather than projecting it. The only weight escalation belongs to `{typography.button-ui}` and `{typography.label-caps}` at 700, which marks the transactional layer with its own deliberate contrast: the reading voice is whisper-weight, the action voice is confident and unambiguous. The jump from 300 to 700 with nothing in between is not accidental — it is a brand decision about where effort should register.

Color is a studied absence. The entire palette is near-achromatic: pure white, deep charcoal-blue ink (`{colors.ink}`), a 1px black border. The one exception is the CSS `--main-color` variable: a dense forest green at `{colors.primary}` (`#2C622C`), which surfaces only in the hover states of navigation links and the treated CTA button. It is never used as a background, never as a fill. The green is not decoration; it is a signal — the only warm-chromatic moment in a system built on restraint. When a button turns forest green on hover, the gesture is legible precisely because nothing else around it carries color.

**Key Characteristics:**
- Basis Grotesque Pro at weight 300 for all reading text — whisper-weight as the editorial register
- Hero headline at 48px / weight 300 / line-height 1.0 creates typographic mass without weight
- A single chromatic accent: `{colors.primary}` forest green (#2C622C) visible only on hover states and select CTAs
- `{typography.button-ui}` at weight 700 is the sole bold voice — the system's action/navigation register
- Zero border-radius (`{rounded.none}`) on every interactive component — no softening of the furniture vocabulary
- 1px solid black (`{colors.border}`) as the structural grammar: buttons, inputs, selects all bordered alike
- Self-hosted Basis Grotesque Pro via WOFF2 — no Google Fonts, no system fallback drift
- Full-bleed photography on a white canvas, with no competing surface color or gradient decoration
- 8px base spacing expanded to generous 80–130px section intervals — the gallery pacing of a well-edited catalogue
- Motion at 0.2–0.5s `ease` for hover transitions; 1s `cubic-bezier(0.1,0.6,0.4,1)` for media — unhurried, object-aware timing

## Colors

### Primary Surfaces
- **Pure White** (`{colors.background}`): The universal canvas — product pages, editorial sections, all UI chrome. Never warm-tinted; optically neutral as seamless photography paper.
- **Near-White** (`{colors.surface}`): Subtle alternate background for secondary panels and filter areas.
- **Warm Linen** (`{colors.surface-warm}`): Editorial sections requiring warmth — recalls the bleached linen tones of Danish design interiors.

### Text / Ink
- **Charcoal-Blue** (`{colors.ink}`): Primary reading text at `#1a202c` — not pure black; carries a barely-perceptible blue-warmth that prevents harshness on white.
- **Pure Black** (`{colors.ink-dark}`): CTA button fills and maximum-contrast contexts.
- **Mid Grey** (`{colors.ink-muted}`): Secondary text, metadata, captions, placeholder copy.

### Brand Accent
- **Forest Green** (`{colors.primary}`): The CSS `--main-color` — a dense, saturated green with Scandinavian forest depth. Appears on link hover transitions and CTA button hover state. Never as a static fill color in UI chrome.
- **Deep Forest** (`{colors.primary-hover}`): The CSS `--hover-color` — darkened variant of the primary green, used as hover destination for the `{colors.primary}` states.

### Borders & Interaction
- **Black Rule** (`{colors.border}`): The primary structural border — `1px solid #000000` on all buttons, inputs, and selects. The site's signature structural line.
- **Muted Rule** (`{colors.border-muted}`): The subtle hairline at `#e5e7eb` for secondary dividers and panel separators.
- **Focus Ring** (`{colors.focus-ring}`): `2px solid #000000` outline on interactive controls, reinforced by `box-shadow: 0 0 0 1px #000000`.

## Typography

### Font Family
- **Primary**: `BasisGrotesquePro`, fallbacks: `Basis Grotesque Pro, Arial, sans-serif`
- **Loading source**: Self-hosted WOFF2 (`basis-grotesque-regular-pro.1e211fad.woff2`). No Google Fonts. No variable font instances.
- **Closest Google Fonts substitute**: **DM Sans** (geometric grotesk, similar apertures and weight range) or **Plus Jakarta Sans** (closest informal warmth). Note: substitutes will read slightly differently at weight 300 — scale down by one size if optical size appears too heavy.
- **OpenType features**: No ligature or feature settings detected in extraction. Weight 300 operates as the reading register; weight 700 appears only in button labels and caps contexts.

*The single-typeface strategy is not a cost decision — it is a design position. Basis Grotesque Pro's neutral warmth and precisely calibrated weight range means one family can carry editorial, navigation, action, and caption registers without tonal conflict.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-viewport hero statements — "Making An Icon" — 48px / 300 / lh 1.0 |
| `display` | Section openers, campaign headlines — 36px / 300 / lh 1.1 |
| `heading-section` | Large sub-headings with 0.75px tracking — 30px / 300 / lh 1.2 |
| `heading-sub` | Card titles, feature callouts — 24px / 500 / lh 1.33 |
| `body-large` | Lead paragraphs, feature descriptions — 20px / 300 / lh 1.4 |
| `body` | Standard reading copy, form labels — 16px / 300 / lh 1.5 |
| `nav-link` | Navigation links — 16px / 300 / lh 1.5, hover shifts to `{colors.text-hover}` |
| `button-ui` | CTA labels, form actions — 15px / 700 / 0.5px tracking |
| `label-caps` | Section eyebrows, uppercase category labels — 15px / 700 / uppercase |
| `caption` | Product metadata, footnotes — 12px / 300 / lh 1.33 |

### Principles
- Weight 300 is the ambient voice — every reading moment in the system operates here, including 48px hero text
- The editorial/transactional split: reading text stays at 300; only button labels and category caps escalate to 700
- The 1.0 line-height at `{typography.display-hero}` stacks words as dense geometric objects, not floating phrases
- `{typography.heading-section}` applies 0.75px letter-spacing — the only tracked style outside button labels, and only at this size
- Body text at 1.5 line-height is generous and unhurried, appropriate for a catalogue that invites reading

## Layout

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

The spacing personality is generous and editorial. The site uses compressed 8–20px for component internals and expands dramatically to 80–130px at section boundaries. This is catalogue-page rhythm: each section breathes like a page turn, not a scroll.

### Grid & Container
- Max content width: ~1280px, centered, with outer margin scaling down through breakpoints
- Hero: full-bleed photography, with headline text overlaid at left-offset positions
- Product grid: 3–4 columns on desktop, 2 columns at tablet, single column at mobile; equal gutters of ~20px
- Editorial sections: alternating full-bleed and max-width container layouts
- Navigation: sticky top bar, products / campaigns / designers / inspiration / about link cluster centered

### Whitespace Philosophy
- **Catalogue negative space**: Section gaps at 80–130px are not padding — they are editorial rhythm, the visual equivalent of a blank half-page in a furniture catalogue
- **Photography governs layout**: The grid exists to position and showcase photography; white canvas surrounds but does not compete
- **Tight chrome, generous context**: Button padding is compact (`6px 12–16px`); section-level vertical spacing is expansive

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards at rest, navigation, inputs |
| Border Rule | `1px solid {colors.border}` | Buttons, inputs, selects — structural boundary, not depth |
| Subtle Card | `rgba(0,0,0,0.08)` at hover | Product card hover lift (minimal shadow) |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` + `box-shadow: 0 0 0 1px {colors.focus-shadow}` | Keyboard accessibility on interactive controls |

**Shadow Philosophy**: Carl Hansen & Søn's digital interface is functionally flat. The 1px black border performs the structural work that other systems delegate to shadows — defining component boundaries and interactive affordances with crisp precision rather than atmospheric depth. The only shadow detected in the system (`rgba(0,0,0,0.08)`) appears lightly at product card hover, barely perceptible. This shadow restraint mirrors the furniture's material honesty: a Wegner chair sits on its own legs, not on visual elevation tricks.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, inputs, selects, cards, modals — the universal shape |
| `pill` | 9999px | Reserved for filter tags and badge components only |

The system is effectively binary: hard rectangles for interactive chrome, pill for categorical labels. The rectangular discipline is not incidental — Wegner's joinery, the tenon in a mortise, the rectangular seat of the Wishbone Chair — the right angle is the brand's material vocabulary, carried faithfully into the interface.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants

- **`button-primary`** — Black fill (`{colors.ink-dark}`), white text, Basis Grotesque Pro 15px weight 700, `{rounded.none}`, compact `6px 16px` padding. The "Discover more" CTA — a stamp, not a badge. Used as the primary conversion action across all pages.
- **`button-primary-hover`** — Transitions from black to forest green (`{colors.primary-hover}`). The hover is the system's most distinctive moment — color arrives only on activation.
- **`button-secondary`** — White background with `1px solid {colors.border}` black border, black text. The outlined ghost variant for secondary actions.
- **`button-secondary-hover`** — Inverts to black fill, white text — the same inversion principle as Vitra, applied consistently.
- **`button-disabled`** — Muted grey background (`{colors.border-muted}`) with `{colors.ink-muted}` text and matching border. Used for unavailable locale/language selections.

### Cards

- **`card`** — White background, zero border-radius, no shadow at rest, no border. Product photography provides all visual delineation. The card is an invisible frame for the object.

### Inputs

- **`input`** — White background, `1px solid {colors.border}` full perimeter border, zero radius, `{typography.body}` 16px weight 300, `8px 12px` padding.
- **`input-focus`** — `2px solid {colors.focus-ring}` outline + `box-shadow: 0 0 0 1px {colors.focus-shadow}` inset ring. The focus state layers outline and shadow for WCAG compliance without introducing color.
- **`select`** — Same visual treatment as `input` — `1px solid black` border, white background, zero radius.

### Badges / Tags

- **`badge`** — Near-white surface (`{colors.surface}`), charcoal text, `{typography.caption}` 12px, `{rounded.none}`, `4px 10px` padding. Used for product category labels and metadata chips. Pill variants detected for filter close controls.

### Navigation

Top bar: white background, sticky. Wordmark left-aligned. Five primary navigation links centered — `{typography.nav-link}` 16px weight 300. On hover, links transition from `{colors.ink}` charcoal-blue to `{colors.text-hover}` forest green via `0.2s ease`. Icon cluster (search, wishlist, cart) right-aligned. Utility strip above the main nav (language / region, professionals, store finder) in `{typography.caption}` 12px weight 300.

## Do's and Don'ts

### Do
- Use Basis Grotesque Pro weight 300 for all reading text — the light weight IS the editorial voice; never substitute a heavier grotesk
- Apply `{rounded.none}` to every interactive component — no radius anywhere in the button/input/card vocabulary
- Use `{colors.primary}` forest green exclusively for hover states and selected states — never as a static fill or background
- Apply `1px solid {colors.border}` as the structural boundary for all interactive controls — uniform across buttons, inputs, selects
- Reserve `{typography.button-ui}` and `{typography.label-caps}` at weight 700 for action labels only — the boldness marks the transactional layer
- Use full-bleed photography on a pure `{colors.background}` canvas — no competing surface textures or gradient fills
- Maintain section vertical spacing at 80–130px — catalogue-page rhythm is part of the brand identity
- Apply `{typography.heading-section}` with 0.75px letter-spacing when setting 30px headings — the tracking is specific to this scale
- Set hover and transition durations at 0.2s for UI chrome, 1s `cubic-bezier(0.1,0.6,0.4,1)` for media — unhurried, object-aware

### Don't
- Don't introduce border-radius on buttons or cards — even 2px breaks the system's material vocabulary
- Don't use `{colors.primary}` forest green as a static button fill or background fill — it is a hover signal only
- Don't set body text at weight 400 or heavier — the 300 weight is the system's defining choice, not a default
- Don't add multiple typefaces or a companion serif — the single-typeface constraint is intentional and must be respected
- Don't introduce gradient surface fills or photography scrims — the system has no gradient tokens; the white canvas is unconditional
- Don't reduce section spacing below 48px between major editorial blocks — compression erases the catalogue rhythm
- Don't apply drop shadows to product cards at rest — the flat state is the brand position; shadows appear only as hover feedback
- Don't use the forest green (`{colors.primary}`) for text links in body copy — it belongs on interactive chrome only
- Don't add new accent colors — the palette is white, charcoal-blue ink, black border, and forest green hover. Any addition disrupts the visual hierarchy that makes the green legible as a signal.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <350px | Single column, condensed nav, stacked all sections |
| Mobile | 350–599px | Single column, full-width photography, hamburger nav |
| Mobile Large | 600–767px | Wider grid columns; two-up product cards possible |
| Tablet | 768–991px | Two-to-three column grids; horizontal nav begins |
| Tablet Wide | 992–1079px | Near-desktop layout; full product grid |
| Desktop | 1080–1279px | Full horizontal nav; 3–4 column product grids |
| Large Desktop | ≥1280px | Maximum container width; maximum section spacing |

### Touch Targets
- Primary CTA buttons: `6px` vertical padding × 2 + `15px` font at `1.0` line-height ≈ 27px; likely supplemented by `min-height: 40px`
- Navigation links: 16px at `1.5` line-height provides ~36px effective tap height; icon tray supplements with larger tap zones
- Product cards: entire card including photography is tappable, not just the label zone

### Collapsing Strategy
- **Navigation**: Full horizontal link bar collapses to hamburger drawer below ~992px; wordmark stays left-anchored; search/wishlist/cart icons remain visible
- **Hero**: Full-bleed photography at all widths; headline reduces from `{typography.display-hero}` 48px toward `{typography.heading-section}` 30px on smaller viewports
- **Product grids**: 4-column → 3-column → 2-column → single-column; photography aspect ratios preserved via `object-fit: cover`
- **Section spacing**: 130px editorial gaps compress toward 48–80px at mobile; component padding scales proportionally

### Image Behavior
- Hero photography: full-bleed at all widths, `object-fit: cover`, no art-direction crop breakpoints detected
- Product photography: contained within grid cells, no edge bleed, consistent aspect ratio maintained
- No gradient scrims or overlay treatments on photography at any breakpoint

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Near-black CTA fill: `{colors.ink-dark}`
- Brand hover accent: `{colors.primary}`
- Hover destination: `{colors.primary-hover}`
- Border / rule: `{colors.border}`
- Secondary text: `{colors.ink-muted}`
- Surface alt: `{colors.surface}`

### Example Component Prompts

- "Create a Carl Hansen & Søn hero section: full-bleed furniture photograph covering the viewport. Overlay at bottom-left: headline in `BasisGrotesquePro` (fallback: Arial, sans-serif) 48px weight 300, line-height 1.0, color `#1a202c`. Below it, a body line in 18px weight 300, line-height 1.56, color `#1a202c`. Below that, a primary CTA button: background `#000000`, white text, Basis Grotesque Pro 15px weight 700, `0` border-radius, `6px 16px` padding, no box-shadow. Hover state: background transitions to `#234923` over `0.2s ease`."

- "Design a Carl Hansen & Søn product card: white (`#ffffff`) background, `0` border-radius, no shadow, no border. Square product photograph at top, `object-fit: contain`. Below: category label in Basis Grotesque Pro 12px weight 300, uppercase, color `#888888`. Product name in 24px weight 500, line-height 1.33, color `#1a202c`. Short description in 16px weight 300, line-height 1.5, color `#888888`. Below: price in 16px weight 500, color `#1a202c`. On hover: `box-shadow: rgba(0,0,0,0.08) 0px 4px 20px 0px` via `0.2s ease`."

- "Build a Carl Hansen & Søn navigation bar: white background, sticky top, full-width. Left: CH&S wordmark in Basis Grotesque Pro weight 300. Center: horizontal navigation links ('Products', 'Designers', 'Inspiration', 'About') in 16px weight 300, color `#1a202c`, no underline; hover → color `#234923` via `0.2s ease`. Right: search, wishlist, cart icons in `#1a202c`. Utility strip above in 12px weight 300, `#888888`, dividing utility links with a `1px solid #e5e7eb` bottom border."

- "Create a Carl Hansen & Søn form input: white background, `1px solid #000000` full perimeter border, `0` radius, Basis Grotesque Pro 16px weight 300 color `#1a202c`, `8px 12px` padding. Placeholder in `#888888`. On focus: `outline: 2px solid #000000`, `box-shadow: 0 0 0 1px #000000` inset, no radius, no color shift. Submit button: `#000000` fill, white text, 15px weight 700, `6px 16px` padding, `0` radius. Hover state: background shifts to `#234923` over `0.2s ease`."

- "Design a Carl Hansen & Søn editorial section: white background, `80px` vertical padding. Left column (55%): eyebrow in Basis Grotesque Pro 15px weight 700, uppercase, 0.5px letter-spacing, color `#888888`. Display heading at 36px weight 300, line-height 1.1, color `#1a202c`. Body paragraph at 16px weight 300, line-height 1.5, color `#1a202c`. Outline CTA button: white background, `1px solid #000000`, black text, 15px weight 700, `0` radius, `6px 12px` padding; hover: background `#000000`, text `#ffffff` via `0.2s ease`. Right column (45%): full-height product photograph, no border, no radius."

- "Build a Carl Hansen & Søn collection grid section: `{colors.surface-warm}` (#f0ede8) background, `80px` vertical padding. Section eyebrow: Basis Grotesque Pro 15px weight 700 uppercase `{colors.ink-muted}`. Section heading: 30px weight 300 line-height 1.2 letter-spacing 0.75px `{colors.ink}`. Three-column product grid with 20px gutters. Each card: no border, no shadow at rest, `0` radius. Card hover: `box-shadow: rgba(0,0,0,0.08) 0px 4px 20px 0px` via `0.2s ease`, green hover on product name text."

### Iteration Guide

1. Open with a pure white canvas — `{colors.background}`. No warm tinting, no surface noise. Product photography provides all temperature.
2. Set all reading text in Basis Grotesque Pro weight 300. Resist weight escalation — only button labels and uppercase category caps use weight 700.
3. Apply `border-radius: 0` to every component. The rectilinear vocabulary is the system's material signature.
4. Use `1px solid {colors.border}` (`#000000`) as the structural boundary for all interactive controls. Uniform and definitive.
5. Reserve `{colors.primary}` forest green (`#2C622C`) for hover transitions only. Its power lies entirely in being absent from the static state.
6. Set section vertical spacing to 80–130px (`{spacing.3xl}` to `{spacing.4xl}`). The catalogue rhythm requires generous air between blocks.
7. Hover transitions: `0.2s ease` for UI chrome, `1s cubic-bezier(0.1,0.6,0.4,1)` for media crossfades. Unhurried — like turning a page in a well-made book.

---

## 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 Carl Hansen & Søn. Brand names and trademarks belong to their respective owners.