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

Web Brutalism vs NeobrutalismNeobrutalism designs a raw-looking appearance with substantial CSS. Web Brutalism genuinely exposes web structure and native materials.

Understand → Recognize → Choose → Compare

Pack for your agent

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

implementation

Implement in your agent

# 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.

## Non-goals
- 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.

sha256:4f97893635a301f20f4a6bf540a28327f52859f0150ed0a2ce214ff59ba21510

debugging

Debug in your agent

# Debug Web Brutalism in your agent

## Observed symptom
[DÉCRIS ICI LE SYMPTÔME]

## 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.

sha256:bab2690feb01b64539a4ca70d5ef9e029373f3b60481443161b87782dafd08c5

Pack digest: sha256:de8c671a712947fcf8b497d5af8f0d30cc30b9379a244fd9f12320d76ad6ca33

Accessibility and verification

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

Sources

Editorial revision: 1.2.2
Sources consulted on: 2026-07-20
Source catalog digest: sha256:6e047c91ac34b3558576dea986805be6086c1a5a18ed2ed27fa1e56214cef304; sha256-utf8-canonical-json-lf/v1

Open the versioned source catalog

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.

# 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. ## Non-goals - 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.

# Debug Web Brutalism in your agent ## Observed symptom [DÉCRIS ICI LE SYMPTÔME] ## 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.