Colour System¶

"Colours serve the story, not a rigid rotation."

Approach: Branch-colour palette¶

Each branch within a map gets its own colour from a universal palette. This means:

Every map is multi-coloured and vibrant (not monochrome)
Different maps can look distinct by choosing different subsets
No exhaustion risk — the palette rotates, never runs out
Colours are flexible — a map about security might lean into reds/ambers, while a productivity map uses blues/teals

Why not topic-family colours?¶

We considered assigning one colour per topic (e.g., "Copilot = indigo", "Security = red"). Rejected because:

Exhaustion — with 50+ maps, we'd repeat colours across categories (same problem as tool colours where hue space exhausted at 45)
Mono-tone = washed out — one hero colour + depth shades looks like m365maps (Aaron Dinnage's work): monochromatic, corporate, "blah" for non-technical people

Root node — always dark slate¶

The root node uses #1E293B (dark slate) — never a palette colour. This was learned during prototyping: when the root used indigo (#6366F1) and a branch also used indigo, it created hierarchy confusion — "why are there two purple things?"

Root = #1E293B (dark slate) — ALWAYS
Branches = palette colours — NEVER the same as root

The universal palette¶

12 vibrant, harmonious colours designed to work together in any combination:

#	Name	Hex	Swatch	Best with
1	Indigo	`#6366F1`	🟣	Tech, AI, Copilot
2	Teal	`#14B8A6`	🟢	Productivity, collaboration
3	Rose	`#F43F5E`	🔴	Security, alerts, important
4	Amber	`#F59E0B`	🟡	Licensing, costs, pricing
5	Sky	`#0EA5E9`	🔵	Azure, cloud, infrastructure
6	Emerald	`#10B981`	🟢	Success, features included
7	Violet	`#8B5CF6`	🟣	Identity, Entra, governance
8	Orange	`#F97316`	🟠	Deployment, process, steps
9	Cyan	`#06B6D4`	🔵	Compliance, data, analytics
10	Pink	`#EC4899`	🩷	Intune, devices, management
11	Lime	`#84CC16`	🟢	Learning, certifications, growth
12	Coral	`#F87171`	🔴	Defender, protection, alerts

"Best with" is a suggestion, not a rule¶

The palette entries are available to any map. A map about Copilot doesn't HAVE to use indigo — it uses whatever colours best tell its story. The "best with" column is a starting hint, not a constraint.

Depth shades¶

Within each branch, child nodes use lighter tints of the branch colour:

Depth	Opacity / treatment	Example (Teal `#14B8A6`)
L1 branch	Full colour, fill or bold stroke	`fill: #14B8A6`
L2 node	15% opacity fill + coloured stroke	`fill: rgba(20,184,166,0.15); stroke: #14B8A6`
L3 leaf	8% opacity fill + muted stroke	`fill: rgba(20,184,166,0.08); stroke: rgba(20,184,166,0.4)`
Tag	Solid fill, white text	`fill: #14B8A6; color: #fff`

This creates visual depth within each branch while keeping the branch's colour identity clear.

Text colours¶

Text colour depends on the background, not the branch colour:

Context	Text colour
On white canvas	`#111827` (near-black) for headings, `#374151` for nodes, `#6B7280` for muted
Inside coloured pill (light fill)	Branch colour at full saturation
Inside coloured tag (solid fill)	`#FFFFFF` (white)

Rule: never use branch colour for text on white background¶

Coloured text on white is hard to read. Use near-black text and let the node shape fill/stroke carry the colour.

Exception: tags with solid coloured backgrounds use white text.

Dark mode canvas¶

Mind maps use a forced light canvas — white background regardless of site dark mode. This is a deliberate design choice:

Mind maps are visual content designed for one palette
Dual-palette design doubles the work for every map
Light canvas is better for printing and sharing
The viewer container gets a light background override even in dark mode

Per-map colour flexibility¶

Each map's JSON data can specify its own colour selections:

{
  "name": "Copilot in Teams",
  "palette": ["#6366F1", "#14B8A6", "#F43F5E", "#F59E0B"],
  "children": [
    {
      "name": "Meeting Summary",
      "color": 0
    },
    {
      "name": "Chat Features",
      "color": 1
    }
  ]
}

If no palette is specified, the renderer auto-assigns colours from the universal palette in order. This means minimal-effort maps still look great, but curated maps can fine-tune.