Monochrome Minimalism

---
name: monochrome-minimalism
description: Apply the Monochrome Minimalism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Monochrome Minimalism, mentions grayscale minimal, black and white minimal, achromatic design, or describes strict grayscale palette, zero chromatic color, one grotesque family — 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
---

# Monochrome Minimalism Design System

Single-hue grayscale discipline: pure white, near-black, and exactly three grays, one grotesque family at two weights, and zero color anywhere. All hierarchy is carried by type size, weight, and position — the palette refuses to help.

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 Monochrome Minimalism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (grayscale minimal, black and white minimal, achromatic design, no-color design, mono minimal), or describes its traits: strict grayscale palette; zero chromatic color; one grotesque family; hierarchy via size and weight only; hairline gray dividers; large monochrome imagery.

## Design tokens

### Color palette

- Pure white ground: `#ffffff` (--color-bg)
- Light gray panels and code/quote blocks: `#f5f5f5` (--color-surface)
- Primary near-black text: `#111111` (--color-text)
- Subheadings and strong secondary text: `#333333` (--color-text-secondary)
- Faint metadata, timestamps, disabled states — large or decorative use only: `#999999` (--color-gray)
- The accent IS black — buttons and links use ink, differentiated by weight and underline: `#111111` (--color-accent)
- 1px hairline dividers: `#e5e5e5` (--color-border)

### Typography

- Display / headings: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Neue Haas Grotesk, premium — use Inter as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Neue Haas Grotesk, premium — use Inter as the free substitute)
- Type scale: 2 ratio, base 16px — computed steps: 16px / 32px / 64px / 128px / 256px / 512px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.1, letter-spacing -0.02em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96, 128 — Generous 8px-grid whitespace; with no color to separate regions, spacing and hairlines do all the structural work.
- Border radius: none 0px, sm 4px — 0–4px only; buttons and inputs may take the 4px, imagery stays square.
- Border treatment: 1px solid #e5e5e5 — Hairlines only. Darker borders (#111) reserved for focused inputs and the rare emphasized block.

### Shadows

- none: `none` — Perfectly flat — hierarchy comes exclusively from type scale, weight, and whitespace

### Layout

- Max content width: 1200px
- Type-led sections: oversized headline, short paragraph, hairline, repeat
- Large full-width grayscale photography or screenshots as the only 'graphic' element
- Two-column splits (text left, image right) alternating direction
- Footer as a plain hairline-topped list — no colored blocks anywhere

### Effects

- Grayscale (filter: grayscale(1)) treatment on all imagery
- Underline as the only link affordance

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 120ms / 200ms / 350ms
- Opacity and small translate fades only
- Hover inverts: black fills turn white with black border and vice versa
- No decorative or looping animation

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-text: #111111;
  --color-text-secondary: #333333;
  --color-gray: #999999;
  --color-accent: #111111;
  --color-border: #e5e5e5;
  --radius-none: 0px;
  --radius-sm: 4px;
  --border-default: 1px solid #e5e5e5;
  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}
```

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

## Component recipes

- **Nav:** 56px bar, wordmark in 600 weight left, 14px/400 links right that darken from #333 to #111 on hover; 1px #e5e5e5 bottom border
- **Hero:** 64px/600 headline in #111, 18px/400 subline in #333, one black button — no imagery required, whitespace above and below at 128px
- **Card:** White or #f5f5f5 surface, 1px hairline border, 4px radius, 24px padding, 20px/600 title over 15px/400 gray body; hover darkens the border to #111
- **Button (primary):** Solid #111 fill, white 600-weight label, 4px radius; inverts to white fill with 1px #111 border on hover
- **Button (secondary):** White fill, 1px #111 border, black label; fills to #f5f5f5 on hover
- **Form fields:** White bg, 1px #e5e5e5 border, 4px radius; focus swaps the border to #111 — no colored focus ring exists

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 completely achromatic page where a 64px/600 headline against 16px/400 body text does all the hierarchical work — no accent color exists to rescue a weak composition. Spend boldness here; keep everything else quiet.

## Do

- Push weight and size contrast hard — 64/600 against 16/400 is the minimum useful gap
- Keep exactly three grays between white and ink; more steps blur the hierarchy
- Convert all imagery to grayscale so a stray brand color never breaks the system
- Use underlines and weight, not color, to mark links and emphasis

## Don't

- No color, ever — not even a 'tasteful' blue link or a red error tint (use weight + iconography for errors)
- Don't rely on #999 for anything a user must read
- No shadows or gradients; elevation does not exist in this style
- Don't add a second typeface — one grotesque at two weights is the whole system

## Accessibility notes

- #999999 on white is ~2.8:1 and fails AA — reserve it for decorative metadata at 18px+ or pair the same info with accessible text nearby
- With no color channel, states (error, success, focus) must be encoded in weight, borders, underline, and icons — test forms with this in mind
- #111 and #333 on white both pass AAA

## Reference sites

- Vercel: https://vercel.com
- Pentagram: https://www.pentagram.com
- Cargo: https://cargo.site

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

Install this skill

unzip monochrome-minimalism.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → monochrome-minimalism.zip