Design Tokens

Lism CSS provides design tokens for the most commonly used CSS properties.

COLOR

For palette colors (--red, --blue, --green, etc.) and customization, see Color Tokens.

Typography

For details on each token and scaling rules, see Typography Tokens.

RADIUS

A second-order arithmetic progression: each increment grows by a constant amount (+0.125rem → +0.25rem → +0.375rem → +0.5rem), so the steps are finer at the small end and bolder at the large end.

<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

Each --bxsh--{token} value is made of two layers: a faint shadow close to the element and the main shadow. The near layer uses the shadow size one step smaller and --shc--near, which is --shc at half opacity.

The default values of the component variables are as follows.

From 10 upward, the shadow sizes form a scale in which both the offset and the blur double at each step, and the blur is always 3x the offset. 5 is a blur-only step with no offset, used for the near layer of --bxsh--10.

<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>

SPACE

The main scale (--s10 through --s70) follows the Fibonacci sequence ((0, 1,) 1, 2, 3, 5, 8, 13, 21, …) and is designed to build the vertical rhythm of typography. The base unit is --s-unit (default 0.5rem ≈ 8px).

Horizontal gaps and paddings do not need to follow the vertical rhythm, so up to 50 the main scale is filled in with 5-step midpoints: --s5 (4px), --s15 (12px), --s25 (20px), --s35 (32px), and --s45 (52px).

:root,
.set--s {
  /* Spacing base unit ≈ 8px */
  --s-unit: 0.5rem;

  --s10: var(--s-unit);            /* ≒ 8px */
  --s20: calc(var(--s-unit) * 2);  /* ≒ 16px */
  --s30: calc(var(--s-unit) * 3);  /* ≒ 24px */
  --s40: calc(var(--s-unit) * 5);  /* ≒ 40px */
  --s50: calc(var(--s-unit) * 8);  /* ≒ 64px */
  --s60: calc(var(--s-unit) * 13); /* ≒ 104px */
  --s70: calc(var(--s-unit) * 21); /* ≒ 168px */

  /* 5-step fillers up to s50 (for horizontal gaps / paddings) */
  --s5:  calc(var(--s-unit) * 0.5); /* ≒ 4px */
  --s15: calc(var(--s-unit) * 1.5); /* ≒ 12px */
  --s25: calc(var(--s-unit) * 2.5); /* ≒ 20px */
  --s35: calc(var(--s-unit) * 4);   /* ≒ 32px */
  --s45: calc(var(--s-unit) * 6.5); /* ≒ 52px */
}

.set--s {
  --s-unit: 0.5em;
}

Spacing tokens work with every Property Class in the padding, margin, and gap families. See the Property Class reference table for details.

Additionally, the set--s class swaps --s-unit to 0.5em, recalculating spacing against the current font size.

If your site uses a fluid --fz--base (e.g. with clamp()) and you want spacing to change fluidly along with the font size, override the unit on :root, e.g. --s-unit: calc(var(--fz--base) * 0.5);.

OPACITY

Named after musical dynamic markings (the piano family): the more times p (piano / soft) is repeated, the higher the transparency.
(mezzo-piano / piano / pianissimo / pianississimo)

<p class="-o:mp">mp: Lorem ipsum ...</p>
<p class="-o:p">p: Lorem ipsum ...</p>
<p class="-o:pp">pp: Lorem ipsum ...</p>
<p class="-o:ppp">ppp: Lorem ipsum ...</p>

<Text o="mp">mp: Lorem ipsum ...</Text>
<Text o="p">p: Lorem ipsum ...</Text>
<Text o="pp">pp: Lorem ipsum ...</Text>
<Text o="ppp">ppp: Lorem ipsum ...</Text>

SIZE

Tokens for content sizing.

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