Skip to content

SDC Design System

How, when and where to use every component on stevendesignco.com. Written so a designer, an engineer, a writer and a tester can all answer the same question without asking each other.

This is SDC 02.00.00. What changed in each version is in the release log.

Foundations

Colour, type, spacing, elevation, focus and texture. The decisions every component inherits, and the rules that keep them honest.

Components

One page each. Every page answers how it is built, when to reach for it, and where it is allowed to appear, in that order.

Patterns

Whole compositions assembled from components: the home deck, a case study page, the work index.

Practices

The accessibility standard the site holds itself to, how it degrades, how content is written, and how a change reaches production.

A design system is only as good as the next person’s ability to use it correctly without being told. This documentation is the test of that: every component answers the same three questions, in the same order, in language that does not assume you write CSS.

This site does not repeat the token values or render live components. The Storybook does both, and it generates its stylesheet from the running site, so it cannot drift. When you need to see a component working, go there. When you need to know whether to use it, stay here.