Language Preview—DTL is currently in alpha. Explore the language, try the playground, and learn how to use it.Alpha release coming soon.
Color System Example
This example demonstrates how to build a comprehensive color system with palettes, variants, and semantic colors.
Basic Color Palette
Color Palette as Object
Semantic Colors
Using @derive for Auto-Generation
Complete Color System
Best Practices
- Use semantic names: Prefer "primary" over "blue" for better theme support
- Organize with objects: Group related colors (like gray scale) into objects
- Leverage color functions: Use lighten(), darken(), desaturate(), and alpha() for variants
- Use @derive: Automatically generate related color variants
- Test contrast: Ensure text colors meet accessibility standards