BRUTALIST

TOOLKIT

COPY-PASTE CSS/HTML FOR BRUTALIST ELEMENTS: RAW CODE FOR RAW DESIGN

CODE SNIPPETS

BRUTAL GRID SYSTEM

Asymmetrical grid layouts that break conventional design

CSS

.brutal-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0;
}

.brutal-grid-broken {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.8fr 2fr;
  gap: 0;
}

HTML

<div class="brutal-grid">
  <div>Column 1</div>
  <div>Column 2 (wider)</div>
  <div>Column 3</div>
</div>

RAW BORDERS & SHADOWS

Exposed structural elements with harsh shadows

CSS

.raw-border {
  border: 4px solid #000;
}

.raw-border-broken {
  border-top: 6px solid #000;
  border-right: 2px solid #000;
  border-bottom: 4px solid #000;
  border-left: 8px solid #000;
}

.shadow-brutal {
  box-shadow: 8px 8px 0px #000;
}

HTML

<div class="raw-border shadow-brutal">
  <p>Raw, unpolished content</p>
</div>

OFFSET & OVERLAP EFFECTS

Deliberately misaligned elements that create visual tension

CSS

.offset-text {
  transform: translateX(8px) translateY(-4px);
}

.overlap-brutal {
  position: relative;
  z-index: 10;
  margin-left: -2rem;
  margin-top: -1rem;
}

.skew-brutal {
  transform: skew(-2deg, 1deg);
}

HTML

<h1 class="offset-text">MISALIGNED TITLE</h1>
<div class="overlap-brutal">
  Overlapping content
</div>

BRUTALIST BUTTONS

Sharp-edged interactive elements without polish

CSS

.brutal-button {
  font-family: monospace;
  border: 4px solid #000;
  background: #fff;
  color: #000;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: none;
}

.brutal-button:hover {
  background: #000;
  color: #fff;
}

HTML

<button class="brutal-button">
  CLICK ME
</button>

EXPOSED CONSTRUCTION

Show the underlying structure of your layout

CSS

.exposed-grid {
  background-image:
    linear-gradient(to right, #000 1px, transparent 1px),
    linear-gradient(to bottom, #000 1px, transparent 1px);
  background-size: 2rem 2rem;
}

.exposed-construction {
  position: relative;
}

.exposed-construction::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 2px dashed #666;
  pointer-events: none;
}

HTML

<div class="exposed-grid exposed-construction">
  <p>Construction visible</p>
</div>

CRUDE ANIMATIONS

Mechanical, stuttering movements that feel unpolished

CSS

.animate-brutal-glitch {
  animation: brutalGlitch 3s linear infinite;
}

@keyframes brutalGlitch {
  0%, 90%, 100% { transform: translate(0); }
  91% { transform: translate(2px, 1px); }
  92% { transform: translate(-1px, -1px); }
  93% { transform: translate(1px, 2px); }
  94% { transform: translate(-2px, 1px); }
}

.animate-brutal-slide {
  animation: brutalSlide 2s ease-in-out infinite;
}

@keyframes brutalSlide {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(4px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(-4px); }
}

HTML

<h1 class="animate-brutal-glitch">
  GLITCHY TEXT
</h1>

TYPOGRAPHY RESOURCES

Source Code Pro

Google Fonts

Modern monospace designed for coding interfaces

USAGE

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;700;900&display=swap');
font-family: 'Source Code Pro', monospace;

Monaco

System Font

Classic macOS monospace font with high character distinction

USAGE

font-family: Monaco, 'Consolas', 'Lucida Console', monospace;

Courier / Courier New

System Font

Traditional typewriter font for vintage brutalist aesthetics

USAGE

font-family: 'Courier New', Courier, monospace;

INTERACTIVE PLAYGROUND

TEST BRUTALIST ELEMENTS

BASIC ELEMENT

Raw content with borders

OFFSET ELEMENT

Deliberately misaligned

ANIMATED ELEMENT

Crude sliding motion

COMPLEX ELEMENT

Multiple brutalist effects combined

EXTERNAL RESOURCES

BRUTALIST WEBSITES

brutalistwebsites.com

Curated collection since 2014

GOOGLE FONTS

fonts.google.com

Source Code Pro, Space Mono

CSS GRID GUIDE

css-tricks.com

Complete grid documentation