Softened neobrutalism: hard borders, offset shadows with no blur, saturated flat fills on a warm off-white ground, and one accent doing the dimensional work. PostHog sits here. neobrutalism.dev sits here. The Obsidian Primary theme sits here.
The screenshot above is demo/index.html, a fictional developer tool called Chock. Open it live, or clone the repo and open the file. There is no build step, no framework, no node_modules, and no server to start.
The demo declares no color of its own. It links tokens/tokens.css, components/components.css and components/play.css and reads every value from them, so it stays honest about what the theme actually produces.
There is a second page worth opening: components/index.html renders all five components with their variants and the markup to copy.
A visual style is a set of coordinates, not a mood. This theme sits at one point in the creative direction framework, which sets brand direction on four axes. Here is where this register lands and what each choice pays for.
| Axis | Position | What the position buys |
|---|---|---|
| Tone register | Playful | Permission for the interface to be funny in the way a well-made object is funny. The press animation is a joke that lands in 110ms. |
| Aesthetic philosophy | Controlled Maximalist | Density that has been composed rather than accumulated. Loud borders and loud fills, held in a system tight enough to stay readable. |
| Audience relationship | Peer | Restrained radii and a plain voice. Square corners would talk down; pill corners would talk up. |
| Sensory ambition | Considered | One accent-tinted shadow per screen. The reader notices the craft without the craft becoming the message. |
Those four position names are the exact strings the framework uses. If you want the long version of any of them, the links go to the position page.
Clone once, then pick the path that matches your stack.
git clone --depth 1 https://github.com/rampstackco/neobrutalism-themePlain CSS. Copy the two files and link them in order. This is the whole install.
cp -r neobrutalism-theme/tokens neobrutalism-theme/components your-project/styles/<link rel="stylesheet" href="/styles/tokens/tokens.css" />
<link rel="stylesheet" href="/styles/components/components.css" />
<link rel="stylesheet" href="/styles/components/play.css" />The third line is optional. Leaving it out gives you the quiet variant, described below.
Tailwind v4. One import. theme.css pulls in tokens.css and maps it onto Tailwind's theme namespaces, so you get bg-nb-primary, shadow-nb, rounded-nb, text-nb-h1.
@import "tailwindcss";
@import "./styles/tokens/theme.css";Tailwind v3. Load the tokens in your stylesheet, then register the preset.
@import "./styles/tokens/tokens.css";
@tailwind base;
@tailwind components;
@tailwind utilities;// tailwind.config.js
module.exports = {
presets: [require("./styles/tokens/preset.js")],
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
};Already on shadcn/ui. The tokens are namespaced --nb-* so they will not clobber yours. Bridge the two in your global stylesheet and shadcn's components inherit the register:
:root {
--background: var(--nb-ground);
--foreground: var(--nb-ink);
--card: var(--nb-surface);
--primary: var(--nb-primary);
--primary-foreground: var(--nb-primary-ink);
--border: var(--nb-ink);
--ring: var(--nb-ring);
--radius: var(--nb-radius);
}tokens/tokens.css is the single source of truth. Every literal value in the theme appears there exactly once; theme.css and preset.js hold no values of their own and point back at it with var(). Change a hex there and the demo, the components, and both Tailwind adapters follow.
The file is annotated. Each group of tokens carries a comment naming the axis the choice serves and why, so the shadow tokens explain themselves:
/* SHADOW
Aesthetic philosophy axis, density made honest. Zero blur, full opacity,
hard offset. A blurred shadow simulates a light source and asks the viewer
to believe in a room; a hard offset states that one plane sits above
another and declines to pretend otherwise. */CUSTOMIZE.md is the half-finished layer, and it is half-finished deliberately. It documents retheming as axis moves rather than as a color picker: pick an axis, move along it, change the two or three tokens that carry the move. One move is worked through with before and after values. Two more are sketched so the format is obvious enough to finish yourself.
Borders, shadows and flat fills give you the structural half of this register. The half that makes people recognize it is dimensional: things tilted a degree off the grid, solids drawn with real extrusion, a sticker stuck over a corner, a mark that looks drawn by hand. That half lives in assets/ and components/play.css, and it is deliberately separable from everything else.
assets/ holds six original SVGs: three extruded motifs, a starburst seal, an underline squiggle and an arrow. They are built to be inlined into your markup rather than loaded through <img>, because an SVG inside an <img> is an isolated document that cannot read your custom properties. Inlined, the paint rules in play.css reach them and they take your token colors. Opened on their own they stay legible as ink line art.
play.css adds the composition utilities: four tilt steps, the sticker and seal treatments, the motif cluster, and a taped section divider. Dial the layer up by using more of them and down by using fewer. The demo uses each one at most once per section, which is roughly the ceiling before Controlled Maximalist stops being controlled.
Delete assets/ and play.css and everything still works, quietly. That deletion is not damage, it is a move along the sensory ambition axis from Considered toward Functional, and CUSTOMIZE.md documents it as the quiet variant.
Real products mix registers rather than adopting one whole: PostHog, for instance, builds glassy translucent surfaces on top of this register's foundation, and those effects live in glassmorphism-theme rather than here, so composing the two is intended use. That repo's composition note points back at this one, and it carries the rule the pairing actually turns on: a wrapper with opacity or a filter between a glass panel and its ground silently kills the blur.
Consuming this from a Claude skill. The design-standards skill asks for a project's design tokens as a required input and offers to define a working set when none exist. Point it at tokens/tokens.css instead. The file already covers every category the skill asks for, in the order it asks: color with measured contrast ratios, spacing scale, type scale, radius. Every text pairing in it clears WCAG AA, and the ratios are in the comments so the skill's contrast pass has nothing left to compute.
Soft neobrutalism and true brutalist web design share a word root and almost nothing else. They are separate archetypes with opposite intentions.
Brutalist web design is hostile on purpose. It refuses comfort: default browser styles, unstyled blue links, cramped line lengths, no concession to the reader. The discomfort is the argument, and it is aimed at the polish of commercial web design.
What this repo packages is friendly. It borrows brutalism's honesty about structure, the visible border and the shadow that admits it is a shadow, and then spends real effort on legibility, touch targets, contrast ratios, and a press animation that feels good. A reader should enjoy using it. That is disqualifying for actual brutalism, which is the clearest way to tell the two apart.
If you came here looking for the hostile one, it is brutalist-web-theme, which is that argument made properly rather than a harsher version of this one.
MIT. See LICENSE. Use it commercially, fork it, rename the tokens, ship it. No attribution required.
Issues and pull requests are welcome here. For questions, ideas, and anything conversational, use the discussions on the claude-skills repo, which is where all discussion for these repos lives.