Brutalism | Web Design Styles | Friday Night Wiki

Raw, bold, and intentionally unconventional design that rejects polish in favor of honest, stripped-back interfaces.

Core Principles

1. Raw Aesthetics

Embrace the raw nature of HTML and the web. No attempt to hide structure: exposed grids, system fonts, default form elements.

2. Bold Typography

Oversized, heavy typefaces dominate the page. Text is the primary visual element.

3. Intentional Imperfection

Asymmetric layouts, clashing colors, broken grids. The "undesigned" look is deliberate.

4. Content Over Decoration

Strip away unnecessary ornamentation. The message takes center stage.

5. Anti-Convention

Deliberately breaks established UX patterns. Scrolljacking, unconventional navigation, unexpected interactions.

Visual Characteristics

Color Palette

/* Brutalist palettes - high contrast, often jarring */
:root {
  /* Classic brutalist */
  --bg: #ffffff;
  --text: #000000;
  --accent: #ff0000;

  /* Neon brutalist */
  --bg-neon: #000000;
  --text-neon: #00ff00;
  --accent-neon: #ff00ff;

  /* Raw concrete */
  --bg-concrete: #d4d4d4;
  --text-concrete: #1a1a1a;
  --accent-concrete: #ff4444;
}

Typography

/* System fonts or monospace - no fancy web fonts */
body {
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  line-height: 1.4;
}

/* Alternatively, raw system stack */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Oversized headings */
h1 {
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

h2 {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
}

Borders and Outlines

/* Thick, visible borders instead of shadows */
.brutalist-element {
  border: 3px solid #000000;
  background: #ffffff;
  padding: 20px;
  /* No border-radius, no box-shadow */
}

/* Heavy dividers */
hr {
  border: none;
  border-top: 5px solid #000000;
  margin: 40px 0;
}

Implementation Examples

Brutalist Hero Section

<section class="brutal-hero">
  <h1>Design<br>is<br>Dead</h1>
  <p class="subtitle">Long live the raw web.</p>
  <a href="#work" class="brutal-link">See the work →</a>
</section>

.brutal-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: #ffffff;
}

.brutal-hero h1 {
  font-size: clamp(5rem, 15vw, 12rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: #000000;
  margin: 0 0 40px 0;
}

.brutal-hero .subtitle {
  font-family: 'Courier New', monospace;
  font-size: 1.25rem;
  color: #000000;
  margin: 0 0 40px 0;
}

.brutal-link {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 1.25rem;
  color: #000000;
  text-decoration: none;
  border-bottom: 3px solid #000000;
  padding-bottom: 4px;
  transition: color 0.1s, border-color 0.1s;
}

.brutal-link:hover {
  color: #ff0000;
  border-color: #ff0000;
}

Brutalist Card

<article class="brutal-card">
  <span class="brutal-card__number">01</span>
  <h3 class="brutal-card__title">Project Title</h3>
  <p class="brutal-card__desc">A raw description with no pretense.</p>
  <a href="#" class="brutal-card__link">Read more →</a>
</article>

.brutal-card {
  border: 3px solid #000000;
  padding: 30px;
  background: #ffffff;
  position: relative;
  transition: transform 0.1s;
}

.brutal-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 #000000;
}

.brutal-card__number {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  color: #999999;
  display: block;
  margin-bottom: 16px;
}

.brutal-card__title {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 12px 0;
  line-height: 1;
}

.brutal-card__desc {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.brutal-card__link {
  font-family: 'Courier New', monospace;
  color: #000000;
  text-decoration: none;
  border-bottom: 2px solid #000000;
}

.brutal-card__link:hover {
  color: #ff0000;
  border-color: #ff0000;
}

<nav class="brutal-nav">
  <a href="/" class="brutal-nav__logo">STUDIO*</a>
  <ul class="brutal-nav__menu">
    <li><a href="/work">Work</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

.brutal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-bottom: 3px solid #000000;
}

.brutal-nav__logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
}

.brutal-nav__menu {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brutal-nav__menu a {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.brutal-nav__menu a:hover {
  text-decoration: line-through;
  color: #ff0000;
}

Brutalist Grid Layout

<div class="brutal-grid">
  <div class="brutal-grid__item brutal-grid__item--large">
    <h2>Featured</h2>
  </div>
  <div class="brutal-grid__item">
    <h3>Item 01</h3>
  </div>
  <div class="brutal-grid__item">
    <h3>Item 02</h3>
  </div>
  <div class="brutal-grid__item">
    <h3>Item 03</h3>
  </div>
</div>

.brutal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 3px solid #000000;
}

.brutal-grid__item {
  border: 3px solid #000000;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.brutal-grid__item--large {
  grid-column: span 2;
  grid-row: span 2;
  background: #000000;
  color: #ffffff;
}

.brutal-grid__item:hover {
  background: #ff0000;
  color: #ffffff;
  cursor: pointer;
}

.brutal-grid__item h2,
.brutal-grid__item h3 {
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

Brutalist Button

/* Hard shadow offset button */
.brutal-btn {
  display: inline-block;
  padding: 16px 32px;
  background: #ffffff;
  color: #000000;
  border: 3px solid #000000;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: relative;
  box-shadow: 4px 4px 0 #000000;
  transition: transform 0.1s, box-shadow 0.1s;
}

.brutal-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000000;
}

.brutal-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #000000;
}

/* Inverted variant */
.brutal-btn--inverted {
  background: #000000;
  color: #ffffff;
  box-shadow: 4px 4px 0 #ff0000;
}

When to Use Brutalism

Perfect For

Creative agencies: Shows confidence and creativity
Art galleries: Raw aesthetic suits artistic content
Personal portfolios: Stand out from the crowd
Music/Culture sites: Punk, indie, counterculture brands
Editorial/Magazines: Bold, statement-making publications

Real-World Examples

Bloomberg Businessweek - Bold editorial layouts
Balenciaga - Fashion brutalism
Craigslist - Accidental brutalism (purely functional)
The Outline (now defunct) - Digital magazine
Hacker News - Minimal, text-only interface

Avoid For

Healthcare/Medical: Needs to feel safe and trustworthy
Banking/Finance: Users expect polish and professionalism
Government services: Accessibility and clarity are paramount
E-commerce for general audiences: Can confuse shoppers
Senior-focused products: Unconventional patterns cause friction

Pros and Cons

Advantages

✅ Instantly memorable and distinctive
✅ Extremely fast loading (minimal assets)
✅ Forces focus on content and message
✅ Liberating creative freedom
✅ Ages in a unique way (doesn't look "dated" like trends)
✅ Low maintenance

Disadvantages

❌ Polarizing; people love it or hate it
❌ Can hurt usability if taken too far
❌ Accessibility risks with unconventional patterns
❌ Clients often resist the aesthetic
❌ Requires strong typographic skills
❌ Easy to do poorly (looks lazy instead of intentional)

Common Mistakes

1. Lazy vs. Intentional

Wrong: Slapping default HTML together and calling it brutalist.

/* Wrong - this is just unstyled */
body {
  /* literally nothing */
}

Right: Deliberate choices that show control.

/* Right - intentionally raw */
body {
  font-family: 'Courier New', monospace;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
}

h1 {
  font-size: 6rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  margin-bottom: 40px;
}

2. Ignoring Accessibility

Wrong: No focus styles, tiny text, unreadable combinations.
Right: Bold doesn't mean unusable.

/* Always provide focus indicators */
a:focus,
button:focus {
  outline: 3px solid #ff0000;
  outline-offset: 4px;
}

/* Maintain readable body text */
body {
  font-size: 16px;
  line-height: 1.5;
}

3. All Shock, No Substance

Wrong: Flashy visuals with no clear content hierarchy.
Right: Use brutalism to amplify your message, not obscure it.

4. Forgetting Mobile

Wrong: Desktop-only brutalist layouts that break on small screens.
Right: Brutalism can be responsive.

h1 {
  font-size: clamp(3rem, 12vw, 10rem);
}

.brutal-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Advanced Techniques

Marquee Text Effect

.brutal-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 3px solid #000000;
  border-bottom: 3px solid #000000;
  padding: 20px 0;
}

.brutal-marquee__inner {
  display: inline-block;
  animation: marquee 15s linear infinite;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

Overlapping Elements

.brutal-overlap {
  position: relative;
}

.brutal-overlap__image {
  width: 60%;
  border: 3px solid #000000;
}

.brutal-overlap__text {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: #ff0000;
  color: #ffffff;
  padding: 30px;
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  max-width: 50%;
}

Cursor Customization

/* Custom cursor for brutalist sites */
body {
  cursor: crosshair;
}

a, button {
  cursor: pointer;
}

/* Or use a custom SVG cursor */
body {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="12" fill="none" stroke="black" stroke-width="3"/></svg>') 16 16, auto;
}

Mixed Typography

/* Combine contrasting typefaces */
.brutal-mixed h1 {
  font-family: 'Times New Roman', serif;
  font-size: 8rem;
  font-style: italic;
  font-weight: 400;
}

.brutal-mixed h2 {
  font-family: Arial, sans-serif;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
}

.brutal-mixed p {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
}

Brutalism Subgenres

Subgenre	Characteristics	Example
Neo-brutalism	Brutalist + color + shadow offsets	Gumroad's redesign
Anti-design	Deliberately ugly, clashing colors	Experimental art sites
Raw HTML	Default browser styling, minimal CSS	Craigslist, text-only sites
Typo-brutalism	Massive type as the primary element	Bloomberg covers
Swiss-Brutal	Grid-based but with brutalist energy	Architectural firm sites

Neo-Brutalism (Popular Variant)

/* Neo-brutalism: colorful, bold, with hard shadows */
.neo-brutal-card {
  background: #a7f3d0; /* Bright, saturated color */
  border: 2px solid #000000;
  border-radius: 12px; /* Slight rounding allowed */
  padding: 24px;
  box-shadow: 4px 4px 0 #000000;
}

.neo-brutal-btn {
  background: #fbbf24;
  border: 2px solid #000000;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 700;
  box-shadow: 3px 3px 0 #000000;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.neo-brutal-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #000000;
}

Checklist for Brutalist Design

[ ] Typography is bold and intentional (not just unstyled)
[ ] High contrast between text and background
[ ] Borders and lines used instead of shadows
[ ] Layout breaks convention purposefully
[ ] Content is the primary focus
[ ] Page loads fast (minimal assets)
[ ] Responsive on mobile devices
[ ] Focus states are visible and clear
[ ] Links and buttons are identifiable
[ ] The "rawness" feels deliberate, not lazy