One of the defining features of this style framework is its color palette. It's generated from a few swatches using lots of (human-written ) algebra in the Oklab LCh color space.
| $i | GREY | PINK | PURPLE | BLUE | TEAL | GREEN | YELLOW | ORANGE | RED |
|---|---|---|---|---|---|---|---|---|---|
| 9 | |||||||||
| 8 | |||||||||
| 7 | |||||||||
| 6 | |||||||||
| 5 | |||||||||
| 4 | |||||||||
| 3 | |||||||||
| 2 | |||||||||
| 1 |
The palette is exposed as CSS
variables where each direct color variable has a name like
--(hue)[-$i], but there are several more convenient aliases
you might want to use.
Instead of $i = 2, 5, or 8 you can use dk
(dark), hi (highlight), or lt (light).
You can also add -rgb to the end of any color variable
to get comma-separated RGB channels which can be useful for adding
transparency. For example:
rgba(var(--bg-pink-2-rgb) 0.8)
Adaptive lightswitch
For colors to adapt to the browser's preference of light or dark mode
automatically, use the form --(bg|fg)-(hue)[-$i]. With this
usage, bg will refer to the lighter half in light mode, or
the darker half in dark mode; fg is the same in reverse.
$i can range from 1 to 4 where lower numbers are the
extremities, but you can leave it off and it will default to
1.
There are CSS classes for setting foreground and background colors of
elements which you can use like class="{bg|fg}-{hue}[-$i]".
In this case, fg sets the color property and
bg sets the background-color property. It
follows the same --(bg|fg)-* usage from above, so it can be
a number from 1 to 4, or empty for the default. Class names also
supports -(dk|hi|lt) in the rare case you need it.
You have a lot of colors to pick from, so choose wisely! Always make sure your conbinations meet WCAG AA Contrast (AAA is even better!) in each mode.
Examples
#my-box {
background-color: var(--bg-purple);
color: var(--fg-grey);
border: var(--border-dashed);
}
This is my box!
<div class="bg-green-2">Thing one</div>
<div class="bg-orange fg-red-lt">Thing two</div>
Thing one
Thing two