Source: https://monarchui.dev/tokens/

Foundations

# Tokens

Spacing, radius, elevation, motion and layout, as CSS variables. Colour and type have their own pages. Use the variables or the Tailwind preset; never raw values.

## Spacing

A 4px grid with half steps at the small end.

--mn-space-

0

·

0

--mn-space-

1

·

0.25rem

--mn-space-

2

·

0.5rem

--mn-space-

3

·

0.75rem

--mn-space-

4

·

1rem

--mn-space-

5

·

1.25rem

--mn-space-

6

·

1.5rem

--mn-space-

8

·

2rem

--mn-space-

10

·

2.5rem

--mn-space-

12

·

3rem

--mn-space-

16

·

4rem

--mn-space-

20

·

5rem

--mn-space-

24

·

6rem

--mn-space-

px

·

1px

--mn-space-

0-5

·

0.125rem

--mn-space-

1-5

·

0.375rem

--mn-space-

2-5

·

0.625rem

## Radius

--mn-radius-

none

0

--mn-radius-

xs

0.25rem

--mn-radius-

sm

0.375rem

--mn-radius-

md

0.5rem

--mn-radius-

lg

0.75rem

--mn-radius-

xl

1rem

--mn-radius-

2xl

1.25rem

--mn-radius-

full

9999px

## Elevation

--mn-shadow-

xs

--mn-shadow-

sm

--mn-shadow-

md

--mn-shadow-

lg

--mn-shadow-

xl

## Motion

Hover a row to see the duration. All durations become 0ms under `prefers-reduced-motion`.

--mn-duration-

instant

·

0ms

--mn-duration-

fast

·

120ms

--mn-duration-

base

·

180ms

--mn-duration-

slow

·

260ms

--mn-duration-

slower

·

400ms

## Layout

| Variable | Use |
| --- | --- |
| `--mn-layout-content-max` | Widest content column in an app |
| `--mn-layout-reading-max` | Comfortable line length for prose |
| `--mn-layout-gutter` | Page side padding, narrow screens |
| `--mn-layout-gutter-lg` | Page side padding, wide screens |
| `--mn-width-narrow` | Marketing: narrow column |
| `--mn-width-content` | Marketing: content column |
| `--mn-width-wide` | Marketing: wide column |