Effects
Border radius, shadows, and focus ring tokens.
Border Radius
The radius system uses a multiplier approach. All values are computed from a single --radius base token (0.625rem / 10px).
radius-sm
--radius-sm
radius-md
--radius-md
radius-lg (base)
--radius-lg
radius-xl
--radius-xl
radius-2xl
--radius-2xl
radius-3xl
--radius-3xl
radius-4xl
--radius-4xl
Radius Tokens
| Token | Multiplier | Computed |
|---|---|---|
radius-sm | 0.6x | ~6px |
radius-md | 0.8x | ~8px |
radius-lg | 1.0x (base) | 10px |
radius-xl | 1.4x | ~14px |
radius-2xl | 1.8x | ~18px |
radius-3xl | 2.2x | ~22px |
radius-4xl | 2.6x | ~26px |
Use via Tailwind: rounded-sm, rounded-md, rounded-lg, rounded-xl, etc.
To change the overall roundness of the system, adjust the single --radius variable in globals.css. All derived radii update automatically.
Shadows
Use Tailwind's shadow utilities for elevation:
<div className="shadow-sm">Subtle card elevation</div>
<div className="shadow-md">Medium elevation</div>
<div className="shadow-lg">High elevation (modals, popovers)</div>Focus Ring
The --ring token defines the focus ring color used across all interactive elements. It's applied automatically via the outline-ring/50 base style.
:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}This ensures all interactive elements have a visible, accessible focus indicator.