Design tokens

Spacing & elevation

The spacing scale (space-0 through space-120), shadow/elevation tokens, and border-width tokens from alligo-design-tokens. Shadows and borders are rendered with var(--shadow-...) / var(--border-...) directly, live from the CDN.

Spacing scale

space-0 0px --dimension-spacing-space-0
space-1 1px --dimension-spacing-space-1
space-2 2px --dimension-spacing-space-2
space-4 4px --dimension-spacing-space-4
space-8 8px --dimension-spacing-space-8
space-12 12px --dimension-spacing-space-12
space-16 16px --dimension-spacing-space-16
space-24 24px --dimension-spacing-space-24
space-32 32px --dimension-spacing-space-32
space-40 40px --dimension-spacing-space-40
space-48 48px --dimension-spacing-space-48
space-56 56px --dimension-spacing-space-56
space-64 64px --dimension-spacing-space-64
space-72 72px --dimension-spacing-space-72
space-80 80px --dimension-spacing-space-80
space-112 112px --dimension-spacing-space-112
space-120 120px --dimension-spacing-space-120

Shadow / elevation

elevation-b-20 --shadow-elevation-b-20
elevation-b-40 --shadow-elevation-b-40
elevation-b-60 --shadow-elevation-b-60
elevation-b-80 --shadow-elevation-b-80
elevation-b-100 --shadow-elevation-b-100
elevation-t-20 --shadow-elevation-t-20
elevation-t-40 --shadow-elevation-t-40
elevation-t-60 --shadow-elevation-t-60
elevation-t-80 --shadow-elevation-t-80
elevation-t-100 --shadow-elevation-t-100
elevation-input-control-switch --shadow-elevation-input-control-switch
elevation-drawer-left --shadow-elevation-drawer-left
elevation-drawer-right --shadow-elevation-drawer-right
elevation-drawer-left-menu-sublevel --shadow-elevation-drawer-left-menu-sublevel
elevation-table-overflow-left --shadow-elevation-table-overflow-left
elevation-table-overflow-right --shadow-elevation-table-overflow-right

Border width

brd-1 --border-brd-1 0.063rem solid #000000
brd-2 --border-brd-2 0.125rem solid #000000
brd-4 --border-brd-4 0.25rem solid #000000

Radius

full --dimension-radius-full 62.438rem