Build anything.
Style everything.
One hue changes it all.
VeloraCSS is an AI-designed utility-first CSS framework with Color Genetics, Container Intelligence, and zero-JS State Machines built in.
One number. Every color on this page derives from it via oklch().
Frameworks don't
do this.
Three capabilities that no other utility framework ships out of the box. Each one replaces a category of JavaScript you no longer need to write.
One hue = 50+ derived colors via oklch(). Perceptually uniform, mathematically coherent. Change a single number and the entire UI recolors.
CSS State Machine tabs and toggles via :has() and radio inputs. The browser tracks state. No JavaScript at all.
:has(:checked).@container queries — components adapt to their own space, not the viewport. The same card stacks in a sidebar and reflows in a wide area.
Every component included.
29 production-ready components, all as vel- classes. Open DevTools and inspect any element below — real framework classes, no tricks.
Default card with hover lift. Uses framework border, shadow, and surface tokens.
Elevated shadow variant. Borderless, deeper drop shadow for prominent content.
Brand-tinted surface with primary glow. Perfect for featured or highlighted items.
One stylesheet.
Infinite themes.
Set data-vel-theme on any element — every child instantly inherits a new color world. The same vel-btn and vel-badge classes, four different hues.
/* One line per theme — hue shift handles everything */
[data-vel-theme="ocean"] { --vel-dna-hue: 205; }
[data-vel-theme="forest"] { --vel-dna-hue: 145; }
[data-vel-theme="ember"] { --vel-dna-hue: 22; }
[data-vel-theme="aurora"] { --vel-dna-hue: 300; }
/* All tokens derive from the hue — nothing to override */
--vel-color-primary: oklch(65% 0.21 var(--vel-dna-hue));
--vel-surface-1: oklch(10% 0.025 var(--vel-dna-hue));
/* The entire theming "logic" in JavaScript: */
el.dataset.velTheme = 'ocean';One number.
An entire universe.
Other frameworks ship 1,540 hardcoded swatches. VeloraCSS generates every color mathematically from --vel-dna-hue using oklch(), the only perceptually uniform color space. Drag the hero slider — watch these react.
/* The entire palette from one variable */
--vel-dna-hue: 258;
/* All colors are derived — nothing hardcoded */
--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));
--vel-border: oklch(26% 0.045 var(--vel-dna-hue));
/* Change in JS with one line: */
document.documentElement.style
.setProperty('--vel-dna-hue', 145);Components that
know their space.
VeloraCSS components watch themselves. Drag the box handle — the card reflows based on its own container width, not the screen size.
/* Mark the parent as a query context */
.vel-cq-wrapper {
container-type: inline-size;
}
/* Component reacts to ITS container, not viewport */
@container (min-width: 460px) {
.vel-cq-card {
grid-template-columns: 200px 1fr;
}
.vel-cq-image {
border-right: 1px solid var(--vel-border);
border-bottom: none;
}
}
/* Result: works in any layout — sidebar, grid, full-width */
/* No JavaScript. No class toggling. Just CSS. */Tabs, toggles, state.
Zero JavaScript.
VeloraCSS uses :has() — the parent selector — to make containers aware of their children's state. Radio inputs drive the state machine. CSS reads which one is checked and updates the entire UI.
:has() makes parents aware of their children
The CSS :has() pseudo-class is the first true parent selector. It lets a container change its own styles based on what's happening inside it — without JavaScript reading the DOM.
The entire tab system is ~8 lines of CSS
These tabs are powered by a radio group + :has(). The browser tracks which radio is checked. CSS reads that state and updates the UI. Click between tabs — you're executing a state machine with zero JavaScript.
/* Panel visibility — :has() reads radio state */
.vel-tabs:has(#tab-1:checked) #panel-1 { display: block; }
.vel-tabs:has(#tab-2:checked) #panel-2 { display: block; }
/* Active tab highlight — parent reacts to child state */
.vel-tabs:has(#tab-1:checked) label[for=tab-1] {
color: var(--vel-color-primary);
border-bottom-color: var(--vel-color-primary);
}
/* Zero JavaScript. Browser tracks state natively. */What you'd write in another framework vs. VeloraCSS
// JavaScript required
const [tab, setTab] = useState(0)
// Class toggling in JSX
className={tab === 0
? 'border-b-2 border-indigo-500'
: 'text-gray-500'}
// Event handler
onClick={() => setTab(0)}<!-- Just HTML + CSS, no JS -->
<input type="radio" id="t1" checked>
<label for="t1">Tab 1</label>
/* In CSS */
.vel-tabs:has(#t1:checked) #panel-1 {
display: block;
}The JS pattern requires a framework, component state, and event listeners. VeloraCSS requires none of that — it works in plain HTML.
Form validation.
Zero JavaScript.
VeloraCSS uses :has() with :valid and :invalidto build a complete validation UI in pure CSS. Type in the fields below — labels change color, error messages appear, borders react. No JS needed.
/* :has() reads browser validity — no JS needed */
/* Label turns red when input is invalid */
.vel-field:has(.vel-input:invalid:not(:placeholder-shown)) label {
color: oklch(65% 0.22 25);
}
/* Border + ring on invalid */
.vel-field:has(.vel-input:invalid:not(:placeholder-shown)) .vel-input {
border-color: oklch(65% 0.22 25);
box-shadow: 0 0 0 3px oklch(65% 0.22 25 / 0.12);
}
/* Show error message — CSS toggles visibility */
.vel-field:has(.vel-input:invalid:not(:placeholder-shown)) .vel-field-error {
display: block; /* zero JS */
}
/* Valid state — green automatically */
.vel-field:has(.vel-input:valid:not(:placeholder-shown)) .vel-input {
border-color: oklch(70% 0.2 162);
}Up and running,
three steps.
Install the package, import the stylesheet, use the classes. No configuration file required to get started.
npm install veloracssimport 'veloracss/dist/velora.css'<button class="vel-btn vel-btn-primary">
Get Started
</button>
<div class="vel-card vel-p-6">
<h2 class="vel-text-2xl vel-font-bold">Hello</h2>
<p class="vel-text-muted vel-mt-2">It just works.</p>
</div>Build anything
with vel- classes.
These components are rendered live using VeloraCSS utility classes — no custom stylesheets, no inline styles beyond what the framework provides.
Modern Minimalism in Interior Design
How clean spaces and warm palettes transform everyday living environments into works of art.
Sara Mitchell · 5 min read
AI-Generated CSS Frameworks Are Here
What happens when you let artificial intelligence design the utility classes that power your entire UI system?
Alex Chen · 8 min read
The Peaks That Changed Everything
A journey through the world's most breathtaking mountain ranges and the lessons hidden at altitude.
Maya Reyes · 6 min read