DTL vs. Other Solutions
A detailed comparison of DTL with CSS variables, JSON, Figma Variables, and YAML. See why DTL is purpose-built for design tokens.
Feature Comparison
| Feature | DTL | CSS Variables | JSON | Figma Variables | YAML |
|---|---|---|---|---|---|
| Type Safety | |||||
| Calculations & Expressions | ⚠️ Limited | ||||
| Built-in Functions | |||||
| First-Class Theming | ⚠️ Manual | ⚠️ Manual | ⚠️ Manual | ⚠️ Manual | |
| Type Inference | |||||
| IDE Support (LSP) | ⚠️ Basic | ⚠️ Basic | ⚠️ Basic | ⚠️ Basic | |
| Compile-time Validation | |||||
| Version Control Friendly | |||||
| Purpose-Built for Tokens | ⚠️ Partial |
CSS Variables (Custom Properties)
Native browser support, but limited expressiveness for token management.
Limitations
- •No calculations: Can't do
--spacing-large: calc(var(--spacing-base) * 3)in a clean way - •No type safety: No validation that colors are valid or sizes have units
- •Manual theme management: Requires separate CSS files or complex class-based switching
- •No functions: Can't generate color palettes or variants automatically
- •Runtime only: Errors only appear in the browser
Example: CSS Variables
Example: DTL Equivalent
DTL Advantage: Calculations, type safety, and theming are built into the language. CSS variables are great for runtime usage, but DTL is better for authoring and maintaining tokens.
JSON
Universal format, but requires external tooling for token management.
Limitations
- •No calculations: Can't express relationships like
large = base * 3 - •No type system: Everything is just strings or numbers
- •Requires external tooling: Need build scripts for transformations, validation, and generation
- •No functions: Can't generate palettes or variants
- •Verbose: Lots of boilerplate for simple relationships
- •No IDE support: Basic syntax highlighting only
Example: JSON
Example: DTL Equivalent
DTL Advantage: JSON is just data. DTL is a language that understands design tokens, with built-in calculations, type safety, and relationships. No external tooling needed.
Figma Variables
Designer-friendly, but locked to the Figma ecosystem.
Limitations
- •Locked to Figma: Can't use the same source of truth in code
- •Limited calculations: Basic math only, no functions or transformations
- •No version control: Changes live in Figma files, not Git
- •No type system: Weak validation
- •Sync complexity: Requires plugins or manual export to use in code
- •No IDE support: Can't edit with code tools
Example: Figma Variables Workflow
- Define variables in Figma UI
- Export via plugin (e.g., Figma Tokens)
- Transform JSON to your format
- Import into codebase
- Repeat for every change
Example: DTL Workflow
DTL Advantage: DTL is code-first, version-controlled, and works everywhere. Figma Variables are great for designers, but DTL bridges the gap between design and code with a single source of truth.
YAML
Human-readable, but still just data without language features.
Limitations
- •No native calculations: Still just data, no expressions
- •Weak type system: Everything is strings, numbers, or booleans
- •Requires build tools: Need Style Dictionary or similar for transformations
- •No functions: Can't generate variants or palettes
- •Indentation sensitive: Easy to make syntax errors
- •No IDE support: Basic validation only
Example: YAML (Style Dictionary)
Example: DTL Equivalent
DTL Advantage: YAML is still just data. DTL is a language with expressions, functions, and type safety built-in. No need for external build tools like Style Dictionary—the compiler handles everything.
Key Takeaways
Why DTL Wins
- Purpose-built: Designed specifically for design tokens
- Type safety: Catch errors at compile time, not runtime
- Expressions: Native calculations and relationships
- Functions: Built-in color manipulation, palette generation
- Theming: First-class language feature
- Tooling: Full LSP support with IDE features
When to Use Alternatives
- •CSS Variables: For runtime usage in stylesheets (DTL compiles to CSS)
- •JSON: For simple, static token exports (DTL can generate JSON)
- •Figma Variables: For designer workflows (sync with DTL via export)
- •YAML: For Style Dictionary workflows (DTL replaces the need)