Material Design 3 "Card" tokens: All tokens
Preview
Browse tokens
Color
Card - Filled
Enabled
Container
| Token | Value |
|---|---|
Filled card container colormd.comp.filled-card.container.color | #E6E0E9 md.comp.filled-card.container.color
|
Filled card container elevationmd.comp.filled-card.container.elevation | 0dp md.comp.filled-card.container.elevation
|
Filled card container shadow colormd.comp.filled-card.container.shadow-color | #000000 md.comp.filled-card.container.shadow-color
|
Filled card container shapemd.comp.filled-card.container.shape | 12dp md.comp.filled-card.container.shape
|
Filled card container surface tint layer colormd.comp.filled-card.container.surface-tint-layer.color | #6750A4 md.comp.filled-card.container.surface-tint-layer.color
|
Icon
| Token | Value |
|---|---|
Filled card icon colormd.comp.filled-card.icon.color | #6750A4 md.comp.filled-card.icon.color
|
Filled card icon sizemd.comp.filled-card.icon.size | 24dp md.comp.filled-card.icon.size |
Disabled
Container
| Token | Value |
|---|---|
Filled card disabled container colormd.comp.filled-card.disabled.container.color | #1D1B20 md.comp.filled-card.disabled.container.color
|
Filled card disabled container elevationmd.comp.filled-card.disabled.container.elevation | 0dp md.comp.filled-card.disabled.container.elevation
|
Filled card disabled container opacitymd.comp.filled-card.disabled.container.opacity | 38% md.comp.filled-card.disabled.container.opacity |
Hovered
Container
| Token | Value |
|---|---|
Filled card hover container elevationmd.comp.filled-card.hover.container.elevation | 1dp md.comp.filled-card.hover.container.elevation
|
State layer
| Token | Value |
|---|---|
Filled card hover state layer colormd.comp.filled-card.hover.state-layer.color | #1D1B20 md.comp.filled-card.hover.state-layer.color
|
Filled card hover state layer opacitymd.comp.filled-card.hover.state-layer.opacity | 8% md.comp.filled-card.hover.state-layer.opacity
|
Focused
Focus indicator
| Token | Value |
|---|---|
Filled card focus indicator colormd.comp.filled-card.focus.indicator.color | #625B71 md.comp.filled-card.focus.indicator.color
|
Filled card focus indicator offsetmd.comp.filled-card.focus.indicator.outline.offset | 2dp md.comp.filled-card.focus.indicator.outline.offset
|
Filled card focus indicator thicknessmd.comp.filled-card.focus.indicator.thickness | 3dp md.comp.filled-card.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Filled card focus container elevationmd.comp.filled-card.focus.container.elevation | 0dp md.comp.filled-card.focus.container.elevation
|
State layer
| Token | Value |
|---|---|
Filled card focus state layer colormd.comp.filled-card.focus.state-layer.color | #1D1B20 md.comp.filled-card.focus.state-layer.color
|
Filled card focus state layer opacitymd.comp.filled-card.focus.state-layer.opacity | 10% md.comp.filled-card.focus.state-layer.opacity
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Filled card pressed container elevationmd.comp.filled-card.pressed.container.elevation | 0dp md.comp.filled-card.pressed.container.elevation
|
State layer
| Token | Value |
|---|---|
Filled card pressed state layer colormd.comp.filled-card.pressed.state-layer.color | #1D1B20 md.comp.filled-card.pressed.state-layer.color
|
Filled card pressed state layer opacitymd.comp.filled-card.pressed.state-layer.opacity | 10% md.comp.filled-card.pressed.state-layer.opacity
|
Dragged
Container
| Token | Value |
|---|---|
Filled card dragged container elevationmd.comp.filled-card.dragged.container.elevation | 6dp md.comp.filled-card.dragged.container.elevation
|
State layer
| Token | Value |
|---|---|
Filled card dragged state layer colormd.comp.filled-card.dragged.state-layer.color | #1D1B20 md.comp.filled-card.dragged.state-layer.color
|
Filled card dragged state layer opacitymd.comp.filled-card.dragged.state-layer.opacity | 16% md.comp.filled-card.dragged.state-layer.opacity
|
Card - Elevated
Enabled
Container
| Token | Value |
|---|---|
Elevated card container colormd.comp.elevated-card.container.color | #F7F2FA md.comp.elevated-card.container.color
|
Elevated card container elevationmd.comp.elevated-card.container.elevation | 1dp md.comp.elevated-card.container.elevation
|
Elevated card container shadow colormd.comp.elevated-card.container.shadow-color | #000000 md.comp.elevated-card.container.shadow-color
|
Elevated card container shapemd.comp.elevated-card.container.shape | 12dp md.comp.elevated-card.container.shape
|
Elevated card container surface tint layer colormd.comp.elevated-card.container.surface-tint-layer.color | #6750A4 md.comp.elevated-card.container.surface-tint-layer.color
|
Icon
| Token | Value |
|---|---|
Elevated card icon colormd.comp.elevated-card.icon.color | #6750A4 md.comp.elevated-card.icon.color
|
Elevated card icon sizemd.comp.elevated-card.icon.size | 24dp md.comp.elevated-card.icon.size |
Disabled
Container
| Token | Value |
|---|---|
Elevated card disabled container colormd.comp.elevated-card.disabled.container.color | #FEF7FF md.comp.elevated-card.disabled.container.color
|
Elevated card disabled container elevationmd.comp.elevated-card.disabled.container.elevation | 1dp md.comp.elevated-card.disabled.container.elevation
|
Elevated card disabled container opacitymd.comp.elevated-card.disabled.container.opacity | 38% md.comp.elevated-card.disabled.container.opacity |
Hovered
Container
| Token | Value |
|---|---|
Elevated card hover container elevationmd.comp.elevated-card.hover.container.elevation | 3dp md.comp.elevated-card.hover.container.elevation
|
State layer
| Token | Value |
|---|---|
Elevated card hover state layer colormd.comp.elevated-card.hover.state-layer.color | #1D1B20 md.comp.elevated-card.hover.state-layer.color
|
Elevated card hover state layer opacitymd.comp.elevated-card.hover.state-layer.opacity | 8% md.comp.elevated-card.hover.state-layer.opacity
|
Focused
Focus indicator
| Token | Value |
|---|---|
Elevated card focus indicator colormd.comp.elevated-card.focus.indicator.color | #625B71 md.comp.elevated-card.focus.indicator.color
|
Elevated card focus indicator offsetmd.comp.elevated-card.focus.indicator.outline.offset | 2dp md.comp.elevated-card.focus.indicator.outline.offset
|
Elevated card focus indicator thicknessmd.comp.elevated-card.focus.indicator.thickness | 3dp md.comp.elevated-card.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Elevated card focus container elevationmd.comp.elevated-card.focus.container.elevation | 1dp md.comp.elevated-card.focus.container.elevation
|
State layer
| Token | Value |
|---|---|
Elevated card focus state layer colormd.comp.elevated-card.focus.state-layer.color | #1D1B20 md.comp.elevated-card.focus.state-layer.color
|
Elevated card focus state layer opacitymd.comp.elevated-card.focus.state-layer.opacity | 10% md.comp.elevated-card.focus.state-layer.opacity
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Elevated card pressed container elevationmd.comp.elevated-card.pressed.container.elevation | 1dp md.comp.elevated-card.pressed.container.elevation
|
State layer
| Token | Value |
|---|---|
Elevated card pressed state layer colormd.comp.elevated-card.pressed.state-layer.color | #1D1B20 md.comp.elevated-card.pressed.state-layer.color
|
Elevated card pressed state layer opacitymd.comp.elevated-card.pressed.state-layer.opacity | 10% md.comp.elevated-card.pressed.state-layer.opacity
|
Dragged
Container
| Token | Value |
|---|---|
Elevated card dragged container elevationmd.comp.elevated-card.dragged.container.elevation | 8dp md.comp.elevated-card.dragged.container.elevation
|
State layer
| Token | Value |
|---|---|
Elevated card dragged state layer colormd.comp.elevated-card.dragged.state-layer.color | #1D1B20 md.comp.elevated-card.dragged.state-layer.color
|
Elevated card dragged state layer opacitymd.comp.elevated-card.dragged.state-layer.opacity | 16% md.comp.elevated-card.dragged.state-layer.opacity
|
Card - Outlined
Enabled
Container
| Token | Value |
|---|---|
Outlined card container colormd.comp.outlined-card.container.color | #FEF7FF md.comp.outlined-card.container.color
|
Outlined card container elevationmd.comp.outlined-card.container.elevation | 0dp md.comp.outlined-card.container.elevation
|
Outlined card container shapemd.comp.outlined-card.container.shape | 12dp md.comp.outlined-card.container.shape
|
Outlined card container surface tint layer colormd.comp.outlined-card.container.surface-tint-layer.color | #6750A4 md.comp.outlined-card.container.surface-tint-layer.color
|
Outline
| Token | Value |
|---|---|
Outlined card container shadow colormd.comp.outlined-card.container.shadow-color | #000000 md.comp.outlined-card.container.shadow-color
|
Outlined card outline colormd.comp.outlined-card.outline.color | #CAC4D0 md.comp.outlined-card.outline.color
|
Outlined card outline widthmd.comp.outlined-card.outline.width | 1dp md.comp.outlined-card.outline.width |
Icon
| Token | Value |
|---|---|
Outlined card icon colormd.comp.outlined-card.icon.color | #6750A4 md.comp.outlined-card.icon.color
|
Outlined card icon sizemd.comp.outlined-card.icon.size | 24dp md.comp.outlined-card.icon.size |
Disabled
Container
| Token | Value |
|---|---|
Outlined card disabled container elevationmd.comp.outlined-card.disabled.container.elevation | 0dp md.comp.outlined-card.disabled.container.elevation
|
Outline
| Token | Value |
|---|---|
Outlined card disabled outline colormd.comp.outlined-card.disabled.outline.color | #79747E md.comp.outlined-card.disabled.outline.color
|
Outlined card disabled outline opacitymd.comp.outlined-card.disabled.outline.opacity | 12% md.comp.outlined-card.disabled.outline.opacity |
Hovered
Container
| Token | Value |
|---|---|
Outlined card hover container elevationmd.comp.outlined-card.hover.container.elevation | 1dp md.comp.outlined-card.hover.container.elevation
|
State layer
| Token | Value |
|---|---|
Outlined card hover state layer colormd.comp.outlined-card.hover.state-layer.color | #1D1B20 md.comp.outlined-card.hover.state-layer.color
|
Outlined card hover state layer opacitymd.comp.outlined-card.hover.state-layer.opacity | 8% md.comp.outlined-card.hover.state-layer.opacity
|
Outline
| Token | Value |
|---|---|
Outlined card hover outline colormd.comp.outlined-card.hover.outline.color | #CAC4D0 md.comp.outlined-card.hover.outline.color
|
Focused
Focus indicator
| Token | Value |
|---|---|
Outlined card focus indicator colormd.comp.outlined-card.focus.indicator.color | #625B71 md.comp.outlined-card.focus.indicator.color
|
Outlined card focus indicator offsetmd.comp.outlined-card.focus.indicator.outline.offset | 2dp md.comp.outlined-card.focus.indicator.outline.offset
|
Outlined card focus indicator thicknessmd.comp.outlined-card.focus.indicator.thickness | 3dp md.comp.outlined-card.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Outlined card focus container elevationmd.comp.outlined-card.focus.container.elevation | 0dp md.comp.outlined-card.focus.container.elevation
|
State layer
| Token | Value |
|---|---|
Outlined card focus state layer colormd.comp.outlined-card.focus.state-layer.color | #1D1B20 md.comp.outlined-card.focus.state-layer.color
|
Outlined card focus state layer opacitymd.comp.outlined-card.focus.state-layer.opacity | 10% md.comp.outlined-card.focus.state-layer.opacity
|
Outline
| Token | Value |
|---|---|
Outlined card focus outline colormd.comp.outlined-card.focus.outline.color | #1D1B20 md.comp.outlined-card.focus.outline.color
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Outlined card pressed container elevationmd.comp.outlined-card.pressed.container.elevation | 0dp md.comp.outlined-card.pressed.container.elevation
|
State layer
| Token | Value |
|---|---|
Outlined card pressed state layer colormd.comp.outlined-card.pressed.state-layer.color | #1D1B20 md.comp.outlined-card.pressed.state-layer.color
|
Outlined card pressed state layer opacitymd.comp.outlined-card.pressed.state-layer.opacity | 10% md.comp.outlined-card.pressed.state-layer.opacity
|
Outline
| Token | Value |
|---|---|
Outlined card pressed outline colormd.comp.outlined-card.pressed.outline.color | #CAC4D0 md.comp.outlined-card.pressed.outline.color
|
Dragged
Container
| Token | Value |
|---|---|
Outlined card dragged container elevationmd.comp.outlined-card.dragged.container.elevation | 6dp md.comp.outlined-card.dragged.container.elevation
|
State layer
| Token | Value |
|---|---|
Outlined card dragged state layer colormd.comp.outlined-card.dragged.state-layer.color | #1D1B20 md.comp.outlined-card.dragged.state-layer.color
|
Outlined card dragged state layer opacitymd.comp.outlined-card.dragged.state-layer.opacity | 16% md.comp.outlined-card.dragged.state-layer.opacity
|
Outline
| Token | Value |
|---|---|
Outlined card dragged outline colormd.comp.outlined-card.dragged.outline.color | #CAC4D0 md.comp.outlined-card.dragged.outline.color
|