Surface

The Surface component is used to structure content on a page.

OverviewPropertiesUsage

Elevations

Surfaces come with three possible elevation levels and are, together with Tooltips, the only user interface elements that can overlay other content.

Flat

• Use flat elevation for most cases. Flat Surfaces don't have a drop-shadow and are the most common variant to structure content.

Raised

• Use raised elevation to emphasize Surfaces that need to draw extra attention.
• Use raised Surfaces sparingly to retain their purpose of establishing visual hierarchy.

Floating

• Use floating elevation if the Surface overlays other content. For example, Menu overlays, Select overlays, or `Modal's.

Colors

Surfaces come in five semantic colors, which are noticeable when interactive and selected or focused.

Neutral

• Use the neutral color for Surfaces that shouldn't stand out.
• Use the neutral color to indicate that a Surface is currently selected.
• The neutral color has no semantic meaning and is therefore usually applicable.

Primary

• Use the primary color to highlight a Surface without conveying concern.
• Use primary colored surfaces sparingly, ideally once per view or context at most.
• Avoid using the primary color to indicate a selected Surface. Use neutral instead.

Success

• Use the success color to indicate a positive condition of the Surface's content.
• Avoid over-using it to keep the emphasis on problematic conditions that require attention.

Warning

• Use the warning color to indicate an upcoming or potential negative condition of the Surface's content.

Critical

• Use the critical color to indicate a negative condition of the Surface's content that requires immediate attention.