---
version: alpha
name: "Klim Type Foundry"
description: "Jet-black editorial showcase where Söhne governs every register, per-typeface specimen palettes erupt from the dark canvas, and a 2px radius is the only concession to softness"

colors:
  # Surface / canvas
  background: "#000000"
  surface: "#1c1c1c"
  surface-elevated: "#282828"

  # Text / ink
  ink: "#ffffff"
  ink-muted: "#8d8d8d"
  on-background: "#ffffff"
  on-surface: "#ffffff"

  # Brand accent — primary interactive red (links, CTAs)
  primary: "#e90702"
  on-primary: "#000000"
  primary-container: "#3a0000"  # deep red tint for hover surfaces

  # Interaction states
  text-hover: "#ffff79"         # yellow hover/focus highlight, extracted from hover delta
  focus-ring: "#ffffff"

  # Specimen / typeface palette (extracted from font tiles)
  specimen-orange: "#d33c03"    # Die Grotesk tile background
  specimen-teal: "#3c585f"      # Martina Plantijn tile background
  specimen-blue: "#24a7f2"      # Family tile background
  specimen-deep-teal: "#101c19" # The Future Collection tile background
  specimen-peach: "#ffe6d9"     # Martina Plantijn tile foreground
  specimen-yellow: "#ffff79"    # Family tile foreground
  specimen-cyan: "#93ffe6"      # The Future Collection tile foreground

  # Neutrals
  border: "#555555"
  ink-subtle: "#646464"
  shadow-soft: "#1c1c1c"

  # Semantic (minimal on a dark-first site)
  error: "#e90702"

typography:
  display-hero:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1px
  display:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Soehne, -apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  mono-icon:
    fontFamily: "SoehneIkon, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 2px
  sm: 8px
  md: 10px
  lg: 30px
  xl: 46px
  2xl: 92px
  3xl: 183px

rounded:
  none: 0px
  sm: 2px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 8px
  font-specimen-tile:
    backgroundColor: "{colors.specimen-orange}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 8px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 0px 8px
  input-focus:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 0px 8px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  nav-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Klim Type Foundry Design System

## Overview

Klim Type Foundry's website is rare among type foundry showcases: it refuses to step aside for its own work. The page opens onto a pure black canvas (`{colors.background}`) that doesn't whisper but insists — black as an environment, as a statement, as the only colour that can hold an entire catalog of typefaces without competing with any of them. Söhne, the foundry's house grotesque, governs every register from wordmark to caption. There is no secondary typeface, no serif accent, no decorative ornament. The site is, in essence, a proof that Söhne alone can carry an entire typographic environment.

The interaction language is a clean inversion. Links, navigation items, and buttons rest as white text on black at their default state; on hover, the background flips to white and the text to black. This polarity mechanic — first discovered on the foundry name link in the header, confirmed across all navigation — runs throughout without variation. The sole exception is the accent highlight: `{colors.text-hover}`, a sharp yellow that appears as the hover colour reference in the extracted CSS variables, creating a single charged moment of colour in an otherwise strictly monochrome interaction palette.

What makes the site genuinely distinctive is its use of per-typeface specimen tiles. Each font listing appears as a rectangular card whose background and text colours are drawn directly from that font's identity: the Die Grotesk tile burns orange-red (`{colors.specimen-orange}`), Martina Plantijn sits in a muted coastal teal (`{colors.specimen-teal}`) with a warm peach foreground (`{colors.specimen-peach}`), The Future Collection occupies a deep inky dark-teal (`{colors.specimen-deep-teal}`) against glowing cyan (`{colors.specimen-cyan}`). These are not branding decisions made by Klim — they are editorial decisions made for each typeface. The black canvas recedes; the typefaces speak in their own colour.

**Key Characteristics:**
- Jet-black `{colors.background}` as the universal canvas — not dark grey, pure black
- Söhne (Buch 400, Halbfett 700) as the sole typeface: self-hosted woff2, zero fallback to any other custom face
- SoehneIkon, an icon variant of Söhne, handles all iconography — maintaining typographic unity even in pictographic contexts
- Hover interaction is total colour inversion: white on black flips to black on white across all interactive elements
- `{colors.text-hover}` yellow as the accent highlight moment — a single chromatic spike in an otherwise binary palette
- Per-typeface specimen tiles carry their own contextual palettes (orange, teal, blue, deep-teal, peach, cyan) as editorial statements about each font
- Universal 2px border-radius applied to all interactive elements — buttons, inputs, images, specimen tiles — the smallest radius that isn't zero
- No shadows anywhere in the system — depth is zero; the dark canvas provides all figure-ground separation
- `{colors.primary}` red used for links and semantic emphasis — a minimal chromatic accent outside of specimen tiles
- Dense, compact spacing (dominant values: 8px, 10px, 30px) — the catalog is efficient, not luxurious
- 8 breakpoints from 430px to 2000px — thorough responsive coverage for a type showcase that must render well at every scale
- Quasar (Vue) framework with 10 extracted components — the site is a full SPA

## Colors

### Surface & Canvas
- **Klim Black** (`{colors.background}`): The absolute primary canvas — pure black, no warm or cool tint. Every content surface is anchored here. The foundry's logo appears reversed (white on black) as the only logotype treatment.
- **Dark Surface** (`{colors.surface}`): A fractional lift from pure black, used for input backgrounds and interactive surfaces that need to be distinguishable from the canvas without catching the eye.
- **Elevated Surface** (`{colors.surface-elevated}`): The next step up — used for focus states and active component backgrounds.

### Text / Ink
- **Primary White** (`{colors.ink}`): All text on dark surfaces. The dominant colour by extraction count (599 instances) — the entire catalog is set in white on black.
- **Muted Grey** (`{colors.ink-muted}`): Secondary text, metadata, captions, form placeholders. 106 extracted instances.
- **Mid Grey** (`{colors.ink-subtle}`): A slightly darker muted register, appearing in contextual UI labels and less prominent navigation chrome.

### Brand Accent
- **Klim Red** (`{colors.primary}`): The primary interactive link colour and semantic emphasis. Extracted directly from link states and a featured "American Grotesk Collection" specimen tile.
- **Yellow Highlight** (`{colors.text-hover}`): The hover/focus accent — a charged yellow extracted from the CSS hover delta. Used exclusively for hover and focus moments, never in body copy.

### Specimen Palette
Each typeface tile carries its own contextual palette. These are not UI tokens in the conventional sense — they are editorial colour decisions made per-font:
- `{colors.specimen-orange}` / `{colors.on-primary}`: Die Grotesk — fire-orange background, black text
- `{colors.specimen-teal}` / `{colors.specimen-peach}`: Martina Plantijn — coastal teal with warm peach
- `{colors.specimen-blue}` / `{colors.text-hover}`: Family — sky blue with yellow
- `{colors.specimen-deep-teal}` / `{colors.specimen-cyan}`: The Future Collection — deep inky teal with electric cyan

### Borders
- **Border** (`{colors.border}`): The mid-grey used for button outlines, input borders, and separator rules. 67 instances.

## Typography

### Font Family
- **Primary**: `Soehne` (self-hosted woff2: Sohne-Buch at weight 400, Sohne-Halbfett at weight 700), with fallbacks: `-apple-system, system-ui, BlinkMacSystemFont, Helvetica, Arial, sans-serif`
- **Icon variant**: `SoehneIkon` (self-hosted woff2: SohneIkon-Buch), an icon font that extends Söhne into pictographic territory without breaking typographic unity
- **OpenType features**: None extracted — Söhne's design handles its own kerning and spacing at all sizes without additional feature settings

*Söhne is Klim's own grotesk, directly related to Akzidenz-Grotesk via the aesthetic lineage of Helvetica. Web licenses are obtained directly from klim.co.nz. Closest Google Font equivalent for mockups: IBM Plex Sans (closest weight correspondence) or Work Sans at heavier weights.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Foundry name at large scale, major section headings, hero specimen typesetting |
| `display` | Typeface names on listing pages, section headlines at 36px weight 700 |
| `heading-section` | Sub-section labels, category heads |
| `heading-sub` | Card secondary headers, specification labels |
| `body-large` | Lead copy, descriptive paragraphs for individual typefaces |
| `body` | Primary catalog text, navigation links, form labels — Söhne Buch 16px is the workhorse |
| `nav-link` | All navigation — identical to body, separated by context only |
| `button-ui` | All interactive controls: purchase buttons, filter controls, specimen toggles |
| `caption` | Metadata, version numbers, price points, release dates |
| `mono-icon` | SoehneIkon glyph rendering — iconography treated as type |

### Principles
- **One typeface, all registers**: Söhne in two weights (Buch 400 and Halbfett 700) covers every typographic need without reaching for a secondary face. The discipline is absolute.
- **Weight as the only axis of hierarchy**: In a system with one typeface, weight is the primary differentiator. Weight 700 at display sizes announces; weight 400 everywhere else recedes. There is no weight 500 or 600 tier.
- **Line-height tightens with size**: Display text at 0.95–0.98 creates stacked headlines that nearly interlock. Body text opens to 1.5 for readability. The range from 0.95 to 1.5 is navigated without an intermediate step.
- **Tracking at zero except at display**: Negative letter-spacing on the 36px heading reduces visual gaps; body text trusts Söhne's own fit without adjustment.
- **SoehneIkon as typographic icon**: Using a font-based icon system means icons and text are rendered identically, scale together, and respond to colour changes via CSS `color` — not fills or strokes.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px, though the dominant values extracted are 2px (micro), 8px (standard), 10px (compact), and 30px (section gap).

The spacing personality is dense and catalog-efficient. This is a commerce and reference site for professionals who want to browse 100+ typefaces with minimum scrolling. The generous typography scale (large specimen sizes) is not accompanied by generous margins — the catalog maximises information density.

### Grid & Container
- Max content width: approximately 1680px at the largest breakpoint (2000px breakpoint suggests content constrained to ~1680px)
- Catalog grid: a multi-column font specimen grid, collapsing from 4 columns at desktop to 1 at mobile
- Specimen tiles: approximately 540px wide at desktop (extracted directly as a spacing value)
- Navigation: persistent horizontal strip with wordmark left, links right — clean and minimal

### Whitespace Philosophy
- Whitespace is function, not atmosphere. The black canvas provides all the visual breathing room the page needs — the specimens don't need to be surrounded by generous padding to feel premium.
- Compact gutters (8–10px) pack the catalog without feeling crowded because each specimen tile has its own vivid background that creates clear tile boundaries.
- Section separation uses a 30px gap — efficient but not cramped for a professional audience.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All cards, tiles, navigation, buttons — everything |
| Surface Lift | Background shift from `{colors.background}` to `{colors.surface}` | Input focus, hover states |
| Inversion (Interaction) | Foreground/background swap: white on black → black on white | All interactive hover states |
| Focus Ring | `outline: {colors.focus-ring} none 3px` (keyboard accessibility) | Input and button focus |

Klim uses no shadows. The shadow array in the extraction is empty. On a black canvas, depth is created through the vivid specimen tile colours — an orange tile against pure black has enormous contrast without any shadow whatsoever. The interaction hover (full inversion) is a more dramatic depth signal than any drop shadow: it communicates "this is interactive" through the strongest contrast move available in a two-colour system.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Section containers, navigation bar, large layout panels |
| `sm` | 2px | All interactive elements: buttons, inputs, images, specimen tiles |

The radius philosophy is binary and near-flat. 2px is the minimum detectable radius — it softens corners by one pixel on each axis, just enough to remove the harshness of a perfect right angle without communicating "rounded" as a visual language. Klim's shapes are sharp but not brutal. The 2px appears on 44 elements across buttons, images, inputs, anchors, and divs — it is genuinely universal.

## Components

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

### Button variants

- **`button-primary`** — `{colors.primary}` red background, `{colors.on-primary}` black text, compact `4px 8px` padding, 2px radius. Used for purchase CTAs and primary conversion actions.
- **`button-primary-hover`** — inverts to `{colors.text-hover}` yellow background, black text. The yellow hover is the sharpest chromatic moment in the entire interaction palette.
- **`button-secondary`** — black background with `{colors.border}` grey border outline. Sits alongside primary on font purchase pages.
- **`button-secondary-hover`** / **`button-ghost-hover`** — both invert to white background, black text. The polarity rule applies universally.
- **`font-specimen-tile`** — not a conventional button but the primary catalog interaction unit. Per-font background (`{colors.specimen-orange}` shown as default; each font has its own palette). Font name in weight 700 at large scale. Hover inverts to show font name in black on white.

### Cards

**Font Specimen Tile**: The signature catalog component. A rectangular tile carrying the font name at display size, its weight, and style classification. Background and text colours are drawn from the font's own editorial palette — not `{colors.surface}` or `{colors.background}`. 2px radius, no shadow, no border. Padding: 8px.

**Navigation**: Black strip, full width, no shadow or border. Wordmark SVG left-aligned; navigation links right-aligned. Links at `{typography.nav-link}` (16px weight 400 white); hover inverts to black on white. No dropdown on mobile below 768px — collapses to a hamburger `☰` button that obeys the same inversion rule.

### Inputs

Text inputs sit on `{colors.surface}` (`#1c1c1c`) with a `{colors.border}` grey border. Focus state shifts background to `{colors.surface-elevated}` and border to `{colors.ink}` white — the contrast increase signals the active state without a focus ring on dark. Radius 2px. Padding: `0px 8px` (vertical padding comes from the parent container).

## Do's and Don'ts

### Do
- Use `{colors.background}` pure black as the universal canvas — never soften to dark grey for the page background
- Apply the full colour-inversion hover rule to every interactive element: white on black → black on white
- Use Söhne Halbfett (weight 700) for display text only; Söhne Buch (weight 400) for all body, navigation, and UI text
- Keep border-radius at exactly `{rounded.sm}` (2px) on all interactive components — buttons, inputs, images, tiles
- Use `{colors.text-hover}` yellow exclusively for hover and focus states — never in body copy or static UI
- Allow per-typeface specimen palettes to override the base palette for individual font tiles — this is intentional editorial diversity, not inconsistency
- Reference `{colors.primary}` red for links and semantic emphasis sparingly — the system is near-monochrome with precise accent punctuation
- Maintain SoehneIkon for all iconography — never introduce a foreign icon library that would break the typographic unity

### Don't
- Don't introduce intermediate border-radius values (4px, 8px, 16px) — the system is binary: zero (layout) or 2px (interactive)
- Don't add shadows to any element — not cards, not navigation, not modals, not buttons. The extraction found zero shadows.
- Don't use colour to differentiate text hierarchy — weight (400 vs 700) and size are the only hierarchy tools in a monochrome system
- Don't use a secondary typeface for pull quotes, code samples, or accent moments — SoehneIkon handles iconography; Söhne handles everything else
- Don't soften the hover polarity — partial inversions (grey on hover) dilute the system's clarity. Full inversion is the rule.
- Don't use specimen tile colours (`{colors.specimen-orange}`, `{colors.specimen-teal}`, etc.) for UI chrome — they belong exclusively to individual font presentation tiles
- Don't apply generous margins around the catalog — the spacing is deliberately compact; a professional audience navigates efficiently
- Don't trust default CSS letter-spacing at display sizes — apply negative tracking at 36px+ to correct visual gaps in weight-700 text

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <430px | Single-column catalog, hamburger nav `☰`, specimen tiles full width |
| Mobile Wide | 430–431px | Narrow layout, minimal 2-column grid begins |
| Tablet | 431–768px | 2-column font grid, nav links partially visible |
| Tablet Large | 768–1024px | 3-column grid, full horizontal nav restores |
| Desktop Small | 1024–1220px | 3–4 column grid at comfortable size |
| Desktop | 1220–1366px | 4-column grid, specimen tiles at ~300px |
| Desktop Wide | 1366–1680px | Wider tiles (~400px), generous gutter |
| Large Desktop | 1680–2000px | Maximum columns, tiles at ~540px — the catalog at full scale |

### Touch Targets
- Navigation links: 16px text with surrounding padding — estimated 44px tap height
- Hamburger button `☰`: explicit button element with 2px radius, should carry sufficient padding for 44px minimum
- Font specimen tiles: large by default (full-row or multi-column), no minimum-size concern

### Collapsing Strategy
- Navigation collapses to `☰` hamburger below 768px — same colour-inversion rule applies
- Font catalog grid: 4 columns → 3 → 2 → 1 across breakpoints
- Display heading scale reduces proportionally — 72px desktop → approximately 36px at 430px
- Specimen tiles maintain their per-font colours at all breakpoints — the color identity of each typeface is non-negotiable
- Spacing compresses from 30px section gaps to 10px on mobile, preserving catalog efficiency

### Image Behavior
- Specimen tile images and type samples use `object-fit: cover`, border-radius 2px at all breakpoints
- No art direction swaps — the same type specimens serve all screen widths
- The catalog's primary asset is type itself, not photography, so responsive image concerns are secondary

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-muted}`
- Border: `{colors.border}`
- Brand accent (red): `{colors.primary}`
- Hover highlight (yellow): `{colors.text-hover}`
- Dark surface (inputs): `{colors.surface}`

### Example Component Prompts

- "Create a Klim-style font catalog tile: background `{colors.specimen-orange}` (`#d33c03`), font name in Söhne Halbfett 36px weight 700, black text `{colors.on-primary}`, line-height 0.98, letter-spacing -0.5px, border-radius 2px, no shadow, padding 8px. On hover, invert: white background `{colors.ink}`, black text `{colors.background}`. Include the font classification below the name in Söhne Buch 16px, same color."
- "Build a top navigation bar in the Klim style: pure black background `{colors.background}`, full viewport width, no shadow, no border. Wordmark 'Klim Type Foundry' left-aligned as white SVG text. Right side: navigation links (Fonts, About, Blog, Cart) in Söhne Buch 16px, white `{colors.ink}`, no underline by default. Each link on hover: background inverts to white `{colors.ink}`, text inverts to black `{colors.background}`, 2px border-radius, transition 0.3s ease on both color and background-color."
- "Design a purchase button for a type foundry: background `{colors.primary}` (`#e90702`), text `{colors.on-primary}` black, Söhne Buch 16px weight 400, border-radius 2px `{rounded.sm}`, padding 4px 8px, no shadow. Hover state: background `{colors.text-hover}` (`#ffff79`), text `{colors.background}` black. Label: 'Buy Söhne from $X →'."
- "Create a dark-canvas text input in the Klim style: background `{colors.surface}` (`#1c1c1c`), text white `{colors.ink}`, border 1px solid `{colors.border}` (`#555555`), border-radius 2px, padding 0px 8px. Focus state: border-color upgrades to `{colors.ink}` white, background shifts to `{colors.surface-elevated}` (`#282828`). Placeholder text in `{colors.ink-muted}` (`#8d8d8d`). No focus ring shadow — the border colour shift alone signals the active state."
- "Design a font specimen card grid row for a type foundry catalog: black canvas `{colors.background}`, catalog entries as rectangular tiles at 2px border-radius. Each tile has a unique background/foreground from the font's palette — example: Die Grotesk tile: background `{colors.specimen-orange}`, text `{colors.on-primary}` black; Martina Plantijn tile: background `{colors.specimen-teal}`, text `{colors.specimen-peach}`. Font name in Söhne Halbfett 36px; style tags below in Söhne Buch 13px. Tiles separated by 8px gap. On hover, each tile inverts to white background, black text."

### Iteration Guide

1. Start with `{colors.background}` pure black as the page canvas — no gradients, no texture, no softening to dark grey
2. Set all default text to `{colors.ink}` white; use `{colors.ink-muted}` grey for secondary or disabled states only
3. Apply the polarity rule to every interactive element: white on black at rest, black on white on hover, 0.3s ease transition on color + background-color
4. Use Söhne Buch weight 400 for all body and UI text; switch to Söhne Halbfett weight 700 only for display headings (36px+)
5. Border-radius is 2px or 0px — 2px on every interactive element, 0px on layout containers. No other value.
6. Per-typeface specimen tiles may deviate from the black canvas with their own contextual palettes — this is intentional and should be preserved as editorial decisions, not "fixed" to match the base palette
7. The only accent colours in interactive chrome are `{colors.primary}` red (purchase/link actions) and `{colors.text-hover}` yellow (hover moments) — never introduce a third accent

---

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