One system. 40+ products.
Zero hardcoded values.

LUX 1.0 carried seven years of design debt. No tokens. No dark mode. No responsive design. Accessibility gaps on nearly every component. It still worked - but it was starting to block product teams who needed to move faster and support more contexts.

Rebuilding it became one of Verint's top-20 strategic goals. We started from scratch: a new token architecture, Verint's first motion design library, full accessibility coverage, and dark mode - a first in the company's history.

This was my first time building a design system from the ground up. I had to learn token architecture - primitives, semantics, components - while running the project and the team at the same time. Every sprint was a balancing act: making architectural decisions that would be hard to undo, managing a committee of stakeholders with competing priorities, and keeping the documentation honest enough that teams would actually trust it.

The biggest technical challenge: closing the gap between design and code entirely. A designer changes a token in Figma - the change opens a PR in GitHub automatically, the developer merges, and it's live. No developer needed for design changes.

I structured the work into 2-week sprints - system architecture first, then tokens, then components and patterns. I didn't run it alone: a core team with weekly committee reviews kept quality consistent and unblocked decisions fast.

Alongside the component library, we built Verint's first motion design library - easing curves, duration tokens, and micro-animation specs for every interaction state. The pipeline from Figma to Storybook to GitHub runs fully automated - one token change in Figma, one PR, one merge.

Colour is the visible half of a token system and the smaller half. A component in LUX 2.0 holds no values directly. It points at a semantic token, that token points at a primitive, and the primitive is the only place a number or a hex gets written down. The same chain carries 15 spacing steps, 11 corner radii, 14 icon sizes, 6 border widths, 9 font sizes and 5 line heights.

Dark theme was one of the things this rebuild added, and it was built on that chain rather than beside it: a second set of values on the primitives, not a second library to keep in step. Drag the handle. Spacing, radius, type and the token names all hold on both sides of the seam, and only what those names resolve to changes.

layer.level_3 border.neutral.regular text.neutral.main background.brand.regular

Drag the handle to move the seam, or tap a dot to see its token Drag the handle to move the seam

LUX 2.0 is live across 40+ Verint products. Zero hardcoded values in the system. Product teams that once waited days for a color fix now merge it themselves in under a minute - no ticket, no developer, no delay.

Dark mode shipped on day one - the first in Verint's history. The motion library gave every product team a shared language for animation that hadn't existed before. For the first time, every interaction across the platform follows the same timing, the same easing, the same spec.