01Tokens
One source of truth
Colour, radius, and rhythm are custom properties on the root element. A component never hardcodes a value; it reads the token.
Updated · September 2026
A room for
live specimens.
Most portfolios show screenshots of a design system. This page runs one. Everything below is the real component layer from NYX — the system this site is built on — rendered live and wired straight to the theme control.
Specimen 01
NYX component layer
Change the accent, density, or mode from the theme control and every control below re-skins in place — no rebuild, no reload, no second stylesheet.
buttons
switch
Dark-native theme
segmented
slider · 64%
input
badges
v1.0RTLzero-dep
every value above derives from one set of custom properties via color-mix() — no recompile, themeable live.
02color-mix()
Derived, not duplicated
Hovers, borders, and surfaces are computed from the accent at paint time in OKLCH, so every state stays in gamut and in tune with the rest.
03Zero runtime
No theme provider
Re-theming is a handful of custom-property writes on the root element. There is no context, no cascade of re-renders, and no JavaScript in the paint path.
Want the system, not the screenshot?
NYX is the design system underneath this site. The case study covers how the token layer, the accent maths, and the component API fit together.
The same specimen appears inside the NYX project page — this page just gives it room to breathe.