Building Design Systems

Learn how to structure and organize a complete design system using DTL. This guide covers patterns, best practices, and real-world examples.

Foundation First

Start with foundation tokens - the base values that everything else builds upon. These include colors, typography, spacing, and effects.

Semantic Tokens

Build semantic tokens on top of your foundation. These describe how tokens are used, not what they are.

Component Tokens

Define component-specific tokens that reference your foundation and semantic tokens.

File Organization

Organize your tokens into logical files:

Best Practices

• Start with foundation: Build your base tokens first
• Use semantic naming: Name tokens by purpose, not appearance
• Keep it organized: Use groups and files to maintain structure
• Document everything: Add comments to explain decisions
• Test themes: Ensure all themes work correctly

Related

• Best Practices
• Examples