Theming

• 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 labelsUppercase Geist Mono microlabels with wide tracking carry metadata, navigation, and indexes via the.labelutility.

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

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

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

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

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

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

The mono microlabel is the workhorse of the Swiss layout. Apply.labelto any element.

@layer utilities {
  .label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 500;
  }
}

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.

: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;
}