Raw structural honesty meets candy-toned softness — thick black borders, hard-offset shadows, and flat pastel fills that feel bold yet approachable.
oversized grotesk headings, clean body text, raw monospace accents
Display / Space Grotesk 700
Build Bold
Heading / Space Grotesk 700
Structural Clarity
Body / Inter 400
Clean, highly legible body text for long-form reading. Pastel Brutalism pairs gentle backgrounds with crisp sans-serif typography, ensuring comfort without sacrificing structure.
Monospace / Space Mono
font-family: 'Space Mono', monospace;
Tags, Labels & Metadata
soft pastels grounded by thick black structural lines
thick outlines, hard shadows, pastel fills -- honest and tactile
Every element is outlined with solid 3px black strokes that define shapes with absolute clarity. No subtle hairlines here.
Structure CoreZero-blur, fixed-pixel-offset shadows create a flat cutout-paper effect. Elements float above the canvas as physical objects.
Shadow DepthNo gradients, no transparencies. Each surface is a single solid pastel tone, maintaining the brutalist honesty of the design system.
Color FlatHeadlines use extra-bold fonts at architecturally scaled sizes. The typographic weight matches the structural boldness of the borders.
Type BoldHover states shift shadow offsets and translate elements, creating a satisfying "press-in" sensation that reinforces the physical metaphor.
Hover UXThe layout grid is never hidden. Columns, rows, and gutters are perceptible through consistent alignment and deliberate uniform spacing.
Layout Gridall structural, zero blur -- pure CSS, no image assets
Intersecting 45-degree linear gradients on a pastel base create a classic architectural grid pattern.
Repeating diagonal stripes cycle through the core palette, creating a candy-toned visual rhythm.
Small radial-gradient dots on a pastel surface evoke grid paper and technical drawing aesthetics.
Nested bordered rectangles with hard shadows create visual depth through offset layering.
Horizontal and vertical line grids on buttercream mimic the raw construction grid of architectural plans.
A flat grid of solid pastel tiles separated by dark lines -- the patchwork quilt effect in pure CSS.
chunky, bordered, obviously clickable
Pastel Brutalism proves that raw structural honesty and soft, approachable color can coexist — creating designs that feel both strong and tender, confident and friendly.— The Pastel Brutalism Manifesto
Embrace the tension between candy-toned softness and brutalist structural honesty. Let thick black borders hold the pastels. Let the shadows stay hard.
Back to the Top