Contents
How are design tokens used in the design system?
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. Using Lightning Components?
When to use border width and height tokens?
Border-width tokens are used for the border property. Use radius tokens to change the border-radius size (rounded corners). Use sizing tokens to set elements to our sizing scale. Size tokens can be used for the width and height properties. Square tokens are used for both width and height. Header for desktop.
When did the design token format come out?
In October 2020, they announced the DSP format which is like “a PDF for design systems allowing you to store agnostic information that can be shared across tools”. Design tokens come up a lot from their customers. They embrace that organizations work differently and want to keep the free-form creativity provided by their design environment.
Can you use design tokens in Salesforce application?
Read the Developer Guide on Styling with Design Tokens. Available to use on the Salesforce Platform. Available to internal Salesforce developers only. Subject to change. Generic colors to use within a Salesforce application.
Where do I Find my design tokens on my website?
Some design system websites have a dedicated ‘Design Tokens’ page that includes all design tokens, in addition to information about design tokens in general. Others put them in ‘Style’ or ‘Foundation’ sections with pages for each type such as ‘Color’ and ‘Size’.
Is there a way to copy a design token?
Orbit Kiwi and Formstack have token pages that give you buttons to copy the name and value of the design token when you hover over the token. Basalt Crux also lets you copy the name and value, although it is a bit hidden: you have to click on the name or value and it copies it to your clipboard.
Can a CSS var be a design token?
Some of the examples shown are CSS/SCSS variables and not cross-platform tokens but as Sarah Federman succinctly put it, “I would classify having CSS vars as design tokens anyway as long as there’s a design intent behind how they’re named and used.”