Design System
The ttoss Design System provides a comprehensive foundation for building consistent, accessible, and scalable digital products.
Core Principles
1. Easy to use
Make it simple for newcomers to adopt our system. Easy to use means easy to change and experiment with, enabling rapid iteration.
2. Simple with minimal dependencies
Focus on small, focused APIs that cover common use cases while keeping complexity low.
3. Flexible, not rigid
Balance standardization with creative freedom. Enable both efficient standard builds and innovative custom solutions.
System Architecture
Our design system follows an inside-out architecture - each layer builds upon the previous one:
Layer 1: Digital Brand
Purpose: Define brand guidelines for digital interfaces
- Logo usage and variations
- Brand color palette
- Typography hierarchy
- Photography and imagery styles
- Voice and tone guidelines
Layer 2: Design Tokens
Purpose: Codify brand concepts into reusable values
- Core Tokens: Raw brand values (colors, fonts, spacing)
- Semantic Tokens: Context-specific applications (button colors, text hierarchy)
- Theme Definition: Complete implementations combining tokens and component styles
Layer 3: UI Components
Purpose: Provide building blocks for interfaces
- Foundations: Basic elements (Button, Input, Text)
- Patterns: Complex compositions (Forms, Navigation, Cards)
Layer 4: UI Patterns
Purpose: Complete interface solutions
- Page templates
- Layout patterns
- Interaction flows
Multi-Brand Support
Our system excels at supporting multiple brands through:
- Theme Switching: Different brands using the same component library
- Token Override: Brand-specific values while maintaining structure
- Flexible Components: Adaptable to various visual styles
Key Benefits
- Single Source of Truth: Centralized design decisions
- Cross-Team Collaboration: Shared vocabulary between design and engineering
- Rapid Prototyping: Quick testing and iteration
- Visual Consistency: Unified experience across products
- Scalability: Support for multiple products and brands
Getting Started
- Install the packages - Quick setup guide
- Explore tokens - Understand the foundation
- Browse components - See what's available