Stashpeak Design Tokens

Why all my projects share the same shade of purple and how I manage shared styles.

When building multiple projects at once, it is easy to end up giving each one its own visual style. I did this for a while - Stashpeak used purple, SimLauncher had green, and shieldxx.net was supposed to be blue. In the end, it just meant constant backtracking and maintaining different styles.

I decided to clean this up and unified everything under the Stashpeak Design System.

What tokens solve

I no longer have to make the same styling decisions over and over. When adding a new page to shieldxx.net, I do not think about hex codes. I just use --color-accent. The color stays consistent, and if I ever want to change it, I update it in one place and it propagates everywhere.

--color-accent: #ad46ff - primary purple
Glass surfaces - --glass-bg, --glass-border, --header-glass-bg
Radii - --radius-control (14px), --radius-card (20px), --radius-pill
Typography scale - Display (56px), Heading/L (28px), Body/Base, etc.

The source of truth is a Figma file with Foundations. For now, I copy changes over to tokens.css manually.

Next steps

Eventually, I want to automate this sync using the Figma API and a small script to generate pull requests. But that is more of a engineering challenge than a design priority, so I am not in a hurry.

What tokens solve

What we share

Next steps