neobrutalism

Generates implementation-ready design-system guidelines using neobrutalism tokens, components, and accessibility rules.

Updated Jun 20, 2026
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill neobrutalism-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neobrutalism
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/neobrutalism
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill neobrutalism-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building interfaces in a neobrutalism style often lack consistent, opinionated guidance, leading to inconsistent spacing, low-contrast text, and ad-hoc component states. This Skill turns the neobrutalism design language into concrete, testable rules that engineers and designers can apply directly. ## Core Features & Use Cases - Design Token Foundations: Provides the full token set including colors (primary #FDC800, secondary #432DD7), typography (Inter, JetBrains Mono, 13/15/17/21/27/35 scale), and spacing (4/8/12/16/24/32). - Component-Level Rules: Defines anatomy, variants, and required states (default, hover, focus-visible, active, disabled, loading, error) with keyboard, pointer, and touch behavior. - Accessibility & QA Gates: Enforces WCAG 2.2 AA with testable acceptance criteria, anti-patterns, migration notes, and a code-review QA checklist. - Use Case: When building a new dashboard UI, ask for a button component spec and receive token-anchored rules for every state, contrast requirements, and prohibited implementations. ## Quick Start Generate a neobrutalism design-system guideline for a card component including its states, tokens, and accessibility acceptance criteria.

Frequently Asked Questions about neobrutalism

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

FAQPage Schema
How do I create a neobrutalism design system for my web app?▼

Start from the defined foundations: color tokens like primary #FDC800 and secondary #432DD7, Inter typography on a 13/15/17/21/27/35 scale, and 4/8/12/16/24/32 spacing. Then specify component anatomy, states, and accessibility criteria before writing any component code.

What colors and fonts does the neobrutalism style use?▼

The palette uses primary #FDC800, secondary #432DD7, success #16A34A, warning #D97706, danger #DC2626, surface #FBFBF9, and text #1C293C. Typography uses Inter for primary and display text and JetBrains Mono for labels, with weights from 100 to 900.

Does this design guidance meet WCAG accessibility standards?▼

Yes, the guidelines target WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

What component states should a neobrutalism button define?▼

Define default, hover, focus-visible, active, disabled, loading, and error states as relevant. Each state must specify spacing, typography, and color-token usage plus keyboard, pointer, and touch interaction behavior.

When should I avoid using a neobrutalism design style?▼

Avoid it when the product requires subtle, low-contrast visuals or dense enterprise data layouts where bold borders and vivid accents create noise. The style also prohibits low-contrast text and inconsistent spacing rhythm, so teams unable to enforce tokens should reconsider.