← OpenDesign
CURATED · OPEN · FREE
Cthdrl
A bold, dark-themed agency portfolio leveraging massive typography and monospaced details to convey strategic sophistication.
Agency Bold Typography Monochrome Editorial Studio
01
Identity DNA
agency cultural digital systems strategy
A high-end architectural studio for digital brands.
02
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.
03
Typography
grotesque-sans · monospace
display 121px · 400body 11px · 400caption 32px · 400
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous horizontal and vertical padding defining distinct content zones.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
Thin, 1px borders used sparingly for top headers and underlines.
06
Layout
1920 container
12 columns
30px gutter
768 / 1024 breakpoints
Asymmetric split-screen and multi-column grid layouts.
07
Motion & Interaction
200ms micro
400ms small
800ms medium
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.
08
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.
09
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
10
Inside the pack — real screenshots
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 Captured from the live site · real computed styles
11
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.
More from the library
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is an excellent reference for aggressive, high-impact typography and the effective use of a strict monochrome palette to convey agency expertise.