---
name: Cthdrl
description: "This site is an excellent reference for aggressive, high-impact typography and the effective use of a strict monochrome palette to convey agency expertise."
version: alpha

colors:
  background: "#000000"
  primary: "#E7DED1"
  neutral: "#E7DED1"
  line: "rgba(231,222,09,0.3)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 121px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: monospace
    fontSize: 11px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: monospace
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A high-end architectural studio for digital brands.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#E7DED1`)** — uses `ink` token
- **Muted (`#E7DED1`)** — uses `muted` token
- **Borders (`rgba(231,222,09,0.3)`)** — uses `line` token

## Typography

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

## Layout

Asymmetric split-screen and multi-column grid layouts.

*Rhythm:* Generous horizontal and vertical padding defining distinct content zones.

## Elevation & Depth

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

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```