neubrutalism

# 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...