CogniSyncElevation & Shadows — CogniSync Design System
Shadows help communicate depth, hierarchy, and layering. Our elevation tokens are semantic, responsive, and lightweight — optimized for both design and code.
| Tokens | Shadow value [offset x,y/ blur/ spread/ color] | Showcase |
|---|---|---|
Shadow/xs | 0px, 1px, 2px hex(000000, 0.05) | |
Shadow/sm | 0px, 1px, 3px hex(000000, 0.10)0px, 1px, 2px, -2px hex(000000, 0.10) | |
Shadow/md | 0px, 4px, 6px, -1px hex(000000, 0.10)0px, 2px, 4px, -2px hex(000000, 0.10) | |
Shadow/lg | 0px, 10px, 15px, -3px hex(000000, 0.10)0px, 4px, 6px, -4px hex(000000, 0.10) | |
Shadow/xl | 0px, 20px, 25px, -5px hex(000000, 0.10)0px, 8px, 10px, -6px hex(000000, 0.10) | |
Shadow/2xl | 0px, 25px, 50px, -12px hex(000000, 0.25) |