Primary action
Used for prominent calls to action and emphasis.
Design Tokens
Core design values that define the visual foundation of the design system. This page turns the token reference into a practical visual showcase so semantic roles, type styles, spacing, motion, and shape choices are easier to evaluate in context.
How to Read This Page
Tokens work best when shown as relationships, not isolated values. Color roles are presented as semantic pairs, typography is shown as complete specimens with line-height and tracking, and system utilities like spacing and size are shown as reusable scales.
Semantic first
Use
--md-sys-* roles in components instead of
hardcoded values.
Utilities stay global
Use
--ds-space-* and
--ds-size-* for rhythm and control sizing.
Pairs matter
on-* roles are foreground tokens and should be
previewed on their matching surfaces.
Color Roles
These previews show background and foreground roles together. This is the correct way to evaluate semantic color relationships.
Brand and Feedback Pairs
Primary container
Used for standout containers with lower intensity.
Secondary
Used for supporting emphasis and alternate actions.
Tertiary container
Useful for complementary accents and differentiated
sections.
Error
Reserved for validation, destructive actions, and critical
feedback.
Error container
Use for inline error panels or supportive validation
messaging.
Surface Hierarchy
Surface
--md-sys-color-surface / --md-sys-color-on-surface
Surface Container Low
--md-sys-color-surface-container-low
Surface Container
--md-sys-color-surface-container
Surface Container High
--md-sys-color-surface-container-high
Surface Container Highest
--md-sys-color-surface-container-highest
Inverse Surface
--md-sys-color-inverse-surface /
--md-sys-color-inverse-on-surface
Typography Scale
These specimens show the real type tokens with line-height and tracking so the hierarchy can be judged at a glance.
Display Large
Headline Large
Headline Medium
Title Large
Title Medium
Body Large supports comfortable reading and UI explanation.
Body Medium is used for compact supporting text and list detail.
Label Large
Spacing and Size Utilities
Layout rhythm and control density come from the global utility token set. These are shared across multiple components and should stay consistent across the system.
Spacing Scale
Interactive Size Tokens
Shape and Elevation
Shape tokens define corner personality while elevation tokens define depth and surface hierarchy.
Shape Scale
Elevation Levels
Level 0
No elevation
Level 1
Resting cards and small raised surfaces
Level 2
Hover states, elevated controls, and stronger
separation
Level 3
Menus, raised panels, and active overlays
Level 4
Prominent overlays and high-emphasis floating surfaces
Level 5
Dialogs and topmost surfaces
Motion and State Layers
Motion tokens establish tempo, while state-layer tokens define the amount of interaction feedback applied to a surface.
Motion Tokens
Short Duration
--md-sys-motion-duration-short2 = 100ms
Medium Duration
--md-sys-motion-duration-medium3 = 350ms
Standard Easing
cubic-bezier(0.2, 0, 0, 1)
Emphasized Decelerate
cubic-bezier(0.05, 0.7, 0.1, 1)
State Layer Opacities
Hover
Focus
Pressed
Dragged
Usage Example
Foundation tokens should be combined semantically. A surface should pair its background, text color, spacing, radius, and elevation instead of mixing unrelated values.
.token-card {
background: var(--md-sys-color-surface-container-low);
color: var(--md-sys-color-on-surface);
padding: var(--ds-space-4);
border-radius: var(--ds-radius-md);
box-shadow: var(--md-sys-elevation-level1);
transition:
box-shadow var(--md-sys-motion-duration-short2)
var(--md-sys-motion-easing-standard),
background-color var(--md-sys-motion-duration-short2)
var(--md-sys-motion-easing-standard);
}