Color System

MYMUSICK uses CSS custom properties (CSS variables) to create a flexible, maintainable color system. This approach enables easy theming and consistent color usage across components.

Design Tokens

Original Theme
Formal Theme

Primary Colors

The original theme uses a vibrant, high-contrast color palette designed for maximum visual impact.

:root {
  --primary: #04CDA8;    /* Teal - Primary brand color */
  --accent: #FF5757;     /* Coral Red - Accent highlights */
  --bg-dark: #111;       /* Dark Gray - Background */
  --text-light: white;   /* White - Text color */
}

Color Usage Map

Token	Hex Value	Usage
`--primary`	`#04CDA8`	Header background, sidebar links hover
`--accent`	`#FF5757`	Title text, borders, scrollbar, player buttons
`--bg-dark`	`#111`	Sidebar, cards, input backgrounds
`--text-light`	`white`	Body text, button text

Color Palette

Primary: #04CDA8

Vibrant teal for primary actions and header

Accent: #FF5757

Coral red for emphasis and interactive elements

Background: #111

Dark gray for surfaces and containers

Text: #FFFFFF

Pure white for maximum contrast

Extended Color System

The formal theme features a sophisticated, layered color system with semantic naming and multiple surface levels.

:root {
  /* Backgrounds */
  --bg:           #0b0c0f;                    /* Deep space background */
  --surface:      #111318;                    /* Elevated surface level 1 */
  --surface2:     #181b22;                    /* Elevated surface level 2 */
  
  /* Colors */
  --accent:       #e8ff47;                    /* Neon yellow primary */
  --accent2:      #ff5c5c;                    /* Coral secondary */
  
  /* Text */
  --text:         #e8e6df;                    /* Warm white text */
  --muted:        #6b6b72;                    /* Muted gray text */
  
  /* Effects */
  --border:       rgba(255,255,255,0.07);     /* Subtle borders */
  --glow:         rgba(232,255,71,0.18);      /* Accent glow effect */
}

Semantic Color Roles

Token	Hex Value	Purpose	Usage
`--bg`	`#0b0c0f`	Base layer	Page background
`--surface`	`#111318`	Level 1	Cards, sidebar
`--surface2`	`#181b22`	Level 2	Input fields, elevated elements
`--accent`	`#e8ff47`	Primary CTA	Buttons, title, focus states
`--accent2`	`#ff5c5c`	Secondary	Alerts, warnings (unused in current UI)
`--text`	`#e8e6df`	Primary text	Body copy, labels
`--muted`	`#6b6b72`	Secondary text	Placeholders, metadata
`--border`	`rgba(255,255,255,0.07)`	Dividers	Borders, separators
`--glow`	`rgba(232,255,71,0.18)`	Effects	Focus rings, shadows

Color Palette

Background: #0b0c0f

Deep space base

Surface: #111318

Elevated cards

Surface 2: #181b22

Input fields

Accent: #e8ff47

Neon yellow primary

Accent 2: #ff5c5c

Coral secondary

Text: #e8e6df

Warm white

Muted: #6b6b72

Secondary text

Color Application Examples

Header Component

header {
  background: var(--primary);              /* #04CDA8 teal */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.title {
  color: var(--accent);                    /* #FF5757 coral */
}

.search {
  border: 2px solid var(--accent);         /* #FF5757 border */
  background: black;
  color: white;
}

.search:focus {
  box-shadow: 0 0 10px rgba(255,87,87,0.5); /* Accent glow */
}

Interactive States

Buttons
Links
Cards

.bttlg {
  border: 2px solid var(--accent);      /* #FF5757 border */
  background: black;
  color: white;
}

.bttlg:hover {
  background: white;                    /* Invert colors */
  color: black;
  transform: scale(1.05);               /* Grow slightly */
}

.sidebar a {
  color: white;
}

.sidebar a:hover {
  color: var(--primary);                /* #04CDA8 teal */
}

.sidebar a::before {
  background: var(--accent);            /* #FF5757 bar */
  transform: scaleY(0);
}

.sidebar a:hover::before {
  transform: scaleY(1);                 /* Reveal bar */
}

.song {
  background: var(--bg-dark);           /* #111 */
  border: 1px solid transparent;
}

.song:hover {
  background: #1e1e1e;                  /* Lighter shade */
  border-color: var(--accent);          /* #FF5757 border */
  transform: translateY(-6px);          /* Large lift */
}

Opacity & Transparency

Original Theme

header {
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);      /* Header shadow */
}

.search:focus {
  box-shadow: 0 0 10px rgba(255,87,87,0.5);    /* Accent glow */
}

.sidebar {
  box-shadow: 2px 0 10px rgba(0,0,0,0.5);      /* Sidebar depth */
}

Formal Theme

header {
  background: rgba(11,12,15,0.88);             /* 88% opacity */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

footer.player {
  background: rgba(17,19,24,0.95);             /* 95% opacity */
  backdrop-filter: blur(20px);
}

:root {
  --border: rgba(255,255,255,0.07);            /* 7% white */
  --glow: rgba(232,255,71,0.18);               /* 18% accent */
}

.song::after {
  background: linear-gradient(135deg, 
    transparent 60%, 
    rgba(232,255,71,0.04)                      /* 4% accent tint */
  );
}

Scrollbar Customization

Original
Formal

#results::-webkit-scrollbar {
  height: 8px;
}

#results::-webkit-scrollbar-thumb {
  background: var(--accent);              /* #FF5757 */
  border-radius: 4px;
}

#results::-webkit-scrollbar-track {
  background: var(--bg-dark);             /* #111 */
}

::-webkit-scrollbar { 
  width: 5px; 
  height: 5px; 
}

::-webkit-scrollbar-track { 
  background: var(--bg);                  /* #0b0c0f */
}

::-webkit-scrollbar-thumb { 
  background: var(--surface2);            /* #181b22 */
  border-radius: 99px; 
}

Best Practices

Use CSS Variables

Always reference colors via CSS variables, never hardcoded hex values (except in :root)

Maintain Contrast

Ensure text meets WCAG AA standards (4.5:1 ratio for body text)

Consistent Opacity

Use semantic opacity values: 7%, 18%, 88%, 95%

Test Both Themes

Verify new components work with both color systems

The formal theme includes more granular color tokens for complex UI patterns like glass morphism and layered surfaces.

Accessibility Considerations

Contrast Ratios

Theme	Text on Background	Ratio	WCAG Level
Original	`white` on `#111`	17.5:1	AAA
Original	`white` on `#04CDA8`	3.2:1	AA (Large text)
Formal	`#e8e6df` on `#0b0c0f`	14.8:1	AAA
Formal	`#0b0c0f` on `#e8ff47`	13.2:1	AAA

The original theme’s white text on teal background (header) falls below AA for normal-sized text. Use larger font sizes or bold weights in these areas.

Adding New Colors

To extend the color system:

Define in :root

Add your custom property to the :root selector:

:root {
  --custom-color: #hexvalue;
}

Use Semantic Naming

Name colors by function, not appearance:

Good: --error, --success, --warning
Bad: --red, --green, --orange

Apply Consistently

Reference the variable throughout your styles:

.error-message {
  color: var(--error);
  border-color: var(--error);
}

Get Started

Features

Styling

Development

Color System

Color System

Design Tokens

Primary Colors

Color Usage Map

Color Palette

Primary: #04CDA8

Accent: #FF5757

Background: #111

Text: #FFFFFF

Extended Color System

Semantic Color Roles

Color Palette

Background: #0b0c0f

Surface: #111318

Surface 2: #181b22

Accent: #e8ff47

Accent 2: #ff5c5c

Text: #e8e6df

Muted: #6b6b72

Color Application Examples

Header Component

Interactive States

Opacity & Transparency

Original Theme

Formal Theme

Scrollbar Customization

Best Practices

Use CSS Variables

Maintain Contrast

Consistent Opacity

Test Both Themes

Accessibility Considerations

Contrast Ratios

Adding New Colors

Build docs developers (and LLMs) love

Get Started

Features

Styling

Development

​Color System

​Design Tokens

​Primary Colors

​Color Usage Map

​Color Palette

Primary: #04CDA8

Accent: #FF5757

Background: #111

Text: #FFFFFF

​Extended Color System

​Semantic Color Roles

​Color Palette

Background: #0b0c0f

Surface: #111318

Surface 2: #181b22

Accent: #e8ff47

Accent 2: #ff5c5c

Text: #e8e6df

Muted: #6b6b72

​Color Application Examples

​Header Component

​Interactive States

​Opacity & Transparency

​Original Theme

​Formal Theme

​Scrollbar Customization

​Best Practices

Use CSS Variables

Maintain Contrast

Consistent Opacity

Test Both Themes

​Accessibility Considerations

​Contrast Ratios

​Adding New Colors

Build docs developers (and LLMs) love

Color System

Design Tokens

Primary Colors

Color Usage Map

Color Palette

Extended Color System

Semantic Color Roles

Color Palette

Color Application Examples

Header Component

Interactive States

Opacity & Transparency

Original Theme

Formal Theme

Scrollbar Customization

Best Practices

Accessibility Considerations

Contrast Ratios

Adding New Colors