Brutalism

Brutalism

"Raw materials exposed. An intentional rejection of polish, gradients, and soft shadows."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Unstyled Components: Default browser styling for buttons, inputs, and links is celebrated.
2. Exposed Structure: Grid lines, tables with visible borders, and stark boundaries are used instead of whitespace to separate content.
3. Anti-Aesthetic: Intentional awkwardness. Elements might slightly overlap in a way that feels broken, or use system default fonts.

Visual DNA

• Colors: High contrast, often clashing. Pure #0000FF blue for links, #FF0000 red for accents, on stark white or #C0C0C0 grey backgrounds. Industrial Chic palette fits best.
• Typography: Courier New, Times New Roman, Comic Sans, or default sans-serifs. No web fonts.
• Visuals: Dithered images, pixelated graphics, or heavily compressed jpegs.

Web Implementation

• Use standard HTML tags without overriding their default appearance whenever possible.
• CSS Example:

body {
  background-color: #ffffff;
  color: #000000;
  font-family: monospace;
}

/* Expose the structure */
.brutalist-container {
  border: 1px solid #000;
  padding: 10px;
}

.brutalist-section {
  border-bottom: 2px dashed #000;
  margin-bottom: 20px;
  padding-bottom: 20px;
}