# Neobrutalism Design Language System (DLS) v1.0

Web (CSS / Tailwind) and mobile, with Figma token specs.

## 1. Philosophy

**Tone:** anti-corporate, raw, high-contrast, energetic, ironic.
**Metaphor:** print graphics (flat spot color, misregistered offset shadows), early Web 1.0 (visible boxes, default-looking controls), pop-art collage (stickers, tilted labels), functional starkness (decoration is always structural).

Principles:
1. Honest structure: show the box; interactive things look pressable.
2. Flat color, hard edge: one opaque fill, one black stroke, one zero-blur shadow.
3. Loud, but ordered: wild color and scale, strict 4px spacing.
4. Black is the glue: accents never touch without a black stroke.
5. One shout per view.
6. Accessibility is the feature.

## 2. Color tokens

| Token | Hex | Use |
|---|---|---|
| `--nb-black` | `#000000` | Borders, shadows, text |
| `--nb-white` | `#FFFFFF` | Surfaces |
| `--nb-paper` | `#FFFBEB` | Page background |
| `--nb-cream` | `#F4F0E6` | Alt surface, zebra rows |
| `--nb-concrete` | `#E5E1D8` | Disabled |
| `--nb-yellow` | `#FFE500` | Primary CTA, highlight |
| `--nb-cyan` | `#00E5FF` | Secondary, info |
| `--nb-pink` | `#FF2E93` | Emphasis, stickers |
| `--nb-green` | `#00E676` | Success |
| `--nb-blue` | `#2F5BFF` | Selected, links (white text only) |
| `--nb-lilac` | `#B8A1FF` | Tertiary blocks |
| `--nb-orange` | `#FF8A1F` | Warnings |
| `--nb-red` | `#FF3B30` | Errors, destructive |

Rules: three tiers only (page, surface, accent); 60/30/10 paper/black/accent; one dominant accent per section; no accent text on accent fills; no gradients or opacity; black text on every accent except blue, white text on blue.

## 3. Geometry

- Borders: 2px (inputs, tags), **3px default**, 4px (hero, modals, dividers); always `#000`.
- Shadows: opaque, zero blur: `2px` tags, **`4px` buttons/inputs**, `6px` cards, `8px` modals, `12px` hero max.
- Radius: pick one mode per product: Sharp `0px` or Soft `4px/8px`; pills only for badges, avatars, switch tracks.
- Spacing: 4px base (4, 8, 12, 16, 24, 32, 48, 64).

```css
:root {
  --nb-black:#000; --nb-white:#fff; --nb-paper:#FFFBEB; --nb-cream:#F4F0E6;
  --nb-yellow:#FFE500; --nb-cyan:#00E5FF; --nb-pink:#FF2E93;
  --nb-green:#00E676; --nb-blue:#2F5BFF; --nb-lilac:#B8A1FF;
  --nb-orange:#FF8A1F; --nb-red:#FF3B30;
  --border: 3px solid #000; --radius: 0px;
  --shadow-sm: 4px 4px 0 #000; --shadow-md: 6px 6px 0 #000; --shadow-lg: 8px 8px 0 #000;
}
```

```js
// tailwind.config.js (extend)
colors: { nb: { black:'#000', white:'#fff', paper:'#FFFBEB', yellow:'#FFE500', cyan:'#00E5FF', pink:'#FF2E93', green:'#00E676', blue:'#2F5BFF' } },
boxShadow: { 'nb-sm':'4px 4px 0 0 #000', 'nb-md':'6px 6px 0 0 #000', 'nb-lg':'8px 8px 0 0 #000' },
borderWidth: { 3: '3px' }
```

## 4. Typography and layout

- Pairing A (default): Archivo Black (display), Space Grotesk (body), JetBrains Mono (labels). Alternatives: Syne + Inter; Anton + DM Sans.
- Scale: display `clamp(3.5rem, 10vw, 8rem)` / 0.9; h1 3rem; h2 2.25rem; h3 1.5rem; body 1rem / 1.6 (min 16px); label 0.875rem mono; caption 0.75rem.
- Layout: asymmetrical 12-column grids (7/5, 8/4), oversized headlines, 4px divider rules, visible grid lines, controlled overlap (max 16px, rotate 1-3 degrees on decor only), 24px minimum gutters.

## 5. Components

Press model (buttons, interactive cards):

| State | Transform | Shadow |
|---|---|---|
| Default | none | `4px 4px 0 #000` |
| Hover | `translate(-2px,-2px)` | `6px 6px 0 #000` |
| Active | `translate(4px,4px)` | none |
| Disabled | none | none, `--nb-concrete` fill, dashed border |

```css
.nb-btn { min-height:44px; padding:0 20px; background:var(--nb-yellow); color:#000;
  border:var(--border); box-shadow:var(--shadow-sm);
  transition:transform 80ms steps(1,end), box-shadow 80ms steps(1,end); }
.nb-btn:hover  { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #000; }
.nb-btn:active { transform:translate(4px,4px); box-shadow:none; }
```

- Cards: header band (accent fill, 3px bottom border), white body, cream footer, `6px` shadow.
- Inputs: 44px min height, 16px text, 3px border, `4px` shadow; focus turns yellow with a 4px blue outline; errors add a red band with icon + text.
- Checkbox and switch: black border, green when on, state also shown as text.
- Badge: pill, 2px border, `2px` shadow. Tooltip: black fill, white text, yellow offset shadow, instant, opens on focus.

## 6. Motion and accessibility

- Motion: 80ms press, 100ms maximum, `steps(1, end)` easing, animate only transform, box-shadow and background. Honor `prefers-reduced-motion`.
- Contrast: black on paper, white, yellow, cyan, green, lilac, orange is AAA; black on pink or red is AA; white on blue is AA. Never white on yellow, cyan, green, lilac or orange, and never accent on accent.
- Focus: `outline: 4px solid #2F5BFF; outline-offset: 4px` (yellow on dark surfaces).
- Targets at least 44px; never color alone for status; decorative stickers are `aria-hidden`; dark mode swaps to bright borders and a yellow shadow.

## 7. Figma tokens

Structure: primitives, semantic, component. Shadow styles: X 4/6/8, Y 4/6/8, blur 0, spread 0, `#000` 100%. Strokes: inside, 3px. Variants: State (Default, Hover, Pressed, Focus, Disabled) by Variant by Size. Variable modes: Light/Dark and Sharp/Soft. Grids: 12 col / 24 gutter / 48 margin desktop; 4 col / 16 / 16 mobile.

## 8. Do and don't

| Do | Don't |
|---|---|
| `#000` borders and shadows | Gray or 1px borders |
| Zero-blur opaque shadows | Blur, spread, transparency |
| Snap in 100ms or less | Easing, fades, springs |
| One primary action per view | Every button a different accent |
| Rotate decor only | Tilt forms, tables, text |