Design Tokens

You can use the design tokens as a standalone approach to ensure your components align seamlessly with the design principles of your project.

​

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

   @import "@root-axis/design-tokens"
   

   How to use it:

   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;
   }
   

   SCSS

   @use "@root-axis/design-tokens/scss/tokens.scss" as tokens;
   

   How to use it:

   button {
     color: tokens.$color-neutral-100;
     background: tokens.$color-neutral-900;
     padding-inline: tokens.$size-5;
     padding-block: tokens.$size-3;
     border-radius: tokens.$size-2;
     border: none;
   }
   

   JS

   JS imports follow the PascalCase format

   import {
     ColorNeutral100,
     ColorNeutral900,
     Size5,
     Size3,
     Size2,
   } from "@root-axis/design-tokens/js/tokens.js";
   

   How to use it:

   // Get the button element from the DOM
   const button = document.querySelector("button");
   
   // Apply styles dynamically to the button element
   // Assuming there is already a button in the DOM ⚠️
   button.style.color = ColorNeutral100;
   button.style.backgroundColor = ColorNeutral900;
   button.style.paddingInline = Size5;
   button.style.paddingBlock = Size3;
   button.style.borderRadius = Size2;
   button.style.border = "none";
   

   TS

   TS imports follow the PascalCase format

   import {
     ColorNeutral100,
     ColorNeutral900,
     Size5,
     Size3,
     Size2,
   } from "@root-axis/design-tokens/ts/tokens";
   

   How to use it:

   // Get the button element from the DOM
   const button = document.querySelector("button") as HTMLButtonElement;
   
   // Apply styles dynamically to the button element
   // Assuming there is already a button in the DOM ⚠️
   button.style.color = ColorNeutral100;
   button.style.backgroundColor = ColorNeutral900;
   button.style.paddingInline = Size5;
   button.style.paddingBlock = Size3;
   button.style.borderRadius = Size2;
   button.style.border = "none";
   

   JSON

   import tokens from "@root-axis/design-tokens/json/tokens.json"
   

   How to use it:

   console.log(tokens.ColorNeutral100); // Output: #f5f5f5
   

   TailwindCSS

   You can use this alongside TailwindCSS by importing it before the Tailwind directives

   globals.css

   @import "@root-axis/design-tokens";
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

   How to use it:

   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:

• Font Weight
• Size
• Colors

“Less is more” (Ludwig Mies van der Rohe)

​

Font Weight

Font-weight tokens to ensure consistent typography weights.

Variable	Value
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

Variable	Value
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