Design Tokens

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

COLOR

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

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

Typography

Token	Variable
`FF` (font-family)	`--ff--base`, `--ff--accent`, `--ff--mono`
`FW` (font-weight)	`--fw--light`, `--fw--normal`, `--fw--bold`
`FZ` (font-size)	`--fz--2xs` to `--fz--5xl`
`LH` (line-height)	`--hl--xs`, `--hl--s`, `--hl--base`, `--hl--l`
`LTS` (letter-spacing)	`--lts--s`, `--lts--base`, `--lts--l`, `--lts--xl`

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

SPACE

Token value	Variable	Approx.
`5`	`--s5`	`4px`
`10`	`--s10`	`8px`
`15`	`--s15`	`12px`
`20`	`--s20`	`16px`
`30`	`--s30`	`24px`
`40`	`--s40`	`40px`
`50`	`--s50`	`64px`
`60`	`--s60`	`104px`
`70`	`--s70`	`168px`
`80`	`--s80`	`272px`

A Fibonacci-based spacing scale. See Spacing Tokens for the full list of supported Property Classes.

`RADIUS`

Token value	Variable	Class	Default value
`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`
`99`	`--bdrs--99`	`-bdrs:99`	`99rem`

↓

Preview

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

`SHADOW`

Token value	Variable	Class
`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`

Each --bxsh--{token} value is built from the following component variables.

Component variable	Default value
`--shc`	`hsl(220 4% 8% / 15%)`
`--shsz--10`	`0px 1px 3px`
`--shsz--20`	`0px 2px 6px`
`--shsz--30`	`0px 4px 12px`
`--shsz--40`	`0px 8px 24px`
`--shsz--50`	`0px 16px 48px`

↓

Preview

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

`OPACITY`

Token value	Variable	Class	Default value
`mp`	`--o--mp`	`-o:mp`	`0.9`
`p`	`--o--p`	`-o:p`	`0.75`
`pp`	`--o--pp`	`-o:pp`	`0.5`
`ppp`	`--o--ppp`	`-o:ppp`	`0.25`

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）

↓

Preview

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

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

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

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

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

`SIZE`

Tokens for content sizing.

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

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