Docs / Color Genetics

Color Genetics

vel-src: tokens.css

VeloraCSS derives its entire color system from a single CSS variable — --vel-dna-hue. Change one number and every color on the page updates: primary, surfaces, borders, text, and all semantic colors.

ClassProperties
--vel-dna-hueMaster hue angle (0–360). Default: 258 (violet)
--vel-color-primaryoklch(65% 0.21 var(--vel-dna-hue))
--vel-color-primary-lightoklch(65% 0.21 var(--vel-dna-hue) / 0.15)
--vel-color-primary-hoveroklch(58% 0.21 var(--vel-dna-hue))
--vel-surface-0oklch(7% 0.02 var(--vel-dna-hue))
--vel-surface-1oklch(10% 0.025 var(--vel-dna-hue))
--vel-surface-2oklch(13% 0.03 var(--vel-dna-hue))
--vel-surface-3oklch(17% 0.035 var(--vel-dna-hue))
--vel-border-baseoklch(26% 0.045 var(--vel-dna-hue))
--vel-color-textoklch(92% 0.01 var(--vel-dna-hue))
--vel-color-mutedoklch(55% 0.03 var(--vel-dna-hue))

Examples

Four DNA hues — one token change recolors everything

Hue 258 — Violet
Hue 162 — Emerald
Hue 25 — Amber
Hue 205 — Ocean
example.html
<div class="vel-grid vel-gap-4" style="grid-template-columns:repeat(2,1fr)">
  <div style="--vel-dna-hue:258" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-3" style="text-transform:uppercase;letter-spacing:0.1em">Hue 258 — Violet</div>
    <div class="vel-flex vel-gap-2 vel-mb-3">
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary-light)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-surface-2);border:1px solid var(--vel-border-base)"></div>
    </div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Button</button>
  </div>
  <div style="--vel-dna-hue:162" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-3" style="text-transform:uppercase;letter-spacing:0.1em">Hue 162 — Emerald</div>
    <div class="vel-flex vel-gap-2 vel-mb-3">
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary-light)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-surface-2);border:1px solid var(--vel-border-base)"></div>
    </div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Button</button>
  </div>
  <div style="--vel-dna-hue:25" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-3" style="text-transform:uppercase;letter-spacing:0.1em">Hue 25 — Amber</div>
    <div class="vel-flex vel-gap-2 vel-mb-3">
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary-light)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-surface-2);border:1px solid var(--vel-border-base)"></div>
    </div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Button</button>
  </div>
  <div style="--vel-dna-hue:205" class="vel-card vel-p-4">
    <div class="vel-text-xs vel-font-bold vel-text-primary vel-mb-3" style="text-transform:uppercase;letter-spacing:0.1em">Hue 205 — Ocean</div>
    <div class="vel-flex vel-gap-2 vel-mb-3">
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-color-primary-light)"></div>
      <div style="width:32px;height:32px;border-radius:50%;background:var(--vel-surface-2);border:1px solid var(--vel-border-base)"></div>
    </div>
    <button class="vel-btn vel-btn-primary vel-btn-sm">Button</button>
  </div>
</div>

Full component stack — all colors derived from one hue

VX
VeloraX Team
--vel-dna-hue: 300
Active
example.html
<div style="--vel-dna-hue:300" class="vel-card vel-p-5">
  <div class="vel-flex vel-items-center vel-gap-3 vel-mb-4">
    <div class="vel-avatar vel-avatar-md vel-font-bold">VX</div>
    <div>
      <div class="vel-text-base vel-font-bold">VeloraX Team</div>
      <div class="vel-text-muted vel-text-sm">--vel-dna-hue: 300</div>
    </div>
    <div class="vel-ml-auto"><span class="vel-badge vel-badge-primary">Active</span></div>
  </div>
  <div style="height:4px;border-radius:2px;background:var(--vel-surface-3);overflow:hidden;margin-bottom:1rem">
    <div style="width:72%;height:100%;background:var(--vel-color-primary);border-radius:2px"></div>
  </div>
  <div class="vel-flex vel-gap-2">
    <button class="vel-btn vel-btn-primary vel-btn-sm">Accept</button>
    <button class="vel-btn vel-btn-secondary vel-btn-sm">Decline</button>
  </div>
</div>