---
version: alpha
name: Anne Boysen
description: Gallery-forward Danish design minimalism — a warm off-white canvas, near-black ink, and a single restrained type voice. Generous whitespace lets large product photography breathe; chrome recedes to hairline neutrals so the work, not the interface, carries the page.

colors:
  # Canvas + ink
  background: "#f7f5f1"
  surface: "#ffffff"
  surface-soft: "#efece6"
  ink: "#1a1916"
  ink-secondary: "#5c5a54"
  ink-muted: "#8c897f"

  # Accent — restrained warm clay, used sparingly for emphasis/links
  primary: "#9a6a4c"
  primary-hover: "#7e5439"

  # Neutral scale
  neutral-900: "#1a1916"
  neutral-700: "#444239"
  neutral-500: "#8c897f"
  neutral-300: "#cdc9c0"
  neutral-200: "#e3dfd7"
  neutral-100: "#efece6"

  # Lines + chrome
  border: "#dcd8cf"
  border-strong: "#c4bfb4"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#f7f5f1"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  project-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.3px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.8px

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

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.neutral-700}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  link-text:
    textColor: "{colors.primary}"
    typography: "{typography.body}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 24px 40px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card-text:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 40px

  badge:
    backgroundColor: "{colors.neutral-100}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

  footer:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    padding: 64px 40px
    borderColor: "{colors.border}"
---

# Anne Boysen Design System

## Overview

Anne Boysen's portfolio is contemporary Danish design distilled into a website: simplicity, function, and refined taste, with nothing left on the page that doesn't earn its place. The canvas is a warm off-white (`{colors.background}`) rather than clinical white — a paper-like tone that reads as gallery wall, letting large furniture and product photography sit as the page's only true color. Chrome recedes; the interface is a frame, never a feature.

The system runs on a quiet two-voice typographic pairing. An editorial serif (`{typography.display-hero}`) handles display and section headings — the soft, high-contrast letterforms give the page its sense of craft and heritage — while a neutral grotesque sans (`{typography.body}`, `{typography.nav-link}`) carries navigation, captions, and reading text with no personality of its own, deliberately. The serif speaks; the sans gets out of the way. Type is set large with generous line-height so even dense paragraphs feel unhurried.

Color is almost entirely achromatic: a tight warm-neutral scale running from near-black ink (`{colors.ink}`) through stone grays to the off-white ground. A single restrained accent, a muted clay (`{colors.primary}`), appears only for links and the rare point of emphasis — never for decoration, never as a fill across large areas. The discipline is the point. When everything is neutral, the work photographs as the loudest thing on screen.

Structurally the page is a grid of edge-to-edge image cards separated by air, not lines. Borders, when they appear, are hairline warm grays (`{colors.border}`); corners are square (`{rounded.none}`) almost everywhere, reinforcing the architectural, gallery-catalogue feel. The "no cookies, no tracking" footer note is part of the aesthetic — an honest, low-noise digital presence that mirrors the restraint of the work.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) instead of pure white — gallery wall, not screen
- Editorial serif for display/headings paired with a neutral sans for everything else
- Near-achromatic warm-neutral palette; photography supplies the only real color
- One restrained clay accent (`{colors.primary}`) reserved for links and rare emphasis
- Square corners (`{rounded.none}`) and hairline warm borders — architectural, catalogue-like
- Generous whitespace and large type; each project breathes independently
- Chrome recedes so product photography carries the page

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The warm off-white page ground — paper, not white.
- **Surface** (`{colors.surface}`): Pure white, used inside image frames and media so photography reads true.
- **Surface Soft** (`{colors.surface-soft}`): Warm stone tint for text blocks and quiet panels.
- **Ink** (`{colors.ink}`): Near-black warm charcoal — primary text, headings, dark buttons.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, captions, metadata.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary labels, disabled text.

### Accent
- **Clay** (`{colors.primary}`): The single muted warm accent — links, rare emphasis. Never a large fill.
- **Clay Hover** (`{colors.primary-hover}`): Darker clay for hover/active link states.

### Neutral Scale
- **Neutral 900** (`{colors.neutral-900}`): Strongest ink, same as `{colors.ink}`.
- **Neutral 700** (`{colors.neutral-700}`): Button hover, strong secondary text.
- **Neutral 500** (`{colors.neutral-500}`): Muted labels.
- **Neutral 300** (`{colors.neutral-300}`): Subtle dividers on light panels.
- **Neutral 200** (`{colors.neutral-200}`): Soft fills, hover backgrounds.
- **Neutral 100** (`{colors.neutral-100}`): Badge and chip backgrounds.

### Lines & Chrome
- **Border** (`{colors.border}`): Hairline warm gray for card and section edges.
- **Border Strong** (`{colors.border-strong}`): Input outlines and secondary button edges.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond` (editorial high-contrast serif), fallbacks `Georgia, serif`
- **Text / UI**: `Inter` (neutral grotesque sans), fallbacks `Helvetica, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | Large serif hero statement |
| `section-heading` | Serif section titles |
| `project-title` | Project / card names (sans) |
| `eyebrow` | Small uppercase labels above headings |
| `body-large` | Lead paragraphs, project intros |
| `body` | Standard reading text |
| `body-small` | Dense copy, secondary descriptions |
| `nav-link` | Top navigation links |
| `caption` | Photo credits, metadata, footer notes |
| `button-ui` | Button and CTA labels |

### Principles
- **Two voices, strict roles**: serif announces (display + section headings), sans informs (everything else). Never mix them within one role.
- **Set large, breathe wide**: body line-height stays at 1.6–1.7; headings get tight tracking so the serif holds its shape at size.
- **Restraint over weight**: the sans rarely exceeds weight 500. Hierarchy comes from size and serif/sans contrast, not bold.
- **Wide tracking only on micro-labels**: eyebrows and button labels use positive letter-spacing; body and headings do not.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The rhythm is wide — large jumps (`{spacing.2xl}`–`{spacing.4xl}`) carry the gallery whitespace between sections, while a tight base scale (`{spacing.xs}`–`{spacing.md}`) handles inline detail.

### Grid & Container
- Generous max content width with deep side margins on desktop
- Portfolio as a grid of edge-to-edge image cards, separated by space rather than rules
- Hero: single large serif statement over abundant top padding
- Two-column splits for project detail (image + text panel)

### Whitespace Philosophy
- **Gallery emptiness**: each project gets room to stand alone; whitespace is the primary separator, not borders.
- **Square and architectural**: corners are unrounded; structure is implied by alignment and air.
- **Photography first**: media runs to the edges of its frame; surrounding UI stays neutral and quiet.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text blocks on canvas |
| Hairline (Level 1) | `1px solid {colors.border}` | Card and section edges |
| Defined (Level 2) | `1px solid {colors.border-strong}` | Inputs, secondary buttons |
| Focus | `2px solid {colors.ink}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Depth is almost entirely flat. The system avoids drop shadows — separation comes from whitespace and hairline warm borders, in keeping with the catalogue/gallery feel. Where lift is needed (rare), it's a barely-perceptible shadow, never a floating card.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — cards, buttons, images, inputs |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Small functional containers |
| `md` | 8px | Occasional softer panels |
| `pill` | 9999px | Badges and small status chips only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.card-project}`, `{components.nav-bar}`).

### Buttons
- **`button-primary`** — Solid near-black ink, off-white label, square corners, wide-tracked uppercase-ish label. The default CTA.
- **`button-secondary`** — Off-white surface with a `{colors.border-strong}` hairline outline.

### Navigation
- **`nav-bar`** — Off-white sticky header, sans links at 14px, hairline bottom border. Minimal, no fills.

### Cards
- **`card-project`** — Edge-to-edge photography on white surface; square corners; hairline border, no shadow. Title sits below in sans.
- **`card-text`** — Warm stone panel (`{colors.surface-soft}`) for project descriptions paired beside an image.

### Pills & Badges
- **`badge`** — Neutral chip, warm gray fill, secondary ink text, full pill — the one place radius appears.

### Inputs
- **`input`** — White surface, square corners, `{colors.border-strong}` outline. Focus swaps the border to `{colors.ink}`.

### Footer
- **`footer`** — Off-white, quiet secondary-ink captions including the "no cookies, no tracking" note. Hairline top border.

## Do's and Don'ts

### Do
- Use the warm off-white `{colors.background}` as the ground, not pure white
- Pair the editorial serif for headings with the neutral sans for all text/UI
- Keep the palette achromatic and let photography supply the color
- Reserve the clay accent (`{colors.primary}`) for links and rare emphasis only
- Use square corners (`{rounded.none}`) almost everywhere
- Separate sections with whitespace first, hairline borders second
- Set body type large with generous line-height

### Don't
- Don't fill large areas with the clay accent — it's a link/emphasis color
- Don't introduce drop shadows or floating cards — the system is flat
- Don't round card or button corners — square is the identity
- Don't use the serif for body or UI text, or the sans for display headings
- Don't add saturated or cool colors into the chrome
- Don't crowd projects — each needs its own air

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column stack, reduced side margins, hero serif scales down |
| Tablet | 600–1024px | 2-column project grid, expanded padding |
| Desktop | 1024–1440px | Full grid with deep side margins |
| Large Desktop | >1440px | Centered content, maximum whitespace |

### Touch Targets
- Nav links and buttons keep comfortable vertical padding (12–14px)
- Project cards are large tap targets across the grid

### Collapsing Strategy
- Hero serif: scales down proportionally on mobile, keeps tight tracking
- Project grid: multi-column → single column
- Two-column project detail (image + text panel): stacks vertically
- Navigation: horizontal links → minimal menu toggle
- Section spacing compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

### Image Behavior
- Product photography stays edge-to-edge within its frame at all sizes
- Aspect ratios are preserved; images never crop awkwardly to fit chrome
- White media surface (`{colors.surface}`) keeps product shots reading true against the warm canvas

---

## Agent Prompt Guide

### Quick Color Reference
- Background: warm off-white `{colors.background}`
- Heading text: near-black ink `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Accent / links: clay `{colors.primary}`
- Borders: hairline `{colors.border}`
- Primary CTA: ink fill `{colors.ink}`, square corners

### Example Component Prompts
- "Create a hero on warm off-white `{colors.background}`. Headline at 64px Cormorant Garamond weight 400, line-height 1.05, letter-spacing -1px, color `{colors.ink}`. Lead paragraph at 19px Inter weight 400, line-height 1.7, color `{colors.ink-secondary}`. Square ink CTA (`{colors.ink}` fill, off-white label, 14px 28px padding, 0px radius)."
- "Design a project card: white surface `{colors.surface}`, edge-to-edge image, square corners, 1px `{colors.border}` outline, no shadow. Title below at 22px Inter weight 400 in `{colors.ink}`."
- "Build a text panel beside an image: warm stone `{colors.surface-soft}` background, 40px padding, body at 16px Inter line-height 1.6, a clay `{colors.primary}` inline link."
- "Create navigation: off-white sticky header, Inter 14px links in `{colors.ink}`, hairline `{colors.border}` bottom edge, no fills."

### Iteration Guide
1. Start from the warm off-white ground — never pure white for the page
2. Serif headings, sans everything else — keep the two voices in their lanes
3. Keep chrome achromatic; let photography be the only saturated thing
4. Square corners by default; pill radius is reserved for small badges
5. Separate with whitespace first, then hairline warm borders — no shadows
6. Use clay only for links and the occasional emphasis, never as a fill

---

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