Effects

Shadows, radius, animation, and component density. Radius: lg, spacing: md.

Shadows

Palette-tinted in light mode (shadow hue shifts with palette), high-opacity black in dark. Flip theme to compare.

Shadow scale

Cards, buttons

Elevated cards, dropdowns

Modals, popovers, sheets

inset

Pressed / sunken states

Glassmorphism

Glass panel

blur: 20px

Border radius

5 presets (none → full). Each component maps to its own radius token — changing the preset updates everything at once.

Radius presets

Active: lg. Each component gets its own radius token.

button

—

input

—

textarea

—

card

—

checkbox

—

tooltip

—

avatar

—

Nested radius rule

Inner radius = outer radius - padding gap. Keeps consistent visual curvature.

outer: 24pxgap: 16px

inner: 8px (24 - 16)

Animation

3 easing curves, 3 duration tiers, and 8 keyframe animations. Click to preview.

Easing curves

soft

Default transitions

bounce

Toggles, checkboxes

smooth

Modals, sheets

Duration tokens

fast

150msHover, focus

normal

250msColor, border, opacity

slow

400msLayout, transform, slide

Keyframe animations

fade-upOpacity 0→1, Y 8→0

fade-downOpacity 0→1, Y -8→0

scale-inOpacity 0→1, scale 0.95→1

slide-in-rightX 100%→0

slide-in-leftX -100%→0

fade-outOpacity 1→0, scale 1→0.95

shimmerGradient sweep (skeleton)

pulseOpacity 1→0.5→1 (loading)

Component density

Internal padding for inputs, buttons, and cards. Changes with the spacing preset. See also: Spacing for layout tokens.

Component density

Active spacing preset: md. Controls internal padding of inputs, buttons, and cards.

--ds-space-card

Card padding

—

--ds-space-card-sm

Compact card padding

—

--ds-space-input-x

Input horizontal

—

--ds-space-input-y

Input vertical

—

--ds-space-button-sm

Button sm padding

—

--ds-space-button-md

Button md padding

—

--ds-space-button-lg

Button lg padding

—

Z-index layers

dropdown50

sticky100

overlay200

modal300

popover400

toast500