Surfaces

Approved — Ready for dev

Surfaces make up the containers for many large blocks of content, and can also serve as visual separation between groups of content.

Anatomy

A surface comes in four variants: Background, Base, Raised, and Overlay. Based on how much emphasis or separation is needed, each surface variant can be visually treated through increasing levels of emphasis or theming.

Background Surface

The background surface is visually the lowest container in the z-axis and acts as the container/wrapper for an entire experience. All other surfaces and content will appear in front of the background surface.

Default background treatment
White background treatment
Branded image background treatment
Branded color background treatment

Base Surface

The base surface is a container for main sections of content, and can be visually treated using a No Emphasis, Low Emphasis, Medium Emphasis, High Emphasis, Contextual Emphasis, or Draggable Zone approach.

No Emphasis

When using a no emphasis base surface, no visual indicators are present that the surface exists. The container has no background color or border visible, and would never transition to another surface variant.

Engineering note: This component variant isn’t necessarily a component, but could potentially just be a framework-specific way of creating a container (e.g., <div> in web, Container() in Flutter).

Low Emphasis

When using a low emphasis base surface, the background color is white with an optional subtle border.

Base surface
Border treatment (optional)
Base surface

Medium Emphasis

When using a medium emphasis base surface, the background color is a subtle platform gray with an optional border.

Base surface
Border treatment (optional)
Base surface

High Emphasis

High emphasis base surfaces are containers used to call attention to the primary section of the screen where the highest value actions and information are contained, and should be used with extreme discretion. Only the most pivotal of moments justify the use of such bold color.

High emphasis base surfaces can be treated with either the base affordance, guidance, account, messaging (error, success, warning, etc.) color, or any level of color from these color ramps.

Error base surface
Success base surface
Info base surface

Draggable Zone

Draggable surfaces can either be a base surface or raised surface that are capable of becoming a drag target. The destination of the drag target can be a draggable zone or reordering in a series. The draggable zone is a base surface that indicates to the user a draggable surface can be dropped within the draggable zone.

Broken line border
Solid fill background

Raised Surface

A raised surface is a container for content that is raised on the z-axis in front of the content behind. Elevation indicates interactivity, and can be visually treated with a Low Emphasis, High Emphasis, or Contextual Emphasis approach in the same pattern as Base Surfaces.

Low Emphasis

When using a low emphasis raised surface, only a drop shadow and white background exists to indicate interactivity and elevation.

Raised surface

High Emphasis

High emphasis raised surfaces are containers used to call attention to the primary section of the screen where the highest value actions and information are contained, and should be used with extreme discretion. Only the most pivotal of moments justify the use of such bold color.

High Emphasis surfaces can be treated with either the Affordance base, Guidance base, or an account color.

Guidance treatment
Affordance treatment
Account color treatment

Contextual Emphasis

Contextual emphasis base surfaces are containers used to convey information and system feedback. When using a contextual emphasis raised surface, only utilize the messaging colors as the background and icon colors.

Error raised surface
Success raised surface
Info raised surface

Overlay Surface

An overlay surface is a raised surface that will always appear in front of everything else on screen and should primarily be used as the surface for bottom sheets and side sheets.

Specs

Background Surface

Color

Element	Property	Value
Container	Background color	∆colorPlatformGray25 (optional — set in Theme Builder)
Container	Background color	∆colorPlatformGray25 (optional)
Container	Background color	∆colorBrandedGuidance25 (optional — set in Theme Builder)
Container	Background color	Image URL (optional — set in Theme Builder)

Elevation

Element	Property	Value
None

Base Surface (Low Emphasis)

Color

Element	Property	Value
Container	Background color	∆colorPlatformWhite
Container	Border	None (default)
Container	Border	∆colorPlatformGray100 (optional)

Elevation

Element	Property	Value
None

Base Surface (Medium Emphasis)

Color

Element	Property	Value
Container	Background color	∆colorPlatform25
Container	Border	None (default)
Container	Border	∆colorPlatformGray100 (optional)

Elevation

Element	Property	Value
None

Base Surface (High Emphasis)

Color

Element	Property	Value
Container	Background color	∆colorBrandedAffordance (default)
Container	Border	None

Elevation

Element	Property	Value
None

Draggable Zone

Color

Element	Property	Value
Container	Background color	∆colorBrandedInfoLight
Container	Border color	∆colorBrandedInfo
Container	Border width	1px
Container	Border style	Dashed

Elevation

Element	Property	Value
None

Raised Surface (Low Emphasis)

Color

Element	Property	Value
Container	Background color	∆colorPlatformWhite
Container	Border color	None

Elevation

Element	Property	Value
Container	Shadow color	∆surfacePlatformRaisedShadowColor
Container	Shadow Y	∆surfacePlatformRaisedShadowY
Container	Shadow opacity	∆surfacePlatformRaisedShadowOpacity
Container	Shadow blur	∆surfacePlatformRaisedShadowBlurResting
Container	Shadow spread	∆surfacePlatformRaisedShadowSpread

Raised Surface (High Emphasis)

Color

Element	Property	Value
Container	Background color	∆colorBrandedAffordance (default)
Container	Border	None

Elevation

Element	Property	Value
Container	Shadow color	∆surfacePlatformRaisedShadowColor
Container	Shadow Y	∆surfacePlatformRaisedShadowY
Container	Shadow opacity	∆surfacePlatformRaisedShadowOpacity
Container	Shadow blur	∆surfacePlatformRaisedShadowBlurResting
Container	Shadow spread	∆surfacePlatformRaisedShadowSpread

States

Generally speaking surfaces are not state-dependent; however, in some instances high emphasis surfaces can change color to aid in the communication of system status.

Theming

Shape

The surface should take on the branded shape, but in some cases it does make sense to ignore the branded shape. If in doubt, always leave the branded shape set to the default. In situations where the shape would cut off content inside, or create a wonky border radius relationship with a parent container, then the shape can be manually adjusted to fit the experience.

Every surface in every situation will not need a branded radius, and can be manually adjusted when needed. Manual adjustments can be done to one or more corners, and does not have to be equal on all four corners.

Element	Property	Value
Container	Large	∆shapeBrandedLargeTL ∆shapeBrandedLargeTR ∆shapeBrandedLargeBR ∆shapeBrandedLargeBL

Placement

Surfaces should always be placed with a responsive experience in mind. Always have a plan where a surface will live at each screen breakpoint. It may make sense to label each surface in the design with a unique number which would indicate to the engineers the stacking order as things get rearranged from small screens to larger screens.

Surfaces can be nested within other surfaces, and can be completely empty (used as a spacer).

Behavior

Please note: No considerations for behavior are needed at this time; however, once the draggable zone variant is fully defined (state treatments are still being determined) this behavior section will be updated.

Developer Docs

Vue Developer Docs

Component documentation coming soon!