Color Tokens

This page covers the color design tokens defined in Lism CSS: semantic colors and palette colors.

Semantic Colors

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 Colors

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 controls the base lightness and --C the base chroma. Adjusting these two variables shifts the entire palette at once.

Using Palette Colors

The u--cbox utility class derives color, background-color, and border-color from a --keycolor base value using color-mix().

↓

Basic u—cbox usage

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

Resize

<div class="u--cbox -p:20" style="--keycolor: var(--red)">...</div>
<div class="set--var:bxsh u--cbox -bd -bdrs:20 -bxsh:20 -p:20" style="--keycolor: var(--purple)">...</div>
<div class="u--cbox -bd-x-s -p:20" style="--keycolor: var(--brand); --bdc: var(--keycolor); --bdw: 4px">...</div>

<Lism util="cbox" keycolor="red" p="20">...</Lism>
<Lism util="cbox" keycolor="purple" bd bdrs="20" bxsh="20" set="var:bxsh" p="20">...</Lism>
<Lism util="cbox" keycolor="brand" bdc="keycolor" bd-x-s bdw="4px" p="20">...</Lism>

↓

Palette color list

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

For detailed usage and customization of u--cbox, see Utility Classes.

Utility Class

Learn about the utility classes in Lism CSS that apply bundled styles and decorations.

Customization Examples

Dark Mode

Because palette colors are OKLCH-based, adjusting the --L (lightness) and --C (chroma) variables changes the entire palette at once.

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

Customizing Semantic Colors

Override semantic colors to match your site’s branding.

:root {
  --brand: #1e5f8c;
  --accent: #d94a6a;
  --link: oklch(50% 0.3 240);
}