Skip to content
SkillCodex
Updated
Version
v1.3.0
Sources
3 sources
Status
Published

Terminology classification · Contested label

Web Brutalism

A dense page that leaves browser-default materials visible.

Also called: brutalist web design, raw web

Document structure, direct links, and native materials.

Understand

Definition and scope

Strict Web Brutalism treats HTML structure, underlined links, system typography, and simple borders as a finish. Its strength comes from honesty, speed, and document-first priorities.

Scope: The label remains contested. Here it describes deliberate use of raw web materials. The saturated graphic style with thick outlines and hard shadows is classified as Neobrutalism.

Recognize

The four defining signals should remain visible without relying on the style name.

Typography

Browser materials

System fonts, clearly underlined links, and controls close to native rendering remain visible.

Layout

Document structure

Headings, lists, tables, and separators directly carry the layout.

Depth

No decorative rendering

No blurred shadow, decorative gradient, imitation material, or simulated volume.

Layout

Useful density

Information stays compact and immediately navigable, without theatrical spacing.

Choose

Good context

  • A document, index, or archive where speed and density matter more than decoration.
  • An identity that embraces native web materials and transparent structure.

Misuse

  • Intentionally breaking accessibility to make the page feel old.
  • Adding loud colors, thick borders, and offset shadows, which shifts into Neobrutalism.

Compare

Decisive difference with the closest neighbor

Ready-to-use briefs

Choose the intent that matches your work, then copy this static brief into your agent.

Create

Create a strict Web Brutalist page with semantic HTML, system typography, underlined links, and visible document structure. Keep CSS minimal and remove shadows, gradients, decorative radii, and imitation materials.

Modify

Modify the page without rewriting its content. Let headings, lists, tables, and links carry hierarchy, then remove decorative layers that hide structure.

Repair

Repair this page by restoring readability, target sizes, heading hierarchy, and table headers. Visual rawness does not justify broken structure or ambiguous controls.

Understand → Recognize → Choose → Compare

Pack for your agent

Pre-written instructions to paste into your agent. Copying executes nothing.

Implement correctly

Create a coherent Web Brutalism direction

# Implement Web Brutalism in your agent

## Objective
Create a strict Web Brutalist page with semantic HTML, system typography, underlined links, and visible document structure. Keep CSS minimal and remove shadows, gradients, decorative radii, and imitation materials.

## Prerequisites
- Inspect existing components, tokens, and brand constraints.
- Confirm that this style fits the surface and content.
- Preserve existing structure, semantics, and interactions.

## Behavior and surfaces
- Browser materials — System fonts, clearly underlined links, and controls close to native rendering remain visible.
- Document structure — Headings, lists, tables, and separators directly carry the layout.
- No decorative rendering — No blurred shadow, decorative gradient, imitation material, or simulated volume.
- Useful density — Information stays compact and immediately navigable, without theatrical spacing.

## States
- Cover existing default, hover, focus, active, disabled, loading, and error states.
- Provide a static state when reduced motion is requested.

## Accessibility
- Keep link underlines, visited states, and focus outlines.
- Maintain readable text and touch target sizes despite the density.
- Use real headings, lists, and table headers to match the visible structure.

## When not to use
- Intentionally breaking accessibility to make the page feel old.
- Adding loud colors, thick borders, and offset shadows, which shifts into Neobrutalism.

## Acceptance criteria
- A document, index, or archive where speed and density matter more than decoration.
- An identity that embraces native web materials and transparent structure.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.
  • Requires · Existing tokens, components, and brand constraints
Why it works
  • The style is framed by signals and surfaces, not just a visual reference.
  • States and fallbacks preserve use when motion or an API is unavailable.
  • Accessibility and performance criteria prevent aesthetics from becoming debt.

Try next

Audit Web Brutalism in the product

# Audit Web Brutalism on the real surface

## Objective
Check that Web Brutalism remains consistent, accessible, and measured on the components that actually use it.

## Checks
- Compare interactive states and fallbacks.
- Check contrast, focus, and reduced motion.
- Report visual effects that weaken hierarchy or performance.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:734a9be5e552c783186dc8911d9ebf299a1c6b3adb9a2ecbbfcb85cbbb51b753

Diagnose a problem

Fix Web Brutalism inconsistencies

# Debug Web Brutalism in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Compare the surface with the documented visual signals.
- Verify contrast, focus, reduced motion, and fallback behavior.
- Isolate the visual layer without changing functional structure.

## Possible causes
- The style hides hierarchy or reduces contrast.
- The effect is applied to too many surfaces or depends on an unavailable API.
- An interactive state is no longer perceivable.

## Bounded corrections
Repair this page by restoring readability, target sizes, heading hierarchy, and table headers. Visual rawness does not justify broken structure or ambiguous controls.

## Final verification
- Keep link underlines, visited states, and focus outlines.
- Maintain readable text and touch target sizes despite the density.
- Use real headings, lists, and table headers to match the visible structure.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.
  • Requires · Existing tokens, components, and brand constraints
Why it works
  • The diagnosis compares observable signals instead of judging taste.
  • The visual layer is isolated to preserve structure and interactions.
  • The fix stays tied to fallbacks, contrast, and interactive states.

Try next

Stabilize Web Brutalism in the design system

# Prevent Web Brutalism drift

## Objective
Turn the visual fix into a reusable rule and focused check without freezing the whole interface.

## Checks
- Isolate the responsible tokens or variants.
- Add focused evidence for the affected states.
- Compare nearby styles before widening the rule.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:6e1e75e957154a7e65b722cc70bf82a53d13cacb7a38b7dad2014d2e29a05b0f

Full entry, saving and provenance

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

Pack digest: sha256:86cb68901aa3e50a01223447f0f547abb6f13b42ded86e48630580c2370e8c7e

Accessibility and verification

  1. 1Keep link underlines, visited states, and focus outlines.
  2. 2Maintain readable text and touch target sizes despite the density.
  3. 3Use real headings, lists, and table headers to match the visible structure.

Sources

Content revision
1.3.0
Sources consulted on
2026-07-20
Source catalog digest
sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6
sha256-utf8-canonical-json-lf/v1
Open the versioned source catalog