DTL Syntax
Every syntax element is demonstrated with real, syntax-highlighted code examples. Copy, modify, and experiment as you learn.
Basic Structure
A DTL file consists of token sets, groups, and individual tokens. The syntax is designed to be self-documenting and intuitive.
Key Elements:
- •
tokens- Defines a token set (the root container) - •
Colors- A group that organizes related tokens - •
token- An individual design token with a value
Comments
DTL supports multiple comment styles for different use cases. Comments are highlighted in muted colors.
Identifiers
Identifiers name your tokens, groups, and token sets. Follow these rules for valid names.
✅ Valid
❌ Invalid
Rule: Identifiers must start with a letter or underscore, and can contain letters, numbers, and underscores.
Case Sensitivity
DTL is case-sensitive. primary and Primary are different tokens.
Whitespace
Whitespace is flexible - format your code for readability. These examples are all equivalent.
Compact Style
Recommended Style
Statements
Most DTL statements can optionally end with a semicolon. Modern syntax prefers omitting them for cleaner code.
With Semicolons
Without Semicolons (Preferred)
What's Next?
Now that you understand the basic syntax, dive deeper into the language features.