Skip to main content

Appearance

Border Radius​

Border radi are more than mere visual style, they also help users to understand if a single object overflows the viewport (is cut-off) and make it easier to identify beginnings and ends of combined shapes (eg. <SegmentedButton> or the date range selection in the <DateRangePicker>).

The 5 radius we use are 2px, 4px, 6px, 8px and 12px. You can visit the BorderRadius section on the tokens overview page to get more details.

The following rule can be used to determine which border radius should be used for which component:

  • height or width ≤ 16px = 2px radius
  • height or width ≤ 24px = 4px radius
  • height or width 24px - 48px = 6px radius
  • height or width ≥ 48px = 8px radius
  • resizable/responsive component = 12px radius

Shadow​

Like border radi, shadows are used purposefully, to communicate function and state.

Subtle 1px wide shadows or highlights make buttons and button-like components appear raised from the surface, therefore implying they can be pressed.

Floating objects like <PopOver> cast softer shadows to illustrate elevation. There are three levels of elevation:

  • Overflow: If objects are scrolled within a container, the fixed objects like container headers or -footers cast a very subtle soft shadow to illustrate how they overlap the moving (scrolling) parts.
  • Elevation level 1: <PopOvers> (eg. <ActionMenu>, <DatePicker>) use this shadow style to indicate their level on the z-axis.
  • Elevation level 2: Large objects like modal windows use this shadow style since they are placed further up on the z-axis.

Other Signifiers​

Certain functions in the UI benefit from signifiers that help users to form assumptions about the outcome before the actual interaction. (Learn more about Affordance on Interaction Design Org and Smashing Magazine).

In addition to shadows and highlights (eg. for Buttons, elevation), there are some additional signifiers:

  • A small grip marks draggable components, in combination with an elevation-1 shadow on mouse-over to create meaningful visual feedback.
  • In a similar fashion, we use handles to indicate resizing.