---
name: L'Armada
description: Instrument-grade dark UI for the ParVagues catalog & mastering toolbox — the ship's bridge.
colors:
  # Brand (from the ParVagues site: styles/globals.css) — reserved, not data
  brand-magenta: "#d900ff"
  brand-magenta-low: "#a700d1"
  brand-magenta-deep: "#8900b3"
  # Surfaces (tonal layering, dark)
  surface: "#0a0a0a"
  surface-raised: "#111111"
  surface-overlay: "#171717"
  hairline: "#ffffff1f"
  # Ink
  ink: "#e8e8ea"
  ink-muted: "#9a9aa0"
  ink-faint: "#6a6a70"
  # Role families (orbit register groups) — always paired with label + glyph + lane
  role-percs: "#ff8c00"
  role-bass: "#7c5cff"
  role-melodic: "#36c5f0"
  role-tops: "#2dd4bf"
  role-atmos: "#8a93a6"
  role-vox: "#ff3d7b"
  # Lifecycle status — always paired with a glyph
  status-idea: "#737373"
  status-wip: "#e0a82e"
  status-ready: "#5bc091"
  status-released: "#d900ff"
  status-blocked: "#ff5252"
  status-archived: "#4a4a4a"
typography:
  display:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "clamp(1.5rem, 3vw, 2.25rem)"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  title:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: "-0.01em"
  body:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "normal"
  label:
    fontFamily: "Geist, Inter, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "0.01em"
  data:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: "0.8125rem"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "normal"
rounded:
  sm: "4px"
  md: "6px"
  lg: "10px"
  full: "999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "32px"
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    typography: "{typography.label}"
  button-ghost:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    typography: "{typography.label}"
  button-accent:
    backgroundColor: "{colors.brand-magenta}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    typography: "{typography.label}"
  role-pill:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    padding: "2px 8px"
    typography: "{typography.label}"
  status-chip:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-muted}"
    rounded: "{rounded.sm}"
    padding: "2px 6px"
    typography: "{typography.label}"
  meter-readout:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: "2px 6px"
    typography: "{typography.data}"
---

# Design System: L'Armada

## 1. Overview

**Creative North Star: "The Ship's Bridge"**

L'Armada's tools are the bridge of a ship: a calm command station where the operator
reads the sea-state at a glance and acts with confidence. Instruments are dark, exact,
and always-on — charts, meters, signal flags. Nothing shouts; the important thing is
that every reading is *honest*, because decisions (ship this take, cut here, this master
wins) ride on it. The ParVagues glitch DNA is the occasional signal flare, not the
wallpaper: a flash of brand magenta on the *now*, an earned bit of motion. It earns its
place or it's cut.

The system is built for **one expert user, listening while reading**, often for hours on
a studio monitor and sometimes glancing at a phone over LAN. So the eye is the *second*
channel to the ear: the screen confirms and directs, it never competes. Density is
welcome — this is product UI, not a landing page — but density without noise. Two layout
laws follow from this: a **persistent instrument rail** (transport, the orbit-group rail,
identity + calibration, loudness) that never moves, and a **mode-aware workspace** whose
emphasis shifts through the mastering arc — *Audition → Judge → Cut → Decide* — surfacing
spectral detail, A/B diff, boundary tools, or ship controls only when that task is live.
Calm at rest; detail on demand.

This system explicitly rejects: SaaS-cream landing slop (gradient text, glassmorphism,
hero-metric templates, per-section uppercase eyebrows), skeuomorphic plugin chrome
(fake-metal knobs, brushed-aluminium bezels, faux-3D), and the generic Bootstrap
dashboard (blue primary buttons, endless identical card grids, no point of view). The
reference feel is **Linear / Vercel** restraint, **Grafana** observatory data-viz for the
timelines and heatmaps, and **Ableton** dark studio precision.

**Key Characteristics:**
- Dark tonal surfaces, hairline borders, flat — no decorative shadows.
- One grotesk (Geist) for everything human; one mono (Geist Mono) for *data only* —
  meters, timecodes, orbit IDs, LUFS. Mono is the instrument readout, never the body.
- A single semantic vocabulary — role families, lifecycle status, takes, gigs — reused in
  every tool, so learning one instrument teaches them all.
- Color always reinforces a label/glyph/position; never the only signal.
- Brand magenta is rare by law (the One Voice Rule) — it marks the *now* and the brand.

## 2. Colors

A near-black bridge lit by instrument colors: a deep dark base, a disciplined set of
**role-family hues** for orbit/register encoding, a muted **lifecycle** scale, and a
single reserved **brand magenta**.

### Primary
- **Brand Magenta** (#d900ff, ramp #a700d1 → #8900b3): The ParVagues signal. Reserved
  for the *now* (playhead / active marker), the single most important action on a screen,
  and "released" lifecycle. Its rarity is the meaning — see the One Voice Rule.

### Secondary — Role Families (the orbit-register vocabulary)
Each orbit is placed in a **measured** register family (by spectral centroid /
fundamental, never by sample name). Same hue across every tool. Always shown *with* the
family label + a glyph + its lane position, so hue is reinforcement, not the only signal.
- **Percs** (#ff8c00, ▰): kicks, snares, hats, percussion — transient, warm.
- **Bass** (#7c5cff, ▂): sub, acid, reese/wobble, bass-spine plucks — low, deep.
- **Melodic** (#36c5f0, ♪): leads, keys, riffs, plucks in the high register — bright.
- **Tops** (#2dd4bf, ≈): breaks, chops, texture loops — busy, mid-high.
- **Atmos** (#8a93a6, ◌): pads, drones, ambient, fx — diffuse, background.
- **Vox** (#ff3d7b, ◍): vocal samples and chops — human, forward.

### Tertiary — Lifecycle Status
For catalog / triage / release tools. Muted by default; always carries a glyph.
- **Idea / raw** (#737373, ·) · **WIP** (#e0a82e, ◐) · **Ready / mastered** (#5bc091, ●)
  · **Released** (#d900ff, ★) · **Blocked** (#ff5252, ✕) · **Archived** (#4a4a4a, ▢).

### Neutral
- **Surface** (#0a0a0a): the bridge floor — app background.
- **Surface Raised** (#111111): panels, the instrument rail, cards.
- **Surface Overlay** (#171717): dialogs, popovers, menus.
- **Hairline** (#ffffff1f): borders and dividers — structure by line, not by shadow.
- **Ink** (#e8e8ea): body and primary text. **Ink Muted** (#9a9aa0): secondary/labels.
  **Ink Faint** (#6a6a70): disabled, watermarks, axis ticks.

### Named Rules
- **The One Voice Rule.** Brand magenta covers ≤10% of any screen. It is the *now* and the
  brand and the single primary action — nothing else. If two things are magenta, one is wrong.
- **The Never-Hue-Alone Rule.** Every role / status / identity is carried by label + glyph
  + position, with color as reinforcement. The UI must stay fully legible in greyscale.
- **The Measured-Register Rule.** An orbit's family comes from analysis (centroid /
  fundamental / band energy), never from the sample's name. The map is per-track.
- **The Calm Default Rule.** A view at rest shows only the persistent instruments. Spectral
  detail, boundary tools, provenance, and A/B diff surface on task, hover, or mode — then recede.

## 3. Typography

**Display / Body Font:** Geist (with Inter, system-ui fallback) — a neutral modern
grotesk, the Linear/Vercel register. One family, hierarchy by scale + weight.
**Data / Mono Font:** Geist Mono (with ui-monospace fallback) — *only* for instrument
readouts: timecodes, LUFS, dBFS, Hz, orbit IDs, take IDs. Tabular, so digits don't jitter
as they update. Using mono for data (not for prose) gives the instrument-grade read
without tipping into terminal-cosplay.

- Scale ratio ≥1.25 between steps; hierarchy through weight contrast, not many sizes.
- Body line length capped 65–75ch in any prose (notes, descriptions).
- `text-wrap: balance` on titles. No all-caps body; uppercase only on short ≤4-word labels.
- Numeric readouts use `font-variant-numeric: tabular-nums`.

## 4. Elevation

**Flat, with tonal layering.** Depth is communicated by surface tone (#0a0a0a → #111111 →
#171717) and hairline borders, not by ambient shadows. This matches the Ableton/Linear
posture and keeps the bridge calm.

- The persistent instrument rail sits on `surface-raised` with a single hairline edge.
- **Shadows are structural only**, never decorative: a real overlay that floats above the
  app (dialog, popover, the section-edit menu) gets one soft shadow to signal "this is
  detached." Inline cards and panels get a hairline, no shadow.
- Semantic z-index scale (never arbitrary 9999): `base → rail → sticky-ruler →
  popover → modal-backdrop → modal → toast → tooltip`.

## 5. Components

Variants are sibling keys (`button-primary`, `button-primary-hover`). Shadows, focus
rings, and motion live in prose / the CSS layer, not the 8-prop token schema.

- **Buttons.** `button-primary` = bright ink fill on dark (the Linear "white button"),
  for the main affordance per view. `button-ghost` = raised surface + hairline, for
  secondary actions. `button-accent` = brand magenta, used at most once per view for the
  single most consequential action (ship, commit cut). Focus: 2px magenta ring at low
  alpha, offset 2px. Hover: one tonal step lighter. All have a `prefers-reduced-motion`
  instant state.
- **Role Pill.** `[glyph] LABEL ·NN` — family glyph, family label, orbit number in mono.
  Background = surface-raised; the family hue is a 2px left-inset tick + the glyph color
  (never a full side-stripe border — see Don'ts). Used in the orbit-group rail and anywhere
  an orbit is named.
- **Status Chip.** `[glyph] label` in lifecycle color over surface-raised. Catalog/triage.
- **Meter.** Horizontal or vertical bar + a mono readout (`-9.0 LUFS`). The bar fills in
  ink; target/ceiling marks are hairlines; over-target is the one place `status-blocked`
  red is allowed inline. Momentary value animates, the numeral updates ≤10/s.
- **Orbit-Group Rail.** The signature instrument. Five labeled lanes (Percs · Bass ·
  Melodic · Tops · Atmos; Vox folds into Melodic's stack when present). Each lane holds the
  role-pills of the orbits *active in the current track*, lit at the playhead by their RMS.
  This is the per-track "what's sounding now," grouped by measured register.
- **Waveform + Regions.** Built on wavesurfer.js v7: waveform in ink-faint, played portion
  in ink, playhead in brand magenta. **Regions = sections** (draggable/resizable, labelled,
  loopable) and **boundary markers** (a region with zero width). Styled via `::part()`.
- **Stem-Map Cell.** Heatmap unit: role-family hue at an alpha driven by RMS; time on X,
  orbit/lane on Y. Greyscale-legible via intensity; hue is the family reinforcement.
- **Transport.** Play/pause (Space), seek (click waveform), loop region, ±boundary step.
  Always present, bottom of the instrument rail.

**Layout & motion (folded here per spec):** persistent left/bottom instrument rail +
mode-aware workspace. Flexbox for 1D rails, Grid for the 2D stem-map. Responsive without
breakpoints where possible (`minmax`). Motion is ease-out (quart/expo), short (≤200ms),
and reserved for state changes that need tracking (a region snapping, a value settling, a
panel surfacing). No bounce, no elastic, no entrance-animation reflex. Every motion has a
reduced-motion fallback (crossfade or instant).

## 6. Do's and Don'ts

**Do**
- Keep the four bridge instruments (transport, orbit-rail, identity+calibration, loudness)
  visible at all times; let everything else surface by mode.
- Pair every color with a label/glyph/position. Test the UI in greyscale.
- Derive an orbit's register family from analysis, per track. Show the calibration/
  provenance badge so the operator can trust the time-base.
- Use mono for numbers, the grotesk for words. Tabular numerals on anything that updates.
- Reserve magenta for the *now*, the brand, and one primary action.

**Don't**
- ❌ **Side-stripe borders** (`border-left` >1px as a colored accent). Use a 2px inset tick,
  a background tint, or the glyph instead.
- ❌ **Gradient text**, **glassmorphism**, **hero-metric templates**, **per-section uppercase
  eyebrows**, **numbered section scaffolding** (01/02/03). These are the generated-look tells.
- ❌ Skeuomorphic knobs/bezels or fake-3D. Meters are flat bars; controls are flat.
- ❌ Identical card grids as a default layout. Cards only when they're the right affordance;
  never nested.
- ❌ Light-gray body text "for elegance." Body ink stays ≥4.5:1 on its surface.
- ❌ Color as the only carrier of meaning. ❌ Motion without a reduced-motion fallback.
- ❌ Em dashes in UI copy; buttons are verb + object ("Commit cut", not "OK").
