Raw Concrete
Béton brut in web form: board-marked grey, monumental grotesk, deep shadows and slabs.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
The calm weight of a 1960s concrete building, translated to a screen. Board-marked greys, a condensed grotesk in heavy uppercase, slab-like panels with deep inset shadows and photographs of raw concrete in raking light. Monumental, quiet and built to last.
Raw Concrete is béton brut for the web. It draws on post-war brutalist architecture, the board-marked surfaces of civic buildings and the monumental signage of 1960s campuses. The palette is a family of concrete greys with a warm bronze and aggregate note; display type is a sturdy grotesk set in heavy uppercase like cast lettering. Panels feel like slabs — no borders, just deep inset shadows that read as recesses in a wall. It is heavy, calm and unapologetically material.
Principles
- Weight and mass: big uppercase type, slab panels, deep recesses.
- Greys first, bronze second, nothing bright.
- Show the material up close, in raking light.
- Number things like construction drawings: 01 — Element.
- Let structure be visible; avoid ornament.
Motion
Slabs reveal upward behind a clip mask as if formwork is being stripped away. The hero photograph's raking light shifts slowly across the surface over 20 seconds.
Do & don't
Do
- ✓ Use inset shadows so panels read as recesses in concrete.
- ✓ Set headlines uppercase and heavy.
- ✓ Number list items 01 — to 06 — in bronze.
Don't
- ✕ Don't use bright colours or pure white.
- ✕ Don't round corners.
- ✕ Don't use drop shadows that lift elements — only recesses.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 365 lines of DESIGN.md in total.
More like this
All Swiss & Minimal →
Nordic Calm
No. 031Scandinavian winter light: cool greys, frost blue, soft corners and a lot of air.
Pure Mono
No. 032Black on white, nothing else: a grotesk, thick rules and a bento of pure contrast.
Swiss Poster
No. 033An International Style concert poster: strict grid, flush-left grotesk, red and black.
Bauhaus Primary
No. 051Bauhaus workshop primaries: circle, square, triangle in red, yellow and blue on bone.
Cobalt Ink
No. 052One ink only: every line, word and shape printed in cobalt blue on bright paper.
Functionalist Sixties
No. 0531960s functionalist hardware: warm white housings, one orange switch, a grid of controls.