Raw Materials. Massive Forms. Honest Architecture.
DESIGN SYSTEM v1.0 | ARCHITECTURAL BRUTALISMDesign Philosophy
Concrete Brutalist draws inspiration from the architectural movement that celebrated raw materials, exposed structure, and monumental forms. This design system embraces the honesty of concrete - its texture, weight, and unapologetic presence. Every element is built to feel substantial, permanent, and structurally sound.
"Brutalism is about being raw and honest, celebrating the material used and the building's function rather than trying to disguise them." - The Brutalist Philosophy
A palette derived from raw concrete - from light aggregate surfaces to deep shadow. Accented with construction safety colors that punctuate the monochromatic mass.
Material Note
All colors include a noise texture overlay to simulate the aggregate and variation found in poured concrete. The slight warm undertones reference the natural color of cement and sand mixtures.
Heavy, condensed display type for monumental presence. Industrial sans-serif for functional text. Typography that feels carved into concrete, not printed on paper.
MONUMENTAL
Bebas Neue is a condensed sans-serif with a powerful, industrial presence. Its tall, narrow letterforms command attention like the vertical pillars of brutalist architecture.
STRUCTURAL FORMS
Oswald provides a robust, condensed alternative for headings and UI elements. It carries weight without overwhelming, functioning as the structural beams of the type system.
EXPOSED AGGREGATE SURFACE
A lighter weight for secondary headings and labels. Maintains the industrial character while stepping back from primary content.
IBM Plex Sans brings clarity and functionality to body text. Its open letterforms and neutral character ensure readability across long passages while maintaining the utilitarian spirit of brutalist design. The typeface was designed for technical documentation and interfaces - perfect for the honest, function-first approach.
Generous, architectural spacing that gives elements room to breathe while maintaining structural relationships. Based on a 4px unit, scaling up to massive proportions.
Standard (16px)
Comfortable (32px)
Section (48px)
Heavy, blocky buttons that feel like pressing concrete slabs. No rounded corners - every edge is deliberate and structural. Buttons cast shadows like architectural elements.
Interaction States
Buttons shift position on hover, creating a sense of physical movement. The shadow grows deeper, suggesting the button is lifting from the surface. On click, the button returns to its base position as if pressed into the concrete.
Utilitarian form elements with heavy borders and monospace typography. Industrial and functional, like control panels on construction equipment.
Alphanumeric characters only
Heavy input variant
Content blocks that feel like cast concrete modules. Each card casts a heavy shadow, establishing its presence in the spatial hierarchy. Variations include form board textures and exposed aggregate surfaces.
The default card component with concrete texture overlay. Cast shadow establishes depth and hierarchy within the layout grid.
A darker, heavier variant for primary content. The deep shadow and dark surface command attention like a brutalist tower.
Textured with horizontal lines that reference the wooden form boards used to cast concrete. A subtle nod to the construction process.
Dashed borders reveal the underlying structure, like a building with exposed beams and utilities. Lighter weight for secondary content.
Orange borders and header for important notices and calls to action. The safety color demands attention within the gray mass.
Small, utilitarian labels for status and categorization. Like the painted markers and stenciled text found on construction sites and industrial equipment.
Active Phase 2 Review Required
Current project requires structural review before proceeding to phase 3. All material specifications have been approved.