Shadows
There are three shadows available to provide depth to an interface.
Small
0px 1px 2px 0px rgba(1, 30, 56, 0.25)
Medium
0px 3px 8px 0px rgba(1, 30, 56, 0.18)
Large
0px 6px 12px 2px rgba(1, 30, 56, 0.15)
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 the boxShadow 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.