Atlas

Appearance

Design tokens ​

Design tokens are the smallest stylistic pieces of our design system.

We use tokens:

  • To maintain a scalable and consistent visual system for user-interface (UI) development in a single source of truth instead of hard-coded style values or single-use variables
  • To ensure that only systematic decisions are used to style components and features

Tokens can be used in several formats: CSS custom properties, Less variables, SCSS variables, ES6 variables and JSON files.

Each token category has a demo page where you can check each token's name and value, a demo of the token, and information about where the token value comes from.

Using design tokens ​

Figma ​

Enable the Atlas Figma library to reuse all the design tokens that were translated into Figma styles and variables.

NPM package ​

See the installation and using design tokens documentation for information about how to use Atlas design tokens in your application.

Resources ​