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.

Font

[Deprecated] Enabled
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Top app bar (small) container colormd.comp.top-app-bar.small.container.color
#FEF7FF
Top app bar (small) on-scroll container colormd.comp.top-app-bar.small.on-scroll.container.color
#F3EDF7
Top app bar (small) container shapemd.comp.top-app-bar.small.container.shape
0dp
Top app bar (small) container heightmd.comp.top-app-bar.small.container.height
64dp
Top app bar (small) container elevationmd.comp.top-app-bar.small.container.elevation
0dp
Top app bar (small) container surface tint layer colormd.comp.top-app-bar.small.container.surface-tint-layer.color
#6750A4
Top app bar (small) on scroll container shadow colormd.comp.top-app-bar.small.on-scroll.container.shadow-color
#000000
[Deprecated] Leading icon
[Deprecated] Leading icon tokens
TokenValue
Top app bar (small) leading icon sizemd.comp.top-app-bar.small.leading-icon.size
24dp
Top app bar (small) leading icon colormd.comp.top-app-bar.small.leading-icon.color
#1D1B20
[Deprecated] Trailing icon
[Deprecated] Trailing icon tokens
TokenValue
Top app bar (small) trailing icon sizemd.comp.top-app-bar.small.trailing-icon.size
24dp
Top app bar (small) trailing icon colormd.comp.top-app-bar.small.trailing-icon.color
#49454F
[Deprecated] Headline
[Deprecated] Headline tokens
TokenValue
Top app bar (small) headline fontmd.comp.top-app-bar.small.headline.font
Roboto
Top app bar (small) headline heightmd.comp.top-app-bar.small.headline.line-height
28pt
Top app bar (small) headline sizemd.comp.top-app-bar.small.headline.size
22pt
Top app bar (small) headline trackingmd.comp.top-app-bar.small.headline.tracking
0pt
Top app bar (small) headline weightmd.comp.top-app-bar.small.headline.weight
400
Type stylemd.comp.top-app-bar.small.headline.type
Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt
Top app bar (small) headline colormd.comp.top-app-bar.small.headline.color
#1D1B20
[Deprecated] On scroll
[Deprecated] On scroll tokens
TokenValue
Top app bar (small) on scroll container elevationmd.comp.top-app-bar.small.on-scroll.container.elevation
3dp