neobrutalism

Name: neobrutalism
Availability: InStock
Author: Bergside

Define neobrutalism design-system guidance with WCAG 2.2 AA accessibility constraints.

2.3k|211|Updated Mar 9, 2026

Search Tags:#accessibility #design system #design tokens #neobrutalism #WCAG 2.2 #component rules #UI state management

Ready to run

npx skills add https://github.com/bergside/awesome-design-skills --skill neobrutalism-bergside

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: neobrutalism
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/neobrutalism
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill neobrutalism-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams implement a consistent neobrutalist design system by translating bold brutalist principles into concrete, accessible UI rules.

Core Features & Use Cases

Token-first styling: standardizes typography, spacing, and color usage (primary/secondary/surface/text + semantic states like success/warning/danger).
Accessibility guardrails: enforces WCAG 2.2 AA, keyboard-first interaction patterns, and visible focus states.
Implementation-ready component guidance: provides do/don’t rules and quality gates so engineers can reliably ship consistent components (e.g., buttons, inputs, cards, modals, navigation) with explicit interaction states.

Quick Start

Ask an AI agent to generate an implementation plan and component rules for a neobrutalism UI, using Inter + JetBrains Mono, the provided color tokens, and explicit accessible focus/hover/disabled states.

Frequently Asked Questions about neobrutalism

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

FAQPage Schema

How do I build a neobrutalism UI that meets WCAG 2.2 AA accessibility standards?▼

To build an accessible neobrutalism UI, apply standardized design tokens for color and spacing while enforcing keyboard-first interaction patterns and visible focus states. This ensures bold component families satisfy WCAG 2.2 AA constraints without sacrificing visual consistency.

What are the best design tokens to use for a neobrutalist design system?▼

Design tokens for a neobrutalist design system should standardize typography using Inter and JetBrains Mono, alongside explicit color tokens for primary, secondary, surface, text, and semantic states like success, warning, and danger to maintain consistent component styling.

How do I standardize UI state management for brutalist components like buttons and modals?▼

Standardize UI state management for brutalist components by applying explicit do and don't rules for hover, focus, and disabled states. Token-first styling ensures buttons, inputs, cards, and modals maintain predictable interaction behavior across product interfaces.

Can I use neobrutalism design rules for complex product interfaces and navigation?▼

Yes, neobrutalism design rules scale for complex product interfaces by providing implementation-ready guidance and QA-oriented quality gates for navigation, modals, and cards. This translates bold brutalist principles into concrete, accessible component behavior.

Why does my neobrutalist design system fail accessibility guardrails?▼

A neobrutalist design system fails accessibility guardrails when it lacks visible focus states, ignores keyboard-first interaction patterns, or uses insufficient color contrast. Enforcing WCAG 2.2 AA constraints and explicit state rules resolves these compliance issues.