Tokens

Tokens are the fundamental building blocks of DTL. They represent individual design values like colors, spacing, typography, and more.

Basic Syntax

Tokens are defined using the token keyword:

With Type Annotation

You can optionally specify the type explicitly:

Token Values

Tokens can be assigned various types of values:

Token References

Tokens can reference other tokens using dot notation:

Computed Tokens

Tokens can be computed using expressions:

Derived Tokens

Use the @derive decorator to create variants of a token:

Documentation Comments

Add documentation comments above tokens to provide context:

Naming Conventions

Follow these naming conventions for consistency:

• camelCase: Use camelCase for token names (primaryColor)
• Descriptive: Names should clearly indicate purpose
• Consistent: Use consistent naming patterns across your system