Shadows

There are three shadows available to provide depth to an interface.

Small

0px 0px 3px 0px rgba(1, 30, 56, 0.2)

Medium

0px 1px 4px 0px rgba(1, 30, 56, 0.15)

Large

0px 3px 5px 0px rgba(1, 30, 56, 0.1)

States

Focus

0px 0px 5px 0px rgba(33, 107, 235, .9)

Error

0px 0px 5px 0px rgba(204, 20, 57, .9)

Usage

Shadows can be added to the Box component using theboxShadow prop. Focus and Error states come built-in to inputs already, and all of our shadow values are stored in the theme for referencing anywhere else.