neobrutalism

Create design system guidelines for modern brutalism aesthetics.

Updated Jun 23, 2026
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill neobrutalism-guideops
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: neobrutalism
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/neobrutalism
Command: npx skills add https://github.com/guideops/agentic-shared --skill neobrutalism-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide for creating design system guidelines for a modern take on brutalism, ensuring consistency and accessibility in design systems.

Core Features & Use Cases

  • Design Foundations: Offers a clear visual style, typography scale, color palette, and spacing scale.
  • Component Rules: Specifies guidelines for component anatomy, states, variants, and interaction behavior.
  • Accessibility: Ensures compliance with WCAG 2.2 AA standards and keyboard-first interactions.
  • Guideline Authoring Workflow: Outlines a structured approach to authoring design system guidance.
  • Component Rule Expectations: Details required states, interaction behaviors, and responsive design considerations.
  • Quality Gates: Ensures rules are anchored to tokens, accessibility is testable, and consistency is prioritized.

Quick Start

Utilize the neobrutalism skill to establish design system guidelines for your project, adhering to modern brutalism aesthetics.

Frequently Asked Questions about neobrutalism

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

FAQPage Schema
What is modern brutalism UI/UX design?

A neobrutalism design system provides structured guidelines for visual style, typography, color palette, and spacing. It ensures consistency across modern, high-contrast UI/UX projects while maintaining accessibility standards.

How do I create a design system for brutalism aesthetics?

To create a brutalism design system, establish foundational rules for component anatomy, states, variants, and interaction behaviors. This skill outlines a structured authoring workflow to help you generate consistent guidelines for high-contrast UI components.

Does modern brutalism UI design support WCAG accessibility standards?

Yes, modern brutalism UI design can support WCAG 2.2 AA standards. This skill specifies accessibility compliance and keyboard-first interactions, ensuring your high-contrast design system remains accessible and testable through defined quality gates.

What components do I need for a brutalism design system?

A brutalism design system requires component guidelines detailing required states, interaction behaviors, and responsive design considerations. This skill defines these expectations, ensuring component rules are anchored to design tokens for visual consistency.

When should I not use a neobrutalism design system?

You should avoid using a neobrutalism design system for projects requiring soft, conventional corporate aesthetics, as it emphasizes high-contrast and stark visual styles. It is specifically tailored for design system authors and engineers working on modern UI/UX projects.