Brutalist-Minimal Hybrid

---
name: brutalist-minimal-hybrid
description: Apply the Brutalist-Minimal Hybrid visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Brutalist-Minimal Hybrid, mentions minimal brutalism, clean brutalist, brutalist lite, or describes black and white plus one loud accent, heavy grotesque display type, exposed 1px ruled grid — 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
---

# Brutalist-Minimal Hybrid Design System

Brutalist boldness disciplined by minimal restraint: black-on-white with one loud accent, oversized heavy grotesque type, exposed 1px ruled grids and index tables, generous whitespace, and the occasional hard offset shadow — chaos, but measured.

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 Brutalist-Minimal Hybrid.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (minimal brutalism, clean brutalist, brutalist lite, swiss brutalism, measured chaos), or describes its traits: black and white plus one loud accent; heavy grotesque display type; exposed 1px ruled grid; index-table layouts; generous whitespace; occasional hard offset shadow.

## Design tokens

### Color palette

- Stark white ground: `#ffffff` (--color-bg)
- Pure black ink: `#000000` (--color-text)
- Secondary copy and table metadata: `#404040` (--color-text-muted)
- One loud orange-red — display type, fills behind black text, hover floods; never small body text: `#ff4d00` (--color-accent)
- 1–2px black rules and table lines: `#000000` (--color-border)

### Typography

- Display / headings: Archivo (fallback: Arial Black, Helvetica Neue, sans-serif)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.5 ratio, base 16px — computed steps: 16px / 24px / 36px / 54px / 81px / 122px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 900, line-height 1.1, letter-spacing -0.02em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 40, 64, 96, 144 — Generous whitespace between dense, hard-edged clusters — tight ruled tables and heavy type blocks floating in calm emptiness.
- Border radius: none 0px — Zero radius everywhere, including buttons and inputs.
- Border treatment: 1px solid #000000 — 1px for grid rules and tables, 2px for emphasized frames and buttons. Always pure black.

### Shadows

- none: `none` — Default state — surfaces are flat and hierarchy comes from type weight and rules
- hard: `6px 6px 0 #000000` — Occasional emphasis: one hero frame or hover state per view, never applied everywhere like neubrutalism

### Layout

- Max content width: 1400px
- Full-width 1px rules divide the page into exposed horizontal bands
- Project/work lists as ruled index tables: number, title, category, year
- Uppercase micro-labels (12px, letterspaced) tag sections like an archive
- Asymmetric placement: a massive headline block against a small ruled data table

### Effects

- Full-bleed ruled tables with row hover inverting to black-on-accent or white-on-black
- Uppercase letterspaced micro-labels (SECTION 01 — WORK)
- Occasional monospace-style tabular numerals for indexes

### Motion

- Easing: steps(1, end); durations 0ms / 100ms / 200ms
- State changes snap — instant inversions on hover, no eased fades
- Table rows flood with accent or black instantly on hover
- Reserve any smooth motion (100–200ms max) for layout shifts, not decoration

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #404040;
  --color-accent: #ff4d00;
  --color-border: #000000;
  --radius-none: 0px;
  --shadow-hard: 6px 6px 0 #000000;
  --border-default: 1px solid #000000;
  --font-display: Archivo, "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.5;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: steps(1, end);
  --duration-fast: 0ms;
  --duration-base: 100ms;
  --duration-slow: 200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Archivo:wght@700;900&family=Inter:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Full-width 1px-ruled band: wordmark in 900-weight caps left, uppercase 12px letterspaced links right; hover inverts each link to a black fill with white text
- **Hero:** A 72–120px Archivo 900 statement, flush left, with one word flooded in #ff4d00; below it a small ruled table of facts (location, founded, contact) instead of a subline
- **Card:** Not a card — a table row: 1px rules top and bottom, index number, 24px heavy title, metadata right-aligned; hover inverts the whole row
- **Button (primary):** Black fill, white 600-weight uppercase label, square, 2px black border; hover swaps to accent fill with black text, instantly
- **Button (secondary):** White fill, 2px black border, black uppercase label; hover inverts to black/white
- **Form fields:** Square input with 1px black border and uppercase 12px label above; focus thickens the border to 2px — no rings, no glow

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

An exposed 1px-ruled index table — rows of projects with number, title in heavy caps, and year — sitting in generous whitespace, with exactly one element per view allowed a loud accent fill or a hard 6px offset shadow. Spend boldness here; keep everything else quiet.

## Do

- Expose the structure: rules, indexes, counts, and labels — the archive apparatus is the decoration
- Ration brutality: one hard shadow or one accent flood per view keeps it 'measured'
- Push the display weight to 900 and keep body copy small and plain for maximum contrast
- Use instant, snapping state changes — hesitant fades read as a different style

## Don't

- No rounded corners, soft shadows, or gradients
- Don't use multiple candy accents or sticker shadows everywhere — that is neubrutalism, not this
- Don't fill the whitespace; the calm between hard elements is the 'minimal' half of the hybrid
- Never set small body text in the accent color

## Accessibility notes

- Accent #ff4d00 on white is ~3.3:1 and fails AA for text — use it only for large display type (24px+/700), fills behind black text, and non-text highlights; body links stay black and underlined
- Black on white and #404040 on white pass AAA
- Instant hover inversions are fine, but any translate/flood animation must respect prefers-reduced-motion
- Uppercase letterspaced micro-labels should stay at or above 12px for legibility

## Reference sites

- Obys Agency: https://obys.agency
- Hoverstates: https://www.hoverstat.es
- Godly: https://godly.website

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

Install this skill

unzip brutalist-minimal-hybrid.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/brutalist-minimal-hybrid.json

Settings → Capabilities → Skills → Upload skill → brutalist-minimal-hybrid.zip