---
version: alpha
name: Audo Copenhagen
description: A warm Danish design house built on a parchment canvas, where a classical serif and a spare grotesque share duties across sculptural furniture, soft neutrals, and a palette that feels like morning light through linen.

colors:
  # Surface / canvas
  background: "#f5f3eb"         # warm cream parchment — the dominant Audo canvas
  surface: "#ffffff"             # pure white product imagery and content panels

  # Ink / text
  ink: "#2f2b23"                 # warm dark brown — the primary text and graphic color
  ink-secondary: "#141414"       # near-black body copy and link text
  ink-on-light: "#2f2b23"        # text on parchment and cream surfaces
  ink-muted: "#929172"           # olive muted — secondary labels, hover-state text

  # Brand accent
  primary: "#929172"             # earthy olive-khaki — the Audo accent color
  on-primary: "#ffffff"          # white text on olive surfaces
  primary-hover: "#7c7b61"       # deeper olive for hover/pressed states

  # Interaction / state
  link-hover: "#929172"          # olive shift on nav and body links
  focus-ring: "#929172"          # olive focus ring on inputs and controls
  focus-ring-strong: "#2f2b23"   # warm dark ring on selected/active states

  # Borders
  border: "#d6d6d6"              # light warm-grey hairline — the dominant divider
  border-dark: "#141414"         # near-black bottom-border on active tabs and accents
  border-ink: "#2f2b23"          # warm-brown border on details/accordion elements
  border-muted: "#dad7ce"        # was rgb(218,215,206) — warm hairline on inputs

  # Shadow tints (opaque approximations)
  shadow-soft: "#2f2b23"         # was rgba(47,43,35,0) base — Google format requires hex; drop shadow tint
  shadow-modal: "#000000"        # was rgba(0,0,0,0.3) — deep shadow on drawer/modal overlay

typography:
  display-hero:
    fontFamily: "Century Old Style Std, Cormorant Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  display:
    fontFamily: "Century Old Style Std, Cormorant Garamond, Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-section:
    fontFamily: "Century Old Style Std, Cormorant Garamond, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Century Old Style Std, Cormorant Garamond, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  body-large:
    fontFamily: "Century Old Style Std, Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.48px
  body:
    fontFamily: "Century Old Style Std, Cormorant Garamond, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.2px
  nav-link:
    fontFamily: "Grot 12, DM Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1px
  button-ui:
    fontFamily: "Grot 12, DM Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.1px
  label:
    fontFamily: "Grot 12, DM Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.2px
  label-caps:
    fontFamily: "Grot 12, DM Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.4px
  caption:
    fontFamily: "Grot 12, DM Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 5px
  sm: 8px
  md: 15px
  lg: 22px
  xl: 40px
  2xl: 56px
  3xl: 80px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 15px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 15px 22px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 15px 22px
  button-secondary-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink-secondary}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  button-ghost-hover:
    textColor: "{colors.primary}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 22px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

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

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  product-tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  drawer:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 22px 22px
---

# Audo Copenhagen Design System

## Overview

Audo Copenhagen (formerly Menu, rebranded 2021) is a Danish design house that channels the quiet confidence of Scandinavian craft into a digital space built on warmth rather than austerity. The canvas is a parchment cream (`{colors.background}`) — not the stark white of a gallery or the grey of a tech product, but the specific warmth of handmade paper or unbleached linen, the color that says "made with intention." Against this surface, nearly every typographic element renders in a deep warm-brown ink (`{colors.ink}`) that reads like letterpress printing: ink on natural stock. The result is a site that feels tactile before the user has touched anything.

The typography is the signal move. **Century Old Style Std** — a classical serif drawn from an early twentieth-century typeface tradition — runs across every headline and nearly every body paragraph. Its Roman cuts carry bracketed serifs, slightly condensed proportions, and a calligraphic warmth that connects directly to the hand that made the furniture. This is not a designer reaching for modernity; it is a brand leaning deliberately into craft-period type. Alongside it, **Grot 12** appears as the utilitarian counterpart: a clean, spare grotesque reserved strictly for navigation, UI labels, uppercase metadata, and button text. The pairing is classical-and-modern, editorial-and-functional — each typeface in its lane.

The accent strategy is notably restrained. The olive-khaki (`{colors.primary}`) that surfaces on hover states, filter chips, input focus rings, and the occasional CTA button is never loud. It is the color of aged bronze hardware, of linen upholstery shot in afternoon light. Nothing in the palette competes with the furniture. Every color choice is the design equivalent of a raw-edge shelf against a white wall: the material does the talking.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — the thermal quality of good paper, not the neutrality of a white screen
- **Century Old Style Std** across all display and body copy: a classical serif that signals craft provenance rather than contemporary minimalism
- **Grot 12** for UI and navigation only — the system is strictly dual-voice, never mixed within a single text block
- Earthy olive-khaki (`{colors.primary}`) as the sole chromatic accent — deployed on hovers, focus states, and select CTAs; never scattered
- Warm dark-brown ink (`{colors.ink}`) instead of pure black — the palette is warm across all values, not a cool-neutral system
- Border radius is gentle but present: `{rounded.sm}` (4px) on buttons, `{rounded.md}` (8px) on cards, `{rounded.lg}` (15px) on panels — softer than a pure square-corner system, harder than a rounded-corner one
- `text-transform: uppercase` on Grot 12 labels and metadata — the grotesque earns its place through category clarity, not display scale
- Light warm-grey hairlines (`{colors.border}`) divide content without asserting themselves
- Motion is quiet: 0.1s ease on links and interactive micro-states; 0.4s ease on modal and panel transitions
- Photography leads — the design system exists to frame product imagery, not to compete with it

## Colors

### Surface & Canvas
- **Warm Parchment** (`{colors.background}`): The dominant Audo canvas. A cream that is warmer than off-white but lighter than beige — the color of natural materials at rest. Every page section defaults here.
- **Pure White** (`{colors.surface}`): Product photography cards, content panels, and drawer backgrounds. The starkest surface in the system, used when a product needs maximum clarity of ground.

### Ink & Text
- **Warm Dark Brown** (`{colors.ink}`): The primary text and graphic color. Not pure black — the brown warmth keeps the palette in harmony with the parchment canvas.
- **Near-Black** (`{colors.ink-secondary}`): Body copy and most link text; the shade that carries paragraphs and metadata.
- **Olive Muted** (`{colors.ink-muted}`): Secondary labels, muted supporting text, and hover-state color shift on navigation links. The functional version of the brand accent.

### Brand Accent
- **Earthy Olive** (`{colors.primary}`): The Audo accent. A desaturated, warm khaki that reads as aged brass or natural pigment. Applied to selected filter chips, CTA buttons, input focus outlines, and nav link hover. The hover state deepens to `{colors.primary-hover}` — visible but never dramatic.

### State & Interaction
- **Link Hover** (`{colors.link-hover}`): Navigation and body links shift to this olive on hover — a color-shift rather than an underline-based pattern, with 0.1s ease transition.
- **Focus Ring** (`{colors.focus-ring}`): Olive 2px outline on focused inputs and controls. Consistent with the brand accent tone; WCAG-compliant against the parchment canvas.

### Borders & Dividers
- **Light Warm Grey** (`{colors.border}`): The dominant 1px divider — list separators, card edges, table rows. Present but not assertive.
- **Near-Black Rule** (`{colors.border-dark}`): Active tab underlines and strong-contrast element borders. The darkest stroke in the system.
- **Warm Brown Rule** (`{colors.border-ink}`): Accordion and detail element borders — the `{colors.ink}` value used as a structural border.
- **Input Hairline** (`{colors.border-muted}`): The warm-toned border on search inputs and comboboxes at rest; lighter than `{colors.border}`, almost imperceptible on the parchment canvas.

### Shadow Tints
- **Drawer Shadow** (`{colors.shadow-modal}`): Used on the full-viewport drawer/sidebar overlay. Deep and opaque — the only heavy shadow in the system.

## Typography

### Font Family
- **Primary (Editorial)**: `Century Old Style Std` (self-hosted), with fallbacks `Cormorant Garamond, Georgia, serif`. Three cuts available: Regular, Italic, Bold. The Roman at weight 400 is the default for all display, heading, and body text.
- **Secondary (UI/Grotesque)**: `Grot 12` (self-hosted), with fallbacks `DM Sans, Helvetica Neue, Helvetica, Arial, sans-serif`. Weight 400 regular is the sole weight used; uppercase tracking achieves emphasis.
- The system is strictly dual-voice: Century Old Style for reading, Grot 12 for wayfinding. No mixing within a text element.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 48px / 400 — page-level campaign headlines; the furniture announcement |
| `display` | 36px / 400 — section hero titles and editorial feature headings |
| `heading-section` | 28px / 400 — major section headings, collection names |
| `heading-sub` | 18px / 400 — sub-section and product category headings |
| `body-large` | 24px / 400 / 0.48px — lead paragraphs and featured editorial descriptions |
| `body` | 16px / 400 / 0.2px — standard body copy across all Century Old Style passages |
| `nav-link` | Grot 12 / 15px / 400 — navigation labels, filter categories |
| `button-ui` | Grot 12 / 15px / 600 — button text and strong UI labels |
| `label` | Grot 12 / 14px / 400 / 0.2px — default metadata labels |
| `label-caps` | Grot 12 / 14px / 400 / 0.4px + uppercase — category markers, material tags, uppercase UI |
| `caption` | Grot 12 / 12px / 400 — product metadata, pricing footnotes, supplementary info |

### Principles
- **The serif is the brand voice**: Century Old Style at display scale is not incidental — it connects the brand to its pre-modern craft history. Maintain it at all heading levels without exception.
- **Grot 12 earns its place through uppercase**: labels and nav items use `text-transform: uppercase` to distinguish the grotesque from editorial body copy. This is the primary differentiator between the two voices, not weight.
- **Weight restraint**: the system uses 400 Regular for nearly everything. Weight 600 appears only in button UI labels where interactive affordance demands it. Bold (700) is available in the Century Old Style family but rarely needed.
- **Tracking is light-handed**: Century Old Style body text uses 0.2px tracking — barely perceptible, enough to prevent optical tightness at small sizes. Grot 12 label-caps use 0.4px for readability in uppercase.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. The observed base unit is approximately 7.5px (the most frequent CSS value at 526 instances, likely a Tailwind fractional unit). The practical spacing steps normalize to 5px → 8px → 15px → 22px → 40px → 56px → 80px, following a compressed scale that keeps product grids dense while preserving generous page margins.

### Grid & Container
- Responsive breakpoints cluster at 750px, 991px, 1100px, 1280px, 1440px, and 1600px — a thorough mobile-to-ultrawide coverage
- Max content width: approximately 1440px–1600px centered
- Product grids: likely 4-column on wide desktop, collapsing to 2 → 1 on mobile
- Navigation is sticky with a parchment background that transitions on scroll

### Whitespace Philosophy
- The parchment canvas is the primary breathing material — white space is warm, not clinical
- Product imagery leads every composition; the layout is a frame, not a canvas in its own right
- Section padding is generous but not extravagant: the scale reads as "considered" rather than "austere"

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` 1px hairline | Default cards, list items, page sections |
| Hover Lift (Level 1) | `0px 4px 5px 0px` `{colors.shadow-soft}` at low opacity | Product tiles and interactive cards on hover |
| Panel Shadow (Level 2) | `-4px 0px 24px 0px` neutral soft | Side-panel and filter drawer appearing from viewport edge |
| Modal Overlay (Level 3) | `0px 32px 68px 0px` `{colors.shadow-modal}` at 0.3 | Product lightbox and cart drawer full overlay |
| Focus Ring | 2px solid `{colors.focus-ring}` outline | Keyboard focus on inputs, checkboxes, and controls |

**Shadow Philosophy**: Audo Copenhagen's surfaces are nearly flat. The light drop shadow on product cards is borrowed from the physical world of a catalog — a gentle lift that says "this object can be picked up." Heavier shadows appear only when a layer genuinely overlays the page: the side cart drawer, modals, the cookie dialog. Nothing decorative gets a shadow; the material quality comes from the warm palette, not from depth effects.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Inputs, select elements, accordion borders |
| `sm` | 4px | Buttons — the minimal softening that reads as "made" not "digital" |
| `md` | 8px | Cards, dialog panels |
| `lg` | 15px | Filter chip lists, dropdown containers, larger panel elements |
| `pill` | 9999px | Badge/tag labels (SVG-based), small circular controls |

The radius language is gently layered: buttons have the lightest rounding (`{rounded.sm}`), panels and cards are slightly rounder (`{rounded.md}` and `{rounded.lg}`), and badges are fully pill-shaped. The shape communicates hierarchy — the smallest interaction has the softest corner. Inputs are the one exception: they stay at `{rounded.none}`, connecting the entry field to the sharp-edged world of physical forms and product spec sheets.

## Components

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

### Button Variants
- **`button-primary`** — Olive fill (`{colors.primary}`), white text (`{colors.on-primary}`) in `{typography.button-ui}`, 4px radius (`{rounded.sm}`), 15px vertical padding. The CTA button for checkout, filtering, and primary actions. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill (`{colors.surface}`), near-black text, olive 2px border. The alternative action or cancel button. Hover lightens to the warm border grey.
- **`button-ghost`** — Parchment fill (`{colors.background}`), warm-brown text, no border, no radius. Used for tertiary links styled as buttons — "View all," "Load more." Hover shifts text to `{colors.primary}`.

### Cards
- **`card`** — White surface, 8px radius (`{rounded.md}`), 22px padding. Product tiles and editorial feature cards. Hover state transitions background to parchment (`{colors.background}`) — a warm sink rather than a lift.

### Inputs
- **`input`** — Parchment background, no radius, warm-toned hairline border (`{colors.border-muted}`). Focus state: 2px olive outline ring (`{colors.focus-ring}`) without fill change. Search inputs include a right-side icon slot with 40px right padding.

### Badges / Tags
- **`badge`** — Olive fill, white text, pill radius. Used sparingly for promo labels ("New," "Sale") — the olive keeps the badge within the brand palette rather than reaching for an alert red.
- **`product-tag`** — Parchment fill, muted-olive text, no radius. Material labels (stone, oak, linen) and product category tags in uppercase `{typography.label-caps}`.

### Navigation
- **`nav-bar`** — Parchment background, warm-brown wordmark, Grot 12 nav links at 15px/400/0.1px tracking. Links shift to `{colors.link-hover}` (olive) on hover at 0.1s ease. Sticky with a 0.4s ease transition on background-color.

### Drawer
- **`drawer`** — White surface, no radius (full-height side panel), 22px padding. The cart and product filter drawer uses `-4px 0px 24px 0px` shadow for depth. Closes at 0.4s ease.

## Do's and Don'ts

### Do
- Keep the canvas parchment (`{colors.background}`) across all page sections — it is the thermal quality that makes the brand feel handmade, not a neutral placeholder
- Use Century Old Style for every heading and body text block; switch to Grot 12 only for navigation, buttons, labels, and metadata
- Apply `text-transform: uppercase` to Grot 12 labels (`{typography.label-caps}`) — it signals category and wayfinding without adding a third typeface
- Deploy olive (`{colors.primary}`) as a state color first — hover, focus, selected — and as a fill on primary CTAs only when context demands a strong color
- Use `{rounded.sm}` (4px) on all buttons and `{rounded.md}` (8px) on cards; keep inputs at `{rounded.none}` for the form-field clarity
- Let photography lead — design sections as frames around product imagery, not compositions competing with it
- Use light warm-grey hairlines (`{colors.border}`) as the structural divider; reserve `{colors.border-dark}` for the single active-state underline per view
- Maintain `{spacing.lg}` (22px) as the minimum section padding on mobile — the system should feel spacious even on a small screen

### Don't
- Don't replace Century Old Style with a sans-serif for headings — the serif is the brand voice, not a stylistic option
- Don't introduce saturated accent colors; the olive (`{colors.primary}`) is deliberately desaturated. New colors must read as natural materials, not UI accents
- Don't use Grot 12 for body text passages — it loses character at reading length and violates the dual-voice discipline
- Don't add shadows to static cards or content sections; the flat parchment surface is intentional. Shadows appear only when something genuinely overlays the page
- Don't round inputs beyond `{rounded.none}` — the sharp-edged form field is a deliberate signal of precision within the warm palette
- Don't combine both typefaces within a single text block — Century Old Style headings with Grot 12 body, or vice versa, break the dual-voice system
- Don't scatter olive (`{colors.primary}`) as decorative color — it should shift predictably on hover and focus states, and appear as a button fill only when it is the page's primary action
- Don't reduce inter-section spacing below `{spacing.xl}` (40px) — the system reads as crowded below this threshold and loses its material quality

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column; display type scales to ~24px; nav collapses to icon |
| Mobile | 400–749px | Single column product grid; navigation hamburger; full-width CTAs |
| Tablet | 750–990px | Two-column product grid; sub-navigation may remain visible |
| Desktop | 991–1280px | Full multi-column product grid; sticky nav fully expanded |
| Wide Desktop | 1280–1440px | Wider container; increased horizontal margins |
| Ultrawide | >1440px | Content capped at ~1600px; excess space fills with parchment canvas |

### Touch Targets
- Buttons use 15px vertical padding — comfortable for touch on mobile without becoming blocky
- Product tiles are fully tappable card regions with generous tap area
- Navigation items gain increased padding in the collapsed hamburger menu state
- Filter chips at `{rounded.lg}` (15px) provide a soft, easy-to-tap affordance

### Collapsing Strategy
- **Display type**: scales down from 48px to approximately 24–28px on mobile; Century Old Style remains the heading typeface at every breakpoint
- **Product grid**: multi-column on desktop → 2-column on tablet → 1-column on mobile; card hover states become visible on tap
- **Navigation**: horizontal desktop nav collapses to a hamburger at approximately 750px; the parchment sticky bar remains; cart and account icons persist
- **Editorial sections**: full-bleed parchment sections maintain warmth at all widths; body copy reflows to single column

### Image Behavior
- Product photography fills tiles with `object-fit: cover` at the natural radius of the card (`{rounded.md}`)
- Editorial hero images bleed full-width; Century Old Style headlines overlay or appear adjacent in a two-column split
- Media transitions use 0.4s `cubic-bezier(0.25, 0.46, 0.45, 0.94)` ease — a gentle, slightly anticipatory fade

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm parchment (`{colors.background}`)
- Text: Warm dark brown (`{colors.ink}`)
- Body text: Near-black (`{colors.ink-secondary}`)
- Brand accent: Earthy olive (`{colors.primary}`)
- Muted / secondary: Olive muted (`{colors.ink-muted}`)
- Border: Light warm grey (`{colors.border}`)
- CTA: `{colors.primary}` (olive) on `{colors.on-primary}` (white)

### Example Component Prompts

- "Create an Audo Copenhagen hero section: parchment canvas (`{colors.background}`), a 48px Century Old Style heading at weight 400 in warm dark brown (`{colors.ink}`), a full-bleed product photograph occupying the right two-thirds, and `{spacing.3xl}` (80px) vertical padding below before the next section"
- "Build an Audo Copenhagen primary button: olive fill (`{colors.primary}`), white text (`{colors.on-primary}`) in Grot 12 at 15px / weight 600 (`{typography.button-ui}`), 4px border-radius (`{rounded.sm}`), 15px 22px padding — hover state deepens to `{colors.primary-hover}`"
- "Render an Audo Copenhagen product card: white surface (`{colors.surface}`), 8px radius (`{rounded.md}`), Century Old Style 16px product name in warm-brown (`{colors.ink}`), Grot 12 uppercase 14px material label in olive muted (`{colors.ink-muted}`), no shadow at rest; hover transitions background to parchment (`{colors.background}`) at 0.1s ease"
- "Design an Audo Copenhagen navigation bar: parchment background (`{colors.background}`), wordmark in warm-brown (`{colors.ink}`), Grot 12 nav links at 15px / 400 (`{typography.nav-link}`) — links shift to olive (`{colors.link-hover}`) on hover at 0.1s ease; sticky with 15px 22px padding"
- "Create an Audo Copenhagen search input: parchment background (`{colors.background}`), Century Old Style body text in warm-brown, no border-radius (`{rounded.none}`), warm hairline border (`{colors.border-muted}`) at rest; focus state adds 2px solid olive outline (`{colors.focus-ring}`) with no fill change; 12px 40px 12px 16px padding for right-side icon slot"
- "Build an Audo Copenhagen material tag: parchment fill (`{colors.background}`), Grot 12 uppercase label at 14px / 0.4px tracking (`{typography.label-caps}`) in olive muted (`{colors.ink-muted}`), no border-radius — used as product material descriptor alongside Century Old Style product name"

### Iteration Guide

1. Start on warm parchment (`{colors.background}`). The canvas thermal quality is non-negotiable — pure white reads as a different brand entirely.
2. Set headings in Century Old Style before any other decision. If the serif is wrong, everything else is wrong.
3. Reach for Grot 12 only for navigation, buttons, labels, and uppercase metadata. Any reading-length text belongs to Century Old Style.
4. Apply olive (`{colors.primary}`) first as a hover/focus state. Add it as a button fill only when a primary CTA is required and no other element on the page already carries the accent.
5. Keep borders at `{colors.border}` (light warm grey) for divisions; reserve `{colors.border-dark}` for the single active underline per view context.
6. Radius follows element function: `{rounded.sm}` on buttons, `{rounded.md}` on cards, `{rounded.none}` on inputs. Don't deviate.
7. Photography is always the loudest element — design the surrounding layout as a neutral, warm frame that steps back from the image, not forward.

---

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