Building a site

How to make a project with Visual Framework components.

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.

Also in this section

More from the Building a site section

Browser support

We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%.

Components are part of patterns

Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour.

Content guidelines

Unique to the web are certain types of content that support user interaction.

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