brutalist

name	brutalist
description	Activate when a user wants a high-contrast interface with hard edges, deliberate tension, and strict grid logic. Use for dashboards, technical portfolios, admin tools, command surfaces, or other interfaces that should feel sharp, direct, and usable.
version	1
category	frontend-code
outputs	code

Brutalist

Purpose

Build interfaces that feel strong, structured, and unsoftened. The goal is not visual noise or hostility. The goal is clarity with pressure: bold typography, visible geometry, limited color, and layout that holds together under density.

When to Use This Skill

• Building dashboards, admin panels, internal tools, technical portfolios, or command-style surfaces
• Designing interfaces that should feel strict, dense, or deliberately tense
• Reworking a product toward sharper typography and stronger hierarchy
• Creating layouts where the grid itself is part of the visual identity

When Not to Use This Skill

• The user wants warmth, softness, or consumer polish
• The project is exploratory motion work or an illustration-first concept
• The interface depends on subtle gradients, glassmorphism, or luxury styling
• The task needs the quiet restraint of minimal

Visual Rules

1. Pick one surface and keep it consistent. Use either a light paper surface or a dark console surface. Do not blend them casually in the same view.
2. Make typography carry the hierarchy. Use large, forceful headings and compact supporting text. Do not hide structure behind decoration.
3. Keep the grid visible. Align elements to clear tracks, spacing rhythms, and hard edges.
4. Use one accent color at most. Let the accent mark state, emphasis, or urgency. Do not turn the page into a color system.
5. Prefer sharp separators over soft depth. Borders, rules, and negative space should do the work before shadows do.
6. Keep any visual texture quiet. Grain or scanline treatment must never reduce readability or interfere with controls.
7. Use monospace where data should feel operational, but do not force it onto every sentence.
8. Brutal does not mean inaccessible. Strong contrast and clear affordances matter more than visual posture.

Layout and Type

• Use semantic HTML and a real document outline.
• Favor explicit grid tracks over guesswork with flex math.
• Keep section spacing consistent and intentional.
• Do not center every panel or equalize every column by default.
• Let headlines take room. Keep supporting copy compact and readable.
• Collapse cleanly on smaller screens. A hard-edged desktop layout still needs a sane mobile form.

Accessibility and Interaction

• Keep focus rings visible and usable.
• Preserve keyboard navigation for every interactive element.
• Keep touch targets large enough to use without precision.
• Respect reduced motion. Any animation should stay on transform and opacity.
• Do not reduce contrast to make the interface look cooler.
• Hide nothing that the user needs to reach.

Build Rules

• Use one accent color and define it up front.
• Use borders, rules, and spacing before adding shadows.
• Keep overlays fixed and passive if you add noise or texture.
• Avoid arbitrary z-index values unless a real stacking problem requires them.
• Keep decorative effects isolated so they can be removed without breaking layout.
• Use components that match the stack already in the project.

Quality Gates

• One visual surface chosen and applied consistently
• Typography does the main hierarchy work
• Grid lines or structural separators are visible
• Only one accent color is used
• Contrast remains readable
• Focus states are visible
• Keyboard navigation works
• Reduced motion is respected
• Mobile layout collapses cleanly
• Decorative effects do not reduce usability

Failure Modes

• Dead brutality: the interface looks severe but the structure is weak or confusing.
• Theme drift: light and dark cues fight each other in the same screen.
• Noise overload: texture or contrast makes text hard to read.
• Badge soup: too many status chips, labels, and outlines compete with the hierarchy.
• Accessibility break: focus, contrast, or keyboard access gets sacrificed for style.

Output Requirements

• Deliver a complete implementation, not a concept stub.
• Keep any decorative effect isolated and reversible.
• Preserve usability before adding visual drama.
• If the requested aesthetic conflicts with accessibility, call out the tradeoff and choose the usable option.