This site runs on a design system we built for it, and it is small on purpose. Two surfaces, one accent, a fixed type scale and a spacing token. Most of what follows is about decisions that turned out to be wrong the first time and what replaced them.
Tokens are the only place a value is written down
Every colour, size and spacing value lives in one token file. No other stylesheet defines a raw hex value. That sounds like housekeeping until you need to change something globally, at which point it is the difference between one edit and a search across a dozen files.
The rule that makes it hold is unglamorous: if a value appears in two places, it becomes a token. If a token is used once, it probably should not be a token.
One accent, and then a second one for text
The site uses a single accent blue for everything interactive. When we audited contrast properly, that blue passed against white and failed against the tinted section backgrounds the site alternates with: 4.31 against a required 4.5, and 4.02 on the darkest of them.
The instinct is to darken the brand colour. The better answer was a separate token used only for accent-coloured text, leaving the brand colour untouched on buttons, borders and focus rings where it passes. The two read as the same blue and one of them is legible everywhere.
The lesson worth carrying: checking a colour against white is not checking a colour. Check it against every ground it will actually sit on.
Never use ch units on a container holding display type
A heading container was capped with a max-width in ch units. The ch unit resolves against the font size of the element it is written on, not the font size of the heading inside it. On a wrapper with 17px text, the box came out around 370px, and a four-word headline wrapped to four lines.
Heading containers now cap in rem. Only running text keeps a ch measure, which is what ch is actually for.
Fixed column counts beat auto-fit for authored content
A grid using auto-fit produced three cards then three then two at one viewport width, and four then four at another. Content written as a set of eight wants a grid that is authored in fours. Auto-fit is right for a feed of unknown length and wrong for a list somebody wrote deliberately.
Dark panels inside a light theme need their tokens remapped
Four blocks on this site are dark in both themes: the footer, the call to action panel, the statistics strip and one content panel. Text tokens tuned for a light background are wrong inside them, and the contrast audit caught an eyebrow at 3.4.
The fix was one rule remapping the tokens for those four selectors, rather than patching each component. A fifth dark panel is now one line rather than a fresh bug.
What we left out
No animation library and no webfont. Every effect is an intersection observer and a CSS transition, and the type stack is whatever the operating system already has. Both were performance decisions, and both are the kind of thing a design system is for: making the restrained choice once, in a place where it stays made.