Design Token & CSS Theme Editor

DTCG 2025.10 token workspace

Edit, resolve, preview and export DTCG design tokens and CSS themes locally.

dtcg DTCG 2025.10 Mode

Tokens

Groups

Modes

References

Errors

Contrast pairs

Token path

color.background

Type

Description

Mode value · base

Resolved value

{
  "colorSpace": "srgb",
  "components": [
    1,
    1,
    1
  ],
  "alpha": 1
}

Direct references

No reference

01
Import a token system
Open DTCG JSON, Style Dictionary JSON or CSS custom properties.
02
Resolve and preview
Edit modes, inspect references and render safe local component previews with contrast evidence.
03
Compare and export
Review breaking path or type changes and generate interoperable theme artifacts.

Is DTCG 2025.10 a W3C standard?

It is a Design Tokens Community Group candidate recommendation, not a W3C Recommendation.

Can imported values affect the whole site?

No. The preview uses validated local values and does not inject arbitrary global CSS.

How are themes represented?

Base values plus explicit local mode overrides are preserved; the mode extension is clearly vendor-specific.

Does contrast review cover every component state?

No. It evaluates discoverable semantic color pairs; teams must test all real states and content.

Keep working with other focused browser utilities.