← ClaudeAtlas

neobrutalismlisted

Use when building or styling a UI in the Neobrutalism aesthetic — A loud, high-contrast look built from chunky shapes, hard black edges, and unapologetically blocky color that refuses to whisper. For Claude Code, Cursor, and Codex.
x77jh8gvrn-alt/staqd-skills · ★ 0 · Web & Frontend · score 75
Install: claude install-skill x77jh8gvrn-alt/staqd-skills
# Neobrutalism Neobrutalism takes the bones of an interface and puts them on display. Thick black outlines, flat saturated color, and hard shadows with no blur create a look that feels printed rather than rendered. It is playful, confident, and a little defiant — the kind of style you reach for when blending in is the enemy. Use it for products that want personality, launches that need to be remembered, and anyone tired of soft gradients and timid gray. The whole system reads like a well-made poster: bold blocks, honest structure, and zero pretense of polish. ## Design principles - Outline everything: a consistent 2-3px near-black border defines every surface, button, and input. - Replace blur with offset: shadows are solid color blocks pushed down-and-right, never soft. - Use color in large flat blocks — no gradients, no tints, no opacity tricks. - Keep geometry blunt: small or zero radius, rectangular layouts, obvious grid lines. - Make interaction physical: pressing a button moves it into its own shadow. - Embrace asymmetry and oversized type; whitespace is structural, not decorative. - Let the system feel hand-assembled — slight intentional misalignment reads as charm, not error. ## Color The canvas is a warm off-white `#FFFDF5` so the black ink reads as ink, not pure digital black. Surfaces sit on pure `#FFFFFF` to pop off the canvas. The primary action color is a hot orange `#FF5C00`, with a confident blue `#2563FF` as secondary and a mint `#00E0A4` for success and a