← Showcase

Make your own →

a sample issue · the whole thing, one scroll, no account needed

Vol. I · Issue DEMO-B · 2026-05-11

1960s brutalism

Brutalist Concrete

Mass as expression — every shadow weighs something.


THE SUPER PALETTE · 12 DISTINCT COLORS ACROSS 6 PINS

Hover any square for hex + pin count. Order: combined frequency across pins.

HERO PALETTE

#3A3A3A

×6

#5A5A5A

×4

#1A1A1A

×3

#CCCCCC

×2

TYPOGRAPHY

  • Helvetica Black display
  • all-caps headlines
  • monospace caption

LIGHTING

hard noon overhead — sharp shadow, no fill

MATERIALS

  • poured concrete
  • rebar
  • steel
  • glass block

MOOD

austere · monumental · restrained · civic

TENSIONS

  • austere vs. maximalminimal palette deployed at monumental scale

Do

  • lead with mass
  • all caps for headlines
  • no rounding on anything

Don't

  • warm tones
  • rounded corners
  • serif display

PIN INDEX · CLICK ANY PIN FOR THE BREAKDOWN


— end —


Vol. I · Brutalist Concrete · The Atelier Wall

The Atelier Wall

All pins, no narrative — the maximalist collage view. The board as a wall you can stare at until the thesis makes sense on its own.


Vol. I · Brutalist Concrete · The Report

Hyper-rich report

Everything we know about this guide in a single markdown document, intended to be fed directly into an LLM or image model — vibe prose, tag soup, the regeneration prompt, and the source pin index. Use the Copy button — the entire report goes to your clipboard.

# Brutalist Concrete
> Mass as expression — every shadow weighs something.

— **Era / aesthetic period:** 1960s brutalism
— **Dominant mood:** austere, monumental, restrained, civic
— **Palette (most populated → least):** #3a3a3a · #5a5a5a · #1a1a1a · #cccccc

## 1 — Vibe report

This guide reads as **austere, monumental, restrained** — Brutalist Concrete
is built on neutral color temperatures sitting at an average brightness of
0.40 (mid-key) and an average saturation of
0.00 (muted). The palette skews toward
deep neutrals — graphite / soot / black with 4 distinct colors carrying signal —
the top three hexes (#3A3A3A, #5A5A5A, #1A1A1A) carry the bulk of the visual weight.

### Imagery & subject matter
Across 6 source pins, the subjects cluster around portrait, still life. Compositionally the guide leans
portrait — vertical, hierarchical, with image dimensions averaging
0.88 (near-square). The board reads as
restrained and reductive;
24 distinct color buckets surveyed across all pins.

### Lighting & materials
**Lighting reads as hard noon overhead — sharp shadow, no fill.** Material vocabulary: poured concrete, rebar, steel, glass block.
Material range is tight — the guide commits to a small set of surfaces.

### Typography
Type pairs as: **Helvetica Black display / all-caps headlines / monospace caption**.
A three-voice system — display, body, caption — is implied.

### Internal tensions
- **austere vs maximal** — minimal palette deployed at monumental scale. Resolution: pick ONE side per artifact; mixing reads as confused.

### What this is NOT
- not warm tones
- not rounded corners
- not serif display

## 2 — Tag soup

Drop this into image-gen prompts or semantic-search systems as-is.

```
austere, monumental, restrained, civic, poured concrete, rebar, steel, glass block, helvetica black display, all-caps headlines, monospace caption, 1960s brutalism, portrait, still life, mid-century, modernist, bauhaus revival, op-art
```

## 3 — Pop-culture & art-historical references

If a designer reads this guide and squints, here are the cultural neighbors they should picture:

- **Saul Bass title sequences** — geometric forms doing narrative work
- **Push Pin Studios posters** — flat color, narrative illustration
- **Trellick Tower / Boston City Hall** — mass as expression, civic scale
- **OMA — Koolhaas brand work** — concrete-grey as ethical position
- **A24 brand identity** — restraint as luxury signal
- **Helmut Lang archives** — reduction past the point of comfort

These aren't templates — they're tuning forks. Use them to calibrate, not copy.

## 4 — Regeneration prompt

Paste into Midjourney / Flux / DALL·E to produce a NEW image that embodies the guide.

```
hero image embodying a 1960s brutalism idiom, austere, monumental, restrained, civic mood, palette of #3a3a3a, #5a5a5a, #1a1a1a, #cccccc, materials: poured concrete, rebar, steel, glass block, hard noon overhead — sharp shadow, no fill, editorial composition with negative space, photographed on medium-format film, no text artifacts, no watermark --ar 4:5 --no warm tones rounded corners serif display
```

## 5 — Source pin index

Every pin that fed this guide, with its palette stripe:

001. **mass at noon** — 900×600 · #3a3a3a #cccccc #1a1a1a #5a5a5a
002. **shuttered facade** — 400×533 · #888888 #262626 #cccccc #4a4a4a
003. **stairwell, no fill** — 400×533 · #1a1a1a #5a5a5a #9a9a9a #2e2e2e
004. **lit face, cast edge** — 400×533 · #cccccc #3a3a3a #e0e0e0 #1a1a1a
005. **undercroft** — 400×533 · #262626 #6a6a6a #3a3a3a #b0b0b0
006. **rebar and glass block** — 400×533 · #5a5a5a #1a1a1a #cccccc #777777

Vol. I · Brutalist Concrete · Prompt Canvas

The canvas

Pick a target, say what you're building, and the canvas wraps your brief in this guide — composed for exactly where you'll paste it.

Web / HTML

paste into Claude or ChatGPT to get a webpage

Designer brief

paste into Claude/GPT to get a creative brief

Image gen

paste into Midjourney, Flux, DALL·E

Design tokens

paste into Cursor, Copilot, Aider

The sample brief

A landing page for a small-batch coffee roaster. One-pager. Email signup, three product cards, footer.

Composed for Web / HTML — Brutalist Concrete riding along, ready to paste into Claude or ChatGPT

You are a senior creative director and frontend engineer. You have been given a style guide for a specific visual idiom, plus a project brief. Produce a single, self-contained HTML artifact that embodies the style guide and accomplishes the brief.

# Style guide

## The thesis
> Mass as expression — every shadow weighs something.

## Era
1960s brutalism

## Palette
- `#3A3A3A` (6 votes from source pins)
- `#5A5A5A` (4 votes from source pins)
- `#1A1A1A` (3 votes from source pins)
- `#CCCCCC` (2 votes from source pins)

## Typography
- Helvetica Black display
- all-caps headlines
- monospace caption

## Lighting
hard noon overhead — sharp shadow, no fill

## Materials
- poured concrete
- rebar
- steel
- glass block

## Mood
- austere
- monumental
- restrained
- civic

## Do
- lead with mass
- all caps for headlines
- no rounding on anything

## Don't
- warm tones
- rounded corners
- serif display

## Tensions
- **austere vs maximal** — minimal palette deployed at monumental scale

# Brief
A landing page for a small-batch coffee roaster. One-pager. Email signup, three product cards, footer.

# Output requirements
- Output one complete HTML document, `<!doctype html>` through `</html>`.
- Inline all CSS in a single `<style>` block. No external assets, no JS frameworks, no `<script>` unless the brief explicitly requires interactivity.
- Use the palette hexes verbatim. Don't invent new colors.
- Use the typography descriptors literally — if it says "serif italic display," apply `font-family: Georgia, "Times New Roman", serif; font-style: italic` and pick a large size.
- Honor every Do and every Don't. If "no gradients" is on the Don't list, do not use a single gradient anywhere.
- Lead with whitespace. Restraint over decoration. Let the typography speak.
- No commentary outside the HTML. Don't explain — produce.

Begin.