Legend: vertically-oriented color spectrum with micro-polygon glyphs

[Copilot]

The legend used a flat wrapping grid of colored dots — disconnected from the geometric visual language of the rest of the UI. This redesigns it as a vertical color spectrum where color, shape, and opacity are all encoded visually rather than described in text.

Layout changes

• Quality Spectrum + Opacity Strip (side-by-side, replacing sections 1 & 5)
  • Each quality row is a colored band with a white micro-polygon glyph inside (▲ for triads, ◆ for sevenths) — mirrors the chord polygons on the circle
  • Alongside it: a narrow vertical gradient bar (opaque → translucent) with three reference nodes encoding diatonic / chord-tone / chromatic opacity levels
• Cardinality Stack (replaces old Shape section)
  • Neutral-gray regular polygons (triangle = 3 tones, diamond = 4 tones) — gray separates structural meaning from quality color so neither competes
• Visual Keys (new section)
  • Two SVG icons: triangle-with-centroid-dot and triangle-with-dashed-spokes, acting as icon references for the Centroid and Intervals toolbar toggles

Color Intensity and Node Fill sections are unchanged.

Screenshots

Light mode

Dark mode

Original prompt

---

This section details on the original issue you should resolve

<issue_title>SPIKE - legend update: a vertically oriented color spectrum</issue_title>
<issue_description>
🎨 1. The “Quality Column” — A Vertical Ribbon of Color + Micro‑Polygons
Imagine a tall, slim vertical bar divided into soft bands of your quality colors.
Inside each band sits a tiny geometric glyph:

• Major → yellow triangle
• Minor → blue triangle
• Dominant → orange triangle
• Diminished → purple triangle
• Fully dim → deep violet quadrilateral
• Half‑dim → indigo quadrilateral
• Augmented → red‑orange triangle
• Quartal → greenish triangle or stacked‑fourth icon

Each glyph is the same size, so the color does the heavy lifting.

Why this works

• It’s instantly readable.
• It mirrors your progression thumbnails.
• It reinforces the idea that quality is a family, not a single chord.

---

🌫️ 2. Add a Transparency Gradient Alongside It
To the right of the color column, a second, narrower strip fades from opaque → translucent.

You can place two micro‑shapes inside:

• One fully opaque
• One ghosted

This visually encodes your diatonic/chromatic distinction without a single word.

---

🔺 3. A “Cardinality Stack” Running Down the Side
Next to the color spectrum, you can place a vertical stack of shapes:

▲ (3 notes) ⬣ (4 notes) ⬡ (5 notes) ⬢ (6 notes)

Each shape is neutral gray so it doesn’t compete with the color spectrum.

This teaches the user that shape = number of tones.

---

🧭 4. A Centroid + Interval Mini‑Panel Embedded in the Spectrum
You can tuck two tiny visual keys into the margin:

• A polygon with a dot inside → centroid
• A polygon with interval lines → interval mode

These don’t need labels; the icons speak for themselves.

---

🧩 5. A “Chord Anatomy” Slice Embedded in the Spectrum
Halfway down the vertical spectrum, you can place a tiny example chord:

• A triangle in one of the color bands
• One vertex opaque, one translucent
• A centroid dot
• Interval lines if enabled

This acts like a visual sentence summarizing the whole grammar.

---

🧱 6. How it all comes together
Picture a tall, elegant sidebar:

| Major (yellow) ▲ | Minor (blue) ▲ | Dominant (orange) ▲ | Diminished (purple) ▲ | … etc. | | [opacity gradient strip] | | [cardinality stack] | | [centroid icon] | [interval icon]

Everything is visual first, with text acting only as a quiet annotation.

---

🎯 Why this approach fits your UI perfectly

• It’s geometric, like your chord shapes.
• It’s color‑driven, like your quality system.
• It’s vertically oriented, matching your progression sidebar.
• It’s compact and elegant, matching your composer‑facing aesthetic.
• It teaches the system through visual analogy, not explanation.
  </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes SPIKE - legend update: a vertically oriented color spectrum #256

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.