Shadows
Shadows communicate elevation — how "lifted" an element feels above the page. Use sparingly and consistently.
Scale
| Token | Usage |
|---|---|
--mk-shadow-none | No shadow (flat elements) |
--mk-shadow-xs | Subtle borders / focus rings |
--mk-shadow-sm | Cards, dropdowns |
--mk-shadow-md | Popovers, floating elements |
--mk-shadow-lg | Modals, sheets |
--mk-shadow-xl | Prominent overlays |
--mk-shadow-2xl | Hero elements |
--mk-shadow-inner | Inset (inputs, pressed states) |
Preview
shadow-none
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
Usage guidance
- Cards at rest:
shadow-sm - Cards on hover:
shadow-md - Dropdowns / popovers:
shadow-md - Modals:
shadow-xl - Focus rings: use
--mk-focus-ringwithbox-shadow: 0 0 0 3px var(--mk-focus-ring)