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

# cthdrl · Design System

> Culture in motion, rendered as a digital signal

**Theme:** dark · **Industry:** design · **Source:** https://cthdrl.co/ · **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._

A restrained, dark studio homepage led by oversized typography and fine-line geometry. Compact monospaced navigation and studio details sit against a textured near-black field, giving the page an archival, editorial feel.

## North star

Let oversized warm-white type and restrained hairline geometry carry the composition across a quiet, textured dark canvas.

## Overview

The first view is defined by a near-black, subtly grainy canvas and warm off-white typography. Although measured CSS reports olive and several saturated burgundy, green, and blue hues, the screenshot reads as monochrome; treat those extra colours as section or media-derived values, not as the defining brand palette. A thin pale rule divides the compact top navigation from the full-bleed hero. The title is oversized, uppercase, and tightly stacked, with a small index counter offset at the upper right. Fine circular arcs cross the dark field as delicate geometric overlays, not as prominent illustrations. Small uppercase mono labels form a low, three-part information row beneath the headline. The page feels spacious despite its dense information architecture: large areas of dark negative space balance the headline and hairline geometry. Keep surfaces flat, typography light in weight, and rules crisp; avoid conventional cards, button fills, or decorative colour blocks.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#e7ded1` | `--color-warm-paper` | neutral | Primary headings, navigation, body copy, and link text; the warm off-white is the dominant foreground. |
| Olive Canvas | `#3e4107` | `--color-olive-canvas` | brand | Measured canvas and accent value; not visually dominant in the supplied near-black hero screenshot. |
| Oxide Burgundy | `#4c0b02` | `--color-oxide-burgundy` | surface | Measured section and gradient surface tone; not a defining colour in the visible hero. |
| Moss Signal | `#7d820e` | `--color-moss-signal` | accent | Measured gradient accent; preserve for coloured section or media contexts rather than core hero UI. |
| Lichen Green | `#778818` | `--color-lichen-green` | accent | Measured gradient accent; not prominent in the supplied monochrome screenshot. |
| Rust Red | `#981d26` | `--color-rust-red` | accent | Measured section gradient colour; treat as supporting media colour, not a standard interface accent. |
| Mulberry Surface | `#48212b` | `--color-mulberry-surface` | surface | Measured dark section surface; does not define the visible opening screen. |
| Chartreuse Glint | `#a8b428` | `--color-chartreuse-glint` | accent | Palette value likely associated with coloured section media; avoid using as a core text or control colour. |
| Crimson Pulse | `#b4041c` | `--color-crimson-pulse` | accent | Measured vivid section colour; keep within media or expressive section treatments. |
| Ultramarine Trace | `#1e1594` | `--color-ultramarine-trace` | accent | Measured blue section colour; not visible as a primary brand interface colour in the screenshot. |
| Ember Brown | `#871a03` | `--color-ember-brown` | accent | Measured section colour; use only where a coloured media treatment calls for it. |
| Violet Wine | `#6d0251` | `--color-violet-wine` | accent | Measured saturated section colour; not part of the monochrome hero treatment. |
| Brick Shadow | `#6e1815` | `--color-brick-shadow` | accent | Measured dark red section colour; reserve for coloured content or transitions. |
| Black Cherry | `#260501` | `--color-black-cherry` | surface | Measured deep section surface; visually consistent with dark areas but not the screenshot's literal canvas reading. |
| Oxblood Surface | `#4c0e13` | `--color-oxblood-surface` | surface | Measured section surface value; secondary to the near-black visual identity. |
| Plum Charcoal | `#241015` | `--color-plum-charcoal` | surface | Measured dark section colour; use as a quiet surface tone, not a prominent accent. |
| Rule White | `#fefefd` | `--color-rule-white` | neutral | Measured border colour; suited to the fine horizontal divider and delicate geometric outlines. |

### Semantic aliases

`--color-canvas` → `#3e4107` (Olive Canvas) · `--color-surface` → `#4c0b02` (Oxide Burgundy) · `--color-surface-2` → `#48212b` (Mulberry Surface) · `--color-surface-3` → `#260501` (Black Cherry) · `--color-surface-4` → `#4c0e13` (Oxblood Surface) · `--color-text` → `#e7ded1` (Warm Paper) · `--color-border` → `#fefefd` (Rule White) · `--color-accent` → `#3e4107` (Olive Canvas) · `--color-accent-2` → `#7d820e` (Moss Signal) · `--color-accent-3` → `#778818` (Lichen Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e7ded1` | `#3e4107` | 8.03:1 | AAA |
| `#e7ded1` | `#4c0b02` | 11.63:1 | AAA |
| `#e7ded1` | `#48212b` | 10.32:1 | AAA |
| `#e7ded1` | `#260501` | 14.27:1 | AAA |
| `#3e4107` | `#4c0b02` | 1.45:1 | fail |
| `#3e4107` | `#48212b` | 1.29:1 | fail |
| `#3e4107` | `#260501` | 1.78:1 | fail |

### Gradients

- `linear-gradient(rgb(76, 11, 2), rgb(91, 48, 82))`
- `linear-gradient(rgb(125, 130, 14), rgb(42, 49, 74))`
- `linear-gradient(rgb(119, 136, 24), rgb(48, 45, 80))`
- `linear-gradient(rgb(152, 29, 38), rgb(50, 49, 76))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NB Akademie | `--font-body` | webfont | 400 | Display and editorial sans-serif for the hero headline and larger studio statements. | Manrope |
| NB Akademie Mono | `--font-mono` | webfont | 400 | Compact navigation, counters, captions, contact links, and small metadata. | IBM Plex Mono |

- **NB Akademie:** Use regular weight; display is uppercase and dramatically scaled, while other large text stays sentence case.
- **NB Akademie Mono:** Regular weight, uppercase labels, tight tracking, and a compact technical/editorial rhythm.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 121px | 400 | 0.85 | 0 | uppercase | NB Akademie | Oversized uppercase hero statement, stacked across the opening canvas. |
| h1 | 35px | 400 | 1 | 0 | — | NB Akademie | Primary page heading or prominent studio statement. |
| h2 | 32px | 400 | 1.2 | -0.01em | — | NB Akademie | Secondary section headings and editorial statements. |
| body | 16px | 400 | normal | -0.031em | — | NB Akademie | Supporting studio description and explanatory copy. |
| caption | 11px | 400 | 1.2 | -0.045em | uppercase | NB Akademie Mono | Small uppercase location labels and metadata. |
| nav | 11px | 400 | 1.2 | -0.045em | uppercase | NB Akademie Mono | Compact uppercase header navigation and studio identifier. |
| link | 11px | 400 | 1.2 | -0.045em | uppercase | NB Akademie Mono | Small uppercase contact and utility links. |
| code | 11px | 400 | 1.2 | -0.045em | uppercase | NB Akademie Mono | Technical-looking index labels and compact mono details. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 10, 16, 26, 30, 50 px.
- Section rhythm 45px · element gap 30px · card padding — · max content width 1380px.

Use a 12-column, full-bleed composition with content aligned to a shared left edge and a measured maximum width of 1380px. The hero is dominated by a very large, tightly stacked headline; place its sequence counter separately at the upper right. Keep the header as a narrow ruled band and arrange supporting location, contact, and studio copy in a compact three-part row. Preserve broad empty areas below the copy, letting circular linework span the canvas. Spacing is comfortable, not card-dense.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s ease` on interactive elements.

The interface is essentially flat: no measured shadows or card elevation define the page. Use thin, bright rules for separation and delicate outlines for the oversized arcs. Keep text and geometry layered over the dark media field, with no filled CTA treatment or raised panels.

## Imagery

The visible hero relies on motion-led or video-backed dark texture, subtle grain, and fine circular linework rather than product photography. Media should feel full-bleed and atmospheric, with low-contrast detail that never competes with the headline. The measured page includes many video and image elements, so allow future sections to carry expressive media, but keep the opening frame predominantly monochrome.

## Components

### Top navigation

A narrow full-width header with a small studio mark, mono studio identifier, work/contact links, and an adjacent horizontally moving statement; separate it from the hero with a fine light rule.

### Hero statement

A huge regular-weight uppercase sans headline, broken into close stacked lines and aligned to the left edge.

### Sequence counter

A compact mono index, shown separately near the upper-right of the hero.

### Geometric hero overlay

Large, thin circular arcs cross the dark canvas as low-key outlines behind and around the headline.

### Studio details row

Small uppercase mono location, contact, and studio-description blocks arranged as three concise columns below the heading.

### Contact link

An understated uppercase mono email link using the same warm off-white as the rest of the interface.

### Measured component styles

- **Primary button** (“ALL”): transparent background · text #e7ded1 · radius 0px · padding 0px · 400 35px NB Akademie
- **Link** (“BUILD@CTHDRL.CO”): transparent background · text #e7ded1 · radius 0px · padding 0px · 400 11px NB Akademie Mono · uppercase
- **Navigation item** (“CTHDRL /STUDIO”): transparent background · text #e7ded1 · radius 0px · padding 0px · 400 11px NB Akademie Mono

## Do

- Use a dark, subtly textured full-bleed canvas.
- Set the hero in oversized, regular-weight uppercase sans type.
- Use warm off-white for the main text and navigation.
- Keep navigation and metadata compact and monospaced.
- Use thin rules and sparse circular geometry.
- Leave substantial negative space around the supporting copy.

## Don't

- Do not make olive the dominant visible hero colour.
- Do not turn the measured gradient palette into a rainbow UI.
- Do not place the content in conventional raised cards.
- Do not use filled, rounded CTA buttons.
- Do not crowd the headline with supporting copy.
- Do not add heavy shadows or thick borders.

## Agent prompt

Build a new page in cthdrl’s experimental editorial studio style. Use a full-bleed near-black, subtly textured canvas, with Warm Paper (#e7ded1) for primary type and Rule White (#fefefd) only for delicate dividers and outlines. The measured Olive Canvas (#3e4107) and saturated section colours are secondary; do not let them override the screenshot’s monochrome character. Set a narrow ruled mono navigation band above an oversized, regular-weight uppercase sans headline. Add a small upper-right index, a few compact mono metadata blocks, and restrained circular linework layered behind the content. Preserve broad negative space, flat surfaces, and crisp alignment. Avoid card grids, heavy shadows, filled buttons, and decorative gradients in the hero. Use NB Akademie and NB Akademie Mono where available, with close free sans and mono substitutes otherwise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero beneath a thin ruled navigation bar; large left-aligned headline, upper-right counter, and compact three-part details row. | work/contact navigation, email contact link, sequence counter | oversized uppercase headline, fine circular outlines, mono metadata, hairline divider |

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