Theming

A monochrome oklch palette with a single signal accent, zero border radius, hairline borders, and the .label utility.

Principles

MonochromeA strict neutral palette defined in oklch with a single orange-red signal accent reserved for emphasis, status, and numbered indexes.
HairlineSquare corners and 1px structural borders. Layout is framed withborder-foregroundand gap-px grids instead of shadows.
Mono labelsThe `.label` utility uses uppercase Geist Mono with wide tracking to carry metadata, navigation, and indexes via the.labelutility.

Base & surfaces

Neutral tones for page, surfaces, and quiet fills. Every token has a matching -foreground pair where it holds text.

background--background

foreground--foreground

card--card

popover--popover

muted--muted

accent--accent

secondary--secondary

Lines

Structural hairlines. Borders, input outlines, and focus rings are all derived from the same neutral scale.

border--border

input--input

ring--ring

Semantic & signal

The signal accent is the only chromatic color in the system. Use it sparingly for emphasis and active states.

primary--primary

destructive--destructive

signal--signal

New01 / IndexAn accented link

Signal divider

Charts

Chart series step through the neutral scale with the signal accent as the single highlight.

chart-1--chart-1

chart-2--chart-2

chart-3--chart-3

chart-4--chart-4

chart-5--chart-5

Radius

Every radius step is set to zero, so corners stay square across the whole system.

css

@theme inline {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
}

The .label utility

The `.label` utility is the workhorse of the Swiss layout. Apply.labelto any element or component. For CJK locales, styles adapt automatically via :lang()— see the CJK guide.

ComponentsMetadataActive

css

@layer utilities {
  .label {
    font-family: var(--label-font);
    font-size: 0.75rem;
    line-height: 1;
    font-weight: var(--label-weight);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
  }
}

CSS variables

Tokens live in your global stylesheet as oklch CSS variables. The swiss style installs this block for you; copy it into globals.css and tune the values to rebrand the system.

css

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0 0);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: oklch(0.13 0 0);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.96 0 0);
  --muted: oklch(0.965 0 0);
  --muted-foreground: oklch(0.44 0 0);
  --accent: oklch(0.95 0 0);
  --destructive: oklch(0.55 0.2 27);
  --border: oklch(0.86 0 0);
  --input: oklch(0.84 0 0);
  --ring: oklch(0.13 0 0);
  --signal: oklch(0.57 0.224 27);
  --radius: 0rem;
}

Dark mode

Dark mode is driven by next-themes, which toggles a.darkclass on the root element. Each token is redefined under.dark. Try it:

css

.dark {
  --background: oklch(0.12 0 0);
  --foreground: oklch(0.97 0 0);
  --primary: oklch(0.97 0 0);
  --primary-foreground: oklch(0.13 0 0);
  --muted: oklch(0.2 0 0);
  --muted-foreground: oklch(0.64 0 0);
  --border: oklch(0.28 0 0);
  --signal: oklch(0.63 0.23 27);
}