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

The design tokens are generated from several Yaml files. These are then compiled into various Sass files as needed.

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.

Design decision design tokens

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.

Component design tokens

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.

We use a BEM style syntax when composing design tokens where we use our Design System prefix of vf-:

1. vf-component: button, card, hero, list and so on

2. vf-category: background, shadow, border and so on

3. vf-variant: primary, secondary, interactive and so on

4. vf-state: hover, visited, focus and so on

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

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.