De Stijl / Mondrian

---
name: de-stijl-mondrian
description: Apply the De Stijl / Mondrian visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" De Stijl / Mondrian, mentions De Stijl, Mondrian style, neoplasticism, or describes thick black grid lines, primary color blocks, white field — 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
---

# De Stijl / Mondrian Design System

Dutch neoplasticism, 1917 onward: rectangular blocks of primary red, yellow, and blue locked into a white field by thick black grid lines. Strictly horizontal and vertical, asymmetrically balanced, and reduced to the absolute elements of color and line.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as De Stijl / Mondrian.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (De Stijl, Mondrian style, neoplasticism, primary block grid, Rietveld style), or describes its traits: thick black grid lines; primary color blocks; white field; strict horizontal-vertical geometry; asymmetric block composition; zero curves or diagonals.

## Design tokens

### Color palette

- Pure white canvas: `#ffffff` (--color-bg)
- Black text, same ink as the grid lines: `#111111` (--color-text)
- Mondrian red — primary accent blocks and CTAs: `#e70503` (--color-accent)
- Mondrian yellow — fill blocks and highlights (never text): `#f9d616` (--color-accent-yellow)
- Mondrian blue — links and secondary blocks: `#0d47a1` (--color-accent-blue)
- The black lattice: borders, dividers, frames: `#111111` (--color-line)
- Faint off-white for large neutral cells: `#f7f7f5` (--color-surface)

### Typography

- Display / headings: Archivo Black (fallback: Arial Black, Helvetica, sans-serif) (ideal: Architype Van Doesburg, premium — use Archivo Black as the free substitute)
- Body: Work Sans (fallback: Helvetica, Arial, sans-serif)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.1, letter-spacing 0, uppercase
- Body: line-height 1.2, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Modular: content lives inside grid cells whose black borders are the spacing system. Cells vary in size dramatically — some large and empty, some tight.
- Border radius: none 0px — Absolutely no rounding anywhere. Neoplasticism permits only the right angle.
- Border treatment: 6px solid #111111 — The lattice: 4–8px black lines. Use border-collapse thinking — adjacent cells share a single line, never doubled.

### Shadows

- none: `none` — The composition is a flat painted plane; any depth cue breaks the neoplastic doctrine

### Layout

- Max content width: 1280px
- CSS grid with intentionally unequal tracks (e.g. 1fr 3fr 1.5fr) — never uniform cells
- Black lines rendered as shared cell borders or grid gap filled with the line color
- Fill roughly 20–30% of cells with primary color; the majority stay white
- Asymmetric balance: one large colored block countered by small distant ones
- Lines may run off the viewport edge, implying the grid continues

### Effects

- Occasional partial line: a black bar that stops mid-cell, as in late Mondrian
- Color-block hover states that swap a white cell to a primary fill

### Motion

- Easing: cubic-bezier(0.2, 0, 0, 1); durations 100ms / 180ms / 300ms
- Blocks slide strictly along horizontal or vertical axes — never diagonally
- Grid lines can draw in (scaleX/scaleY from 0) on first paint
- Color fills snap or fade quickly; no easing curves that imply bounce or elasticity

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-accent: #e70503;
  --color-accent-yellow: #f9d616;
  --color-accent-blue: #0d47a1;
  --color-line: #111111;
  --color-surface: #f7f7f5;
  --radius-none: 0px;
  --border-default: 6px solid #111111;
  --font-display: "Archivo Black", "Arial Black", Helvetica, sans-serif;
  --font-body: "Work Sans", Helvetica, Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.2;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 100ms;
  --duration-base: 180ms;
  --duration-slow: 300ms;
}
```

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

## Component recipes

- **Nav:** White bar closed by a 6px black bottom line; wordmark in a black cell at far left; links separated by full-height 6px black dividers, one link cell filled yellow as the active marker
- **Hero:** A Mondrian lattice hero: headline in a large white cell, red cell holding the CTA, small blue and yellow cells as pure composition, all divided by 6–8px black lines
- **Card:** White cell with 6px black border, title bar as a colored sub-cell (red/blue) with white or black text, body in the white area, 24px padding, zero radius
- **Button (primary):** Red fill, white bold uppercase label, 4px black border, square; hover swaps to blue fill
- **Button (secondary):** White fill, 4px black border, black uppercase label; hover fills yellow (black text)
- **Form fields:** White cell with 4px black border; focus thickens the border to 6px; labels sit in their own small bordered cell above

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

The Mondrian lattice: 4–8px solid black lines dividing the canvas into unequal rectangles, a few of which are filled with pure red, yellow, or blue while the rest stay white. Spend boldness here; keep everything else quiet.

## Do

- Build the page as one continuous lattice — the borders ARE the layout
- Keep tracks unequal; a uniform grid reads as a spreadsheet, not a Mondrian
- Leave most cells white; primary fills gain power from scarcity
- Restrict every line to horizontal or vertical

## Don't

- No diagonals, curves, or rounded corners of any kind
- No tints, gradients, or off-primary hues — red, yellow, blue at full strength only
- Don't double-up borders where cells meet; lines must read as one continuous stroke
- Don't place body text on red or blue fills; text belongs on white

## Accessibility notes

- Yellow (#f9d616) fails contrast on white — yellow cells must carry black text or no text at all
- Red (#e70503) on white is about 4.8:1 — acceptable for text, but white text on red only works at 18.5px+/bold, which the uppercase display style satisfies
- The heavy lattice creates many strong edges; maintain generous cell padding (24px+) so text never touches the black lines
- Ensure the visual grid order matches DOM order for keyboard and screen-reader navigation

## Reference sites

- Kunstmuseum Den Haag (largest Mondrian collection): https://www.kunstmuseum.nl
- Tate — De Stijl: https://www.tate.org.uk/art/art-terms/d/de-stijl
- Rietveld Schröder House: https://www.rietveldschroderhuis.nl

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

Install this skill

unzip de-stijl-mondrian.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/de-stijl-mondrian.json

Settings → Capabilities → Skills → Upload skill → de-stijl-mondrian.zip