designesy
Score a site

designesy.org/m3-bridge5 checksDTCG 2025.10converted in your browsertoken contract

M3 to DTCG bridge

Paste Material 3 tokens, as CSS or JSON, and get W3C DTCG 2025.10 back: typed, structured and checked.

View as Markdown
Input

Converted in your browser. Nothing is sent anywhere.

M3 to DTCGwaiting for tokens5 checks · ready
The conversion
  1. lines read
  2. tokens parsed
  3. types found
  4. checks pass
What it maps
--md-sys-color-*
Color tokens, written as colorSpace and components.
--md-sys-shape-*
Corner radii, as dimension tokens.
--md-sys-motion-*
Durations and easing curves.
--md-sys-typescale-*
Type sizes, weights and line heights, each typed from its own value.
DTCG validation5

The converted file, checked against the W3C format.

Output

Paste Material 3 tokens, or load the sample, and convert. The converted file lands here.

Paths follow the names: --md-sys-color-primary becomes color.primary.

  • pass
  • needs work
  • fail
  • does not apply
valid when all five checks pass

Method

  1. Read the tokens

    --md-* custom properties from CSS, or md.* keys from a JSON file.

  2. Map the paths

    Each name becomes a DTCG path: --md-sys-color-primary becomes color.primary.

  3. Type the values

    Colors, dimensions, durations, easing curves, numbers and font families, each with its $type.

  4. Validate

    Five checks against the DTCG format, before you download the file.

valid = all five checks passColors are written as colorSpace and components, never as bare hex.

Why it exists

Material 3's own token export, the Design System Package, was archived on 17 October 2024, and it never wrote the W3C DTCG format. No replacement has been announced.

Google's DESIGN.md project does export DTCG, through npx @google/design.md export --format dtcg, and the two projects do not share a token format. This bridge carries M3 tokens across, then checks the result against the standard.

Next