CURATED · OPEN · FREE

Cthdrl

A bold, dark-themed agency portfolio leveraging massive typography and monospaced details to convey strategic sophistication.

AgencyBold TypographyMonochromeEditorialStudio

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://cthdrl.co

📦 Browse pack contents →

Identity DNA

agencyculturaldigitalsystemsstrategy

A high-end architectural studio for digital brands.

Color

#E7DED1Ink

#000000BG

rgba(231,222,09,0.3)Line

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

Typography

grotesque-sans · monospace

display121px · 400
body11px · 400
caption32px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous horizontal and vertical padding defining distinct content zones.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

Thin, 1px borders used sparingly for top headers and underlines.

Layout

1920container

12columns

30pxgutter

768 / 1024breakpoints

Asymmetric split-screen and multi-column grid layouts.

Motion & Interaction

200msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle opacity fades and transform slides on page load.

Minimal visual changes, mostly color transitions or opacity shifts. · Standard link behavior.

Components

button Minimal text-based links, uppercase, sometimes underlined.
card No traditional cards; content is arranged in a modular grid.
chip N/A
input N/A
hero Full-width massive typography with a geometric background line graphic.

Voice & Don'ts

Tone Authoritative, intellectual, and forward-thinking.
Headlines All-caps, highly condensed or tight-tracked massive type.
CTAs Understated uppercase text links, sometimes with a monospaced look.

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.
Avoid: Clichés
Avoid: Salesy jargon
Avoid: Informal language
Avoid: Playful colors
Avoid: Heavy UI elements

Inside the pack — real screenshots

Cthdrl — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko