skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill brutalism-guideops
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
nikglavinnikglavin
1

lyra-design-system

Define a cohesive design system with tokens, typography, color, and spacing.

Community
Advanced
siriwatknpsiriwatknp
2.4k

using-base-ui-with-material-ui

Integrates Base UI components with Material UI using the render prop pattern.

Community
Intermediate
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
guideopsguideops

minimal

Implement a minimalist design system with color palettes, typography scales, and spacing scales.

Community
Basic