Design system overview

Try it liveLoadingStill loading. Open in a new tabLive. Try the screen aboveOpen in a new tabOpen in a new tab

I built Gloss in tandem with the sales dashboard, because I was building the dashboard on it, and I meant it to drop into any web platform. Its components come in tiers, from the primitives up to templated patterns such as a whole metric or a group of metrics, and each tier carries its own design decisions. The frame opens on the metric cards, the plainest case: a card takes its data and draws itself, so the developer never picks a layout, a color or a spacing value.

The system

Goal: Take as much design as possible out of a developer’s work, so a leader could configure components on the back of a napkin and still get the system’s decisions.

Tasks: Sort the components into tiers, keep every visual value in tokens, and give each tier live examples in the documentation.

Deliverables: 111 React components and 64 color and motion tokens, across seven npm packages: ui, styles, tokens, utils, icons, motion and brand.

Teaching: Because the decisions lived in the system, I used it to teach the company design concepts, and building parts of the dashboard carried those workshop lessons into real screens.