ConcreteLegacy format
Concrete is a cold-industrial brutalist design system for experimental portfolios, architecture studios, and avant-garde editorial sites. Where pure brutalism often embraces raw black-on-white minimalism, Concrete leans further into the construction-site metaphor — gray cement tones, exposed structural seams (visible grids, joist marks, datum lines), slab serif typography, and caution-yellow accents borrowed from job-site signage.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxConcrete is a cold-industrial brutalist design system for experimental portfolios, architecture studios, and avant-garde editorial sites. Where pure brutalism often embraces raw black-on-white minimalism, Concrete leans further into the construction-site metaphor — gray cement tones, exposed structural seams (visible grids, joist marks, datum lines), slab serif typography, and caution-yellow accents borrowed from job-site signage.
Components
Buttons
Inputs
Cards
Card Title
Sample body text for the card component.
Do's & Don'ts
Do
Don't
Icons
UnknownUnknown
Icon preview not available for this library
Library: Unknown · Style: rounded · Size: 16px
Motion
Motion in Concrete is mechanical and stamped. Default duration is 80ms — almost instantaneous — with linear easing. Hover states snap into place with no transition curve. The "stamped" button hover (2px offset) uses a 120ms cubic-bezier(0.5, 0, 1, 1) — a steep ease-in that feels like an impact. The hazard-stripe loading bar pans horizontally at a constant 60px per second. Page transitions are instant — there is no fade. The single decorative motion is the caution-strip diagonal pan during data loading.
Voice and Tone
• Catalog-flat. Like a printed type specimen or an architect's drawing legend.
• Use construction and editorial idiom: "FIG.," "PLATE," "REV.," "ISSUE," "FABRICATED," "POURED."
• Avoid first-person voice. Avoid emotional copy entirely.
• Captions and labels are uppercase mono with abbreviated meta: "FIG. 04 · 2026 · STUDIO PERIMETER"
• Errors are stated as conditions, not apologies: "FAILED · CODE 47" rather than "Sorry, something went wrong."
• Empty states are honest and brief: "NO ENTRIES."
Use with MCP
Don't have the MCP? Install it here