Surfaces

Planned

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

Surfaces

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 the entire experience. All other surfaces and content will appear in front of the background surface.

  1. Default background treatment
  2. White background treatment
  3. Branded image background treatment
  4. 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.

Low Emphasis 

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

  1. With border treatment
  2. Without border treatment

Medium Emphasis

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

  1. With border treatment
  2. Without border treatment

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 Affordance base, Guidance base, or an account color, and either honor ancestral padding or go full bleed. No border is used.

Contextual Emphasis

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


[add graphic showing contextual emphasis base surface]

Draggable Zone

The draggable zone base surface indicates to the user that a piece of content can be dragged and dropped within the draggable zone.


  1. Broken line border
  2. Solid fill background

Raised Surface

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

Low Emphasis

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

  1. 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.

  1. Guidance treatment
  2. Affordance treatment
  3. 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.


[add graphic showing contextual emphasis 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 ∆colorPlatformGray900
Container Shadow Y 8px
Container Shadow opacity 16%
Container Shadow blur 24px

Raised Surface (High Emphasis)

Color

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

Elevation

Element Property Value
Container Shadow color ∆surfaceBrandedRaisedShadowColor
Container Shadow Y 8px
Container Shadow opacity 16%
Container Shadow blur 24px

States

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.

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

[this needs to be sorted out for the draggable zone variant]

Developer Docs

Vue Developer Docs

Component documentation coming soon!