Design tokens for the Swiss UI system, built on the principles of Swiss Design (International Typographic Style) — functional, minimal, grid-first.
Tokens are available as CSS custom properties, SCSS variables, and JavaScript/TypeScript exports. Both light and dark themes are included.
npm install @swiss-ui/tokens@import "@swiss-ui/tokens/css";
.button {
color: var(--color-text-primary);
background: var(--color-background-primary);
font-family: var(--font-family-sans);
font-size: var(--font-size-sm);
padding: var(--spacing-2) var(--spacing-4);
border: var(--border-width-thin) solid var(--color-border-default);
border-radius: var(--border-radius-sm);
transition: all var(--motion-duration-fast) var(--motion-easing-standard);
}@import "@swiss-ui/tokens/scss";
.button {
color: $color-text-primary;
background: $color-background-primary;
padding: $spacing-2 $spacing-4;
}import { tokens, themeTokens, type Tokens } from '@swiss-ui/tokens';
// Light theme (default)
const color = tokens.color.text.primary;
const gap = tokens.spacing[4];
// Both themes
const light = themeTokens.light;
const dark = themeTokens.dark;The CSS output uses the [data-theme="dark"] attribute selector. To activate the dark theme, set the attribute on the root element:
<html data-theme="dark">For SCSS and JS, use the separate dark token exports included in the package.
| Category | Description | Example CSS variable |
|---|---|---|
| Color | Primitives (gray scale, Swiss red) and semantic aliases | --color-text-primary |
| Spacing | 4px-based scale from 0 to 128px | --spacing-4 → 16px |
| Typography | Font family, weight, size, line height | --font-size-base → 16px |
| Border | Radius and width | --border-width-thin → 1px |
| Shadow | Subtle and medium elevation | --shadow-subtle |
| Motion | Duration (150ms / 250ms) and easing | --motion-duration-fast |
| Z-index | Layering scale: base / overlay / modal / tooltip | --z-index-modal → 1000 |
| Breakpoint | Responsive breakpoints (sm / md / lg / xl) | --breakpoint-md → 768px |
Grayscale gray-100 (#F5F5F5) → gray-900 (#212121)
Accent color-red-swiss (#E63329) — classic Swiss red
| Token | Value |
|---|---|
spacing-0 |
0px |
spacing-1 |
4px |
spacing-2 |
8px |
spacing-3 |
12px |
spacing-4 |
16px |
spacing-5 |
24px |
spacing-6 |
32px |
spacing-8 |
48px |
spacing-10 |
64px |
spacing-12 |
96px |
spacing-16 |
128px |
Tokens are defined in sd-tokens/ as JSON and compiled via Style Dictionary v4.
npm run buildOutput lands in dist/ — ESM, CommonJS, CSS, SCSS, and TypeScript declarations.
GNU AGPL-3.0-only — AnmiTaliDev <anmitalidev@nuros.org>