Borders

Borders determine the line style(s) applied to the edges of elements such as field inputs, cards, or lines.

Overlays

Overlays are semi-transparent coverings over UI elements that can be used for indicating state (e.g. hover) or darkening photo backgrounds for light text.

Shadows

Shadows express the degree of elevation between UI surfaces. A shadow's size and softness/diffusion indicate the degree of distance between it and another surface.

Smaller, sharper shadows

Indicate a surface's close proximity to the surface behind it.

Larger, softer shadows

Express more distance between surfaces.

Textures

Textures are perceived surface qualities of layers that can be used to add depth, enhance brand identity, and guide the eye / separate content into logical divisions. They should be used sparingly in all contexts to allow our logo, copy and imagery to take center stage.