---
name: forge-brutalist
description: Hard mechanical UI register. Swiss typographic print + military terminal aesthetics. Rigid grids, extreme type contrast, sans+mono pair, utilitarian color, numbered sections, hairlines instead of shadows. Contains palettes, type stack, numbered-heading pattern, terminal-styled blocks. Use for data-heavy dashboards, technical portfolios, editorial-tech sites. Mutex with `forge-minimalist` and `forge-soft`.
license: MIT
---
# forge-brutalist
You are designing in the brutalist register. Default agent attempts produce default-bold text on a default-grey background with a single banana-yellow accent and call it a day. Real brutalism is mechanical, intentional, document-coded. Draws on Swiss typographic discipline + military/scientific terminal output. This skill exists to do it right.
The mental model: **every element is engineered for function.** Whitespace is structured by a grid, not free. Type contrast is extreme. Color is utilitarian, never decorative. The page reads as a technical artifact.
## Quick reference (the things you must never ship)
1. Drop shadows on anything.
2. Border radius > 4px anywhere.
3. Soft pastels or warm cream backgrounds.
4. Rounded "capsule" buttons.
5. Cute illustrations, emojis, or "playful" type.
6. Default Helvetica/Inter tracking at all sizes.
7. Centered-everything layouts.
8. Smooth ease-in-out on every transition.
9. More than one accent color.
10. Skeuomorphic textures (wood, leather, glassmorphism).
## Hard rules
### Grid
**1. Visible grid. Wireframe-tight.** A 12- or 16-column grid where alignment is exact. Hairline rules between cells, baseline grid for type.
**2. No floating elements. Everything snaps to grid.** "Roughly aligned" is the failure mode this register has zero tolerance for.
**3. Asymmetric and intentional.** A 3-2-7 split is more brutalist than balanced 4-4-4. Asymmetry expresses hierarchy through proportion.
**4. Modular scale geometric and visible.** Annotated sometimes - small dimension labels in a corner are on-register, not noise.
### Type stack (paste-ready)
```css
:root {
/* canonical brutalist sans + mono */
--font-sans: "Neue Haas Grotesk", "Helvetica Neue", "Inter", sans-serif;
--font-mono: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", monospace;
/* alt: with one editorial-brutalist serif */
--font-display: "GT Sectra", "Tiempos Headline", serif;
--font-mono: "JetBrains Mono", monospace;
}
```
**5. Two faces maximum. Sans + mono is the canonical pair.** Pick a serif only for editorial-brutalist (less common, harder).
### Typography rules
**6. Type contrast extreme.** 12rem display next to 0.75rem ascii-numbered footnotes. Contrast itself is the design.
```css
.display-xl { font-size: clamp(6rem, 14vw, 14rem); letter-spacing: -0.06em; line-height: 0.86; font-weight: 700; }
.section-num { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-mono); }
```
**7. Tracking: tight or open, never default.** -0.05em for compressed display; +0.2em for blueprint-style labels.
**8. Monospace for technical data:** numbers, IDs, timestamps, code, metadata.
**9. All-caps labels with wide tracking for section headers.** `RESEARCH NOTES`, `OPERATIONAL DATA`, `ARCHIVE 04.2026`.
**10. Numbered headings.** `01. Overview`, `02. Methodology`. Numbers themselves carry visual weight; pair with mono.
### Color
**11. Mostly grayscale. ONE utility accent.** Black, two greys, white, plus one accent (red, signal-yellow, hot orange, or terminal green).
**12. Accent is for warning, action, or active state.** Never decoration. Brutalist landing with orange splashes "for visual interest" is a postcard, not brutalist.
### Canonical palettes
```
OPERATIONAL WARNING
--bg: #1A1A1A
--fg: #F5F2EC
--accent: #FF3B30 /* red */
--mono-surf: #0F0F0F
--hairline: #3A3A3A
EDITORIAL DOCUMENT (light)
--bg: #F5F2EC /* bone */
--fg: #0F0F0F
--accent: #C8501E /* terracotta */
--hairline: rgba(15, 15, 15, 0.15)
TERMINAL SCIENTIFIC
--bg: #0A0A0A
--fg: #33FF66 /* terminal green */
--accent: #FFCC00 /* warning yellow */
--mono everywhere
PRINT ARCHIVE
--bg: #E5E2DC
--fg: #0F0F0F
--accent: #0F4C8A /* ink blue */
--texture: newsprint at low opacity
```
### Composition
**13. Side margins narrow.** Brutalism uses the full canvas, not an 800px center column.
**14. Text wraps deliberately.** Hand-set line breaks where they read better. A headline wrapping to four short lines reads more deliberate than three uneven ones.
**15. Footnote-style annotations.** Asterisks, daggers, numbered references. Small mono callouts in margins. On-register for editorial-brutalist.
**16. Frame elements with hairlines.** Boxes, dividers, key/value pairs separated by a vertical rule. Newspaper-page architecture.
### Components
**17. Buttons:** solid rectangles with no rounding, or hairline borders. Label `[ READ ]` or `>>> EXECUTE` in mono.
```tsx
// reference brutalist button
```
**18. Tables are the canonical brutalist element.** Right-aligned numbers, headers in mono caps, hairline rules, NO zebra striping.
**19. Cards:** hairline borders, no shadow, no radius. Often a header bar in inverted color (black on bone, bone on black).
**20. Inputs:** visible borders, square corners. Focus state changes border color, not weight.
### Imagery
**21. Black-and-white or duotone photography.** Color photos off-register unless the photo itself is the singular accent.
**22. Halftone or dither effects for raster degradation.** Newspaper-style halftone signals "printed document." Used sparingly.
**23. Diagrams and schematics over decorative illustration.** Architectural plans, electrical schematics, exploded-view diagrams - all on-register.
**24. Photos wrapped in thin border with mono caption.** "FIG. 04 - OPERATIONS FLOOR, 06:14".
### Motion
**25. Minimal motion. Hard transitions, no easing curves.** Snap, not glide. Step functions feel correct.
**26. Cursor effects: a crosshair, a marker, a coordinate readout in a corner.** Used sparingly.
**27. Loading/processing: ASCII-style spinners or progress bars (`[####------]`).** Plain text on terminal background.
## Common AI-output patterns to reject
| Pattern | Why off-register | Fix |
| --- | --- | --- |
| `rounded-lg` on buttons | Soft, not mechanical | `rounded-none` |
| `shadow-md` on cards | Decoration | Hairline border only |
| `from-orange-500 to-red-500` | Decorative gradient | One solid accent |
| Centered single-column hero | Soft | Asymmetric grid |
| Inter at default tracking everywhere | Generic | Sans + mono pair, custom tracking |
| `text-xl font-bold` heading | No extreme contrast | clamp(6rem, 14vw, 14rem) display + 11px mono label |
| `transition-all duration-300 ease-in-out` | Glide | Step or 150ms linear, harder |
| Emoji or cute icons | Wrong vibe | Geometric / typographic mark only |
| Light shadow on text | Soft | None |
| Beige/cream tonal palette | Not brutalist | Bone (#F5F2EC) OR pitch (#0A0A0A) + single accent |
## Worked example: brutalist hero
```tsx
export function BrutalistHero() {
return (
01 — Sovereign issue tracker / 2026
Engineering discipline,
in document
form.
Issues. Triage. Decisions. Released artifacts. All in one austere ledger.
No animations. No "celebrations". No icons in your way.
);
}
```
What this does right: visible 12-column grid (rule 1); asymmetric 8/4 split (rule 3); numbered section marker `01 —` (rule 10); extreme type contrast - 11rem display vs 12px mono (rule 6); single accent (#C8501E) used twice for "discipline" + the stat numbers (rule 11-12); bone background (rule 12 palette); hairline column divider, no shadows (rule 16, ban on rule 25); FIG.-style annotations in the sidebar (rule 15); hand-set line breaks on the headline (rule 14).
## Workflow
When designing brutalist:
1. **Pick palette + typographic pair before any code.** Sans + mono, two greys, one accent.
2. **Lay out the grid as visible structure.** Hairline guides, snap everything.
3. **Numbered or coded headings throughout.**
4. **Mono for all technical data, all-caps tracked labels for sections.**
5. **Add density. Brutalism rewards information.** Sparse brutalism reads as failed minimalism.
6. **Annotate. Diagrams, captions, footnotes are on-register.**
## Verification
Manual checklist:
- [ ] Grid visible or strictly aligned.
- [ ] Two type families max (sans + mono).
- [ ] Extreme type-size contrast on at least one page.
- [ ] Single utility accent.
- [ ] No drop shadows.
- [ ] No border radius anywhere (or globally set to 0).
- [ ] No gradient backgrounds.
- [ ] At least one table, numbered list, or schematic element.
## When to skip this skill
- Consumer products where warmth and accessibility matter more than gravitas.
- B2B SaaS that needs to feel approachable (use [`forge-soft`](../forge-soft/SKILL.md)).
- Children's or entertainment products.
- E-commerce where conversion depends on warmth and trust signals.
## Related skills
- [`forge-frontend`](../forge-frontend/SKILL.md) - base taste this stacks on.
- [`forge-minimalist`](../forge-minimalist/SKILL.md) - mutex; quieter cousin.
- [`forge-soft`](../forge-soft/SKILL.md) - mutex; warm cousin.