Installation

Installing the design system also installs the design tokens automatically

Install the package

You can also use npm, yarn or pnpm

npm install "@root-axis/design-tokens"

Import the package

Choose between the available formats

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

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

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

How to use it:

SCSS imports follow the kebab-case format

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

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

How to use it:

JSON imports follow the PascalCase format

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

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:

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.

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

Getting Started

Installation

Guides

Components

Design Tokens

Installation

Tokens

Font Weight

Size

Colors

Neutral Colors

Brand Colors

Getting Started

Installation

Guides

Components

​Installation

​Tokens

​Font Weight

​Size

​Colors

​Neutral Colors

​Brand Colors

Installation

Tokens

Font Weight

Size

Colors

Neutral Colors

Brand Colors