Foundations
Design tokens, color systems, typography, and core visual elements that form the foundation of MUZISYSTEM.
What are Foundations?
Foundations are the core design decisions that define the visual language of MUZISYSTEM. They include color palettes, typography scales, spacing systems, and other fundamental elements that ensure consistency across all components and applications.
These tokens are brand-agnostic and adapt automatically to different brands and themes, providing a unified experience while maintaining each brand's unique identity.
Available Foundations
🎨 Colors
Semantic color system with support for multiple brands and dark/light themes. All combinations meet WCAG 2.1 AA standards.
✍️ Typography
Type scale, font families, line heights, and text styles for optimal readability across all devices.
🔧 Tokens
Design tokens for spacing, sizing, borders, shadows, and other visual properties.
📐 Spacing
Consistent spacing scale from 0 to 16 for margins, padding, and gaps.
💎 Shadows
Elevation system with 5 shadow levels for depth and visual hierarchy.
📱 Breakpoints
Responsive design breakpoints for mobile-first layouts across all devices.
Using Foundations
All foundations are available as CSS variables and can be used directly in your styles:
/* CSS */
.button {
background-color: var(--primary);
color: var(--on-primary);
padding: var(--padding-md);
border-radius: var(--radius-sm);
font-size: var(--text-base);
}
/* React/JSX */
<div style={{
backgroundColor: 'var(--surface)',
padding: 'var(--padding-lg)',
color: 'var(--text)'
}}>
Content
</div>Best Practices
- Always use tokens - Never hard-code values like colors or spacing
- Semantic naming - Use tokens that describe purpose, not appearance
- Consistency - Stick to the defined scales and systems
- Accessibility - Ensure sufficient contrast and touch targets
- Responsive - Use relative units and fluid scales