SongShake Color System

Color guide for the full site.

This guide converts the current musician page styling into reusable tokens and calls out which colors are accents. Use role-based variables first, then raw values only when creating a new component.

Core palette

Each color is tagged by role: base/surface, text, accent, or support accent.

Base

Main Background

#0b0b14

Primary page background. Use for full-site dark base.

Base / Surface

Elevated Dark

#12121e

Primary elevated surface. Used for nav CTA and reusable metric cards.

Base / Surface

Card Surface

#1a1a28

Secondary cards, calculator panels, nested surfaces.

Base / Surface

Card Surface Light

#232335

Higher elevation dark panels or hover surfaces.

Text

Primary Text

#ede9f8

Main text on dark backgrounds.

Text

Muted Text

#9994b0

Paragraphs, nav links, secondary copy.

Text

Subtle Text

#5c5870

Labels, helper text, low-emphasis UI.

Text / Hover

White

#ffffff

Hover text on cherry navigation backgrounds.

Accent

Cherry

#E45A70

Primary interaction accent: active nav, hover states, secondary CTA hover.

Accent

Cream

#FFF0C2

Featured metric value and premium CTA text accent.

Accent / CTA

Lavender

#C8B4FF

Primary CTA gradient start.

Accent / CTA

Soft Blue

#AFCFFF

Primary CTA gradient end.

Accent

Soft Yellow

#FFE99D

Reusable total/summary metric row accent.

Support Accent

Pastel Pink

#F2B8BE

Logo gradient start / legacy milkshake palette.

Support Accent

Pastel Blue

#A8CCE0

Logo gradient end / legacy milkshake palette.

Support Accent

Pastel Yellow

#F9DC8A

Legacy support accent.

Support Accent

Pastel Mint

#A8D8C2

Legacy support accent.

Support Accent

Pastel Peach

#F5C8A8

Legacy support accent.

Support Accent

Pastel Red

#E87A82

Legacy CTA red; use sparingly when cherry is not enough.

Support Accent

Pastel Cream

#FDF0E4

Warm light background/accent.

Accent colors

Use these for emphasis, interaction states, metrics, badges, and visual rhythm. Do not use every accent in every section; pick one primary accent and one support accent per component.

Cherry

Primary interaction accent

Use for active nav, hover text/borders, and high-emphasis UI states.

Cream

Premium value accent

Use for featured numbers, pricing, totals, and special CTA text.

Lavender → Soft Blue

Primary CTA gradient

Use on the main action button, with dark text for readability.

Soft Yellow

Summary accent

Use for final totals, summaries, and completion/earned states.

Legacy Pastels

Support accents

Use for secondary illustrations, small badges, icons, and branded visual variety.

Main navigation style

Main navigation should use muted text by default, cherry for the active page, cherry-tinted hover backgrounds, and white hover text. The top-right CTA uses the elevated dark surface with cream text.

SongShake

How It Works For Musicians Hover State

Usage rules

Dark surface hierarchy

Use #0b0b14 for full-page backgrounds.
Use #12121e for elevated cards, nav CTAs, and reusable metric modules.
Use #1a1a28 and #232335 for nested cards or higher elevation.

Primary interaction color

Use cherry #E45A70 for active navigation, hover states, focused controls, and interaction emphasis.

CTA treatment

The main CTA should use the lavender-to-blue gradient with dark text. Secondary CTAs can stay transparent and turn cherry on hover.

Reusable metric/stat modules

Use cream #FFF0C2 for a featured value. Keep rows transparent on dark cards and use pastel row accents for categories, totals, or statuses. This pattern can work for earnings, analytics, venue stats, fan activity, or request queues.

CSS tokens

/* SongShake Site Color Tokens — Used Colors Only
   These variables reflect colors currently used in the musician-page HTML.
   Keep role-based tokens preferred over raw hex values.
*/

:root {
  /* Core dark surfaces */
  --ss-bg-main: #0b0b14;
  --ss-bg-elevated: #12121e;
  --ss-bg-card: #1a1a28;
  --ss-bg-card-light: #232335;

  /* Borders */
  --ss-border-subtle: rgba(255,255,255,0.07);
  --ss-border-medium: rgba(255,255,255,0.14);
  --ss-border-strong: rgba(255,255,255,0.22);

  /* Text */
  --ss-text-primary: #ede9f8;
  --ss-text-muted: #9994b0;
  --ss-text-subtle: #5c5870;
  --ss-white: #ffffff;

  /* Primary accents */
  --ss-accent-cherry: #E45A70;
  --ss-accent-cream: #FFF0C2;
  --ss-accent-lavender: #C8B4FF;
  --ss-accent-soft-blue: #AFCFFF;
  --ss-accent-yellow: #FFE99D;

  /* Legacy / support accents still used in the HTML */
  --ss-pastel-pink: #F2B8BE;
  --ss-pastel-blue: #A8CCE0;
  --ss-pastel-yellow: #F9DC8A;
  --ss-pastel-mint: #A8D8C2;
  --ss-pastel-peach: #F5C8A8;
  --ss-pastel-red: #E87A82;
  --ss-pastel-cream: #FDF0E4;

  /* Component-specific tokens */
  --ss-nav-bg: rgba(11,11,20,0.95);
  --ss-nav-link: #9994b0;
  --ss-nav-active-bg: rgba(228,90,112,0.12);
  --ss-nav-active-text: #E45A70;
  --ss-nav-hover-bg: rgba(228,90,112,0.12);
  --ss-nav-hover-text: #ffffff;
  --ss-nav-cta-bg: #12121e;
  --ss-nav-cta-text: #FFF0C2;

  --ss-primary-cta-bg: linear-gradient(135deg, #C8B4FF 0%, #AFCFFF 100%);
  --ss-primary-cta-text: #12121e;
  --ss-secondary-cta-hover: #E45A70;

  --ss-metric-card-bg: #12121e;
  --ss-metric-featured-value: #FFF0C2;
  --ss-metric-row-priority: rgb(238, 137, 154);
  --ss-metric-row-instant: rgb(191, 238, 207);
  --ss-metric-row-tips: rgb(186, 221, 255);
  --ss-metric-row-total: #FFE99D;

  /* Gradients */
  --ss-gradient-primary: linear-gradient(135deg, #C8B4FF 0%, #AFCFFF 100%);
  --ss-gradient-logo: linear-gradient(130deg, #F2B8BE 0%, #A8CCE0 100%);
}

/* Main navigation */

.nav {
  background: var(--ss-nav-bg);
  border-bottom: 1px solid var(--ss-border-subtle);
}

.nav-link,
.nav-login {
  color: var(--ss-nav-link);
  border-radius: 999px;
  transition: all .18s;
}

.nav-link.active {
  color: var(--ss-nav-active-text);
  background: var(--ss-nav-active-bg);
}

.nav-link:hover,
.nav-login:hover {
  color: var(--ss-nav-hover-text);
  background: var(--ss-nav-hover-bg);
}

.nav-cta {
  background: var(--ss-nav-cta-bg);
  color: var(--ss-nav-cta-text);
}

/* Primary calls-to-action */

.btn-primary {
  background: var(--ss-primary-cta-bg);
  color: var(--ss-primary-cta-text);
}

.btn-secondary:hover {
  border-color: var(--ss-secondary-cta-hover);
  color: var(--ss-secondary-cta-hover);
}

/* Reusable metric/stat module */

.metric-card,
.earn-card {
  background: var(--ss-metric-card-bg);
}

.metric-featured-value,
.earn-card-total {
  color: var(--ss-metric-featured-value);
}

.metric-row,
.earn-row {
  background: transparent;
}

.metric-row.priority,
.earn-row:nth-child(1) {
  color: var(--ss-metric-row-priority);
  border-color: rgba(238,137,154,0.48);
}

.metric-row.instant,
.earn-row:nth-child(2) {
  color: var(--ss-metric-row-instant);
  border-color: rgba(191,238,207,0.72);
}

.metric-row.tips,
.earn-row:nth-child(3) {
  color: var(--ss-metric-row-tips);
  border-color: rgba(186,221,255,0.72);
}

.metric-row.total,
.earn-row.total-row {
  color: var(--ss-metric-row-total);
  border-color: rgba(255,233,157,0.72);
}