Component

Material Design 3 app bars 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.

Color
Color tokens
TokenValue
App bar container colormd.comp.app-bar.container.color
#FEF7FF
Search container colormd.comp.app-bar.search.container.color
#F3EDF7
Search label colormd.comp.app-bar.search.label.color
#49454F
App bar container color on scrollmd.comp.app-bar.on-scroll.container.color
#F3EDF7
Search container color on scrollmd.comp.app-bar.search.on-scroll.container.color
#E6E0E9
App bar container elevationmd.comp.app-bar.container.elevation
0dp
App bar container elevation on scrollmd.comp.app-bar.on-scroll.container.elevation
3dp
App bar title textmd.comp.app-bar.title.color
#1D1B20
App bar subtitle textmd.comp.app-bar.subtitle.color
#49454F
App bar leading icon md.comp.app-bar.leading-icon.color
#1D1B20
App bar trailing icon md.comp.app-bar.trailing-icon.color
#49454F
Spacing
Spacing tokens
TokenValue
App bar left paddingmd.comp.app-bar.leading-space
4dp
App bar right paddingmd.comp.app-bar.trailing-space
4dp
App bar icon spacingmd.comp.app-bar.icon-button-space
0dp
Search left paddingmd.comp.app-bar.search.leading-space
8dp
Search right paddingmd.comp.app-bar.search.trailing-space
8dp
Shape
Shape tokens
TokenValue
App bar container shapemd.comp.app-bar.container.shape
0dp
Size
Size tokens
TokenValue
App bar avatar sizemd.comp.app-bar.avatar.size
32dp
App bar icon sizemd.comp.app-bar.icon.size
24dp