All about design systems using Shaper.
color-primary: #1D4ED8
(a blue) as a token. Then, when setting a button background, use “Primary” instead of a random hex. All instances of that token are linked – update the token once, and every element using it updates too. Shaper stores tokens in the code (likely a JSON or a theme file), so they are version-controlled. This means designers and developers can both see token definitions in the repo, and any changes to tokens are tracked just like code changes (no more drifting style guides).font-heading: Inter
or font-size-large: 24px
. This ensures all your headings use the same font and size values. If you decide to update the base font or scale up the size for accessibility, adjust the token and the change will apply everywhere. Tip: Combine tokens (e.g., a Heading component might use font-heading
+ font-size-large
+ a color token).spacing-sm = 4px
, spacing-md = 8px
, etc., and use those in your layout settings. This helps maintain rhythm and consistency. In Shaper’s layout or token editor, look for a way to manage spacing values. Many teams use an 8px grid – you can reflect that by making your base spacing token 8px and scaling multiples (4px, 8px, 16px, etc.).color-primary-hover
). This way, even interactive states remain consistent.primary-bg
, secondary-text
, border-color-light
instead of blue-500
or gray-200
. This helps both designers and devs understand how a token is meant to be used. It also maps better to code (e.g., a CSS variable -color-primary-bg
).