Using design tokens
In design
Using design tokens as Figma variables is moving to open-beta following a successful invite-only pilot.
It's easy to opt in to the beta.
- Add Beta: Design tokens library to your files. (How do I add a library to my file?)
- Use colors as Figma variables instead of styles from 📙 Component library. (How do I apply a Figma variable?)
- Let us know how you get on in the feedback issue. No problem too big, no feedback too small.
In the future, color styles will be removed from the component library and these Figma variables will be updated to support dark mode.
We've scoped these Figma variables by limiting the properties they can be applied to. This helps cut out the guess work when designing and supports recommended usage. For example, text.color.default
can only be applied as a fill to a text element and not to a stroke or shape layer.
In codeNOTE: A pilot for design tokens in code has been completed as part of this issue , and we're currently doing more exploration with a small subset of components as part of this issue . More details about officially using design tokens will be coming soon, but in the meantime carry on with your typical development process.
Concepts
Actions
Actions are interactive elements that trigger or represent user actions. action.*
design tokens give a common visual style for interactive elements across the GitLab UI.
To create bespoke interactive elements, combine background, foreground, and border color tokens. Note that in some modes, borders might not be visible by default. This is intentional to provide accessible boundaries in modes like Windows High Contrast Mode.
Action tokens support three contexts:
neutral
: Default for most actionsconfirm
: For positive outcome actionsdanger
: For potentially destructive actions
Interactivity can be communicated through implementing states such as hover
, focus
, and active
.
Consider using existing GitLab components (such as button, pagination, or tabs) that already implement action tokens. These provide consistent styling and behavior without custom implementation. For more information on available components, see the components overview.
Form elements and user inputs should use control.*
design tokens instead of action design tokens.
Controls
Patterns and matching
Last updated at: