HomeOverviewFoundationsComponentsGuidelinesPatterns

Design Tokens

The foundation of MUZISYSTEM's visual language. Design tokens are the atomic values that define colors, typography, spacing, and more.

What are Design Tokens?

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values to ensure consistency and maintainability across all products.

Tokens are stored as CSS custom properties (variables) in our design system, making them easy to reference and update across the entire codebase.

Token Categories

🎨 Colors

Semantic color tokens for consistent theming across brands.

  • Primary & brand colors
  • Background & surface colors
  • Text & border colors
  • State colors (hover, active, disabled)

📝 Typography

Type scale and font properties for consistent text hierarchy.

  • Font families (sans, mono)
  • Font sizes (display, heading, body)
  • Font weights (light to bold)
  • Line heights & letter spacing

📏 Spacing

Consistent spacing scale for layouts and components.

  • Gap tokens (xs to xl)
  • Padding tokens (section, container)
  • Margin tokens
  • Layout spacing

🔲 Border Radius

Rounded corners for consistent component shapes.

  • Radius scale (xs to xl)
  • Component-specific radius
  • Full radius for circles

🌑 Shadows

Elevation system for depth and hierarchy.

  • Shadow scale (sm to xl)
  • Focus rings
  • Elevation levels

⚡ Transitions

Animation timing for smooth interactions.

  • Duration tokens
  • Easing functions
  • Transition presets

Using Tokens

Tokens are accessed via CSS custom properties. Always use tokens instead of hard-coded values to ensure consistency and enable easy theming.

In CSS

.my-component {
  color: var(--text);
  background: var(--surface);
  padding: var(--gap-md);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

In React Components

<div style={{
  color: 'var(--text)',
  background: 'var(--surface)',
  padding: 'var(--gap-md)',
  borderRadius: 'var(--radius-sm)'
}}>
  Content
</div>

Token Naming Convention

Our tokens follow a consistent naming pattern:

  • Category prefix - Identifies the token type (text-, gap-, radius-, etc.)
  • Semantic name - Describes the purpose or scale (primary, md, body, etc.)
  • Kebab-case - All lowercase with hyphens

Examples

  • --text-body - Body text size
  • --gap-md - Medium gap spacing
  • --radius-sm - Small border radius
  • --shadow-lg - Large shadow

Benefits of Tokens

  • Consistency - Same values used everywhere
  • Maintainability - Update once, change everywhere
  • Theming - Easy to switch between brands and themes
  • Scalability - Add new tokens without breaking existing code
  • Documentation - Self-documenting through semantic names