How to Change the Brand Skin of Diagram Design Diagrams: Two Methods Explained

To change the brand skin of Diagram Design diagrams, update the semantic tokens in skills/diagram-design/references/style-guide.md either by manual editing or by running the automated onboarding flow that extracts palettes from live websites.

Diagram Design centralizes all visual styling into a single source-of-truth file, ensuring every generated SVG reflects consistent colors and typography. When you change the brand skin of Diagram Design diagrams, you are rewriting these semantic tokens—such as paper, ink, and accent—that every diagram type consumes. The cathrynlavery/diagram-design repository provides two distinct pathways to customize these values: direct file manipulation or automated extraction from an existing brand presence.

Understanding the Style Token Architecture

Every diagram generated by Diagram Design derives its visual identity from semantic tokens declared in skills/diagram-design/references/style-guide.md. This file defines abstract roles rather than raw hex codes, mapping names like paper (background), ink (primary text), accent (highlights), muted (secondary elements), and link (interactive indicators) to specific color values.

The default skin ships with an editorial palette: white-smoke paper (#f5f5f5), jet-black ink (#2d3142), atomic-tangerine accent (#eb6c36), and blue-slate muted tones (#4f5d75). All diagram types—whether entity-relationship, flowchart, or architecture diagrams—read from these tokens at render time. Modifying this single file instantly propagates changes across every future diagram output.

Method 1: Manual Token Editing

The most direct way to change the brand skin is editing style-guide.md with your brand’s hex codes and font families.

First, open the style guide in your editor:

code skills/diagram-design/references/style-guide.md

Locate the token definition block and replace the default values with your brand specifications. For example, change:

# Tokens (default)

paper:   #f5f5f5   # white-smoke

ink:     #2d3142   # jet-black

accent:  #eb6c36   # atomic-tangerine

muted:   #4f5d75   # blue-slate

soft:    #bfc0c0   # silver

To your custom brand values:

# Tokens (my-brand)

paper:   #ffffff   # pure white

ink:     #003366   # navy-blue

accent:  #ff6600   # brand orange

muted:   #666666   # medium-gray

soft:    #cccccc   # light-gray

After saving, validate the new palette for accessibility and contrast compliance:

python3 scripts/lint-skin.py --all

If the linter reports no errors, all subsequent diagram generations will render with your new brand skin.

Method 2: Automated Brand Onboarding

For teams with an established web presence, Diagram Design offers an onboarding flow that automatically extracts color variables and typography from any live URL. This method is documented in skills/diagram-design/references/onboarding.md and eliminates manual hex-code hunting.

When you initiate onboarding (typically via the skill’s UI prompt), the system executes the following steps:

1. Fetches the target website’s CSS and parses color and font-family declarations.
2. Maps the extracted values to Diagram Design’s semantic tokens (paper, ink, accent, etc.).
3. Rewrites style-guide.md with the new brand definitions.
4. Optionally saves the configuration as a named client profile for future reuse.

To verify the automated extraction completed successfully, run the same validation command:

python3 scripts/lint-skin.py --all

This workflow ensures your diagrams match your corporate website’s palette without requiring manual color picking.

Validating with the Skin Linter

Before deploying a new brand skin, always run scripts/lint-skin.py to ensure accessibility compliance. This script checks that your token values maintain sufficient color contrast for WCAG standards and that all required semantic roles (like link and muted) remain defined.

Pass the --all flag to validate the entire token set:

python3 scripts/lint-skin.py --all

The linter will flag any contrast failures or missing tokens, preventing you from generating diagrams that violate accessibility guidelines.

Regenerating Example Diagrams

The repository includes pre-built examples in skills/diagram-design/assets/ that were rendered with the original default palette. To visually confirm your new brand skin works correctly, regenerate these assets:

# Example: rebuild the ER diagram with current brand tokens

diagram-design render skills/diagram-design/assets/example-er-full.html > /tmp/er-branded.html

Open the output file in a browser to inspect how your custom paper, ink, and accent values appear in complex diagram layouts. If you maintain multiple client profiles, you can repeat this step for each brand identity stored in references/profiles.md.

Summary

• Centralized tokens: All visual styling lives in skills/diagram-design/references/style-guide.md, using semantic names like paper and ink.
• Manual editing: Directly modify the markdown file to set custom hex codes and fonts, then validate with scripts/lint-skin.py.
• Automated onboarding: Extract brand colors automatically from any website URL using the flow described in references/onboarding.md.
• Validation required: Always run the linter to check color contrast and token completeness before generating diagrams.
• Visual confirmation: Regenerate examples from skills/diagram-design/assets/ to preview your brand skin in real diagram types.

Frequently Asked Questions

Where are the brand colors defined in Diagram Design?

The brand colors are defined in skills/diagram-design/references/style-guide.md as semantic tokens such as paper, ink, accent, and muted. According to the cathrynlavery/diagram-design source code, this is the only file diagram generators read for color values, making it the single source of truth for all visual styling.

Can I extract brand colors automatically from my company website?

Yes. The onboarding flow documented in skills/diagram-design/references/onboarding.md can fetch any live URL, parse its CSS color variables and font declarations, and automatically rewrite style-guide.md with extracted values. This eliminates manual copying of hex codes and ensures your diagrams match your existing web presence exactly.

What happens to existing diagrams when I change the brand skin?

Existing generated diagrams (static HTML files in skills/diagram-design/assets/) retain their original appearance because they contain hardcoded color values from the time of creation. To see the new brand skin applied, you must re-run the diagram generation command or render fresh outputs; the new skin applies only to diagrams created after the token change.

Why is my new brand skin failing validation?

The scripts/lint-skin.py linter enforces accessibility standards, specifically WCAG color contrast ratios between text (ink) and background (paper) tokens, and verifies that all required semantic roles are present. If your brand colors lack sufficient contrast or if you deleted essential tokens like link or muted, the linter will fail and prevent diagram generation until you fix the palette.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}