Themes / Editor

Click a shape. Change its color.

Pick a diagram and click any box, line or label: the panel jumps to the color token it uses. Every change repaints the drawing, and the file you export is the theme the engine reads.

Start from

Theme name

Nothing selected yet. Tokens used by this diagram show a count in the panel; click the count to outline every element that uses it.

Colors0/8 in this diagram

Ink--ink

Support--support

Muted--muted

Zone--zone

Paper--paper

Accent--accent

Risk--risk

Risk background--risk-bg

Derived colors0/6 in this diagram

Strong accent--accent-strong

Light muted--muted-light

C4 person type--c4-person-type

C4 person description--c4-person-desc

C4 external system--c4-external

C4 boundary--c4-boundary

Data diagram palette0/20 in this diagram

ER border--er-border

ER legend--er-legend

ER even row--er-row-even

ER key--er-key

ER domain--er-domain

ER external--er-external

ER copy--er-copy

ER strong entity--er-strong

ER dependent--er-dependent

ER associative--er-associative

ER control--er-control

ER fact--er-fact

ER versioned--er-versioned

ER projection--er-projection

ER audit trail--er-trail

ER domain background--er-domain-bg

ER configuration--er-config

ER reference--er-reference

ER view--er-view

Matrix heat--er-heat

Fonts

Text

Code and labels

Measured text contrast

Actual ratios from the edited palette. Normal text needs at least 4.5:1.

AaInk / paper#111827 / #FFFFFF17.74:1

AaSupport / paper#374151 / #FFFFFF10.31:1

AaMuted / paper#6B7280 / #FFFFFF4.83:1

AaAccent / paper#14B8A6 / #FFFFFF2.49:1

AaInk / zone#111827 / #F3F4F616.12:1

AaRisk / risk background#B42318 / #FEF3F26.05:1

Take it back to the skill

Save the file in your project and pass it to every command, or ask the agent to use it. The engine reads exactly this file.

Build with this themebash

python3 <skill>/scripts/build.py diagrams/_src/<diagram>.html --theme diagrams/_src/ai-diagrams.json

ai-diagrams.jsonjson

{
  "schema_version": 2,
  "name": "ai-diagrams",
  "company": "",
  "logo": null,
  "colors": {
    "ink": "#111827",
    "support": "#374151",
    "muted": "#6B7280",
    "zone": "#F3F4F6",
    "paper": "#FFFFFF",
    "accent": "#14B8A6",
    "risk": "#B42318",
    "risk_bg": "#FEF3F2"
  },
  "derived": {
    "accent_strong": "#0F766E",
    "muted_light": "#D1D5DB",
    "c4_person_type": "#9CA3AF",
    "c4_person_desc": "#E5E7EB",
    "c4_external": "#E9EBEF",
    "c4_boundary": "#F9FAFB"
  },
  "er_palette": {
    "er_border": "#CBD5E1",
    "er_legend": "#F9FAFB",
    "er_row_even": "#F8FAFC",
    "er_key": "#A16207",
    "er_domain": "#15803D",
    "er_external": "#1D4ED8",
    "er_copy": "#7E22CE",
    "er_strong": "#FCA5A5",
    "er_dependent": "#99F6E4",
    "er_associative": "#C7D2FE",
    "er_control": "#DDD6FE",
    "er_fact": "#FED7AA",
    "er_versioned": "#FEF08A",
    "er_projection": "#BBF7D0",
    "er_trail": "#E5E7EB",
    "er_domain_bg": "#D9F99D",
    "er_config": "#BAE6FD",
    "er_reference": "#FDE68A",
    "er_view": "#FBCFE8",
    "er_heat": "#FF8CB4"
  },
  "fonts": {
    "text": "IBM Plex Sans",
    "mono": "IBM Plex Mono"
  },
  "frame": {
    "header": "{subject} · {client}",
    "footer": "{type} · {date}",
    "footer_right": "",
    "classification": "",
    "show_client": true
  }
}