1. Docs
2. Themes & Tokens
3. CSS Variables

CSS Variables 1.2.2

Design tokens ship as CSS custom properties under @layer tokens. Override them after loading VelinStyle — no Sass rebuild required. Deutsche Version.

When to use

• Rebrand by overriding --velin-color-*, --velin-space-*, type, radius, shadow, and motion tokens.
• Scope overrides to a section selector when only part of the page should change.

When not

• Do not invent aliases like --velin-primary or --velin-spacer-* in new code — use --velin-color-primary and --velin-space-*.
• Do not expect the Utility Engine to emit every token as a class yet.

Color

:root {
  --velin-color-primary: oklch(38% 0.18 250);
  --velin-color-on-primary: oklch(100% 0 0);
  --velin-color-surface: oklch(98% 0.005 250);
  --velin-color-text: oklch(8% 0.01 250);
  --velin-color-text-muted: oklch(28% 0.01 250);
  --velin-color-border: oklch(35% 0.01 250);
  --velin-color-success: oklch(55% 0.16 145);
  --velin-color-danger: oklch(55% 0.2 25);
  --velin-color-focus: oklch(35% 0.22 250);
}

Source: src/tokens/color.css · generated color docs.

Spacing

--velin-space-0 … --velin-space-32  /* see src/tokens/spacing.css */

Typography

--velin-font-display / --velin-font-text / --velin-font-code
--velin-font-sans / --velin-font-serif / --velin-font-mono
--velin-text-xs … --velin-text-5xl
--velin-weight-* · --velin-leading-* · --velin-tracking-*

Sources: fonts.css, typography.css.

Radius, shadow, z-index, motion

• --velin-radius-none … --velin-radius-pill
• --velin-shadow-none … --velin-shadow-2xl, --velin-shadow-inner
• --velin-z-hide … --velin-z-max (e.g. --velin-z-modal, --velin-z-toast)
• --velin-duration-*, --velin-ease-*, --velin-transition-*

Using variables

.panel {
  background: var(--velin-color-surface);
  color: var(--velin-color-text);
  border: 1px solid var(--velin-color-border);
  border-radius: var(--velin-radius-md);
  box-shadow: var(--velin-shadow-md);
  padding: var(--velin-space-4);
  transition: box-shadow var(--velin-duration-normal) var(--velin-ease-default);
}