FreeMusiers.fm Brand & Media Kit

FreeMusiers operates as an interconnected constellation of web players, live listening hubs, and creative audio tools:

FreeMusiers.fm pairs a clean dark-mode studio aesthetic with high-contrast coral accents and retro-futuristic CRT telemetry. Click any color swatch to copy its HEX code:

:root {
    /* Canvas & Surfaces */
    --bg-color: #050505;                        /* Void Black Canvas */
    --lab-bg: #07090e;                          /* Deep Obsidian Grid Canvas */
    --surface-color: #0d0d0d;                   /* Terminal Deck Surface */
    --surface-elevated: #141414;                /* Elevated Rack Module */
    --card-bg: rgba(13, 17, 26, 0.85);          /* Translucent Dark Slate Card */
    --card-bg-hover: rgba(19, 25, 38, 0.95);    /* Hover Card Surface */
    --well-bg: rgba(0, 0, 0, 0.45);             /* Inset Terminal Telemetry Well */

    /* Primary Signal & Borders (Cyber Coral) */
    --terminal-coral: #ff4d6d;                  /* Primary Brand & Active Control Accent */
    --terminal-green: #ff4d6d;                  /* Legacy Alias -> Cyber Coral */
    --terminal-dim: #ff859b;                    /* Neon Mist Sub-labels & Hover Text */
    --coral-glow: rgba(255, 77, 109, 0.35);     /* Active Box/Text Shadow Glow */
    --border-coral: rgba(255, 77, 109, 0.28);   /* Default 1px Card & Panel Border */
    --border-coral-bright: rgba(255, 77, 109, 0.65);

    /* Telemetry & Status Accents */
    --phosphor-green: #00ff41;                  /* CRT Status Green (ONLINE / OPERATIONAL) */
    --terminal-mint: #00ffaa;                   /* Discovery Kicker & Live Pulse Mint */
    --terminal-cyan: #00f0ff;                   /* Subcarrier Cyan (Secondary Actions / Links) */
    --alert-color: #ffaa00;                     /* Broadcast Telemetry Amber (BETA / Support) */

    /* Typography */
    --font-stack: 'Space Mono', 'Courier New', Courier, monospace;
    --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

Building a satellite tool, visualizer, or MCP-driven frontend for the FreeMusiers constellation? Drop this blueprint into Claude, ChatGPT, Gemini, Cursor (.cursorrules), or Antigravity agents so they generate pixel-accurate freemusiers.fm hardware-rack & telemetry UI out of the box:

<!-- freemusiers:agent:start -->
You are designing and coding under the official FREEMUSIERS.FM UI & Brand Protocol (https://freemusiers.fm).
FreeMusiers is a community for people making music with AI, their own way — "No gatekeeping. Made differently. Heard together."

## 1. Core Ethos & Persona
- **Primary Domain:** `freemusiers.fm` (satellites: `playlist.freemusiers.fm`, `listeningparties.com`, `mastering.freemusiers.fm`).
- **Voice:** Warm, sharp, witty, and human — sassy first, beige never. Zero corporate SaaS fluff, zero gatekeeping.
- **Radical Fairness:** Never add public vanity metrics (no public like counters, follower leaderboards, or pay-to-play charts).
- **Creator ≠ Artist:** Decouple the human user account from artistic personas (one creator can run multiple artist profiles).

## 2. Visual Atmosphere & Surface Architecture
The UI blends a **dark-mode synth hardware rack** (`player.html`) with a **retro-futuristic CRT telemetry deck** (`lab.html`):
- **Base Canvas:** Deep Void Black (`#050505`) or Obsidian (`#07090e`), layered with:
  1. **40×40px Technical Grid:** `background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px;`
  2. **Ambient Radial Glows:** Subtle top/corner radial gradients (`radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 77, 109, 0.14), transparent)`).
  3. **CRT Scanline Overlay:** Fixed pointer-events-none overlay (`repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 2px)`).
  4. **Stage Backdrop:** Optional low-opacity (`0.12–0.22`) distressed coral `fm-bg-logo.webp` emblem centered behind hero/stage panels.
- **Card & Panel Surfaces:** Translucent dark slate (`rgba(13, 17, 26, 0.85)` or `rgba(10, 10, 14, 0.90)`) with `backdrop-filter: blur(10px)`, sharp `border-radius: 6px–8px`, and thin **Cyber Coral** hairline borders (`1px solid rgba(255, 77, 109, 0.28)`). Never use white backgrounds, soft pastel cards, or generic Material/Bootstrap shadows.

## 3. Color Tokens
- **Primary Signal (`#ff4d6d` — Cyber Coral):** Used for primary borders, active tab fills (`rgba(255, 77, 109, 0.22)`), range slider thumbs, brand marks, and primary CTA buttons. Hover/active glow: `0 0 15px rgba(255, 77, 109, 0.35)`.
- **Neon Mist (`#ff859b`):** Secondary labels, subtle hover text, and dim coral accents.
- **Phosphor Green / Mint (`#00ff41` / `#00ffaa`):** Live telemetry kickers (`> EXPERIMENTAL_DECK // DISCOVERY_HUB`), pulsing status LEDs, and `● OPERATIONAL` / `● ONLINE` pills.
- **Subcarrier Cyan (`#00f0ff` / `#00d4ff`):** Secondary utility buttons (`⟳ RECHECK`), waveform highlights, and technical links.
- **Broadcast Amber (`#ffaa00` / `#facc15`):** `● BETA` badges, peak warnings, and creator `Support` buttons.
- **Text Hierarchy:** Primary `#f0f4f8` / `#ffffff`, Muted `#8a99ad`, Dim `#4a5568`.

## 4. Typography & Micro-Copy Syntax
- **Monospace First (`'Space Mono'`, `'Courier New'`, monospace):** Mandatory for all navigation bars, buttons, kickers, card titles, status readouts, metadata tags, and HUD controls.
- **Display & Retro Pixel Headers:** Hero titles use bold uppercase geometric sans (`'Space Grotesk'`) or crisp bitmap/CRT display lettering with a multi-layered coral/violet neon glow (`text-shadow: 0 0 24px rgba(255, 77, 109, 0.35)`).
- **Signature ASCII Prefixes (Always use these):**
  - Slash badges & section headers: `// LAB`, `// ARCHIVE`, `// 01 MISSION`
  - Terminal prompt kickers: `> NOW_TRANSMITTING _`, `> SYSTEM STATUS:`, `> EXPERIMENTAL_DECK`
  - Bracketed filter pills & buttons: `[ ALL EXPERIMENTS ]`, `[ RANDOM ]`, `[ COPY ]`
  - Dashed metadata micro-tags: `ALBUM: ...`, `FMT: --`, `PLAYS: --`, `UP: --` (`border: 1px dashed rgba(255, 77, 109, 0.35); padding: 2px 6px; font-size: 0.7rem;`)

## 5. Canonical Component Blueprints
1. **Top Global Navbar (`56px` sticky):**
   - `background: rgba(7, 9, 14, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 77, 109, 0.28);`
   - Left: `⚡ FREEMUSIERS` in bold `#ff4d6d` + boxed context badge (`// LAB` or `// ARCHIVE` with `background: rgba(255,77,109,0.18); border: 1px solid #ff4d6d; padding: 2px 8px; border-radius: 3px`).
   - Right: Compact outlined monospace buttons (`border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.03)`), turning coral on hover.
2. **Telemetry Status Bar (HUD Strip):**
   - Full-width horizontal bar (`background: rgba(13, 17, 26, 0.85); border: 1px solid rgba(255, 77, 109, 0.28); border-radius: 6px; padding: 10px 16px`).
   - Left: Pulsing `#00ffaa` LED dot (`box-shadow: 0 0 8px #00ffaa`) + `> SYSTEM STATUS:` label.
   - Right: Dark inset counter pill (`12 / 12 OPERATIONAL` in `#00ffaa`) + cyan-bordered action chip (`⟳ RECHECK`).
3. **Bracketed Filter / Tab Row:**
   - Horizontal flex row of monospace buttons (`border: 1px solid rgba(255, 77, 109, 0.3); background: rgba(13, 17, 26, 0.7); border-radius: 4px`).
   - Active tab: `background: rgba(255, 77, 109, 0.22); border-color: #ff4d6d; color: #fff; box-shadow: 0 0 12px rgba(255, 77, 109, 0.35)`.
4. **Hardware / Lab Feature Cards (3-Column Grid):**
   - Container: `background: rgba(13, 17, 26, 0.85); border: 1px solid rgba(255, 77, 109, 0.28); border-radius: 8px; padding: 22px;` with a `2px` top accent line (`linear-gradient(90deg, transparent, #ff4d6d, transparent)`).
   - Card Top Row: Left uppercase category kicker (`🎵 AUDIO & LYRICS`) in `#8a99ad`; Right rounded status pill (`● OPERATIONAL` in `#00ffaa` with `rgba(0,255,170,0.1)` bg, or `● BETA` in `#facc15`).
   - Body: Bold monospace title (`1.15rem`, `#fff`) + concise muted description (`0.86rem`, `#8a99ad`).
   - Inset Telemetry Well: Recessed dark box (`background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 4px`) with a glowing status dot and live metric readout.
   - Card Footer CTA: Full-width monospace button (`background: rgba(255, 77, 109, 0.12); border: 1px solid #ff4d6d; color: #ff4d6d; padding: 10px 14px; text-transform: uppercase; font-weight: 700`) with right arrow `LAUNCH STUDIO →`. Fills with solid `#ff4d6d` and `#050505` text on hover.
5. **Split-View Player Rack & `NOW_TRANSMITTING` Card:**
   - Desktop layout splits into a Left Hardware Rack (`420px–480px` side panel with tabs `🎛️ PLAYER`, `📡 FEED`, `💬 CHAT`, recessed range sliders with glowing circular `#ff4d6d` thumbs, and transport grid buttons) and a Right Stage Canvas.
   - `NOW_TRANSMITTING` Card: Dark framed module with `> NOW_TRANSMITTING _` header, square album cover with coral border on the left, coral track title, artist subtitle, dashed metadata tags (`ALBUM`, `FMT`, `PLAYS`, `UP`), and a bottom action bar (`▶ Play`, `🎧 Playlist`, `More from artist`, and amber-bordered `Support`).

## 6. Technical Stack Conventions
- Vanilla HTML5, CSS3 custom properties, and ES6+ JavaScript (no heavy UI frameworks unless requested).
- Web Audio API + HTML5 Canvas / Three.js for real-time audio-reactive visualizers; Docker-first deployment.
<!-- freemusiers:agent:end -->