Define your design system in code.
Type-safe tokens, native calculations, and first-class theming. Write once, deploy to any platform.
Every syntax element, type, operator, and pattern documented with examples. Learn how DTL works and see what makes it powerful.
DTL generates fully compliant Design Tokens Community Group (DTCG) format JSON. Works seamlessly with any tool that supports the standard.
DTL automatically generates standard-compliant JSON following the Design Tokens Community Group specification
Every language feature demonstrated with syntax-highlighted code examples. Reference documentation that shows, not just tells.
Start with simple token definitions. DTL automatically infers types from values.
Use built-in functions to generate variants, scales, and transformations.
Create themed variations that extend and override base token sets.
Import, extend, and compose complex design systems with ease.
Navigate the complete language specification. Every section includes syntax examples and detailed explanations.
Define your design tokens in DTL once, then compile to any format you need. Currently supporting JSON and CSS, with more formats coming.
Write your design tokens once in DTL. No duplication, no sync issues, no manual updates across multiple files.
DTL generates JSON output that fully complies with the Design Tokens Community Group Format Specification. Works seamlessly with Style Dictionary, Figma plugins, and any DTCG-compatible tool.
Learn more about DTCG complianceFully compliant with Design Tokens Community Group spec • Works with Style Dictionary, Figma plugins, and more
Ready-to-use CSS custom properties for your stylesheets
Maintain tokens in one place. Changes automatically propagate to all output formats.
Use JSON for apps, CSS for stylesheets. More formats (SCSS, TypeScript, etc.) coming soon.
Compile as part of your build process. Generate outputs for different targets automatically.
DTL is perfect for teams building design systems that need type safety, calculations, and first-class theming support.
Need compile-time validation and type checking for your tokens? DTL catches errors before they reach production.
Building spacing scales, color palettes, or derived tokens? DTL's native expressions make it easy.
Managing light/dark modes or multiple brand themes? DTL's first-class theme system handles it elegantly.
Organizing hundreds of tokens? DTL's grouping and import system keeps everything maintainable.
Want autocomplete, go-to-definition, and refactoring? DTL's LSP support provides full IDE features.
Need to track changes, review diffs, and collaborate? DTL files are text-based and git-friendly.
DTL is purpose-built for design tokens. Compare it to CSS variables, JSON, Figma Variables, and YAML.
large = base * 3No installation needed. Explore DTL syntax, see real-time compilation, and experiment with design tokens right in your browser.
Alpha release coming soon • CLI and VS Code extension will be available for installation