neubrutalismlisted
Install: claude install-skill wzyxdwll/ccgx-workflow
# Neubrutalism Design Spec
## Core Principles
1. **Thick Borders** — Bold `3–5px solid` black outlines on all elements
2. **Offset Solid Shadows** — Hard-edge `box-shadow` with zero blur (e.g. `5px 5px 0 #000`)
3. **High Saturation Colors** — Vivid, punchy fills: pinks, yellows, blues, greens
4. **Minimal Radius** — `0–8px` border-radius; sharp or barely rounded corners
5. **Flat Aesthetic** — No gradients, no blur, no transparency
## CSS Tokens
Reference: [references/tokens.css](references/tokens.css)
```css
@import 'references/tokens.css';
.nb-card {
background: var(--nb-yellow);
border: var(--nb-border-thick);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow);
}
```
## Component Examples
### Card
```css
.nb-card {
background: var(--nb-white);
border: var(--nb-border-thick);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow);
padding: 1.5rem;
}
```
### Button
```css
.nb-btn {
background: var(--nb-yellow);
border: var(--nb-border);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow-sm);
padding: 0.6rem 1.4rem;
font-family: var(--nb-font);
font-weight: var(--nb-font-weight);
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.nb-btn:hover {
transform: translate(-2px, -2px);
box-shadow: var(--nb-shadow);
}
.nb-btn:active {
transform: translate(3px, 3px);
box-shadow: none;
}
```
### Navbar
```css
.nb-nav {
background: var(--nb-bg);
border-bottom: var(--nb-border-thick);
pad