Guidelines

Content Selection

Design
Code

Call out the object or group to be affected by an action.

These visuals tie a selection to the primary action (most likely a button).

State

Selectable content items have three states: default (unselected), hovered and selected. States are important in showing whether the content is selected or not (unselected and selected) and to signal to the user that content is selectable (hovered). All forms of our content selection patterns below have all three states.

Type

Background

This type is best suited for text-based selectable regions with visible backgrounds, like a table-cell. If a user selects a piece of associated content, this can be coupled with the edge type. In a multi-selection mode, be sure to use the mark type as well.

Edge

If a user selects a piece of associated content, place a 4px stripe adjacent to the content. This type doesn’t have a multi-selection mode.

Outline

Best suited for visual content, such as video thumbnails on a grid, that don’t have a defined background. Inset a thick 4px outline on the content when it’s selected. In a multi-selection mode, be sure to use the mark type as well.

Mark

Only use this for multi-selection mode. The mark denotes that multiple items can be selected. An example of this would be selecting a group of videos to share. The mark should typically be used in conjunction with one of the types above. More details are available on the select mark component page.

Usage

Background Region

The background color should stretch to the edges of the selected region.

contentselection-backgroundregion-dont

Don'tpartially fill a background region.

contentselection-backgroundregion-do

Dofill the entire background with the appropriate selection color.

Background Dividers

Dividers adjacent to a selected (or hovered) region should be replaced with Level 0 lines.

contentselection-backgrounddividers-dont

Don'tuse level accents to divide a selected region.

contentselection-backgrounddividers-do

Doreplace dividers with edge-to-edge Level 0 lines to emphasize the user's selection.

Edge Placement

When a selection reveals additional content, the Select Edge should always be on the side adjacent to the revealed content. This helps associate the item with the content and is consistent with tab navigations.

contentselection-edgeplacement-dont

Don'tplace the edge on the opposite edge of the related content.

contentselection-edgeplacement-do

Doplace the edge adjacent to the related content.

Text Contrast

Use increased text contrast for selected and hover states of text-based selectable items. On the flip side, unselected items may have reduced contrast to support the selected item.

contentselection-textcontrast-dont

Don'tuse low contrast text color for selected content.

contentselection-textcontrast-do

Doincrease text contrast to emphasize selectable and selected content.

Values

Light Environment

ColorNameRGBA
LE Selection Outline0, 156, 227, 1.0
LE Selection Outline Hover0, 156, 227, 0.5
LE Selection Bg230, 247, 255, 1.0
LE Selection Bg Hover240, 250, 255, 1.0
LE Selection Edge0, 156, 227, 1.0
LE Selection Edge Hover127, 215, 255, 1.0
LE Selectmark Unselected19, 41, 63, 0.65
LE Selectmark Unselected Hover0, 156, 227, 1.0
LE Selectmark Selected0, 156, 227, 1.0
LE Selectmark Selected Hover19, 41, 63, 0.65

Dark Environment

ColorNameRGBA
DE Selection Outline0, 156, 227, 1.0
DE Selection Outline Hover0, 156, 227, 0.5
DE Selection Bg0, 56, 82, 1.0
DE Selection Bg Hover0, 44, 64, 1.0
DE Selection Edge0, 156, 227, 1.0
DE Selection Edge Hover0, 103, 150, 1.0
DE Selectmark Unselected230, 242, 255, 0.65
DE Selectmark Unselected Hover0, 156, 227, 1.0
DE Selectmark Selected0, 156, 227, 1.0
DE Selectmark Selected Hover230, 242, 255, 0.65

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.