Elevation

Shadows from Figma effect styles, plus blur, opacity, border-width and focus tokens.

Shadows

--focus-ring-width

Focus ring thickness. Pair with color/border/focus and focus/ring-offset.

2px

--shadow-elevation-0

Effect style elevation/0.

0 0 0 0 #00000000

--shadow-elevation-inner

Effect style elevation/inner.

shadow-elevation-inner

inset 0 2px 4px 0 #00000014

--shadow-focus-ring

Effect style focus/ring.

shadow-focus-ring

0 0 0 2px #ffffff, 0 0 0 4px #25a156

--shadow-lg

Effect style shadow/lg.

shadow-lg

0 12px 32px -8px #0b120d33

--shadow-md

Effect style shadow/md.

shadow-md

0 6px 16px -4px #0b120d1f

--shadow-sm

Effect style shadow/sm.

shadow-sm

0 2px 6px -1px #0b120d14

--shadow-xl

Effect style shadow/xl.

shadow-xl

0 24px 56px -12px #0b120d40

--shadow-xs

Effect style shadow/xs.

shadow-xs

0 1px 2px 0 #0b120d0f, 0 1px 1px 0 #0b120d08

Blur

--blur-lg

Heavy blur for modal scrims and hero backdrops.

blur-lg

32px

--blur-md

Standard glass surface blur.

blur-md

16px

--blur-sm

Subtle backdrop blur for translucent chrome.

blur-sm

8px

Raw values3

--blur-16

Raw value. Use a semantic token instead.

16px

--blur-32

Raw value. Use a semantic token instead.

32px

--blur-8

Raw value. Use a semantic token instead.

8px

Opacity

--opacity-0

0% opacity step. Primitive.

0

--opacity-100

100% opacity step. Primitive.

1

--opacity-16

16% opacity step. Primitive.

0.16

--opacity-24

24% opacity step. Primitive.

0.24

--opacity-40

40% opacity step. Primitive.

0.4

--opacity-56

56% opacity step. Primitive.

0.56

--opacity-72

72% opacity step. Primitive.

0.72

--opacity-8

8% opacity step. Primitive.

0.08

--opacity-88

88% opacity step. Primitive.

0.88

Border width

--border-width-0

0px stroke. Primitive — alias via a semantic token.

0px

--border-width-1

1px stroke. Primitive — alias via a semantic token.

1px

--border-width-2

2px stroke. Primitive — alias via a semantic token.

2px

--border-width-4

4px stroke. Primitive — alias via a semantic token.

4px

--border-width-medium

2px border for selected or emphasised states.

2px

--border-width-none

No border.

0px

--border-width-thick

4px border for heavy emphasis.

4px

--border-width-thin

Default 1px border for cards, inputs and dividers.

1px