37 / Colour

Token Interpolation

Every colour on the card is held to one dial. Scroll, and they all turn together, in step, never landing on a combination nobody chose.

also called scroll-driven theme · animated custom properties · palette rotation

The whole palette is one number. @property is what makes it animatable at all — an unregistered custom property has no interpolable type. Every token keeps its lightness and chroma and shares the angle, so nothing can drift out of step.

How it is built

@property --rot { syntax: '<angle>'; inherits: true } --accent: oklch(0.637 0.145 calc(40.2deg + var(--rot)));

Exhibit 07 · Kīlauea