# Neobrutalism

> Modern brutalism — bold black borders, primary colors, zero rounding, raw HTML aesthetics, and unapologetic digital honesty.

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

---

# Neobrutalism
## Mission
Embrace the raw structure of the web — thick borders, primary colors, hard shadows, and zero decoration — for designs that feel honest, loud, and unmistakably digital.
## Brand
### 🎨 Colors
- `#FFD700` — Primary (gold yellow)
- `#FF4500` — Secondary (orange-red)
- `#1E90FF` — Accent (dodger blue)
- `#FFFDF7` — Background (warm off-white)
- `#000000` — Text (pure black)
- `#555555` — Muted text (dark gray)
### 🔤 Typography
- Heading: **Space Grotesk** (Google Fonts) — bold, quirky grotesk
- Body: **Space Mono** (Google Fonts) — monospace for raw digital feel, or **Inter** for readability
- Scale: xs 0.75rem | sm 0.875rem | base 1rem | lg 1.25rem | xl 2rem | 2xl 3rem | 3xl 4rem
### 📐 Spacing
- Grid: explicit CSS Grid, visible gaps, 16px base unit
- Section padding: 4rem vertical, 2rem horizontal
- Card gaps: 1.5rem with visible grid lines or borders between all elements
### 🧩 Components
- Buttons: solid background with 3px black border, 4px black box-shadow offset (4px 4px 0 #000), 0px radius, hover slides shadow to 2px/2px
- Cards: white/colored background, 3px black border, 6px 6px 0 black solid shadow, 0px radius, bold inner padding
- Nav: visible black bottom border (3px), all links in bold monospace, active link has solid background fill
- Hero: massive bold headline (3xl+), 3px black rule below, subhead in monospace, CTA as chunky bordered button
- Footer: thick black top border, 2-3 columns separated by visible vertical rules, monospace small text
### ♿ Accessibility
- Contrast minimum 4.5:1 — black borders/text against warm white passes easily
- Focus states: 3px black dashed outline with 2px offset — highly visible
- Respect `prefers-reduced-motion` — disable shadow-offset transitions, keep the hard look
- Minimum body font size 16px (1rem)
### ✍️ Writing Tone
- Direct, bold, unpretentious. Short declarative sentences. No softening words.
- Labels in ALL CAPS or lowercase — never title case. CTAs are imperative verbs. Use monospace for code-like elements.
## Do / Don't
### ✅ Do
- Use 3px+ solid black borders on every distinct element
- Apply hard box-shadows (no blur, offset 4-8px) in black on interactive elements
- Keep border-radius at 0px everywhere — sharp corners are the rule
- Use bold primary colors (yellow, red, blue) against warm off-white backgrounds
- Make interactive states obvious — shadows shift, backgrounds fill, borders thicken
### ❌ Don't
- Use any border-radius values — 0px or nothing
- Apply drop shadows with blur — solid offset shadows only
- Use gradients or opacity fades
- Add subtle hover transitions — states should pop instantly
- Nest soft elements inside hard ones — maintain consistent visual language
## Quality Gates
- [ ] All elements have border-radius: 0px — verified globally
- [ ] Every interactive element has a ≥2px solid border
- [ ] At least 3 elements use hard offset box-shadows (no blur radius)
- [ ] Color palette limited to 3 bold hues + black + off-white
- [ ] No gradients, opacity transitions, or soft shadows anywhere
- [ ] Typography uses bold weights (≥600) for all headings