Design system
One number is the whole identity
Palette, tinted neutrals, surfaces, focus rings, chart series and even the logo mark are derived from a product's hue angle. There is no second knob, so there is nothing to drift with.
Contrast
Accessibility is a property of the ramp
The obvious implementation fixes a lightness per step and varies only hue. It is subtly broken: OKLCH lightness is perceptually uniform, but WCAG contrast comes from relative luminance, and the two diverge sharply by hue. So the ramp is specified in contrast space instead — each step declares a target ratio, and the lightness that achieves it is solved per hue.
| Product | Hue | Solved lightness | Contrast on white |
|---|---|---|---|
| Novaryn | 40° | 0.5781 | 4.600:1 |
| TechHub.cafe | 162° | 0.5483 | 4.599:1 |
| CardCopilotAI | 68° | 0.5699 | 4.600:1 |
Lightness varies per hue precisely so contrast does not — a spread of 1.00022× across six identities. A fixed-lightness ramp gives about 1.15×, straddling the 4.5:1 AA threshold.
Ramps
Thirteen steps, six identities
Each row is generated from a single hue angle. The step numbers mean the same thing in every product — accent-600 is always the lightest fill that carries white text at AA.
Novaryn
hue 40° · secondary 28°TechHub.cafe
hue 162° · secondary 196°CardCopilotAI
hue 68° · secondary 38°Motion
Reduced motion, solved once
Every duration is calc(<ms> × var(--nv-motion-scale)). Under prefers-reduced-motion the token layer sets that scale to zero, which collapses every animation in every product — including code written years from now by someone who never read the token package.
--nv-duration-fast
120ms
Press feedback, hover tint
--nv-duration-quick
180ms
Tooltips, chips, small reveals
--nv-duration-base
240ms
The default
--nv-duration-slow
360ms
Panels, modals, cards expanding
--nv-duration-slower
520ms
Page and shared-element transitions
--nv-duration-ambient
1200ms
Atmosphere, never blocking
Semantics
Success is green in every product
Including TechHub, whose accent is also green. Semantic hues are fixed and run through the same curve, so they carry the same contrast guarantees and sit comfortably beside any accent. Semantic colour is never the only carrier of meaning — a danger badge shows a dot and says the word.
Retheme the ecosystem without a deploy
Administrators change upstream values; the token system derives the rest. These are real controls — every surface on this page is responding as you drag.
Controls
Every corner is a multiple of this, so nested shapes stay concentric.
Scales all five shadow levels together. Zero gives you flat design.
Blur and saturation on frosted panels. Scroll up to see the header change.
One multiplier on every duration in the system. Zero disables all animation.
Presets
/* Matches the shipped defaults.
Nothing to override. */Persisted as JSON, validated on write, and inlined into <head> during SSR so a themed deployment never flashes the wrong brand.
Next
Adopt it in your own product
Three packages, adopted one at a time, each worth taking on its own. The documentation covers what a product actually has to change.