# Neo-brutalist — style recipe

## The idea
- Raw, loud and honest: thick black borders, hard offset shadows, flat clashing colours and unpolished type.

## Use it when
- Independent brands that want to stand out
- Music, events and creative tools
- Audiences tired of polished sameness

## Avoid it when
- Trust and calm matter most (finance, health)
- The audience expects luxury

## Principles
- Every box has a thick solid black border
- Hard offset shadows with no blur
- Flat, saturated fills that clash on purpose
- Heavy display type next to monospace text
- Elements look stacked and stickered, slightly rotated
- Buttons look pressable: border, shadow, offset on hover

## Colour
- Cream (background): #fffbea
- Highlighter yellow (surface): #ffd84d
- Black (text): #000000
- Charcoal (muted): #333333
- Hot orange (accent): #c2410c
- Electric blue (accent-2): #4d7cff
- Black line (border): #000000
- Text on background contrast: 20.24:1 — passes AA

## Type
- Headings: Archivo Black, weights 400 — Heavy and blunt; all caps for short labels
- Body: Space Mono, weights 400 and 700 — Monospace text keeps the raw, typed feel
- Scale: 14px, 16px, 20px, 28px, 48px, 80px
- A heavy grotesk against a monospace; no elegant pairings.

## Spacing and shape
- Base unit: 4px
- Spacing steps: 4px, 8px, 16px, 24px, 40px
- Tight inside boxes, chunky gaps between them.
- Corner radii: 0px, 6px
- Borders: 3–4 px solid black on every card, button and image
- Shadows: Hard offset, e.g. 6px 6px 0 black, no blur

## Imagery and motion
- Imagery: Flat shapes, stickers, scribbles and bold icons; photos get a thick border.
- Motion: Snappy: elements shift by their shadow offset on hover.

## Do
- Put a thick border on everything
- Use two clashing colours at once
- Let one element break the grid

## Don't
- No soft or blurred shadows
- No thin, light type
- No pastel gradients