Write once. Run anywhere.
React, Vue, or Svelte — Flux components work natively across all three. No adapters, no compromises. Ship the same design system to every team on every surface.
DESIGN SYSTEM
Design once. Ship everywhere.
Flux is an experimental design system built for teams who refuse to choose. React, Vue, or Svelte — one source of truth, infinite surfaces. Motion-forward. Token-driven. Uncompromising.
LIVE PREVIEW
Built different.
Every decision in Flux is intentional. Here’s what sets it apart.
Tokens all the way down.
Color, spacing, type, motion — every value flows from a single token layer. Change one thing, update everything. Design and code stay in sync, automatically.
Animation that means something.
Flux brings intentional motion to every interaction. Transitions aren’t decorations — they’re communication. Every animation has a reason, a rhythm, and a purpose.
UI that knows where it is.
Powered by statechart logic, Flux components handle complex interaction states without brittle conditionals. Predictable. Testable. Maintainable. Sane.
Dark-mode first.
Built for the dark canvas. Every color, every surface, every elevation designed from the ground up for dark backgrounds. Light mode is an enhancement, not an afterthought.
Accessible by default.
WCAG 2.1 AA. Keyboard-first. Focus indicators that don’t sacrifice aesthetics. Accessibility isn’t a checkbox — it’s the baseline.
See it in action.
Every component, live in your browser. No screenshots, no abstractions — just the real thing, running on the system it was built with.
TOKEN VALUES
--color-plasma-500#7c3aff
--radius-md8px
--motion-scale-hover-lift1.02
--motion-scale-active-press0.97
--elevation-glow-plasma-blur20px
FluxButtonspring: snappy
Hover and click to see spring physics
Works with
React
Vue
Svelte
TypeScript
Tailwind
Vite
We build the tools we wish existed.
Flux is the work of a small agency obsessed with the gap between design and engineering. We got tired of rebuilding the same system from scratch. So we made one worth keeping.
Nova
Chief Executive OfficerVisionary. Sets direction, unblocks the team, ships.
Arc
Chief Technology OfficerStatechart-obsessed. Statically typed by preference. Builds the foundation everything runs on.
Prism
Design DirectorMotion is a first-class citizen. Tokens before anything. Proof that good design and good engineering aren’t at odds.
Pixel
Senior EngineerPrecision builder. Pixel-perfect, accessible, fast. The person who makes “done” actually mean done.