Skip to the collection
Trova
Browse Idea Magazine / Tokyo Graphic DesignCompare with another family →

Style sheet · 2 references

Idea Magazine / Tokyo Graphic Design

Tokyo bimonthly design journal: dual Japanese/English typesetting, bilingual grid mastery, and deep dives into world typography.

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: Idea Magazine / Tokyo Graphic Design (idea-magazine-tokyo) */
/* Evidence base: 2 curated reference(s) · Primary contrast 17.7:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #fbfaf8;
  --surface-elevated: #c8102e;
  --text-primary: #141413;
  --accent-primary: #1d4ed8;
  --border-hairline: color-mix(in srgb, #141413 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "EB Garamond", system-ui, sans-serif;
  --font-body: "Arimo", 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.

# Idea Magazine / Tokyo Graphic Design — style sheet

> Tokyo bimonthly design journal: dual Japanese/English typesetting, bilingual grid mastery, and deep dives into world typography.

Derived from 2 curated reference(s) in the `idea-magazine-tokyo` 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

- Garamond — 1/2
- Helvetica — 1/2
- Neue Haas Grotesk — 1/2
- Noto Serif JP — 1/2

## Color

- `#141413` dark neutral — 2/2
- `#fbfaf8` light neutral — 2/2
- `#1d4ed8` chromatic — 1/2
- `#c8102e` chromatic — 1/2
- `#e63329` chromatic — 1/2
- `#facc15` chromatic — 1/2

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#141413` / `#fbfaf8` — 17.7:1
- `#141413` / `#facc15` — 12:1
- `#1d4ed8` / `#fbfaf8` — 6.4:1
- `#c8102e` / `#fbfaf8` — 5.6:1

## Moves

### grid/layout

- Square modular tatami-proportioned index grid where every project cell shares a 1:1 aspect ratio, 1px hairline border, and a bilingual caption block (English grotesque left, Japanese mincho right). — 158-nippon-design-center-ndc-kenya-hara-archival-grid
- Combines vertical `writing-mode: vertical-rl` issue spines along the right viewport rail with a dense 5-column horizontal story matrix separated by 1px solid ink rules. — 159-popeye-magazine-tokyo-high-density-city-boy-editorial-index

### typography

- Micro-scale index numerals (`001`–`148`) set at 11px monospace anchor the top-left corner of every grid cell, allowing dense catalog browsing without visual clutter. — 158-nippon-design-center-ndc-kenya-hara-archival-grid

### component pattern

- Issue badges use circular rotary date stamps ('ISSUE 932 · TOKYO') overlapping thumbnail corners by 12px to break the rigid rectangular grid. — 159-popeye-magazine-tokyo-high-density-city-boy-editorial-index

## References

- 158-nippon-design-center-ndc-kenya-hara-archival-grid — Nippon Design Center (NDC) — Kenya Hara Archival Grid (exemplar)
- 159-popeye-magazine-tokyo-high-density-city-boy-editorial-index — POPEYE Magazine Tokyo — High-Density City Boy Editorial Index

Type

Loadable Open-Source Stand-Ins

  • Garamond (licensed) → EB Garamond
  • Helvetica (macOS only) → Arimo
  • Neue Haas Grotesk (licensed) → Inter

Color

Pairs that read

  • Steal this.#141413 on #fbfaf8 · 17.7:1
  • Steal this.#141413 on #facc15 · 12:1
  • Steal this.#1d4ed8 on #fbfaf8 · 6.4:1
  • Steal this.#c8102e on #fbfaf8 · 5.6:1

Moves

grid/layout

typography

component pattern

References