Shadows

Rules

Our work on shadow is deeply inspired by Google Material.

The shadow color must be 26282D .

Each element must have its own elevation (from 0 to 12), which determine its shadow. For example:

If DP x or y Blur Alpha
1 When shift: 1 or 0 0, when centered : 2 10
2 When shift: 1 or 0 2, when centered : 4 10
3 When shift: 2 or 0 3, when centered : 6 10
4 When shift: 2 or 0 4, when centered : 8 10
5 When shift: 3 or 0 5, when centered : 10 15
6 When shift: 3 or 0 6, when centered : 12 15
7 When shift: 4 or 0 7, when centered : 14 15
8 When shift: 4 or 0 8, when centered : 16 15
10 When shift: 5 or 0 10, when centered : 20 20
12 When shift: 6 or 0 12, when centered : 24 20
14 When shift: 7 or 0 14, when centered : 28 20

Usage

Shadow grid

DP Element Shadow position
0 Buttons, Select No shadows
1 Cards Bottom
3 Tooltip Bottom
4 Chatbox Center
6 Sidebar Desk Right or Left
8 Secondary menu (mentions…) Depends on placement
12 Dropdown menu Bottom
12 Dragable popin Centered
13 Overlay (#26282d, 80%)
14 Modal Centered

Shadow grid