Acd Brutalist The Verge Design

---
name: acd-brutalist-the-verge-design
description: Reference DESIGN.md for hard-edge editorial publishing with saturated single-hue accent. Use when building UI components, applying design tokens, or implementing visual styles for brutalist the verge.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, brutalist, claude-design]
---

# The Verge — Neon Brutalist Design Mode

You are an expert in the The Verge — Neon Brutalist aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for hard-edge editorial publishing with saturated single-hue accent.

## 1. Visual Theme & Atmosphere

Neon brutalist. Hard edges, deliberate-ugly type mixing, oversized numerals, a single saturated hue doing all the heavy lifting. Confident, loud, built to be remembered.

Mood: decisive, opinionated, zero apology.

## 2. Color Palette & Roles

```
--bg:              #ffffff
--bg-inverse:      #000000
--text:            #000000
--text-inverse:    #ffffff
--accent:          #ff6600
--accent-hover:    #e55c00
--border:          #000000
--rule:            #000000
```

One accent. One neutral pair. That's it.

## 3. Typography Rules

- **Display:** `Polysans Median`, fallback `Neue Haas Grotesk Display`. Weight 700. Letter-spacing −2%.
- **Editorial body:** `Polysans Neutral`, fallback `Söhne`.
- **Pull quotes / callouts:** editorial serif (`GT Super`, `Portrait`), italics allowed.
- **Numerals / dates:** oversized, tracked wide, tabular.

Scale: 13 / 16 / 20 / 28 / 44 / 68 / 108 / 168. Go enormous for headlines.

Mix sans and serif aggressively — the tension is the aesthetic.

## 4. Component Stylings

**Buttons**
- Primary: `--accent` fill, black text, radius 0, padding 14/24, weight 700, uppercase.
- Hover: black fill, white text. Snaps instantly, no transition.

**Cards / articles**
- No card. Rules separate items — 2px black horizontal lines.
- Category tag above headline in uppercase `--accent` color.

**Nav**
- Full-width black bar, white logo, orange active indicator.
- Category links in uppercase, tracked.

**Images**
- Cropped tight, edge-to-edge. No rounded corners. Captions in mono.

## 5. Layout Principles

- Full-bleed content sections.
- 12-column grid with asymmetric article layouts (2-col + 1-col pull).
- 2px rules everywhere instead of whitespace.
- Oversized numerals as page anchors (issue numbers, dates).

## 6. Depth & Elevation

Flat. Zero shadows. Depth comes from 2px rules, inversion (black on white → white on black), and size contrast.

## 7. Do's and Don'ts

**Do**
- Mix serif and sans in the same headline.
- Use oversized numerals as graphic elements.
- Invert sections aggressively (white → black → orange).

**Don't**
- Round any corner.
- Introduce a secondary accent.
- Soften with drop shadows or blur.
- Use Inter anywhere (it's too neutral).

## 8. Responsive Behavior

- Headlines scale 168 → 48 on mobile.
- 2px rules remain 2px.
- Asymmetric layouts collapse to single column, rules stay.

## 9. Agent Prompt Guide

Bias: black + white + one saturated hue, oversized headlines, 2px rules, aggressive sans/serif mixing, 0px radius, full-bleed sections.

Reject: rounded corners, soft shadows, pastel palettes, Inter as display face, glassmorphism.

## When to Use This Mode

- When user references **the-verge** or the **brutalist** family as inspiration
- When building UI in the brutalist aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic