Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Layout
Modals
Modals / Confirmation
Panels
Tabs

Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields

Status & Feedback
Badges
Progress Indicators
Tooltips

Shadows are an element of our user interface that provide definition to page elements and visual cues as to their priority within our product experience. 

◢

Types of Shadows

We currently employ 2 types of shadows in our product experiences. 

RAISED SHADOWS

Raised shadows are the default elevation of shadows. They are used to delineate primary content containers. A raised shadow offsets the primary content container from the page background and creates a visual frame that helps focus the user's attention. 

Example of a Raised Shadow: 

FLOATING SHADOWS

Floating shadows are higher in elevation than Raised shadows. They are reserved for user interface elements that occur outside of the primary use case for a given experience. Examples of these types of "violator" experiences can be Tooltips, Modals, Alerts, and Messages.

Example of a Floating Shadow:

Notes + Specifications

---------
Raised Shadow

color: Grey 70
opacity: 20%
x: 0
y: 1
blur: 6

---------
Floating Shadow

color: Grey 70
opacity: 20%
x: 0
y: 2
blur: 12