Getting Started

<link rel="stylesheet" href="https://raw.githubusercontent.com/VeloraX/veloracss/main/dist/velora.min.css">

git clone https://github.com/VeloraX/veloracss.git
cd veloracss
npm install
npm run build
# → dist/velora.css
# → dist/velora.min.css

# Not yet available
npm install veloracss

<div class="vel-card vel-p-6 vel-max-w-sm">
  <h2 class="vel-text-xl vel-font-semibold vel-mb-2">Hello, VeloraCSS</h2>
  <p class="vel-text-sm vel-text-neutral-500 vel-mb-4">
    Utility-first styling, ready out of the box.
  </p>
  <button class="vel-btn vel-btn-primary">Get started</button>
</div>

:root {
  /* Change this one number — everything updates */
  --vel-dna-hue: 145;  /* was 258 (violet), now 145 (forest green) */
}

/* All other tokens derive from it automatically:
   --vel-color-primary: oklch(65% 0.21 var(--vel-dna-hue))
   --vel-surface-0:     oklch(7%  0.02 var(--vel-dna-hue))
   --vel-text-1:        oklch(92% 0.015 var(--vel-dna-hue)) */

:root {
  --vel-primary-500: #7c5cfc;       /* override brand color */
  --vel-radius-lg:   0.75rem;       /* override radius */
  --vel-font-sans:   'Inter', system-ui, sans-serif;
}