brutalism

Provide design system guidelines with color palettes, typography scales, and spacing.

Updated Jun 23, 2026

Search Tags:#typography #design system #color palette #brutalism #spacing

Ready to run

npx skills add https://github.com/guideops/agentic-shared --skill brutalism-guideops

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: brutalism
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/brutalism
Command: npx skills add https://github.com/guideops/agentic-shared --skill brutalism-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides guidelines for creating design systems that embody the brutalist aesthetic, offering a raw, unadorned approach to design.

Core Features & Use Cases

Design Tokens: Offers a comprehensive set of design tokens for colors, typography, and spacing.
Typography Scale: Implements a desktop-first expressive scale for typography.
Color Palette: Provides a palette with primary, secondary, neutral, success, warning, danger, surface, text, and neutral colors.
Use Case: For designers and engineers looking to create a design system that reflects the unadorned and functional aspects of brutalist architecture.

Quick Start

Apply the brutalism design system to your project by integrating the provided design tokens and typography scale.

Frequently Asked Questions about brutalism

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

FAQPage Schema

What is a brutalist design system?▼

A brutalist design system provides design tokens, typography scales, and color palettes that embody a raw, unadorned, and functional aesthetic inspired by concrete architecture.

How do I apply brutalist design tokens to my project?▼

To apply brutalist design tokens, integrate the provided color palettes, desktop-first expressive typography scale, and spacing rules directly into your project's design system architecture.

What colors are included in a brutalist color palette?▼

A brutalist color palette includes primary, secondary, neutral, success, warning, danger, surface, text, and neutral colors to establish a raw, functional visual foundation.

Does brutalist typography require a desktop-first scale?▼

Yes, brutalist typography implements a desktop-first expressive scale to establish strong, raw visual hierarchies typical of the anti-design aesthetic.

When should I use a brutalist design system?▼

Use a brutalist design system when creating interfaces that require an unadorned, functional approach, deliberately rejecting traditional design polish in favor of raw expression.

Can I use brutalist spacing rules without the full color palette?▼

Yes, you can integrate specific brutalist spacing rules and typography scales independently, though using the complete set of design tokens ensures a cohesive anti-design aesthetic.