Neobrutalism design skill for AI agents

Overview

Neobrutalism is a bold, high-contrast design system skill file that instructs AI coding assistants to generate interfaces with thick borders, hard shadows, vivid colors, and unapologetic visual weight. Rooted in the brutalist web design movement but refined for modern usability, neobrutalism rejects subtle gradients and soft edges in favor of raw, graphic-forward interfaces that demand attention.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, modals, navigation — carries the signature neobrutalist look: solid black outlines, offset box shadows, bright accent colors, and flat surfaces. The result is an interface that feels loud and intentional without sacrificing structure or usability.

Design Tokens

Color Palette

Neobrutalism pairs a punchy yellow primary with a deep violet secondary, creating the high-contrast, poster-like energy that defines the style:

The yellow-and-violet combination is the visual backbone. The primary yellow (#FDC800) fills buttons, highlights, and accent blocks with the saturated, flat color that neobrutalism demands. The deep violet secondary (#432DD7) provides a striking contrast for links, secondary actions, and interactive states.

Typography

Neobrutalism uses Inter for all text — a geometric, highly legible typeface that stays clean against the bold visual treatments:

• Primary and display font: Inter — its neutral geometry lets the thick borders and bright colors carry the personality, while keeping text effortlessly readable
• Monospace font: JetBrains Mono — used for code blocks, technical content, and data values

The type scale uses slightly unconventional sizes: 13 / 15 / 17 / 21 / 27 / 35px. This odd-number progression creates a type rhythm that feels less templated than standard 14/16/18 scales, which complements the intentionally rough neobrutalist aesthetic. Font weights from 100 through 900 allow heavy, impactful headings (700–900) that match the visual weight of thick borders and hard shadows.

Spacing

All spacing follows a 4px base unit with a scale of 4 / 8 / 12 / 16 / 24 / 32px. In neobrutalism, spacing has to work harder than in minimal designs because the thick borders and hard shadows add visual bulk to every element. The consistent spacing scale ensures that the bold graphical treatments don't crowd each other or collapse into visual noise.

The Neobrutalist Look

Beyond tokens and spacing, the skill file defines the signature visual treatments that make neobrutalism recognizable:

• Hard shadows — solid, offset box shadows (typically 4–6px offset in both axes with no blur) instead of soft, diffused shadows. These create a layered, almost paper-cutout effect
• Thick borders — 2–3px solid black borders on interactive elements and containers. Borders are structural, not decorative
• Flat surfaces — no gradients, no transparency, no glassmorphism. Surfaces use solid fills from the color palette
• High contrast — text and interactive elements maintain sharp contrast against their backgrounds. The bright yellow and deep violet are used to draw the eye, not to blend in
• Bold interactive states — hover states shift shadows, active states compress them, focus states use thick outlines. Every state change is visually obvious

These rules ensure AI-generated interfaces look unmistakably neobrutalist without requiring the AI to improvise the style from vague descriptions.

Component Coverage

Neobrutalism includes guidance for over 40 component families, each adapted to carry the bold, graphic aesthetic:

• Inputs and forms — buttons with hard shadows and thick borders, chunky text inputs, bold selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards with offset shadows, bordered tables, data lists, data grids, charts, stats/metrics blocks, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals with solid borders, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with explicit descriptions of how the neobrutalist shadow and border treatments change per state. Interaction behavior covers keyboard, pointer, and touch, with token-specific guidance for spacing, typography, and color usage.

Accessibility

Neobrutalism enforces WCAG 2.2 AA compliance as a baseline. The high-contrast visual style naturally aids accessibility in some areas, but the skill file addresses specific risks:

• Keyboard-first interaction with visible focus states — thick focus outlines that match the neobrutalist border weight (not thin 1px rings that disappear against the bold visuals)
• Sufficient color contrast between the primary yellow (#FDC800) and the text color (#1C293C), with fallback guidance for when yellow backgrounds require dark overlaid text
• Semantic HTML and proper ARIA attributes throughout
• Testable acceptance criteria for every accessibility requirement

The bold visual style means focus states and interactive feedback are naturally prominent, which is an accessibility advantage. When the neobrutalist aesthetic conflicts with accessibility — for example, if a bright yellow background with white text would fail contrast — the skill file prioritizes accessibility.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh neobrutalism

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build landing pages, dashboards, or component libraries, and the output will follow the neobrutalist hard-shadow, thick-border, high-contrast system.

Claude (Anthropic)

Use Neobrutalism directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will apply the neobrutalist visual treatments, color tokens, and component rules automatically

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and visual rules as prompt context

Design Philosophy

Neobrutalism rejects the homogeneity of modern UI design. The skill file follows three principles:

1. Boldness is the default — every element is designed to be visually assertive. Subtlety is opt-in, not the starting point
2. Structure through contrast — thick borders and hard shadows create clear visual boundaries without relying on whitespace alone. Hierarchy comes from weight and color, not just size
3. Raw doesn't mean reckless — the neobrutalist aesthetic is governed by strict token rules, spacing grids, and accessibility standards. The look is loud, but the underlying system is disciplined