# Cthdrl · Design system migration spec

> Source: https://cthdrl.co  ·  Curated by OpenDesign  ·  en

> This site is an excellent reference for aggressive, high-impact typography and the effective use of a strict monochrome palette to convey agency expertise.

## 1. Identity DNA

Cthdrl operates as a high-end architectural studio for digital brands, translating strategic systems into stark, structured interfaces. Its identity is built on a foundation of aggressive typographic scale and a monochrome palette that feels both authoritative and intellectually rigorous.

**One-liner:** A bold, dark-themed agency portfolio leveraging massive typography and monospaced details to convey strategic sophistication.
**Keywords:** agency · cultural · digital · systems · strategy
**Analogy:** A high-end architectural studio for digital brands.

## 2. Color

The system's color principle is absolute: a strict, high-contrast monochrome pairing of deep black and warm off-white. This duo creates a stark, architectural field where content exists as carved light against a void, with no tertiary hues to dilute the visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#E7DED1` | body text |
| `--muted` | `#E7DED1` | placeholder |
| `--line` | `rgba(231,222,09,0.3)` | divider |

**Color principle:** Strict high-contrast monochrome with a warm off-white ink against a deep black background.

The palette's rigor is its function, ensuring every element communicates through contrast and negative space alone.

## 3. Typography

Typography serves as the primary structural and expressive force, with a system built on grotesque-sans display faces and monospaced details. The voice is one of extreme scale contrast, moving from massive, condensed headlines to small, precise technical text.

- **Display:** grotesque-sans
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 121px | 0.85 | 400 | -2px | Hero headlines and massive section headers |
| body | 11px | 1.2 | 400 | 0px | Small UI text, descriptions, and navigation |
| caption | 32px | 1.1 | 400 | -0.5px | Secondary subheaders and medium-sized text |

## 4. Spacing

Spacing operates on a generous, deliberate rhythm, using ample horizontal and vertical padding to define distinct content zones. This generous allowance gives the massive typography room to resonate and frames the asymmetric layouts with precision.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous horizontal and vertical padding defining distinct content zones.

## 5. Surfaces

Surfaces are defined by their absence of depth; shadows and gradients are discarded in favor of flat, matte fields. Borders are used with surgical precision—thin, 1px lines that occasionally underscore a header or delineate a top edge.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Thin, 1px borders used sparingly for top headers and underlines.

## 6. Layout

The layout skeleton is built on asymmetric split-screen and multi-column grid configurations, rejecting fluid, document-like flow. Generous padding sculpts each content zone, creating a modular arrangement where massive type statements occupy their own dedicated architectural space.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 30px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric split-screen and multi-column grid layouts.

## 7. Motion & Interaction

Motion is treated as a subtle reveal rather than a decorative flourish. The system employs smooth opacity fades and gentle transform slides on load, using standard easing curves to introduce geometric elements and text blocks with understated confidence.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity fades and transform slides on page load.

- **Hover:** Minimal visual changes, mostly color transitions or opacity shifts.
- **Click:** Standard link behavior.
- **Transition:** Smooth fade-ins for text blocks and geometric elements.
- **Keyboard:** Standard focus states.

## 8. Voice & Don'ts

The editorial voice is authoritative, intellectual, and forward-thinking, articulated through all-caps, tight-tracked headlines and understated uppercase links. It avoids clichés and salesy jargon, instead letting the stark visual architecture and strategic copy speak for themselves.

- **Tone:** Authoritative, intellectual, and forward-thinking.
- **Headline style:** All-caps, highly condensed or tight-tracked massive type.
- **CTA style:** Understated uppercase text links, sometimes with a monospaced look.
- **Avoid:** Clichés / Salesy jargon / Informal language / Playful colors / Heavy UI elements

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, zero-radius edges.
- ❌ Don't use bright, saturated accent colors — screenshot shows a strict monochrome palette.
- ❌ Don't use traditional sentence-case body copy — screenshot shows extensive use of uppercase.
- ❌ Don't rely on small, dense paragraphs — screenshot uses massive, isolated typographic statements.
- ❌ Don't use highly decorative or script fonts — screenshot uses strictly structured grotesque and monospaced fonts.
- ❌ Don't use complex UI components like cards or buttons — screenshot relies on clean, modular typography.

The system deliberately omits playful colors, rounded forms, heavy UI components, and informal language to preserve its stoic, architectural integrity.

## System Prompt (paste into AI tool)

```
This is a high-end creative agency portfolio designed with bold, architectural typography and a strict monochrome palette. The background is deep black (#000000) paired with a warm off-white ink (#E7DED1). The layout features massive display headlines (grotesque-sans) and small, structured text (monospace). Key design constraints: do not use vibrant accent colors; do not use rounded corners or soft UI elements; do not use sentence-case text; maintain the extreme typographic scale contrast; ensure the layout feels like a structured grid rather than a flowing document.
```