About Volty
Built for the CSS
that exists today
Volty is a CSS theme library built entirely on modern platform features —
@property, light-dark(),
color-mix(), @layer,
and container queries — that most libraries haven't fully leveraged yet.
No preprocessors. No JavaScript required for theming.
Origin
Why Volty exists
Modern CSS has crossed a threshold. Features that used to require JavaScript — dark mode detection, animated theme transitions, scoped brand colors, container-aware layouts — are now native browser capabilities. But the major CSS libraries were designed before these features existed and carry the assumptions of that era: untyped custom properties, JavaScript-driven theme toggling, viewport media queries for component layout, preprocessors for color scales.
Volty started as a question: what would a design token system look like if it was
designed around @property from day one? The answer turned out to be
surprisingly powerful. Typed tokens aren't just a nicer API — they unlock things that are
literally impossible with untyped custom properties. When you register a color token as
<color>, the browser can interpolate it. Put a transition on that token
at the :root level and every element on the page inherits a smooth theme
animation — no component-level transition rules, no JavaScript animation loops, no
requestAnimationFrame.
That one insight — transition the token, not the element — became the
foundation of Volty's architecture. Everything else followed from it: the color-mix()
brand scale that regenerates from a single token, the light-dark() theming
that works without JavaScript, the @layer cascade that makes overrides
predictable, the container queries that let components respond to their own context
instead of the viewport.
Creator
Who built Volty
Eric Dorman
Cybersecurity Specialist & Developer
Eric is a cybersecurity specialist with a deep interest in agentic systems, offensive security tooling, and the craft of software. Volty grew out of a frustration with CSS libraries that felt like they were designed for a browser that no longer exists — leaning on preprocessors and JavaScript for things the platform now handles natively. When he's not working on security, he explores the edges of what modern CSS can do.
Development
How it came together
March 2026 — Concept
The @property question
The project started with a single idea: if design tokens are registered as
typed @property values, can the browser
animate theme transitions entirely in CSS? The answer was yes — and that
became the architectural foundation everything else was built on.
March 2026 — Core
Token system & layer architecture
The core layer order was established — volty.reset,
volty.tokens, volty.base,
volty.components, volty.utilities
— giving consumers a predictable cascade they can hook into at any level.
The full color-mix() brand scale was designed
to derive 11 steps from a single token.
March 2026 — Components
First component set
Button, Card, Badge, Input, and Switch — all built using only Volty tokens,
no hardcoded colors. The Switch used :has(input:checked)
to drive its state entirely in CSS. The Card introduced
container-type: inline-size so its footer
could respond to its own width rather than the viewport.
April 2026 — Correctness
Dark mode bugs fixed & differentiators shipped
A critical dark mode bug was discovered and fixed: subtle tints were mixing
with hardcoded white, producing pale muddy colors in dark mode. The fix —
mixing into --vt-color-surface instead —
made subtle colors self-correcting across both modes. Simultaneously,
the :root token transition block was added,
making Volty the first library to ship animated design token transitions
as a first-class feature.
April 2026 — Now
Open source & ongoing
Volty is open source under the MIT license. The library is actively developed —
next on the roadmap: more components, a utilities layer, and a Shadow DOM
compatibility story leveraging @property
with inherits: true to pass tokens through
Shadow DOM boundaries — something no other library has properly solved.
Philosophy
Design principles
Platform-first
If the browser can do it natively, Volty uses that. No Sass, no PostCSS, no JavaScript color libraries. Every feature leans on a real CSS specification.
Flexible install
Drop in one CSS file and one tiny JS utility, or install via npm for full framework integration. Works however your project is set up.
One token, everything
Set --vt-color-brand and the entire color system — 11-step scale,
hover states, focus rings, subtle tints — regenerates automatically.
Predictable cascade
@layer makes specificity wars impossible. Override anything
in volty.utilities — it always wins, no !important needed.
Honest dark mode
Subtle tints mix into the current surface, not hardcoded white. Dark mode gets rich dark tints — not pale grays that look like accidents.
Container-aware
Components respond to their own container width, not the viewport. Put a button in a sidebar on a wide screen — it still adapts correctly.
Under the hood
Built with
Volty is pure CSS and a tiny amount of JavaScript — no framework, no runtime dependencies, no preprocessor output in the final artifact. The build toolchain is intentionally minimal: just a Node.js concat script and lightningcss for minification, which understands modern CSS natively.
See it in action
Switch brands. Toggle dark mode. Resize the container query demos. Everything animates.
View the demo →