Radius & Border-as-Elevation
6px card / 4px button radius — the hairline border does the work shadows used to
09Geometry & motion
Four radii exist and no more — Tailwind's rounded-lg/-xl are deliberately left undefined so reaching for one is a build error. One easing curve, no springs.
--radius-card | var(--ns-radius-card) | |
--radius-btn | var(--ns-radius-btn) | |
--radius-pill | var(--ns-radius-pill) | |
--radius-sm | var(--ns-radius-sm) | |
--shadow-card | var(--ns-shadow-card) | |
--shadow-raised | var(--ns-shadow-raised) | |
--shadow-brand | 0 0 0 1px color-mix(in srgb, var(--color-brand-500) 55%, transparent) | |
--shadow-focus | 0 0 0 3px color-mix(in srgb, var(--color-brand-500) 25%, transparent) | |
--ease-out | var(--ns-ease-out) | |
--ease-draw | var(--ns-ease-draw) | |
--duration-fast | 120ms | |
--duration-base | 180ms | |
--duration-slow | 420ms | |
--duration-draw | 700ms |
Interaction — focus ring, press/disabled/loading dim, hairline
--border-hairline | 1px | |
--focus-ring-width | 2px | |
--focus-ring-offset | 2px | |
--opacity-press | 0.85 | |
--opacity-disabled | 0.45 | |
--opacity-loading | 0.35 |
Motion
120–180ms plain ease-out only — no spring, no bounce, no hover-lift
Interaction States
Rest, hover, focus, active, disabled, invalid, loading — specified once, for every control