# How to Change the Brand Skin of Diagram Design Diagrams: Two Methods Explained > Learn how to change the brand skin of Diagram Design diagrams with two easy methods. Update semantic tokens manually or use the automated onboarding flow to extract palettes from live websites. - Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design) - Tags: how-to-guide - Published: 2026-08-23 --- **To change the brand skin of Diagram Design diagrams, update the semantic tokens in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md) with your brand’s hex codes and font families. First, open the style guide in your editor: ```bash 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: ```markdown # 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: ```markdown # 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: ```bash 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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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: ```bash 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`](https://github.com/cathrynlavery/diagram-design/blob/main/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: ```bash 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: ```bash # 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`](https://github.com/cathrynlavery/diagram-design/blob/main/references/profiles.md). ## Summary - **Centralized tokens**: All visual styling lives in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/lint-skin.py). - **Automated onboarding**: Extract brand colors automatically from any website URL using the flow described in [`references/onboarding.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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.