Website Design Explorer

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

Example: independent record label release page for Clatterbox Records, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

Neo-brutalist — style recipe: the same text the brief copies.

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

Type

  • Headings: Archivo Black, weights 400 — Heavy and blunt; all caps for short labels
  • Body: Space Mono, weights 400, 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, weights 400

The quick brown fox jumps over the lazy dog

Heavy and blunt; all caps for short labels

Body Space Mono, weights 400, 700

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Monospace text keeps the raw, typed feel

Scale A heavy grotesk against a monospace; no elegant pairings.
  • 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

Spacing and shape

Spacing base unit 4px
  • 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

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