Component

Material Design 3 search 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

tokens
TokenValue
Search view container surface tint layer colormd.comp.search-view.container.surface-tint-layer.color
#6750A4
Color
Color tokens
TokenValue
Search view container colormd.comp.search-view.container.color
#ECE6F0
Search view contained background colormd.comp.search-view.contained.background.color
#F7F2FA
Search view container background elevationmd.comp.search-view.container.elevation
6dp
Search view header supporting text colormd.comp.search-view.header.supporting-text.color
#49454F
Search view header input text colormd.comp.search-view.header.input-text.color
#1D1B20
Search view header leading icon colormd.comp.search-view.header.leading-icon.color
#1D1B20
Search view header trailing icon colormd.comp.search-view.header.trailing-icon.color
#49454F
Search view divider colormd.comp.search-view.divider.color
#79747E
Layout and Text
Contained (expressive)
Contained (expressive) tokens
TokenValue
Search view contained leading marginmd.comp.search-view.contained.leading-margin
12dp
Search view contained trailing marginmd.comp.search-view.contained.trailing-margin
12dp
Search view contained docked bar results gapmd.comp.search-view.contained.docked.bar-results.gap
2dp
Search view contained docked results shapemd.comp.search-view.contained.docked.results.shape
12dp
Search view contained docked bar shapemd.comp.search-view.contained.docked.bar.shape
Full
Search view contained full screen bar container heightmd.comp.search-view.contained.full-screen.bar.container.height
56dp
Search view contained icon label gapmd.comp.search-view.contained.icon-label.gap
4dp
Divided (baseline)
Divided (baseline) tokens
TokenValue
Search view docked container shapemd.comp.search-view.docked.container.shape
28dp
Search view full screen header container heightmd.comp.search-view.full-screen.header.container.height
72dp
Search view docked header container heightmd.comp.search-view.docked.header.container.height
56dp
Search view leading spacemd.comp.search-view.leading-space
16dp
Search view trailing spacemd.comp.search-view.trailing-space
16dp
Search view leading icon leading icon label spacemd.comp.search-view.leading-icon.leading-icon-label-space
16dp
Search view trailing icon label trailing icon spacemd.comp.search-view.trailing-icon.label-trailing-icon-space
16dp
Common tokens
Common tokens tokens
TokenValue
Search view full screen container shapemd.comp.search-view.full-screen.container.shape
0dp
Search view header supporting text typemd.comp.search-view.header.supporting-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Search view header supporting text fontmd.comp.search-view.header.supporting-text.font
Roboto
Search view header supporting text line heightmd.comp.search-view.header.supporting-text.line-height
24pt
Search view header supporting text sizemd.comp.search-view.header.supporting-text.size
16pt
Search view header supporting text weightmd.comp.search-view.header.supporting-text.weight
400
Search view header supporting text trackingmd.comp.search-view.header.supporting-text.tracking
0.5pt
Search view header input text typemd.comp.search-view.header.input-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Search view header input text fontmd.comp.search-view.header.input-text.font
Roboto
Search view header input text line heightmd.comp.search-view.header.input-text.line-height
24pt
Search view header input text sizemd.comp.search-view.header.input-text.size
16pt
Search view header input text weightmd.comp.search-view.header.input-text.weight
400
Search view header input text trackingmd.comp.search-view.header.input-text.tracking
0.5pt