Component

Material Design 3 side sheets 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

Enabled
Container
Container tokens
TokenValue
Sheet side docked container colormd.comp.sheet.side.docked.container.color
#FEF7FF
Sheet side docked modal container colormd.comp.sheet.side.docked.modal.container.color
#F7F2FA
Sheet side docked standard container colormd.comp.sheet.side.docked.standard.container.color
#FEF7FF
Sheet side docked container surface tint layer colormd.comp.sheet.side.docked.container.surface-tint-layer.color
#6750A4
Sheet side docked modal container elevationmd.comp.sheet.side.docked.modal.container.elevation
1dp
Sheet side docked standard container elevationmd.comp.sheet.side.docked.standard.container.elevation
0dp
Sheet side docked container heightmd.comp.sheet.side.docked.container.height
No value specified (PERCENT)
Sheet side docked container shapemd.comp.sheet.side.docked.container.shape
0dp
Sheet side detached container shapemd.comp.sheet.side.detached.container.shape
16dp
Sheet side docked container widthmd.comp.sheet.side.docked.container.width
256dp
Sheet side docked modal container shapemd.comp.sheet.side.docked.modal.container.shape
Default: 0dp · Top-left: 16dp · Bottom-left: 16dp
Headline
Headline tokens
TokenValue
Sheet side docked headline colormd.comp.sheet.side.docked.headline.color
#49454F
Sheet side docked headline fontmd.comp.sheet.side.docked.headline.font
Roboto
Sheet side docked headline line heightmd.comp.sheet.side.docked.headline.line-height
28pt
Sheet side docked headline sizemd.comp.sheet.side.docked.headline.size
22pt
Sheet side docked headline trackingmd.comp.sheet.side.docked.headline.tracking
0pt
Sheet side docked headline weightmd.comp.sheet.side.docked.headline.weight
400
Sheet side docked headline type stylemd.comp.sheet.side.docked.headline.type
Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt
Divider
Divider tokens
TokenValue
Sheet side docked divider colormd.comp.sheet.side.docked.divider.color
#79747E
Hovered
Label text
Label text tokens
TokenValue
Sheet side docked action hover label text colormd.comp.sheet.side.docked.action.hover.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Sheet side docked action hover state layer colormd.comp.sheet.side.docked.action.hover.state-layer.color
#6750A4
Sheet side docked action hover state layer opacitymd.comp.sheet.side.docked.action.hover.state-layer.opacity
8%
Focused
Focus indicator
Focus indicator tokens
TokenValue
Sheet side docked focus indicator colormd.comp.sheet.side.docked.focus.indicator.color
#625B71
Sheet side docked focus indicator thicknessmd.comp.sheet.side.docked.focus.indicator.thickness
3dp
Sheet side docked focus indicator offsetmd.comp.sheet.side.docked.focus.indicator.outline.offset
2dp
Label text
Label text tokens
TokenValue
Sheet side docked action focus label text colormd.comp.sheet.side.docked.action.focus.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Sheet side docked action focus state layer colormd.comp.sheet.side.docked.action.focus.state-layer.color
#6750A4
Sheet side docked action focus state layer opacitymd.comp.sheet.side.docked.action.focus.state-layer.opacity
10%
Pressed (ripple)
Label text
Label text tokens
TokenValue
Sheet side docked action pressed label text colormd.comp.sheet.side.docked.action.pressed.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Sheet side docked action pressed state layer colormd.comp.sheet.side.docked.action.pressed.state-layer.color
#6750A4
Sheet side docked action pressed state layer opacitymd.comp.sheet.side.docked.action.pressed.state-layer.opacity
10%