Naming Conventions
Guidelines and conventions for design system token nomenclature, based on Zeus Design System and industry best practices.
| Category | Pattern | Examples | Usage |
|---|---|---|---|
| Colors | --[semantic-name] | --primary --secondary --background --foreground | Use for component theming and consistent color application |
| Spacing | --[prefix]-space-[scale] | --p-space-0 --p-space-200 --p-space-800 | Apply consistent spacing across components and layouts |
| Typography | --[prefix]-font-[property]-[scale] | --s3-font-size-large --s3-font-weight-heading | Maintain typographic hierarchy and consistency |
| Borders | --[prefix]-border-[property]-[scale] | --p-border-radius-100 --p-border-radius-200 | Apply consistent border styling across UI elements |
| Shadows | --shadow-elevation-[level] | --shadow-elevation-01 --shadow-elevation-04 | Create visual depth and component layering |
Best Practices
- • Use semantic names over descriptive names
- • Maintain consistent prefix patterns
- • Follow numerical scales for sizing
- • Group related tokens with common prefixes
- • Document purpose and usage context
Naming Principles
- • Semantic: Focus on purpose, not appearance
- • Scalable: Allow for future expansion
- • Consistent: Follow established patterns
- • Contextual: Include usage information
- • Hierarchical: Use clear parent-child relationships