---
version: alpha
name: "Augustinus Bader"
description: "Token-first design system for Augustinus Bader — clinical luxury skincare where scientific precision meets warm, human-toned restraint."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#e5e7eb"
  surface-dark: "#000000"

  # Text / ink
  ink: "#151515"
  on-background: "#151515"
  on-surface: "#151515"
  on-surface-dark: "#ffffff"

  # Brand accent — signature copper/skin tone
  primary: "#cf9c87"
  on-primary: "#151515"
  primary-container: "#f2e8e3"  # tinted blush tint of the copper accent

  # Interactive states
  text-hover: "#cf9c87"    # hover on nav links shifts to copper
  focus-ring: "#cf9c87"    # copper focus outline, 2px solid
  focus-tint: "#f2e8e3"   # light blush tint for focus backgrounds

  # Borders
  border: "#e5e7eb"
  border-dark: "#1f2937"

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

typography:
  display-hero:
    fontFamily: "DM Serif Display, Georgia, 'Times New Roman', serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  display:
    fontFamily: "DM Serif Display, Georgia, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "DM Serif Display, Georgia, 'Times New Roman', serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.5px
  body-large:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-ui:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: 0.35px
  caption:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 1.2px
  caption-label:
    fontFamily: "Maison Neue, 'Maison Neue', Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 3px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 8px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 8px
  button-copper:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 8px
  button-copper-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 8px
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 15px 16px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 15px 16px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-surface-dark}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-surface-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-surface-dark}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
---

# Augustinus Bader Design System

## Overview

Augustinus Bader's website is science translated into luxury — a rare e-commerce surface that refuses to choose between clinical authority and sensory warmth. The page opens on pure white (`{colors.background}`) framing rich product photography, but the true signature is the copper-and-skin-toned accent (`{colors.primary}`) that runs through the system: the "Learn More" CTA, focus rings, nav-link hover states, all shift to that unmistakable terracotta warmth. Every other major beauty brand announces luxury with gold or cobalt — Augustinus Bader uses the colour of human skin. It reads as the product itself becoming the interface.

The typographic architecture is a precise two-voice contract. DM Serif Display (`{typography.display-hero}`) handles all editorial moments — 72px hero headlines, 36px section titles, 30px feature heads — with the unhurried confidence of a medical journal rendered in fine print. Below it, Maison Neue (a refined grotesque) carries every transactional surface: navigation, body copy, buttons, labels, prices. The pairing communicates two things at once: the academic credibility behind the TFC8 stem-cell science, and the accessibility of a brand that wants you to actually understand what you're putting on your skin. Headlines never shout. Buttons are compact (3px radius, almost sharp). The system is formally elegant without ever reading as cold.

The third defining trait is tonal control through contrast. Section-level layouts flip from white-on-ink to ink-on-white with deliberate frequency — the near-black (`{colors.ink}`, #151515) appears as both text and full-section background, letting product imagery breathe against dark canvases. This dark-surface fluency is unusual for a white-dominant skincare brand and reinforces the clinical gravity: this isn't a pastel wellness brand. It's a precision formulation company that happens to care intensely about beauty.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with near-black ink (`{colors.ink}`) — never softened to cream or grey
- Signature copper/skin accent (`{colors.primary}`) — the only chromatic note, appears as CTAs, focus rings, and hover states
- Dual-typeface system — DM Serif Display for editorial heads, Maison Neue for all UI and transactional surfaces
- Near-sharp 3px radius (`{rounded.xs}`) on buttons and inputs — clinical precision with one degree of softness
- Full-section dark inversions — near-black panels alternate with white throughout the page
- Maison Neue uppercase with wide tracking for micro-labels and category markers — military precision at small sizes
- 0.2s ease transitions on interactive elements — responsive but not theatrical
- Breakpoints at 601px, 1280px, 1510px — three-tier responsive strategy with a generous desktop maximum
- Copper focus ring (`{colors.focus-ring}`) at 2px solid — accessible without breaking the warm-restraint palette
- Link hover shifts text from near-black to copper — the system's signature interactive moment

## Colors

### Primary Canvas
- **Pure White** (`{colors.background}`): The default page canvas — clinical cleanliness, no warm or cool bias
- **Near-Black** (`{colors.ink}`): Primary text, button fills, full-section dark backgrounds. Slightly softened from pure black (#000000) — `#151515` carries gravity without harshness
- **Mid-Black** (`{colors.surface-dark}`): Used for pure-black email input backgrounds and certain full-bleed dark panels

### Brand Accent
- **Augustinus Copper** (`{colors.primary}`): The signature chromatic note — copper/terracotta skin tone that functions as CTAs ("Learn More"), nav hover states, and the 2px focus ring. The colour is both unique to the brand and literally human; no other skincare system uses skin tone as its accent
- **Blush Container** (`{colors.primary-container}`): A pale blush tint of the copper — used for badge backgrounds and soft state fills where the full copper is too saturated

### Neutral Surfaces
- **Warm Grey** (`{colors.surface}`): Default secondary surface — grey-200 level used for panel backgrounds, cookie dialog surfaces, low-emphasis container fills. Tailwind's `#e5e7eb` carries a subtle warm bias
- **Border Default** (`{colors.border}`): Hairline borders on form inputs, dividers — matching the warm grey surface value for tonal unity

### Interactive States
- **Text Hover** (`{colors.text-hover}`): Nav links shift from near-black to copper on hover — the system's primary interactive signal
- **Focus Ring** (`{colors.focus-ring}`): 2px solid copper outline on focused inputs and interactive elements — WCAG-compliant against both white and dark surfaces

### Semantic
- No bespoke success/warning/error tokens are declared in the live system — the brand defers to browser and framework defaults for these states

## Typography

### Font Family
- **Display / Editorial**: `DM Serif Display`, with fallbacks: `Georgia, 'Times New Roman', serif`. An old-style serif with high contrast and generous ink traps — the typeface choice signals academic weight and luxury simultaneously. Used for all editorial headings (72px display down to 30px section heads)
- **Primary UI / Body**: `Maison Neue`, with fallbacks: `Arial, Helvetica, sans-serif`. A refined grotesque from Milieu Grotesque — precise and legible at any size. Carries navigation, body, buttons, labels, prices, and all transactional copy
- **Supporting Sans**: Lato appears in select secondary contexts (cookie dialog, specific banner typography) — not a primary system font but present in the deployed CSS
- **OpenType Features**: Maison Neue uses `text-transform: uppercase` with `letter-spacing: 0.35–1.4px` for label contexts — the system's signature micro-typography

*Note: Maison Neue is a commercially licensed typeface from Milieu Grotesque. For external implementations, Söhne or GT America serve as close substitutes; DM Sans or Inter Tight work as web-safe alternatives. DM Serif Display is Google Fonts and freely available.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px DM Serif Display — hero section titles, landmark editorial moments |
| `display` | 36px DM Serif Display — section openers, feature headlines, product story heads |
| `heading-section` | 30px DM Serif Display — secondary editorial headings, feature sub-sections |
| `heading-sub` | 20px Maison Neue 500 — content labels, block sub-heads, sidebar titles |
| `body-large` | 16px Maison Neue 400 — primary body copy, product descriptions, editorial prose |
| `body` | 14px Maison Neue 400 — secondary copy, form text, compact panels |
| `nav-link` | 16px Maison Neue 500 — primary navigation links |
| `button-ui` | 14px Maison Neue 500 — button labels, sentence case |
| `label-ui` | 14px Maison Neue 500 + 0.35px tracking — category sub-labels with slight tracking |
| `caption` | 12px Maison Neue 400 + 1.2px tracking — micro-labels, often uppercase |
| `caption-label` | 12px Maison Neue 500 — small UI labels, ingredient markers |

### Principles
- **Serif editorial, sans transactional**: DM Serif Display sets the brand's intellectual credibility; Maison Neue closes the transaction. The rule is absolute — no serif in buttons, navigation, or forms
- **Restrained sizing**: Display rarely exceeds 72px — Augustinus Bader does not need to shout. Clinical authority communicates through precision, not scale
- **Uppercase with tracking for labels**: Maison Neue at 12–14px with 0.35–1.4px letter-spacing functions as the system's utility layer — product categories, filter labels, ingredient markers all live here
- **Weight 500 as the ceiling**: The heaviest UI weight is 500 (Medium). Body copy runs at 400. No bold weights appear in primary product interfaces — confidence, not assertion
- **Motion on interactive text**: Link color transitions at 0.2s ease from `{colors.ink}` to `{colors.primary}` — the copper hover is as much a typographic feature as a state change

## Layout

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

The system operates at generous scale — 40px (`{spacing.xl}`) is the default section-internal padding, while major section breaks reach 96–128px. This isn't a tight e-commerce grid; it's an editorial pace that treats each product as a story to be absorbed, not scanned.

### Grid & Container
- Max content width: 1510px (the widest breakpoint) — unusually generous, giving large viewport layouts true editorial sprawl
- Standard container: 1280px max-width with symmetric horizontal padding (typically 40–64px)
- Product grid: 3–4 columns at desktop with generous gutters, collapsing to 1–2 on mobile
- Hero: full-bleed photography with centered or left-aligned text stack — headline, sub-copy, single CTA
- Section rhythm: alternating white-canvas and full-black-surface panels, each full-width

### Whitespace Philosophy
- **Clinical breathing room**: Sections are separated by 96–128px of vertical space — each panel reads as a complete exhibit, not a stacked component
- **Photography as canvas**: Product shots are given enormous negative space, especially on dark backgrounds — clinical isolation rather than lifestyle staging
- **Text restraint**: Type columns rarely exceed 600–720px even in wide containers; the brand never floods a line with more than ~80 characters

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default state — page canvas, product cards, all surfaces at rest |
| Input Ring (Level 1) | `2px solid {colors.focus-ring}` copper outline | Focus state on email input and interactive form elements |
| Dark Surface (Level 2) | `background: {colors.ink}` section fill | Full-section near-black inversion — editorial panels, feature zones |
| Button Border (Level 3) | `2px solid {colors.background}` or `{colors.ink}` on button outlines | Outline button variant — creates graphic separation without shadow |
| Transition Glide (Motion) | `0.2s ease` on color/bg/border/text-decoration | Button and link interactive transitions — smooth, unhurried |

**Shadow Philosophy**: Augustinus Bader is essentially shadow-free. The system achieves depth through tonal inversion rather than drop shadows — alternating near-black and white full-section panels creates compositional depth that no `box-shadow` could match. Where a lesser brand would float cards on feathered backgrounds, Augustinus Bader simply changes the ground. The only "shadow" in the live system is a transparent zero-value (`rgba(0,0,0,0) 0px 0px 0px 0px`) on buttons — a default cleared state, not a design decision. This flatness reads as confidence: the product speaks for itself.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Input fields, cookie dialog panels, select elements |
| `xs` | 3px | Primary buttons ("Shop Now", "Complimentary Membership") — the signature near-sharp CTA |
| `sm` | 4px | Secondary buttons ("Quick Shop"), modal elements |
| `md` | 8px | Tertiary UI elements, some panel chrome |
| `pill` | 9999px | Not used in primary system |

The system is nearly sharp by design — `{rounded.xs}` at 3px is imperceptible as a curve but removes the clinical coldness of a perfectly square edge. The brand's shape philosophy mirrors its science: precision first, with exactly enough humanity to keep it from feeling sterile.

## Components

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

### Button Variants

- **`button-primary`** — Near-black fill (`{colors.ink}`), white text, 3px radius, 14px Maison Neue 500. The default CTA: "Shop Now", "Complimentary Membership". Hover transitions to copper (`{colors.primary}`) fill in 0.2s
- **`button-copper`** — Copper fill (`{colors.primary}`), near-black text (`{colors.on-primary}`), 3px radius. Used for "Learn More" and secondary editorial CTAs. The accent button reveals the brand's warmth; hover inverts to near-black
- **`button-outline`** — White background, near-black border (2px solid), near-black text. Cookie dialog secondary action ("Reject all", "Reject All" type). Hover fills to near-black, text inverts to white

### Cards

Product cards are flat — no shadow, no radius on the card container itself (`{rounded.none}`), no border. The product photograph occupies the full card width flush to top. On dark-surface panels, `{components.card-dark}` provides a near-black container for white-text product presentations.

### Inputs

Email input in newsletter capture uses a transparent-background input on dark surfaces — `{components.input}` with white text, no border by default, 0px radius (sharp). Focus triggers a 2px solid copper outline (`{colors.focus-ring}`), no shadow or glow.

### Navigation

- Top bar: white background with logo left (or centered), full navigation link row, account/cart icons
- Nav links: `{typography.nav-link}` (16px Maison Neue 500, near-black) — hover shifts text color to copper (`{colors.text-hover}`) in 0.2s ease
- Sticky behavior: navigation stays fixed; transitions between transparent and opaque on scroll
- Mobile: collapses to hamburger with full-panel overlay

### Badges / Labels

- Ingredient and category labels: `{typography.caption}` with uppercase transform and wide tracking (1.2px+) — clinical precision at micro scale
- Product "Quick Shop" overlays: compact button at `{rounded.sm}` with near-black fill and white text

## Do's and Don'ts

### Do
- Use `{colors.primary}` (copper) as the single chromatic accent — CTAs, focus rings, hover states. Never introduce a second accent color
- Set display headlines in DM Serif Display — the serif is the brand's intellectual credential and cannot be replaced with a sans
- Keep button radius at `{rounded.xs}` (3px) — not sharp, not rounded. The near-sharp edge is precise and intentional
- Use Maison Neue with uppercase transform and wide letter-spacing (0.35–1.4px) for micro-labels and category markers
- Alternate white-surface and full-dark-surface (`{colors.ink}`) sections to create compositional depth without shadows
- Respect the 0.2s ease transition on all interactive color states — copper reveals itself slowly, never snaps
- Keep body copy at `{typography.body}` (14px) or `{typography.body-large}` (16px) — resist bumping for "premium feel"
- Use `{colors.focus-ring}` (copper) as a 2px solid outline for keyboard focus — it reads clearly on both white and dark surfaces

### Don't
- Don't introduce gradients — the system achieves richness through tonal contrast and photography, not surface transitions
- Don't add drop shadows for elevation — dark-surface inversions do that work, and do it better
- Don't use DM Serif Display below 24px — the serif's contrast and ink traps are calibrated for display scale; smaller sizes need Maison Neue
- Don't round buttons beyond `{rounded.sm}` (4px) — pill-shaped CTAs read as lifestyle brand, not clinical luxury
- Don't use pure `#000000` as the primary ink — Augustinus Bader's near-black (`#151515`) is the deliberate choice; hard black reads as cheaper
- Don't uppercase DM Serif Display — the serif reads at mixed case; uppercase in display contexts belongs to Maison Neue only
- Don't introduce a third typeface — Lato exists in secondary cookie/dialog contexts but is not a primary system voice; new UI should use Maison Neue
- Don't crowd photography — product imagery needs significant negative space; give it room to read as clinical still-life, not catalog

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <601px | Single-column, hamburger nav, stacked product cards, heading scale reduced |
| Tablet | 601px–1280px | 2-column product grid, mid-range heading sizes, nav may partially collapse |
| Desktop | 1280px–1510px | Full multi-column layout, complete horizontal nav, editorial two-column sections |
| Large Desktop | >1510px | Maximum container width reached; layout stabilizes with generous side margins |

### Touch Targets
- Primary CTAs: minimum 44px touch height achieved via `16px` vertical padding on 14px type
- Navigation links: full-height tap targets in mobile overlay with 16px+ vertical padding
- Product cards: full card tappable, not just the title link

### Collapsing Strategy
- **Nav**: Full horizontal link row collapses to hamburger icon; overlay panel on open with near-black or white background depending on section context
- **Hero**: Full-bleed photography maintained on mobile; headline scales from 72px → ~36px, sub-copy from 16px stays at 14px
- **Product grids**: 3–4 column → 2 column → 1 column with consistent gutters; product imagery maintains its aspect ratio
- **Section spacing**: 96–128px desktop → 48–64px mobile — preserves editorial breathing room at reduced scale
- **Dark/light alternation**: Section contrast inversions are maintained at every breakpoint — the structure doesn't simplify to white-only on mobile

### Image Behavior
- Product photography maintains consistent aspect ratios across breakpoints (square or portrait)
- Dark-surface sections use photography as a contrast layer — images are well-lit against the near-black canvas
- No gradient scrims over photography — the images are lit and composited to stand without overlays

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Primary Ink: `{colors.ink}` (#151515)
- Copper Accent: `{colors.primary}` (#cf9c87)
- Dark Surface: `{colors.surface-dark}` (#000000)
- Warm Grey: `{colors.surface}` (#e5e7eb)
- Border: `{colors.border}` (#e5e7eb)
- Focus Ring: `{colors.focus-ring}` (#cf9c87) — 2px solid copper
- Hover State: `{colors.text-hover}` (#cf9c87) — nav links shift to copper

### Example Component Prompts

- "Create an Augustinus Bader hero section on `{colors.background}` (#ffffff). Center a DM Serif Display headline at 72px, weight 400, line-height 1.0, color `{colors.ink}` (#151515). Below: 16px Maison Neue 400 body paragraph, max-width 600px. Add one primary CTA: `{colors.ink}` background, white text (#ffffff), 14px Maison Neue 500, padding 16px 24px, border-radius 3px. Hover transitions background to `{colors.primary}` (#cf9c87) in 0.2s ease."
- "Design a product card on `{colors.background}` (#ffffff). Product photograph occupies full card width at top, flush, no radius. Below: 12px Maison Neue 500 uppercase category label with 1.2px letter-spacing in `{colors.primary}` (#cf9c87). Product name in 20px DM Serif Display 400 in `{colors.ink}`. Price in 14px Maison Neue 400. 'Quick Shop' button at bottom: `{colors.ink}` fill, white text, 14px Maison Neue 500, padding 14px 12px, border-radius 4px."
- "Build a full-width dark editorial section — background `{colors.ink}` (#151515), padding 96px horizontal margins. Centered DM Serif Display headline at 36px, weight 400, line-height 1.11, color white. Two-sentence body paragraph in 16px Maison Neue 400 white, max-width 560px. Copper CTA button (`{colors.primary}` #cf9c87 fill, `{colors.ink}` text, 3px radius, 16px vertical padding). No shadows, no borders on the section container."
- "Style a Maison Neue navigation bar — white background, sticky. Left: wordmark in DM Serif Display 24px weight 400 `{colors.ink}`. Center: horizontal link row in 16px Maison Neue 500, `{colors.ink}` color, `text-decoration: none`. Hover: color transitions to `{colors.primary}` (#cf9c87) in 0.2s ease (`transition: color 0.2s ease`). Right: account and cart icons in `{colors.ink}`. No bottom border — white nav on white canvas needs no separator."
- "Create a newsletter email capture on a `{colors.surface-dark}` (#000000) dark panel. Label: 12px Maison Neue 500 uppercase, letter-spacing 1.2px, white. Input field: transparent background, white text, 14px Maison Neue 400, no border, padding 8px 12px, border-radius 0px. Focus: 2px solid `{colors.focus-ring}` (#cf9c87) outline. Submit: `{colors.background}` (#ffffff) background, `{colors.ink}` text, 14px Maison Neue 500, 3px radius, padding 16px 24px."
- "Design a product ingredient badge — `{colors.primary-container}` (#f2e8e3) background, 0px radius, padding 4px 10px. Text in 12px Maison Neue 400, `{colors.ink}` color, uppercase, 1.2px letter-spacing. This is the micro-label context — clinical precision at small scale."

### Iteration Guide

1. Start with `{colors.background}` (#ffffff) as the default canvas — pure white, no warm or cool bias
2. Use `{colors.primary}` (#cf9c87) copper as the only accent: it appears on CTAs ("Learn More"), focus rings, and hover states. Nothing else gets chromatic color
3. Set display moments in DM Serif Display — editorial weight and intellectual authority. Switch to Maison Neue for every interactive or transactional element
4. Keep border-radius at `{rounded.xs}` (3px) for primary CTAs and `{rounded.sm}` (4px) for secondary — precision, not personality
5. Achieve section depth through dark inversions (`{colors.ink}` #151515 full-section backgrounds) rather than shadows or gradients
6. Maison Neue uppercase labels with 0.35–1.4px tracking are the system's precision layer — ingredient markers, category labels, UI micro-copy
7. Transition every interactive color state at `0.2s ease` — copper reveals itself, never snaps
8. Give product photography negative space — especially on dark surfaces. Clinical isolation, not catalog crowding

---

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