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

neutral

|--neutral|

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

| 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| |25|--s25|20px| |30|--s30|24px| |35|--s35|32px| |40|--s40|40px| |50|--s50|64px| |60|--s60|104px| |70|--s70|168px| |80|--s80|272px|

A Fibonacci-based harmonic scale, with selected lower-end filler values. 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.