0design / Library
Web2019UI Style

Neo-Brutalism

Ugly by design.

A reaction against the polished. It is raw, unadorned, and structurally exposed. High contrast borders, clashing colors, and system fonts.

Interactive Playground

Live components rendered with Neo-Brutalism tokens.

Live Preview

Authentication

Secure your account with our new multi-factor authentication system.

Badges & Tags

NewFeaturedBetaPro

Type Scale

Display XL
H1 / 800 / 100%
Heading L
H2 / 600 / 80%

Typography

Primary / Headings

Aa

Secondary / Body

Aa

“The typography in Neo-Brutalism relies on mechanical precision.”

Use high contrast for headings. Maintain strict hierarchy and translate the font stack into design tokens so brands can extend the style without guesswork.

Color System

Background
Surface
Accent
Text

Usage Guidelines

When to Use Neo-Brutalism

Neo-Brutalism excels when you need a reaction against the polished. it is raw, unadorned, and structurally exposed. high contrast borders, clashing colors, and system fonts.. This style works best when you want to ugly by design..

Best Practices

  • •Maintain consistent spacing using the gap-4 grid system.
  • •Use font-mono uppercase tracking-widest font-bold for headings and font-mono for body text.
  • •Apply rounded-none for rounded corners and shadow-[5px_5px_0px_0px_rgba(0,0,0,1)] for depth.

Style Playbook

Neo-brutalism celebrates raw digital material—system fonts, offset drop shadows, and warning-label color blocks.

History

  • •Inspired by brutalist architecture and early web “view source” culture.
  • •Rebooted by independent studios and crypto collectives seeking anti-brand aesthetics.

Layout Principles

  • •Stack content vertically with abrupt section changes.
  • •Mix fixed and fluid grids to create deliberate misalignment.
  • •Use chunky borders to simulate physical zines.

Color Guidelines

Acidic palette

Highlighter yellows, cyan, magenta, and matte black backgrounds.

Contrast

Never drop below 5:1 contrast—dark UI still needs to be accessible.

Typography

Display

System monospace or stretched grotesques set in uppercase.

Body

Stick to browser defaults for authenticity and performance.

Best For

  • Editorial features
  • Campaign microsites
  • Experimental portfolios

Watch Outs

  • ⚠️Visual noise can overshadow messaging.
  • ⚠️Overuse of motion may trigger reduced-motion preferences.

Notable Brands

Figma Config pop-up sitesDribbble experimental dropsPanic Studio

Execution Tips

  • →Blend CSS noise textures with vector patterns to keep file sizes small.
  • →Add microcopy that explains the intentionally raw aesthetic to skeptical stakeholders.

AI Palette Generator

Describe a mood, scene, or style (e.g., "Cyberpunk Tokyo Rain" or "Scandinavian Morning"), and let our AI craft the perfect color system.