Design Tokens Unpacked
The architecture most design systems skip.
$1M
If your enterprise has 25 teams each making their own buttons, it costs you a million dollars to have good buttons.
–Nathan Curtis
A colour palette is not a design system
It's list of ingredients with no recipe.
When you apply primitives directly to components, every design decision becomes a social agreement. When the team grows, those agreements break down.
Three layers,
not one
Primitive tokens
What values exist?
Semantic tokens
What do these values mean in context?
Component tokens
What makes this element different across brands?
Twenty shades of blue aren't a problem if blue has consistent meaning throughout the interface.
–Alla Kholmatova, Design Systems
Webflow shipped three themes without rebuilding a single component.
color: var(--colors-text-default);
↓
--colors-text-default: var(--core-colors-gray-400);
↓
--core-colors-gray-400: #C4C4C4;
Names matter more than values.
text-default
background-subtle
border-emphasis
neutral-200
primary-500
color-gray-400
When nobody remembers the name of a pattern, they recreate it instead of reusing it.
THREE TERMS. THREE DIFFERENT THINGS.
Mode
Values change within the same brand.
Light → Dark. Desktop → Mobile.
Collection
Tokens grouped by shared modes.
Colour, typography, and spacing each manage their own.
Theme
Complete set of values for a different brand.
Same structure. Different values.
The architecture isn't the library. It isn't the Figma file.
It's the decisions encoded in the layers between a raw value and a shipped component.
AI extends whatever foundation you give it.
Well-structured tokens with clear naming→ consistent output at scale
Loose primitives with social agreements→ amplified inconsistency
Tokens are how you make a design systemmachine-readable. The architecture is howyou make it machine-trustworthy.
The palette is the beginning.
The architecture is the system.
Read the full article at hux.works
Hamish Duncan • HUX • Design Systems Consultancy
Penny Black engages its partners to question how their company's futures can be madebetter, to identify strategies that build and future-proof the organisation, and of course,realise long term growth in a more sustainable, regenerative way.
After all, there is no Planet B. We must replenish and reuse what we already have, andwhilst doing so explore potential renewable sources of income and influence. We mustreform our ways of business, to be ethically healthier and environmentally justifiable.
Penny Black provides foresight into trends within your company’s remit — be they economic, environmental or social, that may affect your organisation.
We devise and employ regenerative concepts that shift the paradigm away from theshareholder-centric strategic model towards more sustainable mission-centric strategies,such as redevelopment and reinvestment.
Using design-led initiatives, we address the need for a rebalance between production andwaste within your company’s digital products and services.
And by collaborating with your organisation, we’ll influence your users (consumers, clients, and workforce) to make better choices in order to play their own part towards a carbon-neutral society.
The main reason for any undertaking is not the what or how, but why your company must adopt change to become sustainable.
Answer this, does your business provide a service that, should it stop, the world would be worse off because of it? Does your brand meet the needs of current users whilst at the same time allowing for future generations to have their potential needs met?
Future generations will be more ecologically self aware than those that came before, and your company must be cognisant of this. Your organisation must renew, repair and reuse, so that there are enough resources for the future. This is where Penny Black comes in.