Skip to content

Design Tokens

Color Tokens

Color tokens define the color roles used by all components. Override these at :root to change your app’s palette.

Primary

Token	Value	Preview
`--md-sys-color-primary`	`#6750A4`
`--md-sys-color-on-primary`	`#FFFFFF`
`--md-sys-color-primary-container`	`#EADDFF`
`--md-sys-color-on-primary-container`	`#21005D`

Secondary

Token	Value	Preview
`--md-sys-color-secondary`	`#625B71`
`--md-sys-color-on-secondary`	`#FFFFFF`
`--md-sys-color-secondary-container`	`#E8DEF8`
`--md-sys-color-on-secondary-container`	`#1E192B`

Tertiary

Token	Value	Preview
`--md-sys-color-tertiary`	`#7D5260`
`--md-sys-color-on-tertiary`	`#FFFFFF`
`--md-sys-color-tertiary-container`	`#FFD8E4`
`--md-sys-color-on-tertiary-container`	`#370B1E`

Error

Token	Value	Preview
`--md-sys-color-error`	`#B3261E`
`--md-sys-color-on-error`	`#FFFFFF`
`--md-sys-color-error-container`	`#F9DEDC`
`--md-sys-color-on-error-container`	`#370606`

Surface

Token	Value	Preview
`--md-sys-color-surface`	`#FFFBFE`
`--md-sys-color-on-surface`	`#1C1B1F`
`--md-sys-color-surface-variant`	`#E7E0EC`
`--md-sys-color-on-surface-variant`	`#49454F`
`--md-sys-color-surface-container-lowest`	`#FFFFFF`
`--md-sys-color-surface-container-low`	`#F7F2FA`
`--md-sys-color-surface-container`	`#F3EDF7`
`--md-sys-color-surface-container-high`	`#ECE6F0`
`--md-sys-color-surface-container-highest`	`#E6E0E9`

Outline

Token	Value	Preview
`--md-sys-color-outline`	`#79747E`
`--md-sys-color-outline-variant`	`#CAC4D0`

Shape Tokens

Token	Value	Preview
`--md-sys-shape-corner-none`	`0px`
`--md-sys-shape-corner-extra-small`	`4px`
`--md-sys-shape-corner-small`	`8px`
`--md-sys-shape-corner-medium`	`12px`
`--md-sys-shape-corner-large`	`16px`
`--md-sys-shape-corner-extra-large`	`28px`
`--md-sys-shape-corner-full`	`9999px`

Elevation Tokens

Token	Value	Preview
`--md-sys-elevation-0`	`none`
`--md-sys-elevation-1`	`0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)`
`--md-sys-elevation-2`	`0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15)`
`--md-sys-elevation-3`	`0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3)`
`--md-sys-elevation-4`	`0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3)`
`--md-sys-elevation-5`	`0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.3)`

State Layer Tokens

Token	Value	Usage
`--md-sys-state-hover-state-layer-opacity`	`0.08`	Hover overlay
`--md-sys-state-focus-state-layer-opacity`	`0.12`	Focus overlay
`--md-sys-state-pressed-state-layer-opacity`	`0.12`	Press overlay
`--md-sys-state-dragged-state-layer-opacity`	`0.16`	Drag overlay
`--md-sys-state-disabled-container-opacity`	`0.12`	Disabled container
`--md-sys-state-disabled-content-opacity`	`0.38`	Disabled content

Motion Tokens

Duration

Token	Value
`--md-sys-motion-duration-short1`	`50ms`
`--md-sys-motion-duration-short2`	`100ms`
`--md-sys-motion-duration-short3`	`150ms`
`--md-sys-motion-duration-short4`	`200ms`
`--md-sys-motion-duration-medium1`	`250ms`
`--md-sys-motion-duration-medium2`	`300ms`
`--md-sys-motion-duration-medium3`	`350ms`
`--md-sys-motion-duration-medium4`	`400ms`
`--md-sys-motion-duration-long1`	`450ms`
`--md-sys-motion-duration-long2`	`500ms`

Easing

Token	Value
`--md-sys-motion-easing-standard`	`cubic-bezier(0.2, 0, 0, 1)`
`--md-sys-motion-easing-standard-decelerate`	`cubic-bezier(0, 0, 0, 1)`
`--md-sys-motion-easing-standard-accelerate`	`cubic-bezier(0.3, 0, 1, 1)`
`--md-sys-motion-easing-emphasized`	`cubic-bezier(0.2, 0, 0, 1)`
`--md-sys-motion-easing-emphasized-decelerate`	`cubic-bezier(0.05, 0.7, 0.1, 1)`
`--md-sys-motion-easing-emphasized-accelerate`	`cubic-bezier(0.3, 0, 0.8, 0.15)`