Mixmi Color System

mixmi Color System

Quick Reference Guide

Platform Color Palette

Content Type Colors

🟣 PURPLE    #9772F4    Loops (Remixable/Creative)
   - 2px border for single loops
   - 4px border for loop packs
   - Semantic: Transformable, can be loaded to mixer

🟡 GOLD      #FFE4B5    Songs (Complete/Finished)
   - 2px border for single songs
   - 4px border for EPs
   - Semantic: Finished work, ready for consumption

🟦 INDIGO    #6366F1    Playlists (Curated/Collection)
   - 4px border (always collection)
   - Semantic: Human curation, taste-making

🔷 SKY BLUE  #38BDF8    Video (Visual/Media)
   - 2px border for single videos
   - Semantic: Visual medium, screen content

🟠 ORANGE    #FB923C    Radio (Live/Broadcast)
   - 4px border (station = collection of shows)
   - Semantic: Live transmission, warmth, energy

UI Element Colors

🔵 CYAN      #81E4F2    Interactive/Accent
   - Call-to-action buttons
   - Purchase actions
   - Active states
   - Links

⚫ DARK NAVY #101726    Background
   - All content colors optimized for this background

Usage Examples

Cards

/* Loop Card */
.loop-card {
  border: 2px solid #9772F4;
  background: #101726;
}

/* Loop Pack Card */
.loop-pack-card {
  border: 4px solid #9772F4;
  background: #101726;
}

/* Song Card */
.song-card {
  border: 2px solid #FFE4B5;
  background: #101726;
}

/* Playlist Card */
.playlist-card {
  border: 4px solid #6366F1;
  background: #101726;
}

/* Video Card */
.video-card {
  border: 2px solid #38BDF8;
  background: #101726;
}

/* Radio Station Card */
.radio-card {
  border: 4px solid #FB923C;
  background: #101726;
}

Buttons

/* Primary Action */
.btn-primary {
  background: #81E4F2;
  color: #101726;
}

/* Purchase Button */
.btn-purchase {
  background: #81E4F2;
  border: 2px solid #81E4F2;
}

/* Remix Button (on loop cards) */
.btn-remix {
  background: #9772F4;
  color: white;
}

Hover States

All colors have consistent hover behavior:

.content-card:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

Badge Colors

Use the content type color with slight transparency:

/* Number badges (on packs/EPs) */
.number-badge {
  background: rgba(151, 114, 244, 0.9); /* Purple for loop packs */
  background: rgba(255, 228, 181, 0.9); /* Gold for EPs */
  color: white;
}

/* Metadata badges (BPM, duration) */
.metadata-badge {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-family: monospace;
}

Accessibility

All color combinations meet WCAG AA standards:

• Purple #9772F4 on #101726: ✅ AAA
• Gold #FFE4B5 on #101726: ✅ AAA
• Indigo #6366F1 on #101726: ✅ AAA
• Sky Blue #38BDF8 on #101726: ✅ AAA
• Orange #FB923C on #101726: ✅ AAA
• Cyan #81E4F2 on #101726: ✅ AAA

Color Meanings Summary

Design Principles

1. Semantic Color: Each color has meaning, not just decoration
2. Border Thickness: 2px = single item, 4px = collection
3. Consistent System: All content follows same patterns
4. Future-Proof: Easy to add new content types (just pick a color!)
5. Dark Optimized: All colors pop on dark navy background

Adding New Content Types

When adding a new content type:

1. Pick a color with semantic meaning
2. Check contrast on #101726 background (use WebAIM contrast checker)
3. Test with existing colors to ensure distinction
4. Choose border - 2px (single) or 4px (collection)
5. Document the meaning so it's intuitive to users

Example:

• Physical Goods/Merch → Green #10B981 (growth, physical, earthy)
• Podcast Episodes → Magenta #D946EF (audio, talk, voice)

Figma/Design Tool Values

Purple:    #9772F4  RGB(151, 114, 244)
Gold:      #FFE4B5  RGB(255, 228, 181)
Indigo:    #6366F1  RGB(99, 102, 241)
Sky Blue:  #38BDF8  RGB(56, 189, 248)
Orange:    #FB923C  RGB(251, 146, 60)
Cyan:      #81E4F2  RGB(129, 228, 242)
Dark Navy: #101726  RGB(16, 23, 38)

Tailwind Classes (if using)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'mixmi-purple': '#9772F4',
        'mixmi-gold': '#FFE4B5',
        'mixmi-indigo': '#6366F1',
        'mixmi-sky': '#38BDF8',
        'mixmi-orange': '#FB923C',
        'mixmi-cyan': '#81E4F2',
        'mixmi-dark': '#101726',
      }
    }
  }
}

Usage:

<div className="border-2 border-mixmi-purple bg-mixmi-dark">
  Loop Card
</div>

Version: 1.0
Last Updated: October 27, 2025
Status: Active - Use these exact hex values in all designs