Skip to main content

Work Design system and themes

A design system shared across our products

Result
One set of color, type and spacing values drives the light and dark themes of several products, so a change made once shows up everywhere.
Built with
CSS custom properties, Storybook, HTML
Status
Our own work
Dark reference page listing three color scales, obsidian, silver and gold, as swatches labeled with their names and hex values.(opens the full-size image)
Color as named values. Three scales, each swatch labeled with the name products use and its hex value.

The project

The problem

Products we had built picked their own colors, type sizes and spacing. Small differences piled up, and a brand change meant editing each product by hand.

What we built

A design system: color, type, spacing, radius, shadow and motion values defined once and published as CSS custom properties. Themes are thin layers over those values, so a dark dashboard and a light marketing page share the same scale. Components are documented in Storybook with their states.

What changed

Products pull the same values instead of copying them. A new theme is a short file, not a rewrite, and the reference pages show the shared values and components in one place.

Dark dashboard with a sidebar, three stat cards, teal buttons, a search field, status badges and a task card.(opens the full-size image)
The same values re-themed as a dark teal dashboard. Figures are placeholders.
Table of font families and a size scale from extra small to six times large, each with a live text preview and its rem value.(opens the full-size image)
A type scale defined once, from 0.75rem to 3.75rem, with live previews.