Colour, typography, spacing and other stylistic decisions as structured data.
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
The design tokens are generated from several Yaml files. These are then compiled into various Sass files as needed.
These are the generic design tokens for global key and value pairs for colour, spacing, typography, etc.
They tend not to be used as they're codified as we should rely on Design decisions to determine when to use what Design Token value for what purpose and need.
This category of design tokens is where we have chosen how certain design tokens should be used.
These design tokens can be use in projects where component design tokens do not exist and must match the semantic use that should be defined in the codified Design Token.
eg. If the design token is
vf-background--primary it should not be used for anything other than a background.
This is actively being working on and your current implementation of design tokens in your projects might need updating.
Where the design decisions have filtered into specific component decisions.
These are exported into the components folder and are suffixed -
These can be both Sass variables and CSS custom properties.
They are named so that their usage in a component should be self evident as it will follow the 'Naming design tokens' described below.
We use a BEM style syntax when composing design tokens where we use our Design System prefix of
vf-component: button, card, hero, list and so on
vf-category: background, shadow, border and so on
vf-variant: primary, secondary, interactive and so on
vf-state: hover, visited, focus and so on
To update these run
gulp vf-tokens from
In the future we hope to offer Sketch and Photoshop colour palettes.
If you required a different format (LESS, iOS, Android). Please get in touch.
Find an issue on this page? Propose a change or discuss it.