---
title: "Klim Type Foundry design system"
variant: extended
source: https://klim.co.nz/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/klim-co-nz)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Klim Type Foundry · Design System

> A dark canvas for expressive type and imagery

**Theme:** dark · **Industry:** design · **Source:** https://klim.co.nz/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Klim Type Foundry’s homepage presents its typeface collections, selected work, and editorial content in a predominantly black, typography-led layout. Large full-bleed campaign imagery contrasts with restrained type listings, compact navigation, and a detailed footer.

## North star

Let the type specimens and campaign media carry the visual expression, held together by a quiet black canvas and restrained interface chrome.

## Overview

The page uses a nearly continuous black canvas (#000000), making white typography and large media the defining visual elements. The vivid orange-red hero is part of the featured campaign imagery, not a general site-wide background rule; subsequent campaigns likewise bring their own cyan, photographic, or blue tones. SOEHNE provides a clean, compact sans-serif voice across navigation, labels, body copy, and links, while the font catalogue lets the typefaces themselves become the display treatment. The first half of the page uses tall, full-bleed campaign panels with small identifying labels. Lower sections shift to denser editorial grids: font families, in-use project images, and blog cards. White and pale panels appear within the font listings as contrast devices, not as a replacement canvas. Muted grays handle secondary links and footer information; thin dark-gray borders define restrained controls and separators. Spacing is generous between major content blocks, while card captions and catalogue rows remain compact. Keep corners barely rounded and avoid decorative shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Foundry Black | `#000000` | `--color-foundry-black` | brand | Dominant page canvas, navigation background, and the base behind catalogue, editorial, and footer sections. |
| Quiet Graphite | `#555555` | `--color-quiet-graphite` | neutral | Muted text and button outline treatment, including low-emphasis controls and secondary information. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary headings, navigation, links, footer identity, and text on the dark canvas. |
| Charcoal Panel | `#1c1c1c` | `--color-charcoal-panel` | surface | Dark catalogue cards, input surface, menu background, and overlay surface. |
| Ash Gray | `#8d8d8d` | `--color-ash-gray` | neutral | Muted footer and secondary text that remains readable without competing with primary content. |
| Rule Gray | `#383838` | `--color-rule-gray` | neutral | Thin borders and footer hairlines separating low-contrast regions. |
| Midtone Link | `#7f7f7f` | `--color-midtone-link` | neutral | Secondary typeface links, such as less-emphasized catalogue names. |
| Slate Teal | `#3c585f` | `--color-slate-teal` | surface | Measured section surface; appears as a limited color field rather than the page-wide brand canvas. |
| Signal Cyan | `#24a7f2` | `--color-signal-cyan` | accent | Bright measured section color, notably associated with a campaign illustration rather than site chrome. |
| Deep Green | `#101c19` | `--color-deep-green` | surface | Dark measured section tone, used as a limited panel color rather than a global surface. |
| Foundry Vermilion | `#d33c03` | `--color-foundry-vermilion` | accent | Orange-red campaign color visible in the hero imagery; treat as media-led expression, not a universal CTA color. |
| Signal Red | `#e90702` | `--color-signal-red` | accent | Rare red link accent; reserve for a small, specific link treatment. |
| Mint Glint | `#93ffe6` | `--color-mint-glint` | accent | Very rare colored link detail; likely a specimen or campaign-specific accent. |
| Lemon Glint | `#ffff79` | `--color-lemon-glint` | accent | Rare link or specimen detail, not a general interface highlight. |
| Night Panel | `#141414` | `--color-night-panel` | surface | Occasional near-black section surface subtly distinct from the main canvas. |
| Soft Silver | `#939393` | `--color-soft-silver` | neutral | Sparse muted text and link details, including low-emphasis supporting copy. |

### Semantic aliases

`--color-canvas` → `#000000` (Foundry Black) · `--color-surface` → `#1c1c1c` (Charcoal Panel) · `--color-surface-2` → `#3c585f` (Slate Teal) · `--color-surface-3` → `#101c19` (Deep Green) · `--color-surface-4` → `#141414` (Night Panel) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#555555` (Quiet Graphite) · `--color-text-subtle` → `#8d8d8d` (Ash Gray) · `--color-border` → `#383838` (Rule Gray) · `--color-accent` → `#24a7f2` (Signal Cyan) · `--color-accent-2` → `#d33c03` (Foundry Vermilion) · `--color-accent-3` → `#e90702` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1c1c1c` | 17.04:1 | AAA |
| `#ffffff` | `#3c585f` | 7.63:1 | AAA |
| `#ffffff` | `#101c19` | 17.47:1 | AAA |
| `#555555` | `#000000` | 2.82:1 | fail |
| `#555555` | `#1c1c1c` | 2.29:1 | fail |
| `#555555` | `#3c585f` | 1.02:1 | fail |
| `#555555` | `#101c19` | 2.34:1 | fail |
| `#8d8d8d` | `#000000` | 6.33:1 | AA |
| `#8d8d8d` | `#1c1c1c` | 5.13:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SOEHNE | `--font-body` | webfont | 400, 700 | Site-wide interface and editorial text, including headings, body, navigation, buttons, and links. | Inter |
| SOEHNE_IKON | `--font-soehne-ikon` | webfont | 400 | Small interface iconography, including the compact menu glyph. | Material Symbols |

- **SOEHNE:** Use regular and bold weights; sentence case and natural capitalization. Keep tracking neutral and rely on the type specimens for expressive display.
- **SOEHNE_IKON:** Use sparingly for simple utility icons; keep the glyph unobtrusive and aligned with the text interface.

### Type scale — Custom (ratio ≈ 2.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 700 | 0.98 | 0 | — | SOEHNE | Primary page or section heading, set bold and tightly led. |
| body | 16px | 400 | 1.19 | 0 | — | SOEHNE | Supporting descriptions, catalogue details, captions, and footer copy. |
| button | 16px | 400 | normal | 0 | — | SOEHNE | Compact subscription and utility control labels. |
| nav | 16px | 400 | 1.5 | 0 | — | SOEHNE | Header links and navigation labels. |
| link | 16px | 400 | 1.33 | 0 | — | SOEHNE | Typeface names, project links, editorial links, and inline actions. |

OpenType features in use: `"tnum"`, `"calt"`, `"ordn"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 7, 8, 10, 20, 30, 34, 69, 137 px.
- Section rhythm 69px · element gap 10px · card padding — · max content width 1400px.

The page spans a measured maximum width of 1400px, with a single-column sequence of tall, full-bleed campaign panels at the top. Below these, content shifts into a two-column font catalogue, a four-column project gallery, and a three-column blog feed, then a two-column newsletter and footer region. Major sections have generous vertical separation; within grids, captions and rows stay compact. Most content sits flush to the dark canvas, with alignment and media crops defining the hierarchy rather than visible containers.

## Shape & elevation

- Radius: button `2px` · input `2px` · card `2px` · media `2px` · nav `2px` · link `2px` · xs `2px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: no measured shadows or gradient system. Thin gray borders separate footer and control details, while dark cards sit directly on the black canvas. Layering comes from full-bleed media and occasional text overlays, not raised surfaces. Controls and cards use a restrained 2px corner radius.

## Imagery

Campaign sections use large edge-to-edge video or image media, including product-like scenes, people, editorial interiors, illustrations, and graphic compositions. Images retain their distinct palettes and are not forced into one uniform filter. Lower project and blog areas use a mix of documentary photography and type-focused artwork in compact cards; preserve clean rectangular crops and small overlaid or adjacent labels.

## Components

### Compact header

Black top bar with white foundry and Fonts links at left and a small menu glyph at right; typography stays at the measured 16px interface scale.

### Campaign feature

Tall, full-bleed image or video panel with a small typeface or collection label near an edge; campaign media supplies its own colors.

### Font family list

Two-column catalogue of family names, variants, and Buy links; contrast selected rows with pale panels against the black canvas.

### Project gallery

Asymmetric, four-column area of work-in-use images with compact captions and varied image sizes.

### Blog feed

Three-column editorial card grid pairing type-led artwork with short muted descriptions and links.

### Newsletter form

Footer email input on a #1c1c1c surface with white text, subtle border treatment, and a restrained Subscribe control.

### Footer directory

Dense multi-column link directory for fonts, custom fonts, information, and support, using white and muted gray text.

### Measured component styles

- **Primary button** (“Subscribe”): transparent background · text #ffffff · border 1px solid #555555 · radius 2px · padding 0px 8px · 400 16px SOEHNE
- **Link** (“Domaine Display”): transparent background · text #7f7f7f · radius 0px · padding 0px · 400 16px SOEHNE
- **Input**: background #1c1c1c · text #ffffff · border 1px solid #1c1c1c · radius 2px · padding 0px 8px · 400 16px SOEHNE
- **Card**: background #1c1c1c · text #ffffff · radius 2px · padding 0px · 400 16px SOEHNE
- **Navigation item** (“Klim Type Foundry Fonts”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px SOEHNE

## Do

- Keep the page canvas black and let content establish local contrast.
- Use SOEHNE-style sans-serif text for navigation, captions, and interface copy.
- Give campaign media full-bleed space and label it with small, quiet text.
- Use generous gaps between major sections and compact spacing inside lists.
- Allow type specimens and font-family names to act as visual display elements.
- Use muted gray for secondary links and thin borders for subtle separation.

## Don't

- Do not apply the hero’s vermilion palette to every section.
- Do not add gradients or shadows absent from the measured design.
- Do not place every gallery image in identical cards or crops.
- Do not turn the layout into a rounded, elevated SaaS dashboard.
- Do not overstate rare cyan, red, mint, or yellow accents as primary UI colors.
- Do not crowd the tall campaign panels with extra interface controls.

## Agent prompt

Build a new Klim Type Foundry-style page on a Foundry Black (#000000) canvas, using a restrained SOEHNE-like sans serif for navigation, captions, and supporting copy. Keep the header compact and white, then give featured work room to run edge-to-edge; campaign colors such as Foundry Vermilion (#d33c03) should come from the media, not from a site-wide theme. Organize lower content into carefully aligned font lists, image-led project cards, and editorial grids with generous section breaks and compact labels. Use Paper White (#ffffff) for primary text, Ash Gray (#8d8d8d) or Midtone Link (#7f7f7f) for secondary information, and Rule Gray (#383838) only for subtle dividers. Keep surfaces flat, corners barely rounded, and avoid shadows, gradients, or generic oversized CTAs. Let the featured typefaces supply the expressive visual voice.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed single-column video beneath the compact site header. | Campaign feature, Small work label | Edge-to-edge media, Black navigation bar |
| 2 | product-showcase | Single-column, full-width visual panels. | Browse featured families, Campaign labeling | Large imagery, Compact captions |
| 3 | product-showcase | Full-bleed editorial imagery in a single-column panel. | Typeface discovery, Image-led presentation | Layered photographic and typographic imagery, Small label |
| 4 | product-showcase | Single full-width campaign video. | Campaign introduction, Collection label | Illustrated media, Edge-to-edge color |
| 5 | product-showcase | Full-width campaign video in a tall single-column section. | Collection discovery, Small campaign label | Cinematic product imagery, Full-bleed media |
| 6 | other | Short, single-column black spacer. | Visual pause | Unadorned black canvas |
| 7 | product-grid | Two-column family catalogue with broad horizontal rows. | Browse font families, Buy links, See all fonts | Alternating dark and pale rows, Large family specimens |
| 8 | gallery | Four-column asymmetric grid with varied image spans. | Explore fonts in use, Project links | Editorial image cards, Compact captions |
| 9 | content-feed | Three-column grid of image-led editorial cards. | Read design articles, Browse more posts | Type-led thumbnails, Muted summaries |
| 10 | footer | Two-column footer with newsletter area and multi-column link directory. | Email subscription, Browse support and information links | Dark input surface, Dense text navigation, Foundry wordmark |

## Source CSS custom properties (selected)

```css
--primaryColorRef: #FFFFFF;
--mixedColor1Ref: #e2e2e2;
--mixedColor1_5Ref: #d4d4d4;
--mixedColor2Ref: #c6c6c6;
--mixedColor3Ref: #aaa;
--mixedColor4Ref: #8d8d8d;
--mixedColor5Ref: #717171;
--mixedColor6Ref: #555;
--mixedColor7Ref: #383838;
--mixedColor7_5Ref: #2a2a2a;
--mixedColor8Ref: #1c1c1c;
--secondaryColorRef: #000000;
--tertiaryColorRef: #E4001C;
--secondaryColorGradientMin: rgba(0,0,0,0);
--secondaryColorGradientMax: rgba(0,0,0,100);
--primaryColorGradientMin: rgba(255,255,255,0);
--primaryColorGradientMax: rgba(255,255,255,100);
--menuBackgroundColor: #1c1c1c;
--overlayBackgroundColor: #1c1c1c;
--lozengeColor: #FFFFFF;
--lozengeBackgroundColor: #000000;
--fontInfoShadowColor: rgba(0,0,0,100);
--foregroundColor: #FFFFFF;
--foregroundColorMix1: #e2e2e2;
--foregroundColorMix1_5: #d4d4d4;
--foregroundColorMix2: #c6c6c6;
--foregroundColorMix3: #aaa;
--foregroundColorMix4: #8d8d8d;
--foregroundColorMix5: #717171;
--foregroundColorMix6: #555;
--foregroundColorMix7: #383838;
--foregroundColorMix7_5: #2a2a2a;
--foregroundColorMix8: #1c1c1c;
--backgroundColor: #000000;
--backgroundGradientColorMin: rgba(0,0,0,0);
--backgroundGradientColorMax: rgba(0,0,0,100);
--borderColor: #383838;
--highlightColor: #E4001C;
--errorColor: #E4001C;
--fontSizeFluid1: calc(14 / 1680 * 100vw);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/klim-co-nz