Design style

Neo-brutalist

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

bold
raw
playful
dense
contemporary
warm

See it live

Clatterbox Records is a fictional independent record label release page, written for this library to show the Neo-brutaliststyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Neo-brutalist recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

# 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

Design in the "Neo-brutalist" style.
The idea: Raw, loud and honest: thick black borders, hard offset shadows, flat clashing colours and unpolished type.
It suits: Independent brands that want to stand out.
It suits: Music, events and creative tools.
It suits: Audiences tired of polished sameness.
Do not choose it when: Trust and calm matter most (finance, health).
Do not choose it when: The audience expects luxury.
Follow this rule: Every box has a thick solid black border.
Follow this rule: Hard offset shadows with no blur.
Follow this rule: Flat, saturated fills that clash on purpose.
Follow this rule: Heavy display type next to monospace text.
Follow this rule: Elements look stacked and stickered, slightly rotated.
Follow this rule: Buttons look pressable: border, shadow, offset on hover.
Use #fffbea (Cream) as the background colour.
Use #ffd84d (Highlighter yellow) as the surface colour.
Use #000000 (Black) as the text colour.
Use #333333 (Charcoal) as the muted colour.
Use #c2410c (Hot orange) as the accent colour.
Use #4d7cff (Electric blue) as the accent-2 colour.
Use #000000 (Black line) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 20.24:1.
Use Archivo Black in weights 400 for headings: Heavy and blunt; all caps for short labels.
Use Space Mono in weights 400 and 700 for body text: Monospace text keeps the raw, typed feel.
Use only these type sizes: 14px, 16px, 20px, 28px, 48px, 80px.
Type: A heavy grotesk against a monospace; no elegant pairings.
Space things on a 4px base with the steps 4px, 8px, 16px, 24px, 40px.
Spacing: Tight inside boxes, chunky gaps between them.
Use corner radii of 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: 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.
Do: Use two clashing colours at once.
Do: Let one element break the grid.
Avoid: soft or blurred shadows.
Avoid: thin, light type.
Avoid: pastel gradients.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #fffbea;
  --color-surface: #ffd84d;
  --color-text: #000000;
  --color-muted: #333333;
  --color-accent: #c2410c;
  --color-accent-2: #4d7cff;
  --color-border: #000000;
  --font-heading: "Archivo Black", sans-serif;
  --font-body: "Space Mono", monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --radius-1: 0px;
  --radius-2: 6px;
}

Download brief (.md)Download tokens (.css)

The 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

Palette

Creambackground #fffbea
Highlighter yellowsurface #ffd84d
Blacktext #000000
Charcoalmuted #333333
Hot orangeaccent #c2410c
Electric blueaccent-2 #4d7cff
Black lineborder #000000

Text on background: 20.24:1 — passes AA

Type

Headings · Archivo Black · 400

The quick brown fox jumps over the lazy dog

Heavy and blunt; all caps for short labels

Body · Space Mono · 400, 700

The quick brown fox jumps over the lazy dog

Monospace text keeps the raw, typed feel

80pxThe quick brown fox jumps over the lazy dog
48pxThe quick brown fox jumps over the lazy dog
28pxThe quick brown fox jumps over the lazy dog
20pxThe quick brown fox jumps over the lazy dog
16pxThe quick brown fox jumps over the lazy dog
14pxThe quick brown fox jumps over the lazy dog

A heavy grotesk against a monospace; no elegant pairings.

Spacing and shape

Spacing on a 4px base

4px
8px
16px
24px
40px

Tight inside boxes, chunky gaps between them.

Corners, borders and shadows

Borders: 3–4 px solid black on every card, button and image
Shadows: Hard offset, e.g. 6px 6px 0 black, no blur

Do and don't

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

Neo-brutalist

See it live

Pebble RiotLoud Kitchen

Tracklist

Side A

Side B

Pick a format

12" vinyl

Cassette

Download

Release shows

Three people, a basement and a cutting lathe.

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Palette

Type

Spacing and shape

Spacing on a 4px base

Corners, borders and shadows

Do and don't

Do

Don't