HomeOverviewFoundationsComponentsGuidelinesPatterns

Colors

MUZISYSTEM's color system supports multiple brands with semantic tokens for consistent theming.

Color Philosophy

Our color system is built on semantic tokens that adapt to different brands and themes. Instead of using specific color values, we use meaningful names that describe the purpose of the color in the interface.

This approach allows us to maintain consistency across multiple brands while giving each brand its unique identity through the primary color.

Semantic Color Tokens

Background Colors

  • --bg - Main background
  • --surface - Elevated surfaces
  • --card - Card backgrounds

Text Colors

  • --text - Body text
  • --titles - Headings
  • --muted - Secondary text

Brand Colors

  • --primary - Brand color
  • --primary-hover - Hover state
  • --primary-active - Active state

UI Colors

  • --border - Borders & dividers
  • --ring - Focus rings
  • --destructive - Error states

Multi-Brand Support

Each brand in the AVNIR ecosystem has its own primary color that defines its identity. The system automatically adapts all UI elements to work with any brand color.

AVNIR Studio

#ededed

Light gray - Design system hub

MUZIDEV

#5cb9f2

Blue - Development platform

MUZIPICS

#ff2d55

Red - Visual content platform

MUZIWEB

#9802eb

Purple - Web services

MUZIMERCH

#ff9d00

Orange - Merchandise platform

MUZIBASE

#2fad66

Green - Database services

MUZISYSTEM

#ededed

Light gray - Design system docs

Dark & Light Themes

MUZISYSTEM supports both dark and light themes. The color tokens automatically adjust to provide optimal contrast and readability in each theme.

🌙 Dark Theme (Default)

Our default theme optimized for reduced eye strain and modern aesthetics.

Background
--bg: #0b0b0d
Surface
--surface: #1a1a1d
Text
--text: #ededed
Card
--card: #0f0f11

☀️ Light Theme

Clean and bright theme for well-lit environments and user preference.

Background
--bg: #f8f8f8
Surface
--surface: #ffffff
Text
--text: #1f2937
Card
--card: #ffffff

Accessibility

All color combinations in MUZISYSTEM meet WCAG 2.2 AA standards for contrast ratios:

  • Normal text - Minimum 4.5:1 contrast ratio
  • Large text - Minimum 3:1 contrast ratio
  • UI components - Minimum 3:1 contrast ratio

We test all color combinations to ensure they work for users with color vision deficiencies.

Usage Guidelines

  • Always use tokens - Never hard-code color values
  • Semantic naming - Use tokens that describe purpose, not appearance
  • Test contrast - Verify readability in both themes
  • Brand consistency - Use primary color for brand touchpoints
  • Accessibility first - Ensure sufficient contrast for all users