Swiss

The grid is the design. Achromatic ground, one accent, hairline or no separator, sharp corners, left-aligned.

3 variants • grid contract

When to use it

Reach for it when the grid should carry the design and the chrome should get out of the way.

Contract: grid

A family is a set of token names plus structural rules. A variant is one set of values poured into them. Every variant below satisfies this contract, so swapping between them is a palette change, not a rewrite.

Required

--bg--text--line

Optional

--muted--link--focus

Structural tokens

border-radius0 in the classic and trophy-wall variants
gap0 in trophy-wall; the hairline between cells is the only separator
max-colors-per-composition3
text-alignmentleft

Variants

Same contract, different values. Click a swatch to copy it.

Swiss International

reference

Black, white, red. Mathematical spacing on an 8px grid.

Copied
--bg
#ffffff
Copied
--bg-secondary
#f8f9fa
Copied
--bg-dark
#000000
Copied
--text
#000000
Copied
--muted
#666666
Copied
--text-light
#ffffff
Copied
--accent
#ff0000
Copied
--accent-dark
#cc0000
Copied
--line
#e0e0e0
Copied
--line-dark
#333333
Copied
gray-100
#f8f9fa
Copied
gray-200
#e9ecef
Copied
gray-400
#ced4da
Copied
gray-600
#6c757d
Copied
gray-800
#343a40
Copied
gray-900
#212529

Used on

/design/swiss/
paste-ready :root 
/* Swiss International */
:root {
  /* colors */
  --bg: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-dark: #000000;
  --text: #000000;
  --muted: #666666;
  --text-light: #ffffff;
  --accent: #ff0000;
  --accent-dark: #cc0000;
  --line: #e0e0e0;
  --line-dark: #333333;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-400: #ced4da;
  --gray-600: #6c757d;
  --gray-800: #343a40;
  --gray-900: #212529;
}

Catalog

liveread live 2026-09-09

Light, quiet, listing-first. The chrome disappears and the items are the page.

source: https://lukesteuber.com/downloads/

Copied
--bg
#f7f7f5
Copied
--text
#171717
Copied
--muted
#666666
Copied
--line
#d8d8d3
Copied
--link
#174ea6

Structure

color-schemelight

Five tokens for a whole public download index. The restraint is the point: nothing here needs a sixth.

paste-ready :root 
/* Catalog */
:root {
  /* colors */
  --bg: #f7f7f5;
  --text: #171717;
  --muted: #666666;
  --line: #d8d8d3;
  --link: #174ea6;
  /* structure */
  --color-scheme: light;
}

Trophy Wall

liveread live 2026-09-09

Zero-gutter poster grid on near-black. The images tile edge to edge and the seam between them is the only line.

source: https://lukesteuber.com/downloads/grid/

Copied
--bg
#0a0a0a
Copied
--text
#f5f5f5
Copied
--muted
#999999
Copied
--muted-dim
#888888
Copied
--line
#222222
Copied
--tile-bg
#000000
Copied
--focus
#60a5fa

Structure

gap0
gridrepeat(3, minmax(0, 1fr)) to 640px, then 3, 4 at 960px, 5 at 1280px
aspect-ratio1080 / 1596
widthmin(calc(100% - 2rem), 1200px) on the header, 100% on the wall
focusoutline: 3px solid #60a5fa; outline-offset: -3px; z-index: 1

The inset focus ring is deliberate: with gap 0 an outset ring would be clipped by the neighbouring cell.

paste-ready :root 
/* Trophy Wall */
:root {
  /* colors */
  --bg: #0a0a0a;
  --text: #f5f5f5;
  --muted: #999999;
  --muted-dim: #888888;
  --line: #222222;
  --tile-bg: #000000;
  --focus: #60a5fa;
  /* structure */
  --gap: 0;
  --grid: repeat(3, minmax(0, 1fr)) to 640px, then 3, 4 at 960px, 5 at 1280px;
  --aspect-ratio: 1080 / 1596;
  --width: min(calc(100% - 2rem), 1200px) on the header, 100% on the wall;
  --focus: outline: 3px solid #60a5fa; outline-offset: -3px; z-index: 1;
}

Typography

font-ui
The quick brown fox jumps over the lazy dog 0123456789
font-data
The quick brown fox jumps over the lazy dog 0123456789

Stacks

font-uiHelvetica Neue, Helvetica, Arial, sans-serif
font-dataConsolas, 'Courier New', monospace

Spacing

Base unit 8px. Every gap, pad and margin is a multiple of it.

8px
16px
24px
32px
40px
48px
64px

Do / Don't

Do
  • Keep border-radius at 0 in the classic and trophy-wall variants.
  • Left-align. Centered text is not in this family.
  • Hold to three colors in one composition.
  • With gap 0, inset the focus ring (outline-offset: -3px) so a neighbouring cell cannot clip it.
Don't
  • Do not add a gutter to trophy-wall to make it breathe. The seam is the design.
  • Do not introduce a second accent alongside the link color.
  • Do not soften the corners because a component library defaults to rounded.
  • Do not add a fourth token to catalog. Five is sufficient and the restraint is legible.

Generated from themes/tokens.json v2.0.0 by build-themes.py. Values were read from the live surfaces on 2026-09-09. Edit the tokens, not this page.

Copied to clipboard