brutalism

Standardize brutalist design-system guidance with WCAG 2.2 AA accessibility rules.

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill brutalism-superpollo02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: brutalism
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/brutalism
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill brutalism-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of producing consistent, implementation-ready UI guidance for a brutalist design aesthetic while maintaining accessibility and interaction quality.

Core Features & Use Cases

  • Brutalist foundations to tokens: Defines typography, spacing, and a concrete color system (including explicit primary/secondary/surface/text and functional state colors).
  • Operational accessibility rules: Enforces WCAG 2.2 AA expectations with keyboard-first interaction and visible focus requirements.
  • Component-ready guidance: Specifies how to structure rules for component anatomy, states, variants, and quality gates so engineers can implement without ambiguity.

Quick Start

Use the brutalism skill to generate design-system instructions for a new set of components (e.g., buttons and inputs) that match the brutalist palette, typography, spacing rhythm, and required accessibility states.

Frequently Asked Questions about brutalism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a brutalist design system that meets WCAG 2.2 AA accessibility standards?

To build an accessible brutalist design system, you standardize UI component rules, interaction states, and token-aligned styling using explicit typography, spacing, and color foundations. This enforces WCAG 2.2 AA keyboard-first behavior and visible focus requirements across all interface elements.

What is the best way to define interaction states for brutalist UI components?

The best way to define interaction states for brutalist UI components is to specify explicit focus, hover, active, disabled, error, and loading states. This approach uses token-anchored do/don't constraints to ensure consistent, accessible component behavior across the design system.

Can I use brutalist design tokens for both engineering and AI UI generation?

Yes, you can use brutalist design tokens for both engineering and AI teams. The system standardizes brutalist design-system guidance into implementation-ready UI instructions, allowing both human engineers and AI to produce consistent, accessible component-level rules without ambiguity.

How do I structure component anatomy and variants for an accessible brutalist UI library?

You structure component anatomy and variants for an accessible brutalist UI library by defining token-anchored do/don't constraints and explicit quality gates. This provides engineers with unambiguous, implementation-ready guidance that aligns with the brutalist palette and required accessibility states.

Does a brutalist design system require explicit keyboard-first interaction behavior?

Yes, a brutalist design system requires explicit keyboard-first interaction behavior. The system enforces WCAG 2.2 AA expectations, ensuring all components have visible focus requirements and operational accessibility rules for users navigating via keyboard.