Indie Sleaze × Brutalist Web Design

Deliberate raw web structure against an unplanned blog stream of photographs.

From the research on Indie Sleaze

Mix them and make something Indie Sleaze Brutalist Web Design

A sample layout drawn from the recipe: shapes from Brutalist Web Design, their arrangement from Indie Sleaze, the finish from Indie Sleaze. Not a real work, and not an image of either style.

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Indie Sleaze Brutalist Web Design

Type from Brutalist Web Design: Transitional serif
Monospace
Colour from Brutalist Web Design: Monochrome
Limited spot colours
Form from Brutalist Web Design: Rectilinear
Rules & bars
Composition from Indie Sleaze: Dynamic asymmetry
Full bleed
Surface from Indie Sleaze: Grain & noise

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Brutalist Web Design

Riot

Newsreader; Brutalist Web Design used Times New Roman and Courier New and system monospace

Text · Indie Sleaze

Mainly a fashion and music-scene label applied in retrospect to the late-2000s indie and blog-rock crowd (skinny jeans, band tees, smudged eyeliner). Its graphic expression is mostly photographic and platform-based, not a designed system: amateur direct-flash party snapshots posted as an unedited stream to MySpace and early Tumblr, overexposed, noisy and dark-roomed. Its distinctness lies in that pairing of flash snapshot and blog stream.

Space Grotesk; Indie Sleaze used Default blog and profile-page sans-serif captions and The MySpace and Tumblr interface type around the photographs

The colours

The ground and leading colours come from Brutalist Web Design, with a counter-accent from Indie Sleaze. The ink reads on the ground at 4.5:1 or more.

Indie Sleaze Brutalist Web Design

#ffffff ground · 36%
#000000 ink · 14%
#ff0000 accent · 18%
#c8322d accent · 14%
#0000ee accent · 10%
#5a3a63 accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #000000;
  --accent-1: #ff0000;
  --accent-2: #c8322d;
  --accent-3: #0000ee;
  --accent-4: #5a3a63;
  --font-display: "Newsreader", serif;
  --font-text: "Space Grotesk", sans-serif;
}

Use it with care

Indie Sleaze: The look was built on photographing real people, often drunk or intoxicated, in nightlife, and posting the pictures publicly without their ongoing consent; the Cobrasnake archive and the Tumblr and MySpace posts are of identifiable individuals. Terry Richardson, whom Wikipedia lists among the mid-2000s photographers who embraced the style, has been accused by multiple models of sexual misconduct and exploitation (he says the allegations are false) and Condé Nast stopped commissioning him in 2017; he is deliberately left out of the exemplars and his work is not a model to follow. The revival raises the same consent and privacy questions: get consent from anyone identifiable, and do not reuse old nightlife photographs of real people as stock for a retro look.