Skip to content
Launch offerAll 100 styles $19 $99·Launch pricing ends Sunday
StyleMD

Concrete Poster

Board-marked concrete and a grotesk set so large it becomes the building.

This style

$9$19

Launch offer · Launch pricing ends Sunday

One-time, no subscription · instant download · client use · 7-day refund before download

getstylemd.com/p/concrete-poster

The idea

A wheat-pasted exhibition poster blown up to screen size. Raw concrete grey, black type in a grotesk so heavy and tight it fills the viewport edge to edge, one signal-orange mark. Grayscale photographs of brutalist buildings provide the only texture the type does not.

Concrete Poster is the International Typographic poster pushed into brutalist territory. It references 1960s exhibition posters, the raw béton of post-war civic architecture and wheat-pasted gig bills: one enormous grotesk headline set uppercase at -0.055em that crops against the viewport, a concrete-grey field with fine grain, and black as the only real colour. Signal orange appears once, like a site marker spray-painted on a slab. Photography is grayscale, architectural, shot from below with hard sun. The page should feel monumental, cold and certain.

Principles

  • The headline is the building: set it so big that one word fills a line.
  • Crop type against the edges; letters may touch or bleed past the frame.
  • Black, concrete grey and one orange mark. Nothing else.
  • Number everything — sections, buildings, days — in mono.
  • Photographs are grayscale and architectural, never decorative.

Motion

Each headline line is unmasked bottom-to-top like a poster being pasted up, 120ms apart. Hovered links and rows invert to concrete-on-black instantly, with no fade.

Do & don't

Do

  • ✓ Let the h1 crop at the right edge on purpose.
  • ✓ Use the mono index ('01 —') before every section label.
  • ✓ Set body copy in narrow columns, 36–44 characters.

Don't

  • ✕ Don't introduce colour photography.
  • ✕ Don't use orange for more than one element per screen.
  • ✕ Don't round corners or add shadows.

+ 3 more of each, and component rules, in the full DESIGN.md.

What's in the DESIGN.md

  1. 01Overview & principles
  2. 02Colors (tokens + proportions)
  3. 03Typography (families + 12-role scale)
  4. 04Layout & spacing scale
  5. 05Elevation & depth
  6. 06Shapes & radii
  7. 07Motion (easing, durations, signature)
  8. 08Imagery + generation prompt
  9. 09Components (button, card, nav, input, badge)
  10. 10Do's and don'ts
  11. 11Responsive behaviour
  12. 12Iteration guide + agent checklist

Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 366 lines of DESIGN.md in total.

More like this

All Brutalist →