Brutalist Interface Styleguide
This companion page documents the core ingredients of the demo—use it to keep future pages aligned with the studio’s raw identity.
Mix high-contrast blocks with generous negative space. Brutalism thrives on tension between rigid systems and loud disruptions.
Color System
Lean on a monochrome base and deploy accent shots sparingly for moments of emphasis or interaction.
Typography
Typography is utilitarian and loud. Use monospace families to echo terminal aesthetics and set generous tracking for titles.
BRUTAL DESIGN NETWORK
Clamp sizing keeps the headline responsive without losing its impact.
Body copy keeps the pace steady. Maintain 1.6 line height and limit paragraphs to 60 characters per line to balance legibility with aggression.
SUBHEADS SHOULD FEEL LIKE STAMPED LABELS.
Layout & Grid
Keep the grid visible. Use thick rules, exposed borders, and layered cards to create depth without gradients.
- Use 2–4 column layouts with generous gutters for desktop, collapsing to a single column on mobile.
- Border weight should stay between 2–3px for structural elements.
- Alternate block rotations or offsets by 2–6 degrees to keep compositions unsettled.
Core Components
Buttons
Pair heavy borders with abrupt hover states. Consider animating subtle translations for tactile feedback.
Cards
Evidence of layered textures, glitch artifacts, and unapologetic copywriting.
Cards may rotate slightly or stack like print proofs. Keep the border visible at all times.
Form Elements
Inputs stay flat with one-pixel offsets. Use uppercase placeholders and high-contrast focus states.
Motion & Interaction
- Introduce micro-glitches via keyframe jitter or blend-mode overlays.
- Prefer linear, snappy transitions (0.2–0.3s) to maintain the brutalist punch.
- Scroll-triggered marquee or ticker elements add rhythm without needing video.