Language Preview—DTL is currently in alpha. Explore the language, try the playground, and learn how to use it.Alpha release coming soon.
Fully Compliant

DTCG Specification Compliance

DTL generates JSON output that fully complies with the Design Tokens Community Group (DTCG) Format Specification. This ensures your tokens work seamlessly with any DTCG-compatible tool.

Why DTCG Compliance Matters

Universal Compatibility

Works with Style Dictionary, Figma plugins, Adobe XD, Sketch, and any tool that supports the DTCG format.

Standard Format

Follows the industry-standard format, ensuring your tokens can be consumed by any platform or framework.

Future-Proof

As the DTCG spec evolves, DTL will continue to generate compliant output, protecting your investment.

Validated Output

Every token includes proper $value, $type, and optional $description fields as required by the spec.

DTCG Format Structure

DTL generates tokens in the standard DTCG format with the following structure:

DTCG-Compliant JSON Output

Required Fields

$value

The actual value of the token. Can be:

  • Primitive values (strings, numbers, booleans)
  • Objects for dimensions: {value: 8, unit: "px"}
  • References: {Colors.primary}
  • Arrays and objects for complex values

$type

The type of the token. DTL automatically maps types:

DTL Type → DTCG Type

  • Color → color
  • Size → dimension
  • Number → number
  • Font → fontFamily
  • FontWeight → fontWeight
  • Duration → duration

$description (optional)

Automatically extracted from doc comments (///) in your DTL files.

Dimension Format

DTCG requires dimensions to be objects with value and unit properties. DTL automatically converts size values:

Automatic Dimension Formatting

Token References

DTCG uses the {token.path} format for references. DTL automatically converts references:

Automatic Reference Formatting

Compatible Tools & Platforms

DTCG-compliant output works with a wide range of tools and platforms:

Build Tools

  • • Style Dictionary
  • • Theo
  • • Tokens Studio

Design Tools

  • • Figma Plugins
  • • Adobe XD
  • • Sketch

Platforms

  • • Web (React, Vue, Angular)
  • • iOS (SwiftUI)
  • • Android
  • • Flutter

Ready to Get Started?

Start using DTL to generate DTCG-compliant design tokens for your design system.

Try PlaygroundView Documentation