Design Tokens

COLOR

Token	Variable
`base`	`--base`
`base-2`	`--base-2`
`text`	`--text`
`text-2`	`--text-2`
`divider`	`--divider`
`link`	`--link`
`brand`	`--brand`
`accent`	`--accent`

Adjust these colors to match your site’s design.

↓

Preview

Main color example text

text: Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

text-2: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Accent color example text

text: Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

text-2: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

PALETTE

Palette token	Variable
`red`	`--red`
`orange`	`--orange`
`yellow`	`--yellow`
`green`	`--green`
`blue`	`--blue`
`purple`	`--purple`
`pink`	`--pink`
`gray`	`--gray`
`black`	`--black`
`white`	`--white`

Palette colors are defined in OKLCH.

--L is defined as the base lightness value and --C as the base chroma value. Adjusting these two values lets you tune the overall palette color.

For example, the following makes the palette slightly brighter, making it easy to implement dark mode support.

:root[data-theme='dark'] {
  --L: 72%;
  --C: 0.22;
}

`RADIUS`

Token value	Variable	Class	Default value
`5`	`--bdrs--5`	`-bdrs:5`	`2px`
`10`	`--bdrs--10`	`-bdrs:10`	`0.25rem`
`20`	`--bdrs--20`	`-bdrs:20`	`0.5rem`
`30`	`--bdrs--30`	`-bdrs:30`	`1rem`
`40`	`--bdrs--40`	`-bdrs:40`	`1.5rem`
`50`	`--bdrs--50`	`-bdrs:50`	`2rem`
`99`	`--bdrs--99`	`-bdrs:99`	`99rem`

↓

Preview

<div class="-bdrs:5">...</div>
<div class="-bdrs:10">...</div>
<div class="-bdrs:20">...</div>
<div class="-bdrs:30">...</div>
<div class="-bdrs:40">...</div>
<div class="-bdrs:50">...</div>
<div class="-bdrs:99">...</div>

`SHADOW`

Token value	Variable	Class
`5`	`--bxsh--5`	`-bxsh:5`
`10`	`--bxsh--10`	`-bxsh:10`
`20`	`--bxsh--20`	`-bxsh:20`
`30`	`--bxsh--30`	`-bxsh:30`
`40`	`--bxsh--40`	`-bxsh:40`
`50`	`--bxsh--50`	`-bxsh:50`

The value of --bxsh--{token} is composed of the following variables.

Component variable	Default value
`--shc`	`hsl(220 4% 8% / 5%)`
`--shsz--5`	`0px 2px 4px`
`--shsz--10`	`1px 3px 6px`
`--shsz--20`	`1px 5px 10px`
`--shsz--30`	`2px 8px 16px`
`--shsz--40`	`3px 13px 26px`
`--shsz--50`	`5px 21px 42px`

↓

Preview

<div class="-bxsh:10">...</div>
<div class="-bxsh:20">...</div>
<div class="-bxsh:30">...</div>
<div class="-bxsh:40">...</div>
<div class="-bxsh:50">...</div>

`OPACITY`

Token value	Variable	Class	Default value
`-10`	`--o--n10`	`-o:-10`	`0.75`
`-20`	`--o--n20`	`-o:-20`	`0.5`
`-30`	`--o--n30`	`-o:-30`	`0.25`

↓

Preview

-10: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

-20: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

-30: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<p class="-o:-10">Lorem ipsum ...</p>
<p class="-o:-20">Lorem ipsum ...</p>
<p class="-o:-30">Lorem ipsum ...</p>

`SIZE`

Tokens for content sizing.

Token value	Variable
`xs`	`--sz--xs`
`s`	`--sz--s`
`m`	`--sz--m`
`l`	`--sz--l`
`xl`	`--sz--xl`
`min`	`--sz--min`

Available for use with max-sz, .is--wrapper, and similar utilities.