Design.dev design.dev
Style Pack

Brutalist Terminal Style Pack for AI Agents

A CRT and a man page as a constraint set for Claude, Cursor, and any coding agent. One monospace, two sizes, no boxes.

Install → Prompt → Ship

Live Preview

Same fixture · Every pack

Every pack renders this exact markup. Only the constraints change.

The Pack

Download
Loading…

Prompt overlay

Paste above any component prompt.

Claude Code · Codex · Cursor

.claude/skills/brutalist-terminal/ .agents/skills/brutalist-terminal/

SKILL.md plus references/tokens.md and references/components.md.

Cursor rule

.cursor/rules/brutalist-terminal.mdc

Any agent

./DESIGN.md

Link it from AGENTS.md.

Tokens

Color
warn
State only: caret, focus, current
selection
Reverse video, never a tint
Type
family
One monospace, everywhere
sizes
13 / 20 for everything · 26 / 40 for the # title
hierarchy
Case, weight, dim vs bright, prefixes
Rhythm
vertical
20px line · 40px section
horizontal
2ch gap · 4ch indent · 3ch columns
boxes
None. Dashed dim rules between sections
Prefixes & motion
prefixes
# title · ## section · > prompt · // meta · [ ] clickable
motion
Cursor blink only, 1s step
radius
0

Component Rules

01

Prompt line

> BRAND with a blinking cursor, $ dateline in dim, bracketed nav. A dashed rule beneath.

02

Title / dek

# TITLE at 26px, the one large size. Dek and body indent 4ch beneath it.

03

Button

Bracketed text. Primary is reverse video; hover drops to an outline. Ghost hover inverts.

04

Input

name: in dim, then a dim baseline with an amber caret. Focus turns the line amber.

05

Listing

Panes divided by a 1px dim rule, no outer box. // meta, bold title, text.

06

Table

## head, 4ch indent, dim heads on a dashed rule. No row rules; alignment is the structure.

07

Tabs / pager

Bracketed dim text. Selected tab is reverse video. Current page is amber.

08

Notice

A 1px bright bar on the left and [!] TITLE. Never a dashed amber box.

Anti-Drift

Always

  • One monospace on every control, buttons included
  • Two sizes: 13px and the 26px title
  • Brackets around anything clickable
  • Amber for caret, focus, and current only
  • Dashed dim rules between sections; radius 0

Never

  • A box around anything but a modal
  • A third size, amber hover, amber alerts
  • Inter, system-ui, keycap chips
  • Purple, cyan, magenta, slate chrome
  • Glass, blur, glow, Matrix rain, bounce
Copied to clipboard