cthdrl
A brutalist-editorial single-page studio site — pure black canvas, oversized NB Akademie display type in warm cream ink, tight monospace labels, and a full-bleed hairline-arc line-art motif. Sharp square edges (zero radius) throughout, a duplicated marquee headline suggesting kinetic scroll motion, and a strict two-color foreground/background discipline broken only by rare, low-frequency accent hexes whose usage context was not visually confirmed.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-h1
120.96px · 400 · 0.85
The quick brown fox jumps
body-mono
11px · 400 · 1.2
The quick brown fox jumps
button
35px · 400 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 10px | |
| xs | 11px | |
| sm | 30px | |
| md | 45px | |
| lg | 50px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px |
FAQ
- What colors does cthdrl use?
- cthdrl's core palette includes #e7ded1, #000000, #4c0b02, #871a03, #6e1815. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the cthdrl DESIGN.md.
- What font does cthdrl use?
- cthdrl's primary typeface is NB Akademie. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the cthdrl design system?
- A brutalist-editorial single-page studio site — pure black canvas, oversized NB Akademie display type in warm cream ink, tight monospace labels, and a full-bleed hairline-arc line-art motif. Sharp sq…