Skip to main content
⌘K
Last modified: 4/Oct/2024

Design tokens

Stratus design approach is very opinionated. We strive simplicity, so we make highly abstract components, but still want to keep the ability to create complex solutions.

This is why we provide the low-level building bricks of our design system.

#Base style and normalize CSS

We discourage to normalize the page stylesheet by using any resetting library. We encourage using inheritance and local scopes with styled components. Every component in Stratus brings its own stylesheet, and you don't have to care about customizing them.

We provide a very little global ruleset, which basically sets the text properties globally (font size, style, color, weight). You don't have to care about that as well, this is applied by the Stratus Provider.

#Using the design tokens

Like all the other components of stratus, you can import the tokens from the main package:

import { color,
  space,
  fontFamily,
  fontWeight,
  borderRadius,
  shadow,
  zIndexScale,
  duration,
  font
} from '@kinsta/stratus'

#Tokens

import styled from '@emotion/styled'
import { space, borderRadius, fontFamily, shadow, fontWeight, color, zIndexScale } from '@kinsta/design-tokens'

export const MyComponent = () =>
  styled.div({
    padding: space[100], // 'var(--stratus-space-3, 8px)'
    borderRadius: borderRadius.s, // { xs: 2px, s: 4px, m: 6px, l: 8px, xl: 12, 50: 999px }
    fontFamily: fontFamily.inter, // inter | brandon | reckless
    boxShadow: shadow.s, // s | m | l | xl | focusShadow | errorShadow
    fontWeight: fontWeight.medium, // light | regular | medium | semiBold | bold | black
    color: color.anthracite, // see the full list of colors in storybook
    zIndex: zIndexScale.BASE,
  })

#border-radius migration guide

xs   --> ---   --> 2px
s    --> 4px   --> 4px
m    --> 8px   --> 6px
l    --> 12px  --> 8px
xl   --> 16px  --> 12px
50   --> ---   --> 999px

#z-Index

There are a few steps in the z-index scale system.

The base is currently 2000, because it overrides Ant Design's z-index values. The difference between the seps are always +2.

BASE // 2000
STICKY // 2002
FIXED // 2004
MODAL_BACKDROP // 2006
MODAL // 2008
ASIDE // 2010
DROPDOWN // 2012
TOOLTIP // 2014
TOAST // 2016

#Space

The space was created to replace gutter. Now, instead of multiplying the gutter value, you can use the space values by increasing its number. For example, gutter * 2 is now space[200]. View the values for the space in the storybook if you're not sure what to use.

Space migration guide

gutter / 4      --> space[25]      --> 2px
gutter / 2      --> space[50]      --> 4px
gutter          --> space[100]     --> 8px
gutter * 1.5    --> space[150]     --> 12px
gutter * 2      --> space[200]     --> 16px
gutter * 2.5    --> space[250]     --> 20px
gutter * 3      --> space[300]     --> 24px
gutter * 4      --> space[400]     --> 32px
gutter * 5      --> space[500]     --> 40px
gutter * 6      --> space[600]     --> 48px
gutter * 7      --> space[700]     --> 56px
gutter * 10     --> space[1000]    --> 80px
gutter * 13     --> space[1300]    --> 104px
gutter * 15     --> space[1500]    --> 120px
gutter * 20     --> space[2000]    --> 160px

#Generating Design Tokens

We utilize the Style-Dictionary library to generate design tokens. Except color source tokens files which are generated from Figma, all other source tokens files are maintained manually.

#Generating tokens

To generate the design tokens, run the following command: build-tokens This command will process all the token files specified in the tokens.config.json file under the tokensDir property and generate the final token files used by the Stratus

#Processing Figma output files

We only have to run this command when we update the color tokens in Figma and we are provided with new Figma output files

How to get the Figma output files:

  1. In Figma, you should use the plugin
    Variables to CSS
    by
    Wei Lu
    to generate the CSS on the
    https://www.figma.com/file/iokaW6vD72RkXDgPEyPjLK/Stratus?type=design&node-id=4464%3A70706&mode=design&t=m8rxyT40KLWssWSR-1
    file. (This plugin doesn't work in dev mode, if you don't have access, ask a designer to help you generate the css.)
  2. Currently we only need the
    Base, Role and Theme (Dark and Light)
    collections.
  3. Copy the Figma plugin output to the respected files in the directory specified in the tokens.config.json file under the "figmaSourceDir" property.

Example of figmaSourceDir: './figma' directory structure:

figma
  ├── Base
  │     ├── Default.css
  ├── Role
  │     ├── Default.css
  ├── Theme
  │     ├── Dark.css
  │     ├── Light.css

Example of how the *.css file should look like:

:root {
    --Base-color-palette-dark-blue-50: #0D0921;
    --Base-color-palette-dark-blue-100: #0E0B4A;
    --Base-color-palette-dark-blue-200: #070779;
}

Make sure the last line has a

;
in each file, because the plugin output doesn't have it as a default!

We use the process-figma-files npm command to process export from Figma. This command generates the source token files for colors which are used by the build-tokens command.

To convert these css files to the source tokens files, follow these steps:

  1. Run the process-figma-files which will generate source tokens files for colors.
  2. Generate the final token files by running the build-tokens command.

❗️❗️ NOTE: The legacy tokens are not generated properly for some reason. Make sure you add them back after the new files are generated. (There should be no change to the legacy colors, so it should be the same as the previous ones.)

#Next up