---
title: "Swiss direction"
description: "Swiss: Rational, confident, poster-like. Achromatic neutrals, black type, a visible grid, one signal red."
canonical: https://void-design.vercel.app/directions/swiss
lastModified: 2026-09-16
---

# Swiss

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

direction 05/06 · light-first · Schibsted Grotesk · JetBrains Mono · radius 0rem

Everything below the page header is rendered in Swiss: its fonts, radius, motion and palette, with a switch between its light and dark schemes.

## Type

Display Schibsted Grotesk 700, text Schibsted Grotesk, mono JetBrains Mono (SIL OFL 1.1). The scale is closed: text-display-lg, text-display-sm, text-2xl, text-md, text-sm, label-mono, font-mono.

## 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.

| Token | Light | Dark |
| --- | --- | --- |
| --bg | oklch(100% 0 0) | oklch(14% 0 0) |
| --bg-subtle | oklch(96.5% 0 0) | oklch(17.5% 0 0) |
| --surface | oklch(100% 0 0) | oklch(17.5% 0 0) |
| --surface-raised | oklch(100% 0 0) | oklch(21% 0 0) |
| --surface-hover | oklch(94% 0 0) | oklch(24% 0 0) |
| --surface-active | oklch(90.5% 0 0) | oklch(28% 0 0) |
| --line | oklch(18% 0 0) | oklch(100% 0 0 / 0.3) |
| --line-subtle | oklch(87% 0 0) | oklch(100% 0 0 / 0.12) |
| --line-strong | oklch(18% 0 0) | oklch(96% 0 0) |
| --line-focus | oklch(55% 0.22 29) | oklch(70% 0.18 29) |
| --fg | oklch(18% 0 0) | oklch(96% 0 0) |
| --fg-muted | oklch(44% 0 0) | oklch(78.5% 0 0) |
| --fg-subtle | oklch(53.5% 0 0) | oklch(61% 0 0) |
| --fg-faint | oklch(63% 0 0) | oklch(50% 0 0) |
| --fg-on-brand | oklch(100% 0 0) | oklch(100% 0 0) |
| --brand | oklch(56.5% 0.22 29) | oklch(56.5% 0.22 29) |
| --brand-hover | oklch(51% 0.2 29) | oklch(52% 0.2 29) |
| --brand-subtle | oklch(95.5% 0.022 29) | oklch(26% 0.07 29) |
| --brand-line | oklch(80% 0.1 29) | oklch(45% 0.15 29) |
| --brand-text | oklch(51% 0.2 29) | oklch(80% 0.114 29) |
| --success | oklch(47% 0.12 150) | oklch(79% 0.13 150) |
| --success-subtle | oklch(95.5% 0.035 150) | oklch(25% 0.045 150) |
| --warning | oklch(50% 0.11 70) | oklch(82% 0.12 80) |
| --warning-subtle | oklch(96% 0.042 85) | oklch(26% 0.045 75) |
| --danger | oklch(47% 0.18 15) | oklch(79% 0.122 15) |
| --danger-subtle | oklch(95.5% 0.022 15) | oklch(26% 0.06 15) |
| --grain-opacity | 0 | 0 |

## Depth, radius, motion

Elevation shadow-1, shadow-2, shadow-3. Radius knob 0rem: rounded-sm, rounded-lg, rounded-xl, rounded-2xl. Motion 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:** friendly consumer onboarding, soft brands
- **Token file:** `packages/tokens/css/directions/swiss.css`

## 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

```css
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/swiss.css";
```

```ts
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" });
```