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.

  1. Add Beta: Design tokens library to your files. (How do I add a library to my file?)
  2. Use colors as Figma variables instead of styles from 📙 Component library. (How do I apply a Figma variable?)
  3. 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 code

NOTE: 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 actions
  • confirm: For positive outcome actions
  • danger: 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

TODO:
Document control design tokens Create an issue

Patterns and matching

TODO:
Document token pairing for color patterns and token matching for conceptual patterns. View issue

Last updated at: