DesignRef Logo
DesignRef
Design SystemsCompareQuick Ref
SearchK
Google
Material Design 3

Design Tokens

The three-tier token architecture that powers Material Design 3. Understand how reference, system, and component tokens work together.

3 hierarchy levels15 examplesM3 Exclusive
Token Tiers
Referencemd.ref.*
Systemmd.sys.*
Componentmd.comp.*
All Design Systems

Material Design 3

OverviewColorsTypographySpacingShapeMotionStatesElevationBreakpointsTokensCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
OverviewColorsTypographySpacingShapeMotionStatesElevationBreakpointsTokensCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms

Why Design Tokens?

Design tokens are the single source of truth for design decisions. They bridge the gap between design and development, ensuring consistency and enabling powerful theming capabilities.

  • Consistency: Same values used across all platforms and components
  • Maintainability: Change a token once, update everywhere
  • Theming: Swap system tokens to create entirely new themes
  • Abstraction: Components use semantic names, not raw values

Design Token Architecture

Material Design 3 uses a three-tier token system that separates raw values from semantic meaning from component-specific usage. This hierarchy enables theming, consistency, and maintainability across design systems.

Naming Convention
Tokens follow the pattern: md.<tier>.<category>.<property>. For example: md.sys.color.primary (system color token) or md.comp.filled-button.container.color (component token referencing a system token).

Token Hierarchy Flow

ReferenceRaw Values
SystemSemantic Roles
ComponentSpecific Usage

Semantic tokens that map meaning to reference values. These change between light/dark mode and different themes. System tokens describe what a value is used for, not what it literally is.

Token Examples
md.sys.color.primary
md.ref.palette.primary40

The primary brand color for key actions and emphasis

Maps to: md.ref.palette.primary40

md.sys.color.on-primary
md.ref.palette.primary100

Text/icons displayed on primary color

Maps to: md.ref.palette.primary100

md.sys.color.surface
md.ref.palette.neutral99

Background color for surfaces and containers

Maps to: md.ref.palette.neutral99

md.sys.color.on-surface
md.ref.palette.neutral10

Primary text color on surfaces

Maps to: md.ref.palette.neutral10

md.sys.typescale.label-large
14sp/20sp/500

Typography style for button labels and navigation

Maps to: Roboto Medium 14/20

md.sys.shape.corner.full
9999px

Pill-shaped fully rounded corners

Maps to: 9999px

Token Resolution Example

See how a component token resolves through the hierarchy:

1
md.comp.filled-button.container.color

Component needs a container color

2
md.sys.color.primary

Resolves to the primary color role

3
md.ref.palette.primary40 = #6750A4

Final resolved value from tonal palette

Result

The filled button container renders with #6750A4

Official Resources

M3 Design Tokens Documentation

Official Material Design 3 documentation on the design token architecture, naming conventions, and hierarchy.

Docs
Material Design Tokens (GitHub)

Community-maintained repository of Material Design 3 tokens in multiple export formats.

Repo
Material Theme Builder (Figma)

Figma plugin to generate complete M3 color schemes from a seed color and export as design tokens.

Tool
Material Theme Builder (Web)

Web-based tool to create and preview custom M3 themes, then export tokens for Android, Web, and Flutter.

Tool

Export Formats

M3 tokens can be exported for any platform. Click a format to see an example.