> ## Documentation Index
> Fetch the complete documentation index at: https://design-system.rodrigoantunes.dev/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
Installing the design system also installs the design tokens automatically
You can also use **npm**, **yarn** or **pnpm**
```bash theme={null}
npm install "@root-axis/design-tokens"
```
Choose between the available formats
```css theme={null}
@import "@root-axis/design-tokens"
```
How to use it:
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;
}
```
```scss theme={null}
@use "@root-axis/design-tokens/scss/tokens.scss" as tokens;
```
How to use it:
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;
}
```
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";
```
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";
```
```js theme={null}
import tokens from "@root-axis/design-tokens/json/tokens.json"
```
How to use it:
JSON imports follow the PascalCase format
```js theme={null}
console.log(tokens.ColorNeutral100); // Output: #f5f5f5
```
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:
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.
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