Usage Guidelines
Usage guidelines for semantic tokens, layer system and best practices for consistent design system implementation.
| Token | Usage | Examples | Avoid |
|---|---|---|---|
--background-page var(--neutral-100) | Application body foundation Always use as the foundation layer | ✓ body✓ main containers✓ app background | ✗ Never use for card backgrounds✗ Avoid for modal overlays |
--layer-01 var(--neutral-white) | Siempre sobre --background-page Primary surface for content | ✓ cards✓ panels✓ content areas | ✗ Don't use directly on background-page✗ Avoid stacking multiple layer-01 |
--layer-02 var(--neutral-100) | Siempre sobre --layer-01 Secondary surface elevation | ✓ nested cards✓ sidebars on cards✓ grouped content | ✗ Never place on background-page✗ Don't skip layer hierarchy |
--layer-03 var(--neutral-200) | Siempre sobre --layer-02 Tertiary surface for complex layouts | ✓ tooltips on cards✓ nested panels✓ complex form sections | ✗ Avoid deep nesting✗ Don't use for primary content |
--text-standard var(--neutral-black) | Texto principal Primary text content | ✓ headings✓ body text✓ primary labels | ✗ Avoid on dark backgrounds✗ Don't use for disabled states |
--text-subdued var(--neutral-600) | Texto secundario Supporting text content | ✓ descriptions✓ metadata✓ secondary labels | ✗ Never for critical information✗ Avoid as only text color |
--text-inverse var(--white) | Texto sobre fondos oscuros Text on dark backgrounds | ✓ dark buttons✓ dark headers✓ inverse cards | ✗ Don't use on light backgrounds✗ Avoid low contrast combinations |
Semantic Token Benefits
Theme Flexibility
Semantic tokens adapt automatically to theme changes
Consistent Usage
Clear purpose prevents incorrect application
Maintenance
Centralized updates propagate across the system