name	mixmi-color-system
description	Platform color palette with semantic meanings, hex codes, accessibility notes, and usage patterns for all content types including loops, songs, playlists, video, and radio
metadata	[object Object]

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

Color	Content	Meaning	Why
Purple	Loops	Remixable	Creative, transformable, loads to mixer
Gold	Songs	Finished	Complete work, polished, ready
Indigo	Playlists	Curated	Thoughtful selection, refined taste
Sky Blue	Video	Visual	Screen, sky, brightness, media
Orange	Radio	Live	Warmth, energy, transmission waves
Cyan	Actions	Interactive	Water/flow, movement, action

Design Principles

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

Adding New Content Types

When adding a new content type:

Pick a color with semantic meaning
Check contrast on #101726 background (use WebAIM contrast checker)
Test with existing colors to ensure distinction
Choose border - 2px (single) or 4px (collection)
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

mixmi-color-system

Install Skill

SKILL.md