Brutalism design skill for AI agents

Overview

Brutalism is a raw, unapologetic design system skill for AI-powered development. Inspired by the 1950s architectural movement that celebrated exposed concrete and structural honesty, this skill produces interfaces that reject polish in favor of function — bold borders, stark typography, visible structure, and a deliberate roughness that makes every element feel honest about what it is.

When you add this skill file to your AI coding tool, every component it generates strips away the veneer of conventional design. No soft shadows, no gentle gradients, no carefully rounded corners trying to disappear. Brutalist UI shows its bones.

Design tokens

Color palette

Brutalism uses a warm, earthy dual-accent palette that references the material palette of raw architecture — terracotta red and ochre yellow:

The terracotta + ochre pairing is deliberately non-digital. Where most design systems reach for blues and violets that signal "software," Brutalism's palette signals "material." These colors feel like they exist in the physical world — clay, iron oxide, aged stone — grounding the interface in something tangible rather than sleek.

Typography

Brutalism uses Darker Grotesque for all body and display text — a high-contrast grotesque with extreme weight variation and tall, condensed letterforms. It's not a comfortable typeface. It's a confrontational one.

Darker Grotesque's defining characteristics work perfectly for the brutalist approach:

• Extreme weight range — from 100 (hairline thin) to 900 (near-solid black), the difference between the lightest and heaviest weights is dramatic. The AI agent uses this full spectrum to create hierarchy through raw contrast rather than careful refinement
• Tall x-height and condensed proportions — text set in Darker Grotesque has an imposing vertical presence, especially at display sizes. Headings loom over body text
• Desktop-first expressive scale — the type system is built for large screens first, favoring oversized headings that dominate the viewport before scaling down to mobile

JetBrains Mono handles code blocks and monospaced content, providing necessary readability in technical contexts where Darker Grotesque's extreme proportions would be impractical.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Brutalist spacing isn't about creating breathing room — it's about creating tension and structure. The AI agent uses tight spacing to pack elements together where density serves the design, and sharp jumps to wider spacing where separation needs to feel abrupt rather than gradual. The grid is rigid. The transitions are blunt.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Brutalism is an anti-design design system. It follows rules — strict ones — but those rules reject the conventions that most UI systems treat as gospel:

• Structural honesty — every element shows what it is. Borders are thick and visible. Containers have hard edges. There's no pretending a div is floating in space when it's clearly a box on a page. The AI agent never hides structure behind soft shadows or feathered edges
• Confrontational typography — Darker Grotesque at extreme weights isn't trying to be pleasant. A 900-weight heading next to a 200-weight body creates jarring contrast that demands attention. This is hierarchy through force, not finesse
• Material palette — terracotta and ochre connect the digital interface to physical materials. The colors feel raw and warm, like the interface was built from earth rather than pixels
• Deliberate roughness — where other design systems smooth every edge, Brutalism leaves them sharp. No border-radius on cards. No easing curves on transitions. No gentle fades between states. Changes are immediate and visible
• Function over decoration — nothing exists purely for aesthetics. Every border communicates containment. Every color shift signals state. Every size change establishes hierarchy. If an element doesn't serve a functional purpose, it doesn't exist

This makes Brutalism a strong fit for:

• Portfolio and agency sites for architects, artists, and designers
• Independent publishing platforms and editorial sites
• Experimental and avant-garde product launches
• Cultural institutions and gallery websites
• Developer-facing tools that embrace raw aesthetics
• Brands that want to signal authenticity and anti-corporate values
• Any product that treats visual convention as something to challenge

Accessibility

Brutalism enforces WCAG 2.2 AA compliance as a hard requirement. Raw aesthetics and accessible interfaces aren't in conflict — brutalist architecture was fundamentally about making structures functional for everyone, and brutalist UI follows the same principle. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component — thick, high-contrast borders that fit naturally into the brutalist visual language rather than fighting it
• Maintain sufficient color contrast ratios, particularly ensuring the terracotta primary (#DD614C) and ochre secondary (#DAA144) remain readable against the white surface
• Prioritize accessibility over aesthetics when the two conflict

The brutalist approach actually benefits certain accessibility aspects: thick borders make component boundaries unambiguous, high-contrast typography is inherently readable, and the rejection of subtle hover states in favor of bold state changes makes interactions easier to perceive.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull brutalism

2. The file is saved to .cursor/skills/brutalism/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate brutalist interfaces with Darker Grotesque at extreme weights, terracotta + ochre accents, hard edges, and visible structural borders.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Brutalism guidelines — thick borders, no rounded corners, extreme typographic contrast, and the warm material palette throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Brutalism apart

Every other typeui.sh design skill tries to make interfaces look polished. Brutalism is the only one that deliberately doesn't:

• Anti-refinement as a system — no shadows, no gradients, no rounded corners, no soft transitions. The skill teaches the AI to build interfaces where rawness is the aesthetic, not a lack of effort
• Material-world palette — terracotta + ochre is the only color pairing across all skills that references physical materials rather than digital conventions. The interface feels built from earth, not light
• Extreme typographic contrast — Darker Grotesque's 100-to-900 weight range produces the widest visual gap between thin and heavy text of any skill, creating hierarchy through confrontation
• Thick borders as identity — where other skills minimize or eliminate borders, Brutalism makes them a defining visual element. Borders show structure, contain elements, and communicate hierarchy
• Brutalism-as-accessibility — thick borders, high-contrast type, and bold state changes aren't just stylistic choices; they make components easier to perceive, boundaries easier to identify, and state changes harder to miss
• Quality gates — every rule is anchored to a token or measurable threshold. The raw aesthetic is systematic, not chaotic — controlled roughness, not randomness