Skip to content

Instantly share code, notes, and snippets.

concept scale source
sizing (in general) 2xs xs sm md lg xl 2xl 3xl ... mixed Bootstrap + IBM Carbon
importance primary secondary tertiary mixed Bootstrap + IBM Carbon
color 50 100 200 300 ... 800 900 following Google Material
font-size sm md lg xl 2xl 3xl following Google Material
line-height 100 110 125 150 175 200 250 ... following rem scale
space 0 1 2 4 8 12 16 20 24 32 40 48 64 80 96 112 128 following px scale
negative-space n1 n2 n4 n8 n12 n16 n20 ... n128 following px scale
font-weight thin light normal medium semibold bold extrabold black following default font stroke weights
border-radius none sm md lg full following modfied Bootstrap
concept labels
direction/alignment start center end
spatial-orientation top right bottom left
pseudo-element before after
type denotation
state default hover active pressed selected on off visited focused disabled error loading dragged
variant primary secondary tertiary success info warning danger magic neutral surface
mode light dark
category sub-category
breakpoint breakpoint
color text bg border fill
opacity opacity
elevation shadow layer
type face size weight line-height spacing
shape radius
space space
motion duration animation
property property-label category
color text color
background-color bg color
border-color border color
border-radius radius shape
box-shadow shadow elevation
fill fill color
font-family face type
font-size size type
font-weight weight type
@andrzejdelgado
andrzejdelgado / token-taxonomy-table.csv
Last active June 29, 2023 12:35
Token Taxonomy Table
name category sub-category item sub-item variant size property/state
primitive d color primary 500
primitive d color surface 100
primitive d type display sm
primitive d type heading lg
primitive d shape radius none
primitive d shape radius sm
system d type size body
system d type face brand
system d type face mono