Borders

Separators

Separators are visual elements that break apart or contain space, i.e., rules between objects or outlines on objects.

Example

Variables

Controls

Controls are a subset of UI components that facilitate interaction within the application, i.e., Secondary Buttons, Button Groups and the Search Field. Control borders are used to outline these components and are not intended for use as separators.

Example

Variables

Containers

Container borders create contrast between a layered component – such as a Popover or Dialog – and the background canvas on which it is layered.

Example

Variables

Layered components – Dialog, Modal, Notifications, and Popover – only use containers with white backgrounds. Therefore, layered components only have one border variable that works across all backgrounds.

Headers

Header borders establish a clear hierarchy of content on a page by offering three variations: Primary, Secondary, and Tertiary. Use these variations to create a legible visual architecture which clearly communicates the organization of information.

Primary

Variables

Secondary

Variables

Tertiary

Variables