Brutalism

# Brutalism (Web Brutalism)

You are building a frontend UI. Apply the **Brutalism** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

Treats the raw texture of HTML as an aesthetic: system fonts, thick black borders, default blue underlined links, square corners and hard state changes. It rejects polish and "product feel", expressing an attitude through honest, even rude, structure.

## Design tokens

### Colors

- `background` `#FFFFFF` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#000000` — primary text
- `muted` `#4A4A4A` — secondary text, captions, placeholders
- `accent` `#0000EE` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#000000` — dividers, outlines, input borders
- `highlight` `#FFFF00` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Times New Roman` (system font, weights 400 / 700) → fallback `Times, serif`
- Body text: `IBM Plex Mono` (Google Fonts, weights 400 / 700) → fallback `"Courier New", Courier, monospace`
- Monospace: `IBM Plex Mono` (Google Fonts, weights 400 / 700) → fallback `"Courier New", Courier, monospace`
- Type scale (px): 13 · 16 · 20 · 32 · 56 · 88

### Spacing & Shape

- Base unit: 4px · Spacing scale (px): 4 · 8 · 16 · 24 · 40
- Corner radius (sm / md / lg): 0 / 0 / 0 px
- Border: 3px solid
- Shadows (sm / md / lg): none / none / none

### Motion

- Durations (fast / base): 0ms / 0ms
- Easing: `steps(1, end)`

## Do

- Draw the edge of every block, button and input with a 3px solid black border.
- Keep links in default blue with an underline.
- Use the system Times serif for headlines and a monospace font for body and UI.
- Show hover and selected states with an instant color inversion, without transitions.
- Highlight only a few key items with highlighter yellow.

## Don't

- Do not use rounded corners, shadows, gradients, blur or glass.
- Do not use soft greys, muted palettes or refined illustrations.
- Do not use eased animations, fade-ins or parallax.
- Do not sacrifice readability or clear focus styles to look "cool".

## Components

- **Buttons**: Square rectangles with a 3px black border, white background, black uppercase monospace text. On hover, instantly invert to white on black; on press, shift 2px down-right. No icons.
- **Cards**: Wrapped in a 3px black frame, no shadow, no radius. Large Times titles, small monospace metadata; tags may use highlighter-yellow blocks.
- **Forms**: Inputs are white rectangles with a 3px black border; labels in uppercase monospace above. On focus the background turns highlighter yellow — no soft focus glow.
- **Navigation**: A single row of blue underlined text links separated by pipes or brackets, e.g. [Home] [Work] [About]. The current item is shown inverted.
- **Layout**: Single column or a simple table-like grid, with sections butting together along thick borders. Misalignment, oversized type overflow and high density are allowed.
- **Imagery & icons**: Unretouched photos, high-contrast black-and-white or pixel images, framed in black. No rounded corners, no softening.

## Accessibility

- Thick borders and high contrast help accessibility, but text on yellow backgrounds still needs sufficient contrast.
- No motion is fine, but never drop focus styles because of it: keyboard focus must remain clearly visible.
- Scale oversized headlines down on narrow screens to avoid horizontal scrolling.

_Generated by Style Museum._