Brutalismv1.0.0brutalism

Brutalism Interface System

Generate bold UI with hard outlines, confrontational hierarchy, and memorable task-oriented composition.

View shared fundamentals Explore tokens

creative platformsinternal tools with strong brand identitycampaign-driven SaaStask boards and operational dashboards

Tone

assertive, raw, memorable

Density

medium; generous enough to let blocks breathe, tight enough to stay urgent

Mood

editorial, rebellious, energetic

Source Type

expressive product brand language

Base Skill Metadata

The YAML record is the source of truth for capability, maturity, and generator guardrails.

Maturity

Signature

Coverage score

78/100

Validation status

Ready for export

Preview coverage

Preview resolved

Supported product types

campaign micrositecreative platformoperational dashboardcommunity tool

Compatibility tags

brand-forwardhigh-contrasteditorial-uidesktop-first-okmemorable-layouts

Anti-patterns to avoid

Do not soften the system into generic rounded SaaS cards.

Do not use low-contrast muted palettes that neutralize the confrontational hierarchy.

Do not add excessive microcopy polish that removes the direct tone.

Validation report

0 errors1 warnings

Warning: text.inverse on accent contrast is 3.75:1, below the required 4.5:1.

Sample prompts

Campaign operations board

Generate an operations board for a campaign-driven product with hard outlines, typographic punch, loud CTA hierarchy, and compact task grouping that still feels usable.

Creative submissions portal

Design a submissions portal for a creative community using bold framing, raw component edges, strong labels, and direct utility-first interaction patterns.

Visual Identity

hard offset shadows and unapologetic border weight

very high contrast with loud accent interruptions

Heavy bordersStrong typographic hierarchyHard shadows or flat color blocksImmediate CTA clarity

Typography

Space Grotesk, Onest, Arial, system-ui

42-72px bold or extra-bold, often broken across lines

12px14px16px18px24px

Layout & Rhythm

Container or full-bleed poster-like sections with hard-framed modules

Separate content into hard-framed blocks with strong gutters.

40px64px80px

Tokens

Core design variables from YAML

Compact snapshot of the YAML base. Open only the panels you need when checking exact values or generation rules.

Palette essentials

Only the colors that define the system at a glance.

Primary

#111111

Secondary

#F5F5F5

Accent

#2F81F7

Background

#FFFDF8

Token snapshot

Key values that most affect the builder output.

Spacing density

rhythmic but bold

Grouping

Separate content into hard-framed blocks with strong gutters.

Radius family

sharp with occasional playful large radius on feature cards

Typography

Space Grotesk, Onest, Arial, system-ui

Layout signature

Structure choices that define this system, not the shared fundamentals.

Page shell

Container or full-bleed poster-like sections with hard-framed modules

Page width strategy

Wide desktop grids with generous gutters; mobile collapses to stacked cards

Header pattern

Statement header with one obvious CTA and secondary utility actions

Token details

Structured details from YAML, collapsed by default.

Where It Fits

Best product contexts and intentional misfits for this design language.

Recommended

creative platformsinternal tools with strong brand identitycampaign-driven SaaStask boards and operational dashboards

Avoid for

ultra-conservative finance softwareluxury minimal brands

UX patterns

High-signal layout and flow guidance.

CTA hierarchy

Primary action must be unmistakable in size, contrast, or placement.

Form structure

One clear path through the form; avoid hidden steps.

Table detail strategy

List in framed table or cards, detail in adjacent panel or dedicated page.

Adaptation boundaries

What can flex, and what must stay coherent.

Adaptable traits

Accent color setRadius can move between 0px and slightly roundedGrid can be cleaner or more collage-like

Do not soften the system into generic rounded SaaS.

Do not replace border language with subtle shadow-only cards.

Do not let accents overpower content structure.

Do not use too many type styles in one screen.

Component Coverage

Compact inventory of explicit components, with details on demand.

Explicit components

High confidence

Coverage gaps

All expected component families are represented in the YAML profile.

Generation Guardrails

Essential guidance for the skill generator, grouped by decision type.

Purpose

Create bold, recognisable interfaces that still behave like serious product UI.

AI role

You are a product UI designer translating brutalist graphic force into usable software.

Anti-drift highlights

Borders remain strong and intentional

Type hierarchy is obvious in one glance

Accent colors are limited and deliberate

Packaging model

Non stai modificando la base skill, stai derivando una custom skill

La base skill resta il riferimento YAML del catalogo. Il builder sotto serve a produrre un pacchetto custom con metadati propri, override validati e archive esportabile.

Base skill

Record YAML sorgente, usato come sistema di riferimento immutabile.

Name: Brutalism Interface System

Slug: brutalism-interface-system

Maturity: Signature

Coverage score: 78/100

Role: definisce token, layout, interaction rules e anti-drift checklist della base.

Custom skill

Pacchetto derivato che puoi rinominare, validare, importare/esportare e scaricare.

Input: delta JSON sopra la base skill.

Output: payload riutilizzabile oppure archive completo con `README.md`, `SKILL.md` e `openai.yaml`.

Guardrail: validazioni su campi obbligatori, slug, hex colors e contrast checks.

Custom Skill Builder

Three editing modes, one controlled derivation model

The base skill remains immutable. This builder lets you edit only the declared scope, persist named drafts, compare revisions, clone an existing custom skill, and export a packaged custom skill with its own metadata.

Base skill to custom skill

Builder mode and editable scope

The available form surface changes with the selected mode, but the data contract does not: `shared_fundamentals` stay locked, while `skill_metadata` and `design_system` remain the editable scope.

Base

brutalism

Sections touched

0 / 4

Overrides

Mode switcher

skill_metadatavisual_identityidentity_traitscolorsspacingradiusshadowstypographywidths_breakpointshierarchytypography_rolesinteractionlayoutcomponentsux_patterns

Scope contract

Editable

skill_metadatadesign_system.visual_identitydesign_system.identity_traitsdesign_system.tokensdesign_system.hierarchydesign_system.typography_rolesdesign_system.interactiondesign_system.layoutdesign_system.componentsdesign_system.ux_patternsdesign_system.constraintsdesign_system.skill_generation

Locked

shared_fundamentals

Quick navigation

Jump across the builder without losing the current revision context.

Base skill

Brutalism Interface System

Source YAML from the catalog. It is never edited here.

Custom skill

Brutalism Interface System

Derived package with its own metadata, revision history, and semantic diff.

Validation summary

No blocking errors, 2 warnings

Review recommended

colors

Low contrast for text inverse on accent: 3.75:1. Stay at or above 4.5:1.

colors

Background and surface are too close (1.02:1). Surface hierarchy may collapse.

Draft persistence and revisions

Save the current state, reopen a previous draft, compare revisions, or clone an existing custom skill as a new starting point.

No saved drafts for this base skill yet. Save the current state to create a reusable revision history.

Skill identity

Base skill vs custom skill

Name the derived package, define its slug, and set the packaging metadata that will travel with the exported custom skill.

0 override

Base skill

Brutalism Interface System

brutalism-interface-system

Generate bold UI with hard outlines, confrontational hierarchy, and memorable task-oriented composition.

Custom package

Brutalism Interface System

brutalism-interface-system

This becomes the identity of the exported custom package and its semantic metadata file.

Custom skill name

Custom skill slug

Suggested: brutalism-interface-system

Custom skill description

Recommended product areas

Avoid for

Palette

Palette and surfaces

Edit the core palette in all modes, then unlock extended token control in advanced and expert modes.

0 override

Primary

#111111

Secondary

#F5F5F5

Accent

#2F81F7

Background

#FFFDF8

Surface

#FFFFFF

Primary

Primary actions, critical buttons, and highest-priority attention points.

#111111

Secondary

Secondary surfaces, quieter containers, and support blocks.

#F5F5F5

Accent

Highlights, badges, and small signals that energize the system.

#2F81F7

Background

Overall canvas and dominant page mass.

#FFFDF8

Surface

Cards, dialogs, and panels that need to separate from the background.

#FFFFFF

Success

Warning

Danger

Border

Text primary

Text secondary

Text muted

Text inverse

Neutral scale

Typography

Typography and tone

Use curated font directions in every mode, then unlock scale, weights, and semantic type roles in advanced and expert mode.

0 override

Tone of voice

Font preview: The quick brown fox jumps over the lazy dog.

Type scale

Font weights

Line heights

Typography roles

Layout

Layout and rhythm

Basic mode edits the main shell and density. Advanced and expert modes unlock richer spacing, radius, layout, and hierarchy controls.

0 override

Control radius

Flow design goal

L’utente sceglie una base YAML, modifica i campi del design system dalla UI, e genera una skill che eredita i fundamentals condivisi e applica gli override utente sulla base selezionata.

Page shell

Spacing tokens

Section gap values, one per line.

Card gaps

Widths

Breakpoints

Page width and navigation rules

Advanced system controls

These sections map to the richer customization plan: visual identity, interaction rules, UX patterns, and component-level rules.

Visual identity

Identity traits

Interaction rules

UX patterns

Components rules

{
  "buttons": {
    "explicit": true,
    "source_basis": "Neo-brutalist call-to-action patterns",
    "confidence": "high",
    "rules": {
      "variants": [
        "filled-black",
        "filled-accent",
        "outline-heavy",
        "icon-block"
      ],
      "shape": "square-ish or chunky rounded",
      "usage": "Primary CTA must feel physical and immediate."
    }
  },
  "inputs": {
    "explicit": true,
    "source_basis": "Task tools and bold forms",
    "confidence": "high",
    "rules": {
      "style": "White or light field with thick border and clear label",
      "validation": "Inline error below field with strong color chip or icon"
    }
  },
  "selects": {
    "explicit": true,
    "source_basis": "Toolbar filters",
    "confidence": "medium",
    "rules": {
      "trigger": "Border-heavy trigger with obvious chevron"
    }
  },
  "dropdowns": {
    "explicit": true,
    "source_basis": "Action menus",
    "confidence": "medium",
    "rules": {
      "surface": "Solid surface, heavy border, hard shadow"
    }
  },
  "cards": {
    "explicit": true,
    "source_basis": "Primary module form factor",
    "confidence": "high",
    "rules": {
      "surface": "Paper-like surface with thick border and offset shadow",
      "content": "Strong header, readable description, anchored actions"
    }
  },
  "tables": {
    "explicit": true,
    "source_basis": "Operational and CRUD screens",
    "confidence": "high",
    "rules": {
      "shell": "Framed table container with bold header row",
      "row_states": "hover and selected must feel physically highlighted"
    }
  },
  "modals": {
    "explicit": true,
    "source_basis": "Decisive interruptions",
    "confidence": "medium",
    "rules": {
      "style": "Hard-framed, centered, compact"
    }
  },
  "dialogs": {
    "explicit": true,
    "source_basis": "Confirmations and edit flows",
    "confidence": "high",
    "rules": {
      "surface": "White card with thick border, offset shadow, bold title"
    }
  },
  "sidebars": {
    "explicit": true,
    "source_basis": "Internal tool shells",
    "confidence": "medium",
    "rules": {
      "structure": "Blocky nav groups with loud active state"
    }
  },
  "tabs": {
    "explicit": true,
    "source_basis": "Peer content switching",
    "confidence": "high",
    "rules": {
      "style": "Filled block or heavy underline"
    }
  },
  "badges": {
    "explicit": true,
    "source_basis": "Tag and status chips",
    "confidence": "high",
    "rules": {
      "style": "Bold pill or small poster-like lozenge"
    }
  },
  "alerts": {
    "explicit": true,
    "source_basis": "Operational warnings",
    "confidence": "high",
    "rules": {
      "structure": "Framed block with accent state chip and concise message"
    }
  },
  "empty_states": {
    "explicit": true,
    "source_basis": "Sparse modules",
    "confidence": "high",
    "rules": {
      "composition": "Big icon or illustration, hard border, one unmistakable CTA"
    }
  },
  "charts_containers": {
    "explicit": true,
    "source_basis": "Bold dashboards",
    "confidence": "medium",
    "rules": {
      "shell": "Framed card, minimal chart chrome, accent reserved for key trend"
    }
  },
  "page_headers": {
    "explicit": true,
    "source_basis": "Poster-like headlines",
    "confidence": "high",
    "rules": {
      "composition": "Oversized title with attached action block"
    }
  },
  "filters": {
    "explicit": true,
    "source_basis": "List and board management",
    "confidence": "high",
    "rules": {
      "placement": "Hard-framed toolbar directly above affected content"
    }
  },
  "form_layouts": {
    "explicit": true,
    "source_basis": "Direct task completion",
    "confidence": "high",
    "rules": {
      "structure": "Short sections, big labels, minimal nesting"
    }
  }
}

Review

Final review

Review the semantic summary, export metadata, and raw override payload before generating the packaged skill.

0 override

Base reference

brutalism

Version 1.0.0

Change state

No changes yet

Piano dei campi che la UI puo esporre all’utente per personalizzare il design system prima della generazione della skill.

Semantic diff

No semantic changes yet. The draft still matches the base skill.

custom_skill_metadata

{
  "format_version": "design-skills.custom-skill.v1",
  "custom_skill_id": "brutalism-interface-system",
  "base_skill_slug": "brutalism",
  "base_skill_name": "Brutalism Interface System",
  "base_skill_version": "1.0.0",
  "builder_mode": "advanced",
  "semantic_diff": [
    "No semantic changes yet. The draft still matches the base skill."
  ],
  "editable_scope": [
    "skill_metadata",
    "design_system.visual_identity",
    "design_system.identity_traits",
    "design_system.tokens",
    "design_system.hierarchy",
    "design_system.typography_roles",
    "design_system.interaction",
    "design_system.layout",
    "design_system.components",
    "design_system.ux_patterns",
    "design_system.constraints",
    "design_system.skill_generation"
  ],
  "locked_scope": [
    "shared_fundamentals"
  ],
  "generated_at": "2026-07-27T18:37:55.053Z"
}

You can still package the base skill with explicit custom metadata and no extra override delta.

user_override_payload

{}

Live preview

The same visual grammar as the detail-page demo, but updated with the current customization values.

Font

Space Grotesk

Density

rhythmic but bold

Continue browsing

Other design system bases

Back to gallery

Glassmorphism

Glassmorphism Product Layers

Generate layered translucent UI with frosted surfaces, luminous gradients, and disciplined readability.

Material Design

Material Design Adaptive

Generate product UI with tokenized surfaces, adaptive elevation, measured motion, and practical, accessible hierarchy.

Minimal

Minimal Clarity System

Generate refined, restrained product UI with strong whitespace, quiet hierarchy, and disciplined component reuse.

Brutalism Interface System

Core design variables from YAML

Color systemSemantic states, text colors, border token, neutral scale.

Spacing, radius and sizingDensity rules, spacing steps, radii and content widths.

Typography and depthScale, weights, line heights and shadow tokens.

ButtonshighNeo-brutalist call-to-action patterns

InputshighTask tools and bold forms

SelectsmediumToolbar filters

DropdownsmediumAction menus

CardshighPrimary module form factor

TableshighOperational and CRUD screens

ModalsmediumDecisive interruptions

DialogshighConfirmations and edit flows

SidebarsmediumInternal tool shells

TabshighPeer content switching

BadgeshighTag and status chips

AlertshighOperational warnings

Empty StateshighSparse modules

Charts ContainersmediumBold dashboards

Page HeadershighPoster-like headlines

FiltershighList and board management

Form LayoutshighDirect task completion

Core principles4 rules that set visual and UX direction.

Required coveragePage patterns and expected component families.

Anti-drift checklistThe checks worth running before generation is considered done.

Operating instructionsExecution notes for the generator, stripped of prompt boilerplate.

Non stai modificando la base skill, stai derivando una custom skill

Three editing modes, one controlled derivation model

Other design system bases

Glassmorphism Product Layers

Material Design Adaptive

Minimal Clarity System