Effects

Effects include radius, shadow, border, and motion tokens.

Radius

--radius-none

0

--radius-xs

0.125rem

--radius-sm

0.25rem

--radius-md

0.375rem

--radius-lg

0.5rem

--radius-xl

0.75rem

--radius-2xl

1rem

--radius-full

9999px

--radius-card

0.5rem

--radius-control

0.375rem

Shadow

--shadow-none

none

--shadow-xs

0 1px 1px rgb(36 33 28 / 0.05)

--shadow-sm

0 1px 2px rgb(36 33 28 / 0.08), 0 1px 1px rgb(36 33 28 / 0.04)

--shadow-md

0 8px 20px rgb(36 33 28 / 0.08), 0 2px 6px rgb(36 33 28 / 0.06)

--shadow-lg

0 18px 42px rgb(36 33 28 / 0.12), 0 4px 12px rgb(36 33 28 / 0.08)

--shadow-xl

0 26px 70px rgb(36 33 28 / 0.16), 0 10px 24px rgb(36 33 28 / 0.1)

--shadow-card

var(--shadow-sm)

--shadow-panel

var(--shadow-md)

--shadow-focus

0 0 0 4px rgb(156 143 217 / 0.24)

Border Width

--border-width-hairline

0.5px

--border-width-thin

1px

--border-width-medium

1.5px

--border-width-thick

2px

--border-width-heavy

3px

Motion Duration

--duration-instant

0ms

--duration-fast

120ms

--duration-normal

180ms

--duration-slow

260ms

--duration-slower

420ms

Transition Groups

--transition-interactive

color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard)

--transition-surface

background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard)

--transition-motion

opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-soft)