# Brutalism

> Raw, unstyled honesty with monospace fonts, visible borders, and no decoration.

- Skill: `jdsadminllc/brutalism` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/brutalism`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/brutalism/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/brutalism

---

# Brutalism
## Mission
Reject decorative design in favor of raw, functional honesty — if it works, it's beautiful enough.
## Brand
### 🎨 Colors
- `#ffffff` — Page background
- `#000000` — Text and borders
- `#0000ff` — Hyperlink blue (unvisited)
- `#800080` — Hyperlink purple (visited)
- `#00ff00` — Terminal green accent
- `#ff0000` — Error red
### 🔤 Typography
- Headings: Courier Prime (Google Fonts)
- Body: Courier Prime (Google Fonts)
- Scale: xs 0.75rem, sm 0.875rem, base 1rem, lg 1.125rem, xl 1.25rem, 2xl 1.5rem, 3xl 2rem
### 📐 Spacing
- Grid: No grid — content flows vertically, single column
- Section padding: 2rem vertical, 1rem horizontal
- Card gaps: 1px (the border itself is the gap)
### 🧩 Components
- Buttons: Raw — black 2px solid border, white fill, monospace text, 0 border-radius, hover inverts to black fill/white text
- Cards: 2px solid black border, no border-radius, no shadow, 1rem internal padding, content flows top to bottom
- Nav: A simple unstyled list of links, separated by line breaks or pipes, top of page
- Hero: A single h1 with a horizontal rule beneath it — no images, no background, no gradient
- Footer: A horizontal rule followed by plain text, monospace, small
### ♿ Accessibility
- Minimum contrast ratio 7:1 — black on white everywhere
- Focus states: Default browser focus outline (visible, functional), never suppressed
- Reduced motion: No animations to disable — everything is static
- Minimum font size 0.75rem (12px)
### ✍️ Writing Tone
- Voice: Blunt, functional, slightly defiant — like a README written by someone who hates marketing
- Labels: Lowercase, descriptive, no jargon
- No emoji, no exclamation marks, no marketing adjectives
## Do / Don't
### ✅ Do
- Use semantic HTML — the browser's default rendering IS the design
- Let content determine layout — no forced grid or column structures
- Embrace visible structural elements: borders, underlines, horizontal rules
- Keep color to the minimum: black, white, link blue, visited purple
- Ship fast — if you're spending time on polish, you're doing it wrong
### ❌ Don't
- Add border-radius to anything
- Use more than 1 font family
- Add shadows, gradients, or transparency
- Suppress default browser focus outlines
- Center text — left-align everything, like a document
## Quality Gates
- [ ] Every interactive element has visible, unsuppressed browser focus styles
- [ ] No border-radius values anywhere in CSS
- [ ] Only one font family in use (monospace)
- [ ] No shadows, gradients, or backdrop-filter effects
- [ ] All text passes 7:1 contrast minimum (AAA)
- [ ] Page is functional and readable with CSS completely disabled