Design Aesthetic Reference
Raw concrete. Honest materials. Massive forms. A design language rooted in the architectural movement of the 1950s -- celebrating the grain of formwork, the weight of aggregate, and the unfinished beauty of beton brut.
Typography
Heavy, structural, and unapologetic. Letterforms that could be chiseled into a concrete facade or cast from a steel mold.
Display / Bebas Neue
Raw Concrete
Impact / Archivo Black
Massive Geometry
Structural / Oswald 700
Exposed Structure & Formwork
Body / Roboto Slab
Architectural slab-serif text for grounded, readable editorial content. The warmth of stone-carved letterforms meets the clarity of modern typesetting.
Compact / Roboto Condensed 700
Captions, Labels & Structural Annotations
UI / IBM Plex Sans
Clean industrial interface text for functional elements
Bebas Neue + IBM Plex Sans
Towering monolith meets clean industrial precision
Archivo Black + Roboto Slab
Heavyweight impact paired with slab-serif solidity
Oswald + Roboto Condensed
Structural authority with efficient compact readability
Color Palette
Every color references a real physical material -- concrete at different moisture levels, rust, timber, and oxidized copper. No arbitrary decorative hues.
Components
Each card is a concrete panel in a larger structure. The grid reveals the modular system. The borders are expansion joints. Hover to see the material beneath.
We never conceal what a building is made of. Concrete is left exposed. Steel is left unclad. The structure is the finish. Every surface tells the story of its making.
Principle FoundationBuildings assert their presence through scale and geometry. Massive cantilevers, deep reveals, and bold silhouettes define the relationship between structure and sky.
Scale GeometryThe grain of timber formwork is preserved in the cured concrete surface. Horizontal lines record every plank that shaped the wall. The process becomes the decoration.
Texture FormworkGrid lines, borders, and layout scaffolding remain visible as honest expressions of the underlying architecture. Beams, columns, and joints are features, not flaws.
Grid SkeletonRaw does not mean careless. Every crack, grain line, and surface texture is deliberately placed to achieve the specific emotional weight of honest material expression.
Intent PrecisionThe interplay of light and shadow across textured surfaces is as important as the surfaces themselves. Directional shadows and contrast create the illusion of physical depth.
Shadow DepthVisual Effects
All the material surfaces of Brutalist architecture, recreated with pure CSS -- no image assets required. Noise, grain, aggregate, and patina.
Repeating linear gradients recreate the horizontal grain of timber boards used to cast concrete walls.
Layered radial gradient dots simulate the speckled, rough texture of bush-hammered concrete surfaces.
SVG feTurbulence filter generates organic noise that mimics the mottled surface of cured concrete.
Overlapping radial gradients with noise create the weathered surface of Corten steel and exposed rebar.
Green-tinted radial gradients with noise simulate the oxidized patina on weathered copper cladding.
Intersecting repeating gradients form the modular panel grid visible on precast concrete facades.
Interactive Elements
Heavy, rectangular, and blunt. No rounded corners. No smooth transitions. State changes are instantaneous -- like light falling on stone.
"The raw concrete surface, with all the imprints of the formwork, adds a certain richness to the architecture. It humanises it. The faults of texture add a further human quality."Le Corbusier, on the Unite d'Habitation, Marseille, 1952
Concrete Brutalism embraces raw materials, monumental form, and the deliberate beauty of surfaces that refuse to hide what they are made of. No rounded corners. No smooth gradients. No apologies.
Back to the Top