Design tokens
Table of contents
Overview
In the Experiences Design sidebar, specific design tokens such as spacing, sizing, color, border, fontSize, lineHeight, letterSpacing, textColor, and text are used by input elements. These design tokens directly influence the design variables within the sidebar. You can define custom key-value pairings per design token.
Among these, the border and text design tokens are unique. They are defined as objects with distinct parts, in contrast to other design tokens which are typically defined as straightforward key-value objects.
Definition
Below are the defined design token fields. To see the latest updates, check out the types are defined in the Experiences repo.
spacing
Description: Affects the Padding, Margin section and input controls and the Layout section for the Gaps input in the Design sidebar.
Type definition: spacing: { [key: string]: string }
Properties:
key: Name of the design token.
value: Any valid CSS value for margin and padding (px, %, em, and rem are supported).
Example: spacing: { XS: '4px', S: '16%', M: '32rem', L: '64em', XL: '128px' }
sizing
Description: Affects the Size section of the Design sidebar for the Height, Width, and Max-width inputs when the fixed option is selected.
Type definition: sizing: { [key: string]: string }
Properties:
key: Name of the design token.
value: Any valid CSS value for width and height (px, %, em, and rem are supported).
Example: sizing: { XS: '16px', S: '10%', M: '300px', L: '60em', XL: '100rem' }
color
Description: Affects the Background color section of the Design sidebar for the Color and Opacity inputs.
Type definition: color: { [key: string]: string }
Properties:
key: Name of the design token.
value: Any valid color value like hexcode, RGBA, RGB, and named colors. CSS variables are also supported for this field.
Example: color: { Slate: '#94a3b8', Azure: 'azure', Orange: '#fdba74' }
border
Description: Affects the Border section of the Design sidebar for the Style, Width, Type, Color, and Opacity inputs.
Type definition:
border: {
[key: string]: {
width: string;
style: 'solid' | 'dashed' | 'dotted';
color: string;
}
}Properties:
key: Name of the design token.
width: Any valid CSS value for margin and padding (px, %, em, and rem are supported).
style: Must be one of 'solid', 'dashed', or 'dotted'.
color: Any valid color value like hexcode, RGBA, RGB, and named colors. CSS variables are also supported for this field.
Example:
border: {
Azure: { width: '1px', style: 'solid', color: 'azure' },
Hero: { width: '2px', style: 'dashed', color: '#ffaabb' },
Card: { width: '1px', style: 'solid', color: '#ffccbb' },
Carousel: { width: '2px', style: 'dotted', color: 'rgba(30, 25, 25, 0.75)' },
}fontSize
Description: Affects the Text section of the Design sidebar for the Font size input.
Type definition: fontSize { [key: string]: string }
Properties:
key: Name of the design token.
value: Any valid CSS value for margin and padding (px, %, em, and rem are supported).
Example fontSize: { XS: '12px', SM: '14px', MD: '16px', LG: '24px', XL: '32px' }
lineHeight
Description: Affects the Text section of the Design sidebar for the Line height input.
Type definition: lineHeight: { [key: string]: string }
Properties:
key: Name of the design token.
value: Any valid CSS value for margin and padding (px, %, em, and rem are supported).
Example lineHeight: { XS: '1', SM: '1.25', MD: '1.5', LG: '200%' }
letterSpacing
Description: Affects the Text section of the Design sidebar for the Letter spacing input.
Type definition: letterSpacing: { [key: string]: string }
Properties:
key: Name of the design token.
value: Any valid CSS value for margin and padding (px, %, em, and rem are supported).
Example: letterSpacing: { None: '0', XS: '0.05em', SM: '0.1em', MD: '0.15em' }
textColor
Description: Affects the Text section of the Design sidebar for the Color input.
Type definition: text { [key: string]: string }
Properties:
key: Name of the design token.
value: Any valid color value like hexcode, RGBA, RGB, and named colors. CSS variables are also supported for this field.
Example: textColor: { Dark: '#1a1a1a', Light: '#efefef', Slate: '#94a3b8' }
text
Description: Affects the Text section of the Design sidebar for the Style input. The text design token allows you to define various text styles for your components. Each text style can be customized with properties such as emphasis, font size, case, font weight, line height, letter spacing, and color.
Type definition:
text: {
[key: string]: {
emphasis?: 'bold' | 'italic' | 'underline' | 'bold italic' | 'bold underline' |
'italic underline' | 'bold italic underline' | 'none';
fontSize?: string;
case?: 'capitalize' | 'uppercase' | 'lowercase' | 'normal';
fontWeight?: string;
lineHeight?: string;
letterSpacing?: string;
color?: string;
}
}Properties:
emphasis: Specifies the emphasis style for the text such as bold or italic.
fontSize: Defines the size of the font.
case: Specifies the text transformation case to apply uppercase, lowercase, or capitalize.
fontWeight: Defines the weight of the font.
lineHeight: Specifies the line height for the text.
letterSpacing: Defines the spacing between letters.
color: Specifies the color of the text.
Example:
text: {
Heading: {
fontSize: '32px',
fontWeight: '600',
lineHeight: '1.25',
case: 'capitalize',
color: '#94a3b8',
},
Body: {
fontSize: '16px',
lineHeight: '1.5',
color: '#1a1a1a',
},
}