Component

Material Design 3 lists tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Color
Enabled
Enabled tokens
TokenValue
List list item container colormd.comp.list.list-item.container.color
#FEF7FF
List list item segmented container colormd.comp.list.list-item.segmented.container.color
#FEF7FF
List list item label text colormd.comp.list.list-item.label-text.color
#1D1B20
List list item supporting text colormd.comp.list.list-item.supporting-text.color
#49454F
List list item overline colormd.comp.list.list-item.overline.color
#49454F
List list item divider colormd.comp.list.divider.color
#79747E
List list item divider heightmd.comp.list.divider.height
1dp
List list item container heightmd.comp.list.list-item.container.height
56dp
One line list item container heightmd.comp.list.md.comp.list.list-item.one-line.container.height
56dp
Three lines list item container heightmd.comp.list.md.comp.list.list-item.three-line.container.height
88dp
Two lines list item container heightmd.comp.list.md.comp.list.list-item.two-line.container.height
72dp
List list item leading icon colormd.comp.list.list-item.leading-icon.color
#49454F
List list item trailing icon colormd.comp.list.list-item.trailing-icon.color
#49454F
List list item unselected trailing icon colormd.comp.list.list-item.unselected.trailing-icon.color
#1D1B20
List list item trailing supporting text colormd.comp.list.list-item.trailing-supporting-text.color
#49454F
List list item leading avatar colormd.comp.list.list-item.leading-avatar.color
#EADDFF
List list item leading avatar label colormd.comp.list.list-item.leading-avatar-label.color
#4F378B
List list item container elevationmd.comp.list.list-item.container.elevation
0dp
Enabled - Selected
Enabled - Selected tokens
TokenValue
List list item selected container colormd.comp.list.list-item.selected.container.color
#E8DEF8
List list item selected label text colormd.comp.list.list-item.selected.label-text.color
#4A4458
List list item selected supporting text colormd.comp.list.list-item.selected.supporting-text.color
#4A4458
List list item selected trailing supporting text colormd.comp.list.list-item.selected.trailing-supporting-text.color
#4A4458
List list item selected leading icon colormd.comp.list.list-item.selected.leading-icon.color
#4A4458
List list item selected trailing icon colormd.comp.list.list-item.selected.trailing-icon.color
#4A4458
List list item selected overline colormd.comp.list.list-item.selected.overline.color
#4A4458
Disabled
Disabled tokens
TokenValue
List list item disabled state layer colormd.comp.list.list-item.disabled.state-layer.color
#1D1B20
List list item disabled state layer opacitymd.comp.list.list-item.disabled.state-layer.opacity
10%
List list item disabled label text colormd.comp.list.list-item.disabled.label-text.color
#1D1B20
List list item disabled label text opacitymd.comp.list.list-item.disabled.label-text.opacity
38%
List list item disabled supporting text colormd.comp.list.list-item.disabled.supporting-text.color
#1D1B20
List list item disabled supporting text opacitymd.comp.list.list-item.disabled.supporting-text.opacity
38%
List list item disabled overline colormd.comp.list.list-item.disabled.overline.color
#1D1B20
List list item disabled overline opacitymd.comp.list.list-item.disabled.overline.opacity
38%
List list item disabled leading icon colormd.comp.list.list-item.disabled.leading-icon.color
#1D1B20
List list item disabled leading icon opacitymd.comp.list.list-item.disabled.leading-icon.opacity
38%
List list item disabled trailing icon colormd.comp.list.list-item.disabled.trailing-icon.color
#1D1B20
List list item disabled trailing icon opacitymd.comp.list.list-item.disabled.trailing-icon.opacity
38%
Disabled - Selected
Disabled - Selected tokens
TokenValue
List list item selected disabled container colormd.comp.list.list-item.selected.disabled.container.color
#1D1B20
List list item selected disabled container opacitymd.comp.list.list-item.selected.disabled.container.opacity
38%
List list item selected disabled label text colormd.comp.list.list-item.selected.disabled.label-text.color
#1D1B20
List list item selected disabled label text opacitymd.comp.list.list-item.selected.disabled.label-text.opacity
38%
List list item selected disabled supporting text colormd.comp.list.list-item.selected.disabled.supporting-text.color
#1D1B20
List list item selected disabled supporting text opacitymd.comp.list.list-item.selected.disabled.supporting-text.opacity
38%
List list item selected disabled trailing supporting text colormd.comp.list.list-item.selected.disabled.trailing-supporting-text.color
#1D1B20
List list item selected disabled trailing supporting text opacitymd.comp.list.list-item.selected.disabled.trailing-supporting-text.opacity
38%
List list item selected disabled overline colormd.comp.list.list-item.selected.disabled.overline.color
#1D1B20
List list item selected disabled overline opacitymd.comp.list.list-item.selected.disabled.overline.opacity
38%
List list item selected disabled state layer colormd.comp.list.list-item.selected.disabled.state-layer.color
#1D1B20
List list item selected disabled state layer opacitymd.comp.list.list-item.selected.disabled.state-layer.opacity
10%
List list item selected disabled leading icon colormd.comp.list.list-item.selected.disabled.leading-icon.color
#1D1B20
List list item selected disabled leading icon opacitymd.comp.list.list-item.selected.disabled.leading-icon.opacity
38%
List list item selected disabled trailing icon colormd.comp.list.list-item.selected.disabled.trailing-icon.color
#1D1B20
List list item selected disabled trailing icon opacitymd.comp.list.list-item.selected.disabled.trailing-icon.opacity
38%
Hovered
Hovered tokens
TokenValue
List list item hover state layer colormd.comp.list.list-item.hover.state-layer.color
#1D1B20
List list item hover state layer opacitymd.comp.list.list-item.hover.state-layer.opacity
8%
List list item hover label text colormd.comp.list.list-item.hover.label-text.color
#1D1B20
List list item hover leading icon colormd.comp.list.list-item.hover.leading-icon.icon.color
#49454F
List list item hover trailing icon colormd.comp.list.list-item.hover.trailing-icon.icon.color
#49454F
Hovered - Selected
Hovered - Selected tokens
TokenValue
List list item selected hover state layer colormd.comp.list.list-item.selected.hover.state-layer.color
#1D1B20
List list item selected hover state layer opacitymd.comp.list.list-item.selected.hover.state-layer.opacity
8%
List list item selected hover label text colormd.comp.list.list-item.selected.hover.label-text.color
#4A4458
List list item selected hover leading icon colormd.comp.list.list-item.selected.hover.leading-icon.color
#1D1B20
List list item selected hover trailing icon colormd.comp.list.list-item.selected.hover.trailing-icon.color
#1D1B20
Focused
Focused tokens
TokenValue
List list item focus state layer colormd.comp.list.list-item.focus.state-layer.color
#1D1B20
List list item focus state layer opacitymd.comp.list.list-item.focus.state-layer.opacity
10%
List list item focus label text colormd.comp.list.list-item.focus.label-text.color
#1D1B20
List list item focus leading icon colormd.comp.list.list-item.focus.leading-icon.icon.color
#49454F
List list item focus trailing icon colormd.comp.list.list-item.focus.trailing-icon.icon.color
#49454F
Focus indicator
Focus indicator tokens
TokenValue
List list item focus indicator colormd.comp.list.focus.indicator.color
#625B71
List list item focus indicator thicknessmd.comp.list.focus.indicator.thickness
3dp
List list item focus indicator offsetmd.comp.list.focus.indicator.outline.offset
-3dp
Focused - Selected
Focused - Selected tokens
TokenValue
List list item selected focus state layer colormd.comp.list.list-item.selected.focus.state-layer.color
#1D1B20
List list item selected focus state layer opacitymd.comp.list.list-item.selected.focus.state-layer.opacity
10%
List list item selected focus label text colormd.comp.list.list-item.selected.focus.label-text.color
#4A4458
List list item selected focus leading icon colormd.comp.list.list-item.selected.focus.leading-icon.color
#1D1B20
List list item selected focus trailing icon colormd.comp.list.list-item.selected.focus.trailing-icon.color
#1D1B20
Pressed (ripple)
Pressed (ripple) tokens
TokenValue
List list item pressed state layer colormd.comp.list.list-item.pressed.state-layer.color
#1D1B20
List list item pressed state layer opacitymd.comp.list.list-item.pressed.state-layer.opacity
10%
List list item pressed label text colormd.comp.list.list-item.pressed.label-text.color
#1D1B20
List list item pressed leading icon colormd.comp.list.list-item.pressed.leading-icon.icon.color
#49454F
List list item pressed trailing icon colormd.comp.list.list-item.pressed.trailing-icon.icon.color
#49454F
Pressed - Selected
Pressed - Selected tokens
TokenValue
List list item selected pressed state layer colormd.comp.list.list-item.selected.pressed.state-layer.color
#1D1B20
List list item selected pressed state layer opacitymd.comp.list.list-item.selected.pressed.state-layer.opacity
10%
List list item selected pressed label text colormd.comp.list.list-item.selected.pressed.label-text.color
#4A4458
List list item selected pressed trailing icon colormd.comp.list.list-item.selected.pressed.trailing-icon.color
#1D1B20
List list item selected pressed leading icon colormd.comp.list.list-item.selected.pressed.leading-icon.color
#1D1B20
Dragged (baseline only)
Dragged (baseline only) tokens
TokenValue
List list item dragged container colormd.comp.list.list-item.dragged.container.elevation
8dp
List list item dragged label text colormd.comp.list.list-item.dragged.label-text.color
#1D1B20
List list item selected dragged label text colormd.comp.list.list-item.selected.dragged.label-text.color
#4A4458
List list item dragged state layer colormd.comp.list.list-item.dragged.state-layer.color
#1D1B20
List list item dragged state layer opacitymd.comp.list.list-item.dragged.state-layer.opacity
16%
List list item selected dragged state layer colormd.comp.list.list-item.selected.dragged.state-layer.color
#1D1B20
List list item selected dragged state layer opacitymd.comp.list.list-item.selected.dragged.state-layer.opacity
16%
List list item dragged leading icon colormd.comp.list.list-item.dragged.leading-icon.icon.color
#49454F
List list item selected dragged leading icon colormd.comp.list.list-item.selected.dragged.leading-icon.color
#1D1B20
List list item dragged trailing icon colormd.comp.list.list-item.dragged.trailing-icon.icon.color
#49454F
List list item selected dragged trailing icon colormd.comp.list.list-item.selected.dragged.trailing-icon.color
#1D1B20
Spacing
Spacing tokens
TokenValue
List list item leading spacemd.comp.list.list-item.leading-space
16dp
List list item trailing spacemd.comp.list.list-item.trailing-space
16dp
List list item top spacemd.comp.list.list-item.top-space
10dp
List list item bottom spacemd.comp.list.list-item.bottom-space
10dp
List list item between spacemd.comp.list.list-item.between-space
12dp
List list item divider leading spacemd.comp.list.divider.leading-space
16dp
List list item divider trailing spacemd.comp.list.divider.trailing-space
16dp
List list item divider top spacemd.comp.list.divider.top-space
0dp
List list item divider bottom spacemd.comp.list.divider.bottom-space
0dp
List segment gapmd.comp.list.segmented.gap
2dp
Shape
Shape tokens
TokenValue
List container shapemd.comp.list.container.shape
16dp
List list item container shapemd.comp.list.list-item.container.shape
0dp
List list item container expressive shapemd.comp.list.list-item.container.expressive.shape
4dp
List list item container disabled expressive shapemd.comp.list.list-item.disabled.container.expressive.shape
4dp
List list item container hovered expressive shapemd.comp.list.list-item.hovered.container.expressive.shape
12dp
List list item container focused expressive shapemd.comp.list.list-item.focused.container.expressive.shape
16dp
List list item container pressed expressive shapemd.comp.list.list-item.pressed.container.expressive.shape
16dp
List list item container dragged expressive shapemd.comp.list.list-item.dragged.container.expressive.shape
16dp
List list item container selected expressive shapemd.comp.list.list-item.selected.container.expressive.shape
16dp
List list item container selected disabled expressive shapemd.comp.list.list-item.selected.disabled.container.expressive.shape
16dp
List list item container selected hovered expressive shapemd.comp.list.list-item.selected.hovered.container.expressive.shape
16dp
List list item container selected focsued expressive shapemd.comp.list.list-item.selected.focused.container.expressive.shape
16dp
List list item container selected pressed expressive shapemd.comp.list.list-item.selected.pressed.container.expressive.shape
16dp
List list item container selected dragged expressive shapemd.comp.list.list-item.selected.dragged.container.expressive.shape
16dp
List list item leading avatar shapemd.comp.list.list-item.leading-avatar.shape
Full
List list item leading video shapemd.comp.list.list-item.leading-video.shape
8dp
List list item leading image shapemd.comp.list.list-item.leading-image.shape
0dp
List list item leading image expressive shapemd.comp.list.list-item.leading-image.expressive.shape
8dp
List list item selected container shapemd.comp.list.list-item.selected.container.shape
16dp
Size and typography
Size and typography tokens
TokenValue
List list item leading avatar label typemd.comp.list.list-item.leading-avatar-label.type
Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt
List list item leading avatar sizemd.comp.list.list-item.leading-avatar.size
40dp
List list item leading avatar label fontmd.comp.list.list-item.leading-avatar-label.font
Roboto
List list item leading avatar label line heightmd.comp.list.list-item.leading-avatar-label.line-height
24pt
List list item leading avatar label sizemd.comp.list.list-item.leading-avatar-label.size
16pt
List list item leading avatar label trackingmd.comp.list.list-item.leading-avatar-label.tracking
0.15pt
List list item leading avatar label weightmd.comp.list.list-item.leading-avatar-label.weight
500
List list item leading icon sizemd.comp.list.list-item.leading-icon.size
24dp
List list item leading icon expressive sizemd.comp.list.list-item.leading-icon.expressive.size
20dp
List list item leading image widthmd.comp.list.list-item.leading-image.width
56dp
List list item leading image heightmd.comp.list.list-item.leading-image.height
56dp
List list item leading video widthmd.comp.list.list-item.leading-video.width
100dp
List list item small leading video widthmd.comp.list.list-item.small.leading-video.width
100dp
List list item small leading video heightmd.comp.list.list-item.small.leading-video.height
56dp
List list item large leading video widthmd.comp.list.list-item.large.leading-video.width
114dp
List list item large leading video heightmd.comp.list.list-item.large.leading-video.height
64dp
One line list item container heightmd.comp.list.list-item.one-line.container.height
56dp
Two lines list item container heightmd.comp.list.list-item.two-line.container.height
72dp
Three lines list item container heightmd.comp.list.list-item.three-line.container.height
88dp
List list item trailing icon sizemd.comp.list.list-item.trailing-icon.size
24dp
List list item trailing icon expressive sizemd.comp.list.list-item.trailing-icon.expressive.size
20dp
List list item label text typemd.comp.list.list-item.label-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
List list item label text fontmd.comp.list.list-item.label-text.font
Roboto
List list item label text line heightmd.comp.list.list-item.label-text.line-height
24pt
List list item label text sizemd.comp.list.list-item.label-text.size
16pt
List list item label text trackingmd.comp.list.list-item.label-text.tracking
0.5pt
List list item label text weightmd.comp.list.list-item.label-text.weight
400
List list item trailing supporting text typemd.comp.list.list-item.trailing-supporting-text.type
Roboto · 11pt · weight 500 · line height 16pt · tracking 0.5pt
List list item trailing supporting text fontmd.comp.list.list-item.trailing-supporting-text.font
Roboto
List list item trailing supporting text line heightmd.comp.list.list-item.trailing-supporting-text.line-height
16pt
List list item trailing supporting text sizemd.comp.list.list-item.trailing-supporting-text.size
11pt
List list item trailing supporting text trackingmd.comp.list.list-item.trailing-supporting-text.tracking
0.5pt
List list item trailing supporting text weightmd.comp.list.list-item.trailing-supporting-text.weight
500
List list item supporting text typemd.comp.list.list-item.supporting-text.type
Roboto · 14pt · weight 400 · line height 20pt · tracking 0.25pt
List list item supporting text fontmd.comp.list.list-item.supporting-text.font
Roboto
List list item supporting text line heightmd.comp.list.list-item.supporting-text.line-height
20pt
List list item supporting text sizemd.comp.list.list-item.supporting-text.size
14pt
List list item supporting text trackingmd.comp.list.list-item.supporting-text.tracking
0.25pt
List list item supporting text weightmd.comp.list.list-item.supporting-text.weight
400
List list item overline typemd.comp.list.list-item.overline.type
Roboto · 11pt · weight 500 · line height 16pt · tracking 0.5pt
List list item overline fontmd.comp.list.list-item.overline.font
Roboto
List list item overline line heightmd.comp.list.list-item.overline.line-height
16pt
List list item overline sizemd.comp.list.list-item.overline.size
11pt
List list item overline trackingmd.comp.list.list-item.overline.tracking
0.5pt
List list item overline weightmd.comp.list.list-item.overline.weight
500