Component

Material Design 3 side sheet tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

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
Detached
Detached tokens
TokenValue
Sheet side detached container shapemd.comp.sheet.side.detached.container.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.sheet.side.detached.container.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Docked
Docked tokens
TokenValue
Sheet side docked container shapemd.comp.sheet.side.docked.container.shape
md.sys.shape.corner.noneShow reference chainHide reference chain
md.comp.sheet.side.docked.container.shape
  • md.sys.shape.corner.none
Rounded Corners · DefaultSize: No value specified (dp)
Container
Container tokens
TokenValue
Sheet side docked container heightmd.comp.sheet.side.docked.container.height100PERCENT
Sheet side docked container widthmd.comp.sheet.side.docked.container.width256dp
Headline
Headline tokens
TokenValue
Sheet side docked headline fontmd.comp.sheet.side.docked.headline.font
md.sys.typescale.title-large.fontShow reference chainHide reference chain
md.comp.sheet.side.docked.headline.font
  • md.sys.typescale.title-large.font
    • md.ref.typeface.brand
Roboto
Sheet side docked headline line heightmd.comp.sheet.side.docked.headline.line-height
md.sys.typescale.title-large.line-heightShow reference chainHide reference chain
md.comp.sheet.side.docked.headline.line-height
  • md.sys.typescale.title-large.line-height
28pt
Sheet side docked headline sizemd.comp.sheet.side.docked.headline.size
md.sys.typescale.title-large.sizeShow reference chainHide reference chain
md.comp.sheet.side.docked.headline.size
  • md.sys.typescale.title-large.size
22pt
Sheet side docked headline trackingmd.comp.sheet.side.docked.headline.tracking
md.sys.typescale.title-large.trackingShow reference chainHide reference chain
md.comp.sheet.side.docked.headline.tracking
  • md.sys.typescale.title-large.tracking
No value specified (pt)
Sheet side docked headline type stylemd.comp.sheet.side.docked.headline.type
md.comp.sheet.side.docked.headline.fontmd.comp.sheet.side.docked.headline.weightmd.comp.sheet.side.docked.headline.sizemd.comp.sheet.side.docked.headline.line-heightmd.comp.sheet.side.docked.headline.trackingShow reference chainHide reference chain
md.comp.sheet.side.docked.headline.type
  • md.comp.sheet.side.docked.headline.font
    • md.sys.typescale.title-large.font
      • md.ref.typeface.brand
  • md.comp.sheet.side.docked.headline.weight
    • md.sys.typescale.title-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.sheet.side.docked.headline.size
    • md.sys.typescale.title-large.size
  • md.comp.sheet.side.docked.headline.line-height
    • md.sys.typescale.title-large.line-height
  • md.comp.sheet.side.docked.headline.tracking
    • md.sys.typescale.title-large.tracking
Roboto · 22pt · weight 400 · line height 28pt · tracking No value specified (pt)
Sheet side docked headline weightmd.comp.sheet.side.docked.headline.weight
md.sys.typescale.title-large.weightShow reference chainHide reference chain
md.comp.sheet.side.docked.headline.weight
  • md.sys.typescale.title-large.weight
    • md.ref.typeface.weight-regular
400
Modal
Modal tokens
TokenValue
Sheet side docked modal container shapemd.comp.sheet.side.docked.modal.container.shape
md.sys.shape.corner.large.startShow reference chainHide reference chain
md.comp.sheet.side.docked.modal.container.shape
  • md.sys.shape.corner.large.start
Rounded Corners · BottomLeft: BottomLeft: Unit: DIPS · Value: 16 · DefaultSize: No value specified (dp) · TopLeft: TopLeft: Unit: DIPS · Value: 16
Focused
Docked
Indicator
Indicator tokens
TokenValue
Sheet side docked focus indicator thicknessmd.comp.sheet.side.docked.focus.indicator.thickness
md.sys.state.focus-indicator.thicknessShow reference chainHide reference chain
md.comp.sheet.side.docked.focus.indicator.thickness
  • md.sys.state.focus-indicator.thickness
3dp
Outline
Outline tokens
TokenValue
Sheet side docked focus indicator offsetmd.comp.sheet.side.docked.focus.indicator.outline.offset
md.sys.state.focus-indicator.outer-offsetShow reference chainHide reference chain
md.comp.sheet.side.docked.focus.indicator.outline.offset
  • md.sys.state.focus-indicator.outer-offset
2dp