# Brutalist Ledger - DESIGN.md
> Confident, typographic, zero decoration, for firms that sell trust.

A Standout direction system. Drop this file into your AI tool's context (Cursor rules, CLAUDE.md, a system prompt) and build every page inside it. One direction per project; consistency is the point.

## Base
- Mode: light
- Feels like: serious, editorial, stark, confident, premium
- Built for: law firm, accounting, accountant, bookkeeping, tax, consulting, finance, architecture, b2b services, real estate

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#F4F2ED` | warm bone white background |
| ink | `#141414` | near-black for everything textual |
| accent | `#1D4ED8` | a single decisive cobalt, links and one CTA per screen |
| rule | `#D6D2C8` | 1px rules and table borders, the visual backbone |
| wash | `#EAE7DF` | row striping and aside blocks |

One accent, used sparingly: CTAs, one highlighted word, active states. Never the purple-blue AI gradient. Body text keeps 4.5:1 contrast against its real background.

## Typography
- Display: **Libre Caslon Text** (700 for H1 only, 400 elsewhere)
- Body: **IBM Plex Sans**
- Scale: Display clamp(2.25rem, 5vw, 3.75rem) tracking-tight; body 1rem/1.75 max-w-[68ch]
- Notes: Caslon brings the legal-document gravitas; Plex keeps data and UI crisp. Numbers always in IBM Plex Mono.
- Import: `https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,500;0,600;0,700;1,500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap`

Maximum two families. Gradient-filled headline text is banned.

## Layout DNA
- Everything hangs on a visible 1px rule system: section dividers, table rows, no cards anywhere
- Two-column asymmetric: 1fr 2fr, labels left in small caps, content right
- Index numbering on sections (01, 02, 03) in mono, rule-aligned
- Dense footer with full sitemap, like a document appendix

## The hero
No image. Full-bleed bone background, massive Caslon statement (max 8 words) top-left, a 1px rule under it spanning the page, then a two-column block: firm description left, three key numbers right in mono with rule separators.

## Imagery
Minimal. If used: black and white, high contrast, architectural or documentary. Duotone is acceptable (ink + bone). Portraits stark, no smiles-at-camera.

## Components
- **Buttons:** Rectangular, zero radius, 1px ink border, transparent fill; hover inverts to ink fill bone text; the single primary CTA uses cobalt fill
- **Cards:** Banned. Use ruled rows and indented blocks instead
- **Nav:** Top rule + bottom rule sandwich, mono small caps links, cobalt underline on hover that animates left-to-right

## Motion
- Recipes that fit this direction: rule-draw, fade-rise-stagger, counter-up, underline-sweep, mask-text-reveal, counter-up
- Animate transform and opacity only; honor prefers-reduced-motion; one ambient motion per viewport, maximum.

## Never do (this direction's anti-patterns)
- No rounded corners anywhere, the geometry is the brand
- No gradients, no glassmorphism, no shadows
- No icons except functional UI arrows; decoration is typographic
- Never center the hero

## Never do (any direction)
- The centered-hero-centered-everything layout. Left-align or split asymmetric.
- The three-equal-cards feature row.
- h-screen heroes (use min-h-[100dvh]).
- Pure #000 backgrounds; off-blacks only.
- Slop copy: Elevate, Unleash, Seamless, Supercharge, Next-Gen, Revolutionize.
- Fake proof: no 99.9%, no John Doe, no invented stats.

---

## This file is the taste. The working parts are live.
DESIGN.md is roughly a tenth of the "Brutalist Ledger" direction. Behind the Standout MCP connect, your agent also gets: finished art-directed section code, interactive set pieces, the WebGL motion layer, the cinematic showpiece tier (scene-led pages with generation prompts), per-business seeding so two sites in one direction never match, and critique_design - a critic that renders your page and scores it before you ship.

Connect in one config entry: https://standoutmcp.io - free trial key, 25 tool calls, no card. Then just tell your agent what you're building.