Monocle Magazine / High-Density Global

/* Synthesized from Trova family: Monocle Magazine / High-Density Global (monocle-magazine-dense) */
/* Evidence base: 3 curated reference(s) · Primary contrast 17.5:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #fbf9f4;
  --surface-elevated: #2800d7;
  --text-primary: #141413;
  --accent-primary: #000000;
  --border-hairline: color-mix(in srgb, #141413 16%, transparent);

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

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Monocle Magazine / High-Density Global — style sheet

> Plantin serif typography, compact multi-column global reportage, micro-flags, yellow paper accents, and luxury internationalism.

Derived from 3 curated reference(s) in the `monocle-magazine-dense` 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 — 3/3
- BWHaasText — 1/3
- Financier Display — 1/3
- Helvetica Neue — 1/3
- Metric — 1/3
- Neue Haas Grotesk — 1/3
- Plantin — 1/3

## Color

- `#141413` dark neutral — 2/3
- `#fbf9f4` light neutral — 2/3
- `#000000` dark neutral — 1/3
- `#2800d7` chromatic — 1/3
- `#990f3d` chromatic — 1/3
- `#b91c1c` chromatic — 1/3
- `#0d7680` muted — 1/3
- `#ff4500` chromatic — 1/3
- `#c59b27` chromatic — 1/3
- `#f2dfce` light neutral — 1/3

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#141413` / `#fbf9f4` — 17.5:1
- `#000000` / `#fbf9f4` — 20:1
- `#141413` / `#f2dfce` — 14.2:1
- `#2800d7` / `#fbf9f4` — 9.6:1

## Moves

### grid/layout

- Divide the 1440px masthead and front page into a dense 6-column newspaper grid separated by `1px solid #d6d1c4` vertical hairlines, packing 14 distinct dispatches above the fold without visual chaos. — 208-monocle-6-column-global-dispatch-grid-bureau-timezones-gold-foil-badges
- Interleave 2-column narrative journalism with inline tabular-nums financial comparison matrices that span 3 columns without breaking the vertical baseline rhythm. — 210-bloomberg-businessweek-high-density-editorial-ticker-swiss-grotesk-tables

### typography

- High-contrast wedged serif headlines (`Financier Display`) sit over compact `Metric` sans deck summaries and inline 1-day SVG equity sparklines. — 209-financial-times-salmon-newsprint-multi-column-briefing-sparkline-market-bar
- Set feature headlines in tightly tracked `Neue Haas Grotesk Bold` (`letter-spacing: -0.03em`) flush-left against heavy `4px solid #000000` top section rules and `#2800d7` ultramarine data callouts. — 210-bloomberg-businessweek-high-density-editorial-ticker-swiss-grotesk-tables

### component pattern

- Crown each dispatch with a circular `#141413` number rondel (`01`..`14`) and a live bureau header bar showing local time and weather in London, Zurich, Tokyo, and Toronto. — 208-monocle-6-column-global-dispatch-grid-bureau-timezones-gold-foil-badges

### color

- Signature `#fff1e5` warm bisque/salmon newsprint surface eliminates stark `#ffffff` glare across dense 5-column financial tables while `#990f3d` claret and `#0d7680` teal provide unmistakable semantic accents. — 209-financial-times-salmon-newsprint-multi-column-briefing-sparkline-market-bar

## References

- 208-monocle-6-column-global-dispatch-grid-bureau-timezones-gold-foil-badges — Monocle — 6-Column Global Dispatch Grid, Bureau Timezones & Gold Foil Badges (exemplar)
- 209-financial-times-salmon-newsprint-multi-column-briefing-sparkline-market-bar — Financial Times — Salmon Newsprint Multi-Column Briefing & Sparkline Market Bar
- 210-bloomberg-businessweek-high-density-editorial-ticker-swiss-grotesk-tables — Bloomberg Businessweek — High-Density Editorial Ticker & Swiss Grotesk Tables