Elevation

Elevation is utilized to consistently separate overlapping elements
on the interface, creating a cohesive elevation effect between layers.

Shadow

Please be cautious while using shadow-200 on cards and widgets. We still test the value for the best fit within the layout.

inset 0 -1px 0 0 rgb(213,213,213)

shadow-100

Row divider, Component border

0 1px 0 0 rgb(213,213,213)

shadow-200

Card, widgets

0 2px 4px 0 rgba(31,31,31,0.08), 0 1px 1px 0 rgb(213,213,213)

shadow-300

Overlay menu, calendar

0 4px 8px 0 rgba(31,31,31,0.12), 0 1px 1px 0 rgb(213,213,213)

shadow-400

Tooltip, Toast notification

0 4px 6px 0 rgba(31,31,31,0.12), 0 2px 8px 0 rgba(31,31,31,0.16), 0 1px 1px 0 rgba(213,213,213,0.16)

shadow-500

Modals

Frame Design System from Mikrogrup