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.

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.

Building

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


In this section

Breakpoints

Colours

Spacing

Theming

Typography

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