Design
Draft a raw, hard-edged look.
Writes a design spec for a raw, mechanical look: heavy uppercase headlines, small monospace labels, square corners, a strict grid and a single red accent. You choose light print mode or dark terminal mode, and get the color, type and grid rules plus one sample page built from them, as a reference to agree on before the build.
- One mode, never mixed
- Contrast stated for all text
- Nothing ships unreviewed
At a glance
- Group
- Design
- Command
- /brutalist-ui
- Uses
- Your page type and mode
- Writes
- A spec and sample page
- Sends
- Nothing. Drafts only.
01When to use it
Pick it for a raw, dense look.
- You want a landing page, dashboard or small site that reads as raw, mechanical and packed with information.
- A client brief asks for an industrial, terminal or blueprint look.
- You want one agreed reference in place before anyone writes markup or styles.
- You want type, color, grid and border rules set once and reused across the build.
Not for
- A soft look with rounded shapes and gentle depth. Use /soft-ui
- A clean, quiet look built on restraint. Use /minimalist-ui
02What it needs
Give it a page and a mode.
- The page type and its job in a line: a landing page, a dashboard, an index of documents.
- One mode. Print sets heavy sans type on a light, paper-colored ground. Terminal sets monospace on a near-black ground.
- Your brand and voice files. If either is missing, it says so and works from its defaults.
- Optional: copy blocks, the screen widths to design for, and any content the layout must hold.
03What it writes
What lands in the project folder.
- brief.md
- The mode, the tokens and the reasoning, in plain text.
- final/brutalist-ui-spec.md
- The full spec: color, type, grid, components and texture rules, marked draft.
- final/sample-layout.html
- One static page that applies the rules: a header band with an oversized number, a 12-column grid, a dense data block, a full-width rule, and red on one vital element.
- Ledger row
- Only when a real measurement exists, such as a measured load time. Otherwise none, and it says so.
04Limits
What it never does.
- Mix light and dark, or print and terminal, on one surface.
- Set small text in red. At small sizes the red falls short of the contrast bar, so there it marks a rule, bracket, block or strike-through instead.
- Use gradient fills, rounded corners, drop shadows or see-through layers.
- Log a number nobody measured.
What stays with you.
- Reviewing and approving the spec and sample before any of it ships.
- Choosing the mode for each surface.
05Sample output
Part of a spec, terminal mode.
An excerpt from a spec for a made-up warehouse dashboard. A real spec states the contrast of every text color it uses.
| Token | Value | Use | Contrast |
|---|---|---|---|
| Ground | #0B0C0B | Page background, near black but never pure black | Base |
| Text | #CDD6C8 | Headlines, body copy, labels and data | 13.1:1 |
| Accent | #DA2818 | Red text at 24px and up, or 19px bold. Below that, rules, brackets, blocks and strikes only | 4.01:1 |
- Ground Base
- Value#0B0C0B
- UsePage background, near black but never pure black
- Text 13.1:1
- Value#CDD6C8
- UseHeadlines, body copy, labels and data
- Accent 4.01:1
- Value#DA2818
- UseRed text at 24px and up, or 19px bold. Below that, rules, brackets, blocks and strikes only
Labels and markers
- Labels in monospace, 11 to 13px, uppercase, for nav, IDs and units.
- Live values framed in brackets, such as [ ONLINE ].
- » before each section label, and fixed labels such as BAY 07.
06Related skills
Often run beside it.
/minimalist-uiA minimal design spec Design/soft-uiA soft, rounded design spec Design/tasteScore a page's design and list fixes Design/redesignA better direction for an existing page Design
07Questions
Before you run it.
Will it build my website?
No. It writes a spec and one static sample page, both drafts. Nothing ships or goes live until a person has reviewed it.
Does the red accent pass contrast checks?
Only at large sizes. On both grounds it falls under the 4.5:1 bar for normal text, so red text is kept to 24px and up, or 19px bold, where the bar is 3:1. On smaller text the red becomes a rule, a bracket or a strike-through, and the words keep the regular text color.
Does it add texture, like scanlines?
It is optional. Terminal mode can carry faint scanlines, and either mode a faint noise, both kept close to invisible.
Have us build it
We can build it for you.
Start with the free plan. A person names the first fix.