Anti-Design

---
name: anti-design
description: Apply the Anti-Design visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Anti-Design, mentions ugly design, anti-UX, deliberately ugly, or describes clashing saturated default-web colors, mismatched fonts at wrong sizes, broken grids and overlaps — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Anti-Design Design System

Deliberate rule-breaking as a style: clashing saturated default-web colors, mismatched oversized fonts, broken grids, overlapping elements, marquees, glitches, and cursor tricks. Every convention of 'good taste' violated on purpose, with total confidence — fashion, editorial, and art-world signaling that the brand is beyond needing to look nice.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Anti-Design.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (ugly design, anti-UX, deliberately ugly, post-design, ugly web), or describes its traits: clashing saturated default-web colors; mismatched fonts at wrong sizes; broken grids and overlaps; intentional misalignment; marquee and cursor tricks; erratic leading; glitch moments.

## Design tokens

### Color palette

- Full-saturation yellow page background — maximally 'wrong': `#ffff00` (--color-bg)
- Clashing lime panel fill: `#00ff00` (--color-surface)
- Primary text, default black: `#000000` (--color-text)
- Magenta accent for buttons and shouting: `#ff00ff` (--color-accent)
- Pure red for alerts, strikethroughs, and stray boxes: `#ff0000` (--color-accent-red)
- Pure blue for links and clashing fills: `#0000ff` (--color-accent-blue)
- White text on saturated fills: `#ffffff` (--color-text-invert)

### Typography

- Display / headings: Impact (fallback: Arial Black, Haettenschweiler, sans-serif)
- Body: Times New Roman (fallback: Times, serif)
- Mono / data: Courier New (fallback: Courier, monospace)
- Type scale: 1.6 ratio, base 18px — computed steps: 18px / 29px / 46px / 74px / 118px / 189px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 0.9, letter-spacing -0.03em, uppercase
- Body: line-height 1.3, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 0, 2, 8, 13, 27, 45, 80, 120 — Erratic by design: elements jam together in one zone and strand in emptiness in the next. The scale is deliberately irregular — consistency would betray the premise.
- Border radius: none 0px — Zero radius, or occasionally one absurd irregular shape (e.g. border-radius: 60% 5% 80% 10%) as a joke — never a tasteful 8px.
- Border treatment: 3px solid #000000 — Borders vary wildly on purpose: 3px solid black here, 1px dotted red there, none where you'd expect one. Mismatched by intent.

### Shadows

- none: `none` — Default — depth illusions are exactly the kind of polish being refused
- wrong: `8px -6px 0 #ff0000` — Occasional deliberately incorrect offset shadow in a clashing color, applied to one element that least deserves it

### Layout

- Max content width: 1600px
- Broken grid: columns of different widths that don't align, elements overlapping via negative margins and z-index
- Rotated text blocks (arbitrary angles like -7deg or 13deg)
- Marquee strips scrolling opposing directions
- Full-bleed sections that crash into fixed elements
- Huge type colliding with tiny type in the same view

### Effects

- Scrolling marquee text strips
- Custom cursor swaps (crosshair, wait, or an image cursor) per section
- Glitch treatment on hover: clip-path slices and RGB channel offsets
- Blink or flicker on a single element per page
- Image elements with visible default alt-text styling or intentional low-res pixelation

### Motion

- Easing: steps(2, jump-none); durations 50ms / 120ms / 2000ms
- Motion is either abrupt (stepped, instant swaps) or absurdly slow (marquees, 2s crawls) — never smooth mid-range easing
- Hover states overcorrect: elements jump position, invert colors, or swap fonts
- One deliberately annoying loop per page maximum, and it must be pausable

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffff00;
  --color-surface: #00ff00;
  --color-text: #000000;
  --color-accent: #ff00ff;
  --color-accent-red: #ff0000;
  --color-accent-blue: #0000ff;
  --color-text-invert: #ffffff;
  --radius-none: 0px;
  --shadow-wrong: 8px -6px 0 #ff0000;
  --border-default: 3px solid #000000;
  --font-display: Impact, "Arial Black", Haettenschweiler, sans-serif;
  --font-body: "Times New Roman", Times, serif;
  --font-mono: "Courier New", Courier, monospace;
  --text-base: 18px;
  --leading-heading: 0.9;
  --leading-body: 1.3;
  --tracking-heading: -0.03em;
  --tracking-body: 0;
  --ease: steps(2, jump-none);
  --duration-fast: 50ms;
  --duration-base: 120ms;
  --duration-slow: 2000ms;
}
```

All fonts are system fonts — nothing to load.

## Component recipes

- **Nav:** Underlined text links in mismatched sizes scattered across the top — some huge, some tiny, one rotated; logo may be plain text with a highlighter background
- **Hero:** Viewport-filling Impact headline in uppercase crashing off the edge, magenta box overlapping it, a marquee strip beneath, body-size Times paragraph misaligned to the left
- **Card:** A lime #00ff00 box with 3px black border, content misaligned inside, title in Impact and body in Times, rotated 2–5 degrees off-grid
- **Button (primary):** Magenta fill, white uppercase Impact text, 3px black border, no radius; hover inverts to black fill with magenta text and jumps 4px
- **Button (secondary):** Default-looking underlined blue text link, deliberately undersized next to the shouting primary
- **Form fields:** Near-default browser input but wrong-sized (either enormous or cramped), 3px black border, yellow bg; focus inverts the field to black with yellow text

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A composition that looks like a mistake made loudly on purpose: Impact headline crashing into Times body text, magenta boxes overlapping a scrolling marquee, elements rotated and misaligned so the grid is visibly, proudly broken. Spend boldness here; keep everything else quiet.

## Do

- Break one convention per element loudly rather than all conventions mushily — the violations must look chosen
- Clash saturated primaries and default-web colors with total commitment
- Mix typefaces that should never meet (Impact against Times against Courier) at exaggerated size gaps
- Keep underlying HTML semantic and navigation actually functional beneath the chaos

## Don't

- Don't soften with tasteful spacing, balanced palettes, or consistent alignment — competence leaking through kills the effect
- No gradients, glass, or soft shadows; polish is the enemy
- Don't confuse this with Memphis Design's cheerful patterned geometry or neubrutalism's tidy sticker system — anti-design refuses systems entirely
- Don't sacrifice the actual purchase/reading flow; the chaos is staged, the checkout must work

## Accessibility notes

- Black on yellow (#000 on #ffff00) is excellent (~19:1), but magenta, red, and blue fills need white or black text chosen per-pair — magenta-on-yellow and red-on-lime pairs fail contrast and are decorative only
- Marquees, blinks, and glitch loops must pause under prefers-reduced-motion and never exceed three flashes per second
- Rotated and overlapping text must remain real selectable text with a sane DOM order for screen readers
- Cursor tricks must never hide the pointer over interactive elements

## Reference sites

- Balenciaga: https://www.balenciaga.com
- Arngren.net (legendary maximalist chaos): https://arngren.net
- Lings Cars: https://www.lingscars.com
- Brutalist Websites archive: https://brutalistwebsites.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip anti-design.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/anti-design.json

Settings → Capabilities → Skills → Upload skill → anti-design.zip