Skip to content

Direction 05 / 06

Swiss.

Rational, confident, poster-like. Achromatic neutrals, black type, a visible grid, one signal red.

light-firstSchibsted Grotesk · JetBrains Monoradius 0remupdated 16 Sept 2026

Everything inside this frame is rendered in Swiss: its fonts, radius, motion and palette.

Scheme

Example · Form/Index

01 — Exhibition

Grids, 1957–1972.

Posters, catalogues and signage from the decade typography learned to measure. Zurich, 12 October to 4 January.

Book ticketsProgramme

Form/Index

12.10 — 04.01

readybrand↵

Type

Display Schibsted Grotesk 700, text Schibsted Grotesk, mono JetBrains Mono. SIL OFL 1.1.

text-display-lg

Aa Bb 0123

text-display-sm

Measure twice, ship once

text-2xl

Section heading at reading size

text-md

Body copy runs at sixteen pixels with a comfortable measure and pretty wrapping.

text-sm

Interface text: buttons, navigation, table cells.

label-mono

Label · 11px · tracked

font-mono

const lcp = 1180; // ms

Palette

Semantic tokens in OKLCH, a separate scale per scheme. Contrast gate: 66 checks passed, 0 failed.

tightest: light --fg on --surface-hover 15.77:1 Lc93

light

bg #ffffff

Surfaces

  • bg100% 0 0
  • bg-subtle96.5% 0 0
  • surface100% 0 0
  • surface-raised100% 0 0
  • surface-hover94% 0 0

Text

  • fg18% 0 0
  • fg-muted44% 0 0
  • fg-subtle53.5% 0 0

Lines

  • line-subtle87% 0 0
  • line18% 0 0
  • line-strong18% 0 0
  • line-focus55% 0.22 29

Brand

  • brand56.5% 0.22 29
  • brand-hover51% 0.2 29
  • brand-subtle95.5% 0.022 29
  • brand-line80% 0.1 29
  • brand-text51% 0.2 29

Status

  • success47% 0.12 150
  • warning50% 0.11 70
  • danger47% 0.18 15

dark

bg #090909

Surfaces

  • bg14% 0 0
  • bg-subtle17.5% 0 0
  • surface17.5% 0 0
  • surface-raised21% 0 0
  • surface-hover24% 0 0

Text

  • fg96% 0 0
  • fg-muted78.5% 0 0
  • fg-subtle61% 0 0

Lines

  • line-subtle100% 0 0 / 0.12
  • line100% 0 0 / 0.3
  • line-strong96% 0 0
  • line-focus70% 0.18 29

Brand

  • brand56.5% 0.22 29
  • brand-hover52% 0.2 29
  • brand-subtle26% 0.07 29
  • brand-line45% 0.15 29
  • brand-text80% 0.114 29

Status

  • success79% 0.13 150
  • warning82% 0.12 80
  • danger79% 0.122 15

Depth, radius, motion

Elevation

shadow-1
shadow-2
shadow-3

Radius · knob 0rem

sm
lg
xl
2xl

Motion · hover to play

linear

fast 0ms · base 100ms

slow 150ms · slower 300ms

When to use it

Use for
agencies, architecture, type/design tools, events, portfolios, data journalism
Avoid for
friendly consumer onboarding, soft brands
Signature
12-column grid with asymmetric spans (label col 3 / content col 9); flush-left ragged right; full-contrast 1px rules (border-line is ink here); numbered sections "01 —" in mono; huge type contrast; hover = invert (bg-fg text-bg); radius 0; mechanical linear motion.
Don't
shadows, rounded anything, centred body text, more than 2 weights, decorative icons.

Install

One import after the base, plus the fonts. Every component keeps working.

packages/tokens/css/directions/swiss.css
css
/* src/app/globals.css */
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/swiss.css";
ts
// src/app/layout.tsx
import { Schibsted_Grotesk, JetBrains_Mono } from "next/font/google";
const sans = Schibsted_Grotesk({ subsets: ["latin"], variable: "--font-schibsted", display: "swap" });
const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains-mono", display: "swap" });

All directions · View as Markdown