Components Example

This example demonstrates how to define component-specific tokens for buttons, inputs, cards, and more.

Basic Component Tokens

Component Variants

Form Components

Card Components

Complete Component System

Best Practices

• Reference foundation tokens: Build components from your base design tokens
• Create variants: Use nested groups for component variants (Primary, Secondary, etc.)
• Use semantic names: Name tokens by their purpose (bgColor, textColor) not appearance
• Leverage calculations: Use color functions and calculations for related values
• Override in themes: Only override component tokens that need to change per theme

Related

• Tokens Reference
• Groups Reference
• Color System Example
• Themes Example