Skip to the collection
Trova
Browse De Stijl / NeoplasticismCompare with another family →

Style sheet · 1 reference

De Stijl / Neoplasticism

Piet Mondrian pure orthogonal red, yellow, blue planes bounded by thick black perpendicular grid bars on pure white ground.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: De Stijl / Neoplasticism (de-stijl-neoplasticism) */
/* Evidence base: 1 curated reference(s) · Primary contrast 17.6:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f8f7f2;
  --surface-elevated: #e31c25;
  --text-primary: #111111;
  --accent-primary: #0051ba;
  --border-hairline: color-mix(in srgb, #111111 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "IBM Plex Mono", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# De Stijl / Neoplasticism — style sheet

> Piet Mondrian pure orthogonal red, yellow, blue planes bounded by thick black perpendicular grid bars on pure white ground.

Derived from 1 curated reference(s) in the `de-stijl-neoplasticism` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- IBM Plex Mono — 1/1
- Neue Haas Grotesk — 1/1

## Color

- `#111111` dark neutral — 1/1
- `#0051ba` chromatic — 1/1
- `#e31c25` chromatic — 1/1
- `#ffde00` chromatic — 1/1
- `#f8f7f2` light neutral — 1/1

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#111111` / `#f8f7f2` — 17.6:1
- `#111111` / `#ffde00` — 14.1:1
- `#0051ba` / `#f8f7f2` — 6.8:1
- `#0051ba` / `#ffde00` — 5.4:1

## Moves

### grid/layout

- Asymmetric neoplasticism grid constructed from 4px solid #111111 orthogonal structural rules that divide the viewport into unequal rectangular planes of warm white, red, blue, and yellow. — 164-stedelijk-museum-de-stijl-rietveld-orthogonal-grid-archive

### typography

- All headings sit flush against the top-left inner corner of their structural cell with 16px uniform inset padding, letting the heavy black grid bars carry the entire visual rhythm. — 164-stedelijk-museum-de-stijl-rietveld-orthogonal-grid-archive

## References

- 164-stedelijk-museum-de-stijl-rietveld-orthogonal-grid-archive — Stedelijk Museum — De Stijl & Rietveld Orthogonal Grid Archive (exemplar)

Type

Loadable Open-Source Stand-Ins

  • Neue Haas Grotesk (licensed) → Inter

Color

Pairs that read

  • Steal this.#111111 on #f8f7f2 · 17.6:1
  • Steal this.#111111 on #ffde00 · 14.1:1
  • Steal this.#0051ba on #f8f7f2 · 6.8:1
  • Steal this.#0051ba on #ffde00 · 5.4:1

Moves

grid/layout

typography

References