Design Tokens

The colour, typography, spacing, and other stylistic decisions as design tokens for consumption.

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 - .tokens.scss.

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:

  1. Component eg: button, card, hero, list

  2. Category eg: backgroudn, shadow, border

  3. Variant eg: primary, secondary, interactive

  4. State eg: hover, visited, focus

Building

To update these run gulp vf-tokens from ./components/vf-design-tokens.

1 This is actively being working on and your current implementation of Design Tokens in your projects might need updating.


In this section

Find an issue on this page? Propose a change or discuss it.