Users with a visual, motor or cognitive impairment are far from rare.
The Design Tokens used within
vf-core are generated from several
.yml files. These are then compiled into various Sass files as needed.
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.
What are Design Tokens?
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.
— Salesforce, Lightning Design System.
How EMBL uses Design Tokens
Base Design Tokens
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.1
Design Decision Design Tokens alpha
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.1
eg. If the Design Token is
vf-background--primary it should not be used for anythign other than a background.
Component Design Tokens alpha
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.
Naming Design Tokens
We use a BEM style syntax when composing Design Tokens where we use our Design System prefix of
vf- followed by:
Component eg: button, card, hero, list
Category eg: backgroudn, shadow, border
Variant eg: primary, secondary, interactive
State eg: hover, visited, focus
To update these run
gulp vf-tokens from
1 This is actively being working on and your current implementation of Design Tokens in your projects might need updating.