> ## Documentation Index
> Fetch the complete documentation index at: https://rodrigo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

> [!NOTE]
>
> Installing the design system also installs the design tokens automatically

**1. Install the package**

You can also use **npm**, **yarn** or **pnpm**

```bash theme={null}
npm install "@root-axis/design-tokens"
```

**2. Import the package**

Choose between the available formats

> [tab] CSS
>
> ```css theme={null}
> @import "@root-axis/design-tokens"
> ```
>
> How to use it:
> \[!NOTE] CSS imports follow the kebab-case format
>
> ```css theme={null}
> 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;
> }
> ```

> [tab] SCSS
>
> ```scss theme={null}
> @use "@root-axis/design-tokens/scss/tokens.scss" as tokens;
> ```
>
> How to use it:
> \[!NOTE] SCSS imports follow the kebab-case format
>
> ```scss theme={null}
> 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;
> }
> ```

> [tab] JS
>
> > [!NOTE]
> >
> > JS imports follow the PascalCase format
>
> ```js theme={null}
> import {
>   ColorNeutral100,
>   ColorNeutral900,
>   Size5,
>   Size3,
>   Size2,
> } from "@root-axis/design-tokens/js/tokens.js";
> ```
>
> How to use it:
>
> ```js theme={null}
> // 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";
> ```

> [tab] TS
>
> > [!NOTE]
> >
> > TS imports follow the PascalCase format
>
> ```ts theme={null}
> import {
>   ColorNeutral100,
>   ColorNeutral900,
>   Size5,
>   Size3,
>   Size2,
> } from "@root-axis/design-tokens/ts/tokens";
> ```
>
> How to use it:
>
> ```js theme={null}
> // 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";
> ```

> [tab] JSON
>
> ```js theme={null}
> import tokens from "@root-axis/design-tokens/json/tokens.json"
> ```
>
> How to use it:
> \[!NOTE] JSON imports follow the PascalCase format
>
> ```js theme={null}
> console.log(tokens.ColorNeutral100); // Output: #f5f5f5
> ```

> [tab] TailwindCSS
>
> > [!TIP]
> >
> > You can use this alongside TailwindCSS by importing it **before** the Tailwind directives
>
> ```css globals.css theme={null}
> @import "@root-axis/design-tokens";
> @tailwind base;
> @tailwind components;
> @tailwind utilities;
> ```
>
> How to use it:
> \[!NOTE] CSS imports follow the kebab-case format
>
> ```css theme={null}
> 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](#font-weight)
* [Size](#size)
* [Colors](#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.

> [!TIP]
>
> 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.

> [!NOTE]
>
> 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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.