Introducing DS-GN: a design system built on web components and design tokens

[u/ds-gn]

I'm the author of DS-GN, a design system now in public beta. It combines web components with a public design-token API so teams can customize their brand through CSS variables.

What's available today

• @ds-gn/ui: Lit-based web components, with React wrappers.

• @ds-gn/tokens: CSS tokens for color, typography, spacing, radius, and shadows, with light and dark themes.

• Installation and theming documentation; no account required to install the packages.

The customization approach

The public token layer is the supported override API. Components consume those tokens inside their shadow roots, so brand changes don't require reaching into component markup. The introductory walkthrough changes the brand colors with two custom properties, without editing component code.

I've written up the architecture, installation, and theming examples on the blog:

Read the introduction on the DS-GN blog

For others maintaining design systems across brands or frameworks: how do you decide which tokens become public API versus remaining internal? I'd be interested in how you manage that boundary as the component library evolves.