Genesys UI
A layered, open-source design-system ecosystem
Genesys UI is an open-source design system built as a layered ecosystem rather than a single component library. I designed its architecture and led it as its principal contributor.
Architecture
The system is split into independent, composable layers, each in its own package or monorepo (several related packages):
- Tokens & theming (opens in a new tab) — design tokens with Style Dictionary, a CLI, and generated types, plus brand tokens (opens in a new tab) and a theme generator.
- Base styles (opens in a new tab) and styles (opens in a new tab) — foundations and component styles in pure CSS, usable without React.
- React components (opens in a new tab) — the main component library, documented in a live Storybook (opens in a new tab).
- Icons (opens in a new tab) — a multi-format icon gallery (opens in a new tab), including React components.
- Form builder (opens in a new tab) — a complex component kept outside the core library, with its own Storybook (opens in a new tab).
- Demo app (opens in a new tab) — a live showcase of the components in context.
Shared infrastructure ties it together: replicable CI workflows (opens in a new tab), shared Storybook addons (opens in a new tab), and shared React hooks (opens in a new tab) across every package.
Status
Built at Devo and released as open source, where it was used in production —
those repositories still live, mixed with the company's others, under
DevoInc (opens in a new tab). Upstream
development was frozen in 2025; a group of the original authors forked it into a
dedicated genesys-ui (opens in a new tab) org to keep it going. It's
currently paused, with a full rebrand planned.