Compose any design directly in HTML with low-level utility classes, ship with production-ready components, and scale confidently with responsive breakpoints and state variants — all under one consistent vel- prefix.

Live Demo  ·  Playground  ·  Repository

VeloraCSS is a fully original CSS framework — no code, no classes, and no design decisions borrowed from other frameworks. Every utility, component, token, and configuration key was written from scratch and namespaced under vel- to keep your codebase clean and collision-free.

It sits at the intersection of two philosophies: the speed of utility-first composition and the convenience of ready-made components. You can build a layout with nothing but vel-flex, vel-gap-4, and vel-p-6, or drop in a vel-btn vel-btn-primary and move on. Neither approach is forced on you.

• Utility classes — layout, spacing, typography, color, flexbox, grid, effects, and more. Every property you need, consistently named.
• Component system — vel-btn, vel-card, and growing. Built to work with the utilities, not against them.
• Design tokens — a complete set of CSS custom properties (--vel-color-primary, --vel-space-4, --vel-radius-xl, etc.) that power every class and component. Override any token to theme your entire project in one place.
• Responsive variants — vel-sm:, vel-md:, vel-lg:, vel-xl:, vel-2xl: prefixes available on all major utilities.
• State variants — vel-hover:, vel-focus:, vel-active:, vel-dark: for interactive and theme-aware styles without writing custom CSS.
• Dark-first defaults — VeloraCSS ships with a dark theme as the base, designed to look sharp out of the box.

<!-- Drop it in and start building -->
<link rel="stylesheet" href="https://unpkg.com/veloracss/dist/velora.min.css">

<!-- Compose with utilities -->
<div class="vel-flex vel-items-center vel-gap-4 vel-p-6">
  <button class="vel-btn vel-btn-primary vel-btn-lg">Get Started</button>
  <button class="vel-btn vel-btn-outline-primary vel-btn-lg">Learn More</button>
</div>

/* Theme the entire framework with one override */
:root {
  --vel-color-primary: #7c3aed;
  --vel-font-sans: 'Inter', system-ui, sans-serif;
}

Try it without installing anything in the VeloraCSS Playground — write HTML, see changes live, and share your work via URL.

Built with care by Spiritbocs  ·  MIT License