Shadows

Subtle elevation system with five levels from xs to xl.

Scale

Token	Tailwind Class	Description
--tx-shadow-xs	shadow-tx-xs	Minimal
--tx-shadow-sm	shadow-tx-sm	Subtle
--tx-shadow-md	shadow-tx-md	Standard
--tx-shadow-lg	shadow-tx-lg	Elevated
--tx-shadow-xl	shadow-tx-xl	Prominent

Preview

xs

sm

md

lg

xl

Focus Ring

--tx-ring-focus provides a consistent focus ring: 0 0 0 3px var(--tx-primary-soft).

Usage

.card {
  box-shadow: var(--tx-shadow-sm);
}

.card:hover {
  box-shadow: var(--tx-shadow-md);
}

.input:focus-visible {
  box-shadow: var(--tx-ring-focus);
}