# Brutalist Patterns — Bandcamp, Working Format, early Bloomberg Businessweek

> A deep-dive into brutalist and raw sub-styles. Read this when `aesthetics.md` §4 (Brutalist / Raw) is right for the project, but you need a specific reference direction. Each sub-style has concrete rules, typography, layouts, and references.

---

## How to use this file

`aesthetics.md` §4 says: **Brutalist / Raw** for music, fashion, streetwear, art, counterculture, alternative media, edgy tech.

This file says: **which brutalist cousin** to ship. Because "brutalism" without specificity is unstyled HTML, not designed brutalism. The principle: **brutalism is a choice, not a lack of effort.**

Decision rule:
1. **Is the project music, fashion, art, counterculture, edgy tech, or alternative media?** If no → wrong family, go back to `aesthetics.md`.
2. **Pick the sub-style** that matches the audience and tone.
3. **Commit to it.** The sub-style is the design system, not a decoration.

---

## Sub-style comparison

| Sub-style | Mood | Type | Color | Audience |
|---|---|---|---|---|
| **Bandcamp** | Functional raw, album-archive | Mixed sans + mono | Mostly monochrome with album art | Music listeners, musicians, indie labels |
| **Working Format** | Editorial-influenced raw, considered | Sans display, restrained | B/W with bold accent | Music industry, fashion editorial |
| **Bloomberg BW covers (2010–2015)** | Loud, dense, graphic, opinionated | Mixed sans/serif/mono | Flat saturated blocks | News readers, designers, intellectuals |
| **Brutalist Websites gallery** | Pure HTML aesthetic, geometric | Often default system | Often no color | Designers studying history, art students |
| **Slam Jam / Italian fashion** | Loud typography, mixed media | Often condensed display | Black + one bold accent | Fashion, streetwear, art |

When unsure → **Working Format**. It's the safest brutalist baseline for "considered raw."

---

## The brutalist principle (read first)

Before choosing a sub-style, internalize the principle:

> **Brutalism is a choice, not a lack of effort.**

True brutalism has:
- ✅ **Strong typography decisions** (often louder, not quieter)
- ✅ **Considered asymmetry** (deliberately off, not careless)
- ✅ **One or two moments of polish** inside the rawness (a beautiful spread, a perfect composition)
- ✅ **Loud + quiet alternation** (not constant noise)
- ✅ **Self-aware** (the roughness is a *statement*, not an accident)

False brutalism has:
- ❌ Default system fonts without choice
- ❌ Random colors with no logic
- ❌ Sloppy where sloppiness isn't the point
- ❌ No considered moments — just noise throughout
- ❌ Inaccessible by design (low contrast, missing alt text)

**If your brutalism has no deliberate moments, it's not brutalism — it's unfinished.** Add at least one perfect composition per page.

---

## 1. Bandcamp

**Live reference:** [bandcamp.com](https://bandcamp.com)

### Identity
Functional, raw, archive-first. Bandcamp's design treats each album as an object. The interface gets out of the way — the album art and metadata carry the design. Strong typography, hairline rules, considered density.

### When to choose
- Music platforms, audio tools
- Archives, libraries, databases
- Anything where *content objects* are the focus
- Indie, considered, low-decoration

### Palette
```
--surface:         #FFFFFF   /* or #1A1A1A for dark mode */
--ink:             #1A1A1A   /* near-black on light, white on dark */

--hairline:        #E5E5E5   /* on light */
--hairline-strong: #C7C7C7

--accent:          #629AA9   /* Bandcamp teal — used sparingly */
--accent-soft:     #E0EEF1
```

The teal is used on tags, links, and active states. Most of the design is monochrome.

### Typography
- **ITC Avant Garde Gothic** (paid, the original Bandcamp face) — substitute **Inter** or **Söhne**
- Sometimes **Verdana** for body (Bandcamp's signature body choice) — substitute **Source Sans** or **Inter**
- Mono for metadata: **IBM Plex Mono** or **JetBrains Mono**
- Hero size: `clamp(2rem, 4vw, 3rem)` — calm, not dramatic
- Tracking: 0 or -0.01em (Bandcamp doesn't track tight aggressively)
- Line-height: 1.4 on body

### Layout
- **Dense, archive-first.** Lists are long, info is packed.
- **Generous use of metadata visible.** Track count, runtime, date, label, tags.
- **Asymmetric grids** for editorial features.
- **Strong use of hairlines** to organize dense info.

### Signature patterns
- ✅ **Album-art-as-anchor.** Each item is dominated by cover art + minimal metadata.
- ✅ **Dense list views.** Long lists of items, hairline-separated.
- ✅ **Visible metadata.** Tags, dates, runtimes — all visible, not hidden.
- ✅ **Strong typography hierarchy** through size, not weight.
- ✅ **Player UI** as a design element (the bottom player is part of the page).
- ✅ **Tag system** with semantic color (each tag = teal accent).

### Hallmarks
- ✅ Dense, archive-first
- ✅ Metadata visible and considered
- ✅ Hairline rules for organization
- ✅ Album art / content objects as primary visual
- ✅ Restrained accent (teal)

### Anti-patterns to avoid
- ❌ Loud gradients
- ❌ Heavy drop shadows
- ❌ Decorative illustrations
- ❌ Generic "3-card features"
- ❌ Centering everything

---

## 2. Working Format

**Live reference:** [workingformat.com](https://www.workingformat.com)

### Identity
Music industry design studio with editorial-influenced raw aesthetic. Strong typography, black/white with bold accent, asymmetric layouts, considered spacing. Working Format treats each project as a magazine spread — image + text + structure, designed quietly.

### When to choose
- Music industry / record labels
- Editorial projects with raw feel
- Studios that want to be "considered but not corporate"
- Anything targeting designers, musicians, fashion people

### Palette
```
--surface:         #FFFFFF
--ink:             #000000   /* true black */

--accent:          #FF0000   /* bold red — used as punctuation */
--accent-soft:     #FFE5E5
```

Working Format often uses **pure black + white + one bold accent** (often red or hot pink). High contrast is mandatory.

### Typography
- **Sans display throughout** (Inter, Söhne substitute)
- **Mono for metadata** (JetBrains Mono, IBM Plex Mono)
- Hero size: `clamp(3rem, 7vw, 6rem)` — confident, often large
- Tracking: -0.03em to -0.04em on display
- Line-height: 1.0 to 1.05 on display (tight)

### Layout
- Max-width 1280px
- **Asymmetric, considered.** Image bleeds, text columns offset.
- **Project spreads** treated like magazine layouts.
- **Section markers** in mono, all-caps, wide tracking.

### Signature patterns
- ✅ **Project spread as primary design.** Each case is a magazine-style spread.
- ✅ **Bold typography set tight.** Headlines at large size, very tight leading.
- ✅ **High contrast** (true black on pure white).
- ✅ **One bold accent** used as a punctuation mark, not as background.
- ✅ **Asymmetric grids** with deliberate imbalance.
- ✅ **Mono metadata** (project name, year, type) in caps, wide tracking.

### Hallmarks
- ✅ Pure black + white + one accent
- ✅ Tight display type, often large
- ✅ Asymmetric magazine-spread layouts
- ✅ Mono metadata in caps
- ✅ Image + text composition as design

### Anti-patterns to avoid
- ❌ Pastel colors
- ❌ Gradients
- ❌ Decorative borders
- ❌ Generic SaaS feature presentation
- ❌ Centering everything

---

## 3. Bloomberg Businessweek covers (2010–2015)

**Live reference:** Bloomberg Businessweek archive

### Identity
The Bloomberg BW covers under Richard Turley (2010–2015) became a reference for editorial brutalism: **loud, dense, graphic, opinionated.** Mixed typefaces (sans, serif, mono) in single compositions. Flat color blocks. Massive type. No fear of density or color.

This is a specific subset of the broader Bloomberg BW aesthetic covered in `editorial-patterns.md` — the cover work specifically.

### When to choose
- News / current affairs brands with strong opinions
- Editorial products that want to be noticed
- Magazine covers, posters, hero sections
- Anything that needs editorial "edge"

### Palette
Bloomberg BW covers used **flat color blocks** as design elements:
```
--surface:         #FFFFFF   /* or black, or saturated color */

--accent-red:      #FF0000
--accent-yellow:   #FFD700
--accent-blue:     #0033A0
--accent-green:    #00A651
--accent-magenta:  #FF0080
```

These are used as **full-block backgrounds** or as accent rectangles — never as gradients.

### Typography
- **Mixed typefaces** in single compositions (this is the signature)
- Sans: Akzidenz-Grotesk, Inter substitute
- Serif: Tiempos, GT Super substitute
- Mono: Berkeley Mono, JetBrains Mono substitute
- Hero size: massive — 200pt+ on covers
- Tracking: varies wildly (Bloomberg BW uses both tight and wide as a design move)

### Layout
- **Magazine covers** as primary composition
- **Mixed scale** — multiple type sizes on one spread
- **No whitespace fear** — covers are dense
- **Color blocks** as compositional elements

### Signature patterns
- ✅ **Cover as hero.** Each section opening is a magazine cover — massive type, big image (or solid color), issue number, kicker.
- ✅ **Mixed typefaces in one composition.** Sans + serif + mono often overlap or sit together.
- ✅ **Flat color blocks** as design elements — full-bleed rectangles.
- ✅ **Issue markers**, datelines, "in this issue" panels.
- ✅ **Loud + quiet alternation.** Some spreads are quiet, others are loud.
- ✅ **Pull quotes at display scale.**

### Hallmarks
- ✅ Type mixing as a design move (not as indecision)
- ✅ Flat color blocks (not gradients)
- ✅ Cover-style compositions
- ✅ Magazine density with considered elegance
- ✅ Loud + quiet alternation

### Anti-patterns to avoid
- ❌ Generic SaaS feature presentation
- ❌ Centered everything
- ❌ Pastels (Bloomberg BW uses saturated)
- ❌ Gradients (flat color blocks only)
- ❌ Default Tailwind aesthetic

---

## 4. Brutalist Websites (gallery inspiration)

**Live reference:** [brutalistwebsites.com](https://brutalistwebsites.com)

### Identity
A curated gallery of websites that embrace raw, unstyled-feeling design — but each is a deliberate choice. The aesthetic varies wildly, but the unifying principle is **honest materials, visible structure, anti-decoration.**

### When to choose
- Art projects, experimental sites
- Counterculture, alternative media
- Anything that wants to feel "honest" or "raw"
- Design student / academic projects

### Patterns common across the gallery

**Typography**
- ✅ **Default system fonts** are sometimes used as a *statement* (Helvetica, Arial, Times)
- ✅ **Custom condensed or display fonts** for impact moments
- ✅ **Mono for technical / metadata content**
- ✅ **Massive scale contrasts** — 12pt next to 200pt

**Color**
- ✅ **Pure white, pure black, or one crude color** (lime, hot pink, hazard yellow)
- ✅ **High contrast mandatory**
- ✅ **No gradients.** Flat blocks only.

**Layout**
- ✅ **Visible grid artifacts** (alignment deliberately off by 1px)
- ✅ **Tables as layout** (sometimes)
- ✅ **Underlined links in default browser blue**
- ✅ **Image crops unexpected**
- ✅ **Marquee / scrolling text** used surgically
- ✅ **Negative space as confrontation** — emptiness used aggressively

**Detail**
- ✅ **HTML validity** is respected (semantic markup even when raw-looking)
- ✅ **Keyboard navigation** still works (raw ≠ broken)
- ✅ **Self-aware** — the roughness is a *choice*

### Signature patterns
- ✅ **System fonts used as statement** ("Helvetica, because Helvetica").
- ✅ **Massive headline next to small body** — extreme scale contrast.
- ✅ **Underlined links** in default browser blue (no custom underline).
- ✅ **Image at unexpected crops** — not centered, not balanced.
- ✅ **Marquee text** (very slow, used surgically).
- ✅ **Visible HTML structure** (sometimes borders, debug info).

### Hallmarks
- ✅ Self-aware rawness
- ✅ Anti-decoration
- ✅ High contrast
- ✅ Extreme scale contrast
- ✅ Default system fonts (sometimes)

### Anti-patterns to avoid
- ❌ Calling it "brutalist" but shipping unstyled HTML — that's not brutalism, that's unfinished.
- ❌ Random colors with no logic.
- ❌ Sloppy where sloppiness isn't the point.
- ❌ **Inaccessible by design** — low contrast, missing alt text, no keyboard nav. Brutalism ≠ broken.
- ❌ Loud throughout — there must be quiet moments too.

---

## 5. Slam Jam / Italian fashion editorial

**Live reference:** [slamjam.com](https://www.slamjam.com), [ssense.com editorial](https://www.ssense.com)

### Identity
Loud typography, mixed media, fashion-led. Often condensed display type, bold sans, black + one accent. Image-led with strong typographic overlays. The aesthetic of "fashion editorial that wants to be noticed."

### When to choose
- Fashion, streetwear, art
- Editorial commerce (high-end)
- Anything targeting fashion-literate audience
- Counterculture with premium positioning

### Palette
```
--surface:         #FFFFFF   /* or #0A0A0A for dark */
--ink:             #000000   /* true black */

--accent:          #FF0080   /* hot pink — fashion signature */
--accent-soft:     #FFE0F0

--accent-secondary: #FFD700   /* sometimes yellow, lime, electric blue */
```

Slam Jam often uses **black + hot pink + one secondary** (yellow or electric blue). High contrast mandatory.

### Typography
- **Condensed display** (Druk, Aktiv Grotesk Black, or substitute via free condensed fonts)
- **Sans body** (Inter, Söhne substitute)
- **Mono for technical content** (JetBrains Mono)
- Hero size: massive — `clamp(4rem, 10vw, 9rem)` or larger
- Tracking: -0.02em to -0.04em on display
- Line-height: 1.0 on display

### Layout
- Max-width 1280px (sometimes wider, full-bleed)
- **Image-led.** Photography dominates.
- **Typographic overlays** on images (text set directly on photo, often with subtle contrast adjustment).
- **Asymmetric grids.** Deliberate imbalance.

### Signature patterns
- ✅ **Image + type composition.** Text set directly on photos, often white or accent color.
- ✅ **Massive condensed display.** Narrow, tall, loud.
- ✅ **Black + one bold accent** (often hot pink or yellow).
- ✅ **Asymmetric, full-bleed.**
- ✅ **Marquee or scrolling text** for editorial moments.
- ✅ **Strong image crops** — not safe, not centered.

### Hallmarks
- ✅ Condensed display type, often massive
- ✅ Image + type overlay
- ✅ Black + one bold accent
- ✅ High contrast
- ✅ Editorial fashion voice

### Anti-patterns to avoid
- ❌ Pastels
- ❌ Gradients
- ❌ Generic SaaS feature presentation
- ❌ Tailwind default aesthetic
- ❌ Safe image crops

---

## Decision tree

```
Brutalist / raw project?
├── Yes
│   ├── Music platform / archive / functional raw?
│   │   ├── Yes → Bandcamp
│   │   └── No → continue
│   ├── Music industry / fashion editorial / considered raw?
│   │   ├── Yes → Working Format
│   │   └── No → continue
│   ├── News / current affairs / loud editorial?
│   │   ├── Yes → Bloomberg BW covers (2010–2015)
│   │   └── No → continue
│   ├── Art / experimental / pure HTML aesthetic?
│   │   ├── Yes → Brutalist Websites gallery
│   │   └── No → continue
│   └── Fashion / streetwear / loud editorial commerce?
│       └── Yes → Slam Jam / Italian fashion
└── No → wrong family, return to aesthetics.md
```

---

## Hybrid rules

When combining brutalist sub-styles:

1. **Pick dominant 70/30.** Don't blend evenly.
2. **Share color philosophy.** Don't blend monochrome with multi-accent.
3. **Share type philosophy.** Don't blend Bandcamp's Verdana-style with Bloomberg BW's mixed typefaces (unless intentional).
4. **One perfect moment per page.** Even in the rawness, have one composition that's polished — that's the design.

---

## Accessibility in brutalism

Critical: brutalism ≠ broken.

Even when shipping raw-feeling design, you MUST:

- ✅ **Maintain WCAG AA contrast** (4.5:1 for body text). Pure black on pure white is fine (21:1).
- ✅ **Provide alt text** for all meaningful images. Empty `alt=""` for decorative.
- ✅ **Respect keyboard navigation.** Tab, Enter, Escape must work.
- ✅ **Honor `prefers-reduced-motion`**. Even brutalist motion should be reducible.
- ✅ **Use semantic HTML.** Even when it looks raw.
- ✅ **Provide skip-to-content** links on long pages.

If your brutalism is inaccessible, it's not brutalism — it's unfinished. Period.

---

## What to read next

- For typography setup → `typography.md`
- For color → `color.md`
- For components → `components.md`
- For motion → `motion.md`
- For anti-patterns → `anti-patterns.md`
- For final QA → `checklist.md`