Customize Overview 1.2.2

Customize VelinStyle with design tokens, CSS variables, 13 optional themes, and cascade layers — without waiting for the planned Utility Engine. Deutsche Version.

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Start here to pick a path: tokens → theme CSS → component CSS variables.
Keep brand changes on semantic tokens so components and utilities stay consistent.

When not

Do not fork the entire CSS bundle for a color swap — override tokens or load a theme file.
Do not invent Studio or Utility Engine APIs that are still planned.

Design tokens

Named values in src/tokens/ as CSS custom properties:

:root {
  --velin-color-primary: oklch(38% 0.18 250);
  --velin-space-4: 1rem;
  --velin-font-display: "Inter", system-ui, sans-serif;
  --velin-radius-md: 0.5rem;
  --velin-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.06), 0 2px 4px oklch(0% 0 0 / 0.04);
}

Guides: CSS Variables · Color · Design tokens.

Themes

Light/dark plus 13 brand themes (midnight, ocean, forest, …) — see Color Modes.

CSS cascade layers

Tokens → base → components → utilities. Your unlayered CSS or a later layer wins without specificity wars.

Source CSS

Import modular CSS from src/ for custom builds, or ship dist/velinstyle.min.css and override tokens.