Toolkit

Shape

Corners

We round shape corners as a stylistic treatment. This helps to soften the appearance of elements.

Small corner radius

Provides a 2px radius. 

The small option is considered the default radius. It can be applied to small element components like buttons, form controls, and badges. 

Medium corner radius

Provides a 4px radius. 

The medium option can be applied to container elements, like cards and modals.

Large corner radius

Provides 8px radius. 

The large option should be used sparingly and with display components, like avatar.

Elevation

Elements can be layered along the z-axis to create visual hierarchy. Elements that are higher in elevation are intended to draw the users focus. 

Elevation is illustrated through the application of shadow. This allows us to imitate the real world and create 3D hierarchy of UI elements and plays an important role in helping users to understand the positioning and structure of elements in an experience.  

Page level elements

By default, elements sit at the page level and receive no shadow. 

Elevated elements

There are three levels of elevation. With each level the shadow becomes more diffuse, illustrating a greater distance from the page.

  • Level one is typically used by dropdown menus and tooltips
  • Level two is reserved for sticky elements including navigation and page headers
  • Level three may only be used by modals and notifications to ensure they are visible. A maximum of one element may receive level 3 elevation at any one time.

  • Table of contents