## Brand palette

Two tiers: global brand (via `themeVariables`) applies to every diagram automatically; Triple Diamond palette (via `classDef` or `style`) applies to phase-aligned diagrams.

### Global brand

Variable | Value | Effect
--- | --- | ---
`lineColor` | `#5C7CFA` | Indigo edges (matches favicon Triple Diamond mark)
`fontFamily` | `system-ui, ...` | Matches Starlight body text
`fontSize` | `14px` | Slightly tighter than default 16px

### Triple Diamond palette

Discover `#e7f5ff / #1971c2 / #0c2d5e`
Define `#e6fcf5 / #0ca678 / #0a4f3c`
Develop `#f3e8ff / #7048e8 / #3a1d8a`
Deliver `#fff4e1 / #d9480f / #5e2200`
Measure `#fff9db / #e8a317 / #5e3e00`
Iterate `#ffe9ec / #c2255c / #5c0a25`

## Examples

### 1. Phase flowchart with classDef (graph LR)

Use for: ordered phases with arrows. Triple Diamond palette via `classDef` + `class`.

    graph LR
        subgraph "Problem Space"
            D1["Discover<br/>3 skills"] --> D2["Define<br/>4 skills"]
        end
        subgraph "Solution Space"
            D3["Develop<br/>4 skills"] --> D4["Deliver<br/>6 skills"]
        end
        subgraph "Learning Space"
            D5["Measure<br/>5 skills"] --> D6["Iterate<br/>4 skills"]
        end
        D2 --> D3
        D4 --> D5
        D6 -.->|"next cycle"| D1

        classDef discover fill:#e7f5ff,stroke:#1971c2,color:#0c2d5e,stroke-width:2px
        classDef define fill:#e6fcf5,stroke:#0ca678,color:#0a4f3c,stroke-width:2px
        classDef develop fill:#f3e8ff,stroke:#7048e8,color:#3a1d8a,stroke-width:2px
        classDef deliver fill:#fff4e1,stroke:#d9480f,color:#5e2200,stroke-width:2px
        classDef measure fill:#fff9db,stroke:#e8a317,color:#5e3e00,stroke-width:2px
        classDef iterate fill:#ffe9ec,stroke:#c2255c,color:#5c0a25,stroke-width:2px

        class D1 discover
        class D2 define
        class D3 develop
        class D4 deliver
        class D5 measure
        class D6 iterate

    graph LR
        subgraph "Problem Space"
            D1["Discover
    3 skills"] --> D2["Define
    4 skills"]
        end
        subgraph "Solution Space"
            D3["Develop
    4 skills"] --> D4["Deliver
    6 skills"]
        end
        subgraph "Learning Space"
            D5["Measure
    5 skills"] --> D6["Iterate
    4 skills"]
        end
        D2 --> D3
        D4 --> D5
        D6 -.->|"next cycle"| D1

        classDef discover fill:#e7f5ff,stroke:#1971c2,color:#0c2d5e,stroke-width:2px
        classDef define fill:#e6fcf5,stroke:#0ca678,color:#0a4f3c,stroke-width:2px
        classDef develop fill:#f3e8ff,stroke:#7048e8,color:#3a1d8a,stroke-width:2px
        classDef deliver fill:#fff4e1,stroke:#d9480f,color:#5e2200,stroke-width:2px
        classDef measure fill:#fff9db,stroke:#e8a317,color:#5e3e00,stroke-width:2px
        classDef iterate fill:#ffe9ec,stroke:#c2255c,color:#5c0a25,stroke-width:2px

        class D1 discover
        class D2 define
        class D3 develop
        class D4 deliver
        class D5 measure
        class D6 iterate

### 2. Workflow flowchart with semantic palette (graph TD)

Use for: branching logic with decisions. Semantic colors (green=success, yellow=warning, blue=branch). Do NOT use Triple Diamond palette here.

    graph TD
        A[Invoke skill] --> B{Inputs valid?}
        B -->|yes| C[Run inference]
        B -->|no| D[Return error]
        C --> E{Confidence high?}
        E -->|yes| F[Produce output]
        E -->|low| G[Present summary with warnings]
        G --> H{User confirms?}
        H -->|go| F
        H -->|correction| C

        style F fill:#c8e6c9
        style G fill:#fff9c4
        style B fill:#e1f5ff
        style E fill:#e1f5ff
        style H fill:#e1f5ff

    graph TD
        A[Invoke skill] --> B{Inputs valid?}
        B -->|yes| C[Run inference]
        B -->|no| D[Return error]
        C --> E{Confidence high?}
        E -->|yes| F[Produce output]
        E -->|low| G[Present summary with warnings]
        G --> H{User confirms?}
        H -->|go| F
        H -->|correction| C

        style F fill:#c8e6c9
        style G fill:#fff9c4
        style B fill:#e1f5ff
        style E fill:#e1f5ff
        style H fill:#e1f5ff

### 3. Behavioral sequence (sequenceDiagram)

Use for: back-and-forth between named participants. Limited styling; keep clean.

    sequenceDiagram
        participant You
        participant Brief as /meeting-brief
        participant Agenda as /meeting-agenda
        participant Recap as /meeting-recap

        You->>Brief: Schedule strategic meeting
        Brief-->>You: Stakeholder reads + asks
        You->>Agenda: Draft attendee-facing structure
        Agenda-->>You: Time-boxed topics
        Note over You,Recap: The meeting happens
        You->>Recap: Capture decisions + actions
        Recap-->>You: Topic summary + actions

    sequenceDiagram
        participant You
        participant Brief as /meeting-brief
        participant Agenda as /meeting-agenda
        participant Recap as /meeting-recap

        You->>Brief: Schedule strategic meeting
        Brief-->>You: Stakeholder reads + asks
        You->>Agenda: Draft attendee-facing structure
        Agenda-->>You: Time-boxed topics
        Note over You,Recap: The meeting happens
        You->>Recap: Capture decisions + actions
        Recap-->>You: Topic summary + actions

### 4. State diagram (stateDiagram-v2)

Use for: named states + transitions, not phases or interactions.

    stateDiagram-v2
        [*] --> Drafted
        Drafted --> Reviewed: pm submits for review
        Reviewed --> Approved: stakeholder signoff
        Reviewed --> Drafted: revision requested
        Approved --> Shipped: feature flag flipped
        Shipped --> Measured: instrumentation live
        Measured --> [*]
        Measured --> Drafted: pivot decision

    stateDiagram-v2
        [*] --> Drafted
        Drafted --> Reviewed: pm submits for review
        Reviewed --> Approved: stakeholder signoff
        Reviewed --> Drafted: revision requested
        Approved --> Shipped: feature flag flipped
        Shipped --> Measured: instrumentation live
        Measured --> [*]
        Measured --> Drafted: pivot decision

### 5. Gantt timeline

Use for: overlapping work with durations.

    gantt
        title v2.14.0 Migration Cycle
        dateFormat YYYY-MM-DD
        section Phase 0
        Spike + decision        :2026-05-06, 1d
        section Phase 1
        Foundation              :2026-05-07, 2d
        section Phase 2
        Parity                  :2026-05-08, 2d
        section Phase 3
        Cutover                 :2026-05-09, 1d
        section Phase 4
        Material retirement     :2026-05-10, 1d
        Final validation        :2026-05-10, 1d

    gantt
        title v2.14.0 Migration Cycle
        dateFormat YYYY-MM-DD
        section Phase 0
        Spike + decision        :2026-05-06, 1d
        section Phase 1
        Foundation              :2026-05-07, 2d
        section Phase 2
        Parity                  :2026-05-08, 2d
        section Phase 3
        Cutover                 :2026-05-09, 1d
        section Phase 4
        Material retirement     :2026-05-10, 1d
        Final validation        :2026-05-10, 1d

## Diagram type decision matrix

If you are showing... | Use | Triple Diamond palette?
--- | --- | ---
Ordered phases or steps | `graph LR` or `graph TD` | Yes if phase-aligned
Phase grid with constituent items | `block-beta` | Yes (use `style`)
Branching logic / decisions | `graph TD` with `{decision}` | No - use semantic colors
Roles interacting over time | `sequenceDiagram` | No - limited styling
Named states + transitions | `stateDiagram-v2` | Optional
Overlapping work with durations | `gantt` | No - use section colors
Hierarchical idea expansion | `mindmap` | No - radial structure
Percentage breakdown | `pie` | No - dataset-driven

## For agents: machine-readable summary

    brand_palette:
      global_edge_color: "#5C7CFA"
      global_font_family: "system-ui, ..."
      global_font_size: "14px"

    triple_diamond:
      discover: { fill: "#e7f5ff", stroke: "#1971c2", color: "#0c2d5e" }
      define:   { fill: "#e6fcf5", stroke: "#0ca678", color: "#0a4f3c" }
      develop:  { fill: "#f3e8ff", stroke: "#7048e8", color: "#3a1d8a" }
      deliver:  { fill: "#fff4e1", stroke: "#d9480f", color: "#5e2200" }
      measure:  { fill: "#fff9db", stroke: "#e8a317", color: "#5e3e00" }
      iterate:  { fill: "#ffe9ec", stroke: "#c2255c", color: "#5c0a25" }

    stroke_width_default: "2px"

    syntax_by_diagram_type:
      graph_lr_td: "classDef + class"
      block_beta:  "style {block-id}"
      sequence_diagram: "note + rect (limited)"
      state_diagram_v2: "classDef + class"
      gantt: "section + class"

    constraints:
      no_em_dashes: true
      no_en_dashes: true
      prefer_dash_substitute: " - "
      quote_subgraph_titles: true