Skip to main content

​
Installation

Installing the design system also installs the design tokens automatically
1

Install the package

You can also use npm, yarn or pnpm
npm install "@root-axis/design-tokens"
2

Import the package

Choose between the available formats
  • CSS
  • SCSS
  • JS
  • TS
  • JSON
  • TailwindCSS
@import "@root-axis/design-tokens"
How to use it:
CSS imports follow the kebab-case format
button {
  color: var(--color-neutral-100);
  background: var(--color-neutral-900);
  padding-inline: var(--size-5);
  padding-block: var(--size-3);
  border-radius: var(--size-2);
  border: none;
}

​
Tokens

To keep things minimalistic, only three set of tokens are available:
“Less is more” (Ludwig Mies van der Rohe)

​
Font Weight

Font-weight tokens to ensure consistent typography weights.
VariableValue
var(—font-weight-thin)100
var(—font-weight-light)300
var(—font-weight-normal)400
var(—font-weight-medium)500
var(—font-weight-semibold)600
var(—font-weight-bold)700

​
Size

Define consistent sizes for typography, spacing, and other layout properties.
You can use this approach to easily style various CSS properties, such as font-size, gap, padding, margin, border-width, line-height, width, height, and more
VariableValue
var(—size-0)0px
var(—size-1)1px
var(—size-2)4px
var(—size-3)8px
var(—size-4)12px
var(—size-5)16px
var(—size-6)20px
var(—size-7)24px
var(—size-8)32px
var(—size-9)40px
var(—size-10)48px
var(—size-11)64px
var(—size-12)80px
var(—size-13)96px

​
Colors

A minimalistic color palette for your project.
You might notice this was heavily inspired by TailwindCSS… or, you know, borrowed 😎

​
Neutral Colors

var(—color-neutral-50)

#fafafa

var(—color-neutral-100)

#f5f5f5

var(—color-neutral-200)

#e5e5e5

var(—color-neutral-300)

#d4d4d4

var(—color-neutral-400)

#a3a3a3

var(—color-neutral-500)

#737373

var(—color-neutral-600)

#525252

var(—color-neutral-700)

#404040

var(—color-neutral-800)

#262626

var(—color-neutral-900)

#171717

var(—color-neutral-950)

#0a0a0a

​
Brand Colors

var(—color-blue-50)

#eff6ff

var(—color-blue-100)

#dbeafe

var(—color-blue-200)

#bfdbfe

var(—color-blue-300)

#93c5fd

var(—color-blue-400)

#60a5fa

var(—color-blue-500)

#3b82f6

var(—color-blue-600)

#2563eb

var(—color-blue-700)

#1d4ed8

var(—color-blue-800)

#1e40af

var(—color-blue-900)

#1e3a8a

var(—color-blue-950)

#172554