Shadows & Blurs
Brand-tinted shadows — never flat black — plus the signature glow-focus ring.
Every shadow in the system is tinted with brand-900 (#1E3485) at low
opacity instead of black. It's subtle, but it's part of what makes the
brand feel considered rather than a default Tailwind theme.
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
Glow focus
The signature focus ring, used on every interactive component: brand-500
at 24% opacity, 4px spread, zero blur, zero offset. Not a hard 2px outline.
This is non-negotiable — every interactive component must use it.
--shadow-glow-focus: 0 0 0 4px rgb(59 99 245 / 0.24);Applied via focus-visible:shadow-[var(--shadow-glow-focus)] (or the
focus-glow utility defined in theme.css), never a focus:outline or
ring-* utility.
Blur
blur-sm
blur-md
blur-lg
Used sparingly — backdrop blur behind modals/overlays, not as a general design flourish.