Ohne Standard definiert jedes Tool sein eigenes Format: Figma speichert Styles in einem proprietären Format, Tokens Studio nutzt ein JSON-Format, das nicht vollständig kompatibel mit Style Dictionary ist, und jede Organisation erfindet ihre eigene Namenskonvention. Der W3C-Standard schafft erstmals eine gemeinsame Grundlage.

Aufbau des DTCG-Formats

Das Design Tokens Format Module der W3C Design Tokens Community Group definiert ein JSON-basiertes Format. Jeder Token hat einen Namen (implizit durch die JSON-Struktur), einen Wert ($value), einen Typ ($type) und optional eine Beschreibung ($description). Das Dollar-Prefix ($) kennzeichnet reservierte Schlüssel und unterscheidet Metadaten von Token-Gruppen.

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#1D1F14",
        "$type": "color",
        "$description": "Primary brand color"
      }
    }
  }
}

Gruppen werden durch verschachtelte Objekte ohne $value dargestellt. Der $type kann auf Gruppenebene gesetzt werden und vererbt sich an alle Kind-Tokens – das reduziert Redundanz erheblich.

Token-Typen

Der Standard definiert folgende Typen:

Token-Typ
Beschreibung
Beispielwert
color
Farben in sRGB
#1D1F14
dimension
Abstände, Größen mit Einheit
16px, 1.5rem
fontFamily
Schriftfamilien
["Inter", "sans-serif"]
fontWeight
Schriftgewichte
400, 700
duration
Animationsdauer
200ms
cubicBezier
Easing-Funktionen
[0.4, 0, 0.2, 1]
number
Dimensionslose Zahlen
1.5, 0.8
strokeStyle
Rahmenlinien-Stil
solid, dashed
border
Zusammengesetzter Rahmen
{width, color, style}
shadow
Schatten
{offsetX, offsetY, blur, spread, color}
gradient
Farbverläufe
[{color, position}]
typography
Zusammengesetzte Typografie
{fontFamily, fontSize, fontWeight, lineHeight, letterSpacing}

Zusammengesetzte Typen (Composite Tokens) wie border, shadow, typography und gradient kombinieren mehrere Werte in einem Token. Das ist besonders relevant für Design-System-Dokumentation, wo zusammengehörige Werte als Einheit behandelt werden sollen.

Referenz-Mechanismus (Aliasing)

Aliasing verwendet geschweifte Klammern mit Punkt-Notation: {color.brand.primary}. Der Pfad verweist auf den Token in der JSON-Hierarchie. Zirkuläre Referenzen sind verboten. Dieser Mechanismus ermöglicht das 3-Tier-Modell: Semantic Tokens verweisen auf Primitive, Component Tokens auf Semantic.

{
  "color": {
    "green": {
      "500": { "$value": "#72D36F", "$type": "color" }
    },
    "feedback": {
      "success": { "$value": "{color.green.500}", "$type": "color" }
    }
  }
}

Aktueller Stand und Tool-Support

Der Standard befindet sich als Community Group Draft in aktiver Entwicklung. Die grundlegenden Token-Typen sind spezifiziert, eine vollständige W3C-Recommendation steht noch aus.

Tool-Support wächst: Style Dictionary 4 unterstützt das DTCG-Format nativ als Input. Tokens Studio exportiert im DTCG-Format. Cobalt UI ist ein neues Build-Tool, das DTCG-first entwickelt wurde. Specify und Supernova bieten teilweisen Support.

CSS Custom Properties als Output

Das DTCG-Format ist ein Quellformat – kein Ausgabeformat. Der typische Workflow: Tokens im DTCG-JSON definieren, über Style Dictionary oder Cobalt UI transformieren, als CSS Custom Properties, SCSS-Variablen oder Tailwind/UnoCSS-Konfiguration ausgeben.

Die CSS-Ausgabe bleibt identisch, egal ob die Quelle ein proprietäres Format oder DTCG ist. Der Unterschied liegt in der Portabilität: DTCG-Tokens können zwischen Tools migriert werden, proprietäre Formate nicht.

Kernpunkte

  • Das W3C DTCG Format ist ein JSON-basierter Standard mit $value, $type und $description als reservierte Schlüssel.
  • Zehn Token-Typen (color, dimension, fontFamily, etc.) plus zusammengesetzte Typen (border, shadow, typography, gradient) decken alle Design-Entscheidungen ab.
  • Aliasing über {pfad.zum.token} ermöglicht hierarchische Referenzketten.
  • Style Dictionary 4 und Cobalt UI unterstützen DTCG nativ – die Tool-Landschaft wächst.
  • DTCG ist ein Quellformat, kein Ausgabeformat – CSS Custom Properties sind ein möglicher Output.
  • Wer im DTCG-Format dokumentiert, kann Tools wechseln, ohne Tokens neu zu definieren.