Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Customize
  3. Overview

Customize Overview

VelinStyle is built to be customized. Use design tokens, CSS custom properties, themes, and CSS cascade layers to tailor every aspect of the framework to your brand.

Design Tokens

At the foundation of VelinStyle's theming system are design tokens — named values for colors, spacing, typography, shadows, and more. Tokens are expressed as CSS custom properties on the :root element: 

:root {
  /* Color tokens */
  --velin-primary: oklch(0.55 0.22 264);
  --velin-secondary: oklch(0.60 0.10 250);

  /* Spacing scale */
  --velin-spacer-1: 0.25rem;
  --velin-spacer-2: 0.5rem;
  --velin-spacer-3: 1rem;

  /* Typography */
  --velin-font-sans: 'Inter', system-ui, sans-serif;
  --velin-font-mono: 'JetBrains Mono', monospace;

  /* Radius */
  --velin-radius-sm: 0.25rem;
  --velin-radius: 0.5rem;
  --velin-radius-lg: 1rem;
}

CSS Custom Properties

Override any token in your own stylesheet to rebrand VelinStyle. No build step required — just load VelinStyle first, then your overrides: 

:root {
  --velin-primary: oklch(0.65 0.28 145);     /* green brand */
  --velin-radius: 1rem;                       /* rounder corners */
  --velin-font-sans: 'Poppins', sans-serif;   /* custom font */
}
Themed

Themes

VelinStyle supports multiple color modes via the data-velin-theme attribute. Each theme is a set of token overrides scoped to an attribute selector: 

[data-velin-theme="dark"] {
  --velin-body-bg: oklch(0.15 0.01 260);
  --velin-body-color: oklch(0.92 0.01 260);
  --velin-surface: oklch(0.20 0.01 260);
  --velin-border-color: oklch(0.30 0.02 260);
}

/* Create your own custom theme */
[data-velin-theme="ocean"] {
  --velin-primary: oklch(0.60 0.18 230);
  --velin-body-bg: oklch(0.12 0.03 230);
  --velin-body-color: oklch(0.90 0.02 230);
}

CSS Cascade Layers

VelinStyle organizes its styles into CSS @layer blocks, giving you full control over specificity. The layer order is:

  1. velin.reset — Reboot / normalize
  2. velin.tokens — Design tokens and custom properties
  3. velin.base — Base element styles
  4. velin.components — Component classes
  5. velin.utilities — Utility classes (highest priority)
/* Your overrides sit in an unlayered context (highest priority) */
.btn-primary {
  --velin-btn-bg: oklch(0.55 0.25 30);
}

/* Or place them in a custom layer */
@layer my-overrides {
  .card {
    --velin-card-radius: 1.5rem;
  }
}

Source CSS

VelinStyle is plain CSS (no Sass required). Override tokens on :root or [data-velin-theme] after loading the bundle, or use npx velinstyle build for subset bundles. See Optimize and CSS Variables. 

@layer velin.tokens {
  :root {
    --velin-color-primary: oklch(0.55 0.2 145);
    --velin-font-sans: 'Poppins', system-ui, sans-serif;
    --velin-radius-md: 1rem;
  }
}

Theme wählen