Where to Find the Diagram-Design Style Guide for Customizing Colors and Fonts

The diagram-design style guide is located at skills/diagram-design/references/style-guide.md and serves as the single source of truth for all visual tokens including colors, typography, and sizing.

All diagram generation in the cathrynlavery/diagram-design repository references this central style guide rather than hard-coded values. Whether you need to rebrand diagrams for a client presentation or maintain consistent visual identity across documentation, understanding this file structure gives you complete control over the output.

Locating the Style Guide File

The primary style guide lives in a predictable location within the repository structure.

Main Style Guide Path

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

Direct GitHub link: https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md

This file contains three critical token categories:

• Color tokens — semantic roles like paper, ink, accent, and accent-tint
• Typography tokens — font stacks for titles, node names, and labels
• Sizing tokens — stroke weights, border radius, and spacing values

Supporting Reference Files

File	Purpose	When to Use
onboarding.md	Automated brand import via URL	Quick setups from existing brand assets
profiles.md	Multiple named skin definitions	Managing several brand identities simultaneously
type-*.md	Diagram type specifications	Understanding how tokens get consumed

How Colors and Fonts Are Defined

The diagram-design skill uses semantic tokens rather than raw values. This abstraction ensures consistency and makes bulk updates trivial.

Token Structure in Style Guide

The style guide organizes visual properties into structured tables. Colors use semantic names that describe their function, not their appearance:

# Example from a diagram type specification (type-uml-class.md)

fill: accent-tint   # Pulls from style guide token table

stroke: accent      # Uses the primary accent color

This indirection means changing accent in one place updates every diagram type automatically.

Typography Token Mapping

Font stacks follow the same pattern. Instead of declaring font-family: Helvetica in multiple files, you set the title token once in the style guide's Typography table.

Three Methods to Customize Colors and Fonts

1. Run the Onboarding Script for Automated Import

The fastest path when you have an existing brand stylesheet. The onboarding script in skills/diagram-design/references/onboarding.md extracts color variables and rebuilds the style guide automatically.

diagram-design onboarding https://example.com/brand.css

The script:

• Parses CSS color variables from the provided URL
• Maps them to diagram-design semantic tokens
• Rewrites style-guide.md with extracted values
• Generates a compatible font stack from font-family declarations

2. Edit the Style Guide Manually

For precise control, modify style-guide.md directly. Locate the Tokens tables and update hex values, font families, or sizing scales.

After manual edits, run the pre-output taste-gate to validate:

• Contrast ratios remain accessible
• The one-accent rule holds (single accent color per skin)
• No undefined tokens are referenced

3. Create a Named Profile for Multiple Brands

When you need several distinct visual identities, define profiles in profiles.md. Each profile is a self-contained token override set.

{
  "name": "my-brand",
  "tokens": {
    "paper": "#fafafa",
    "ink": "#111111",
    "accent": "#ff5722"
  },
  "typography": {
    "title": "Helvetica, sans-serif",
    "node-name": "Arial, sans-serif"
  }
}

Activate a profile at generation time:

diagram-design generate --profile my-brand

Token Consumption Across Diagram Types

All diagram specifications in type-*.md files reference tokens by semantic role. The UML class diagram type at type-uml-class.md, for example, never hard-codes a hex value—it always traverses through the token table.

This architecture guarantees that any style guide update propagates immediately to:

• UML diagrams (class, sequence, state)
• Flowcharts and decision trees
• Architecture and network diagrams
• Custom diagram types added by contributors

Summary

• The diagram-design style guide at skills/diagram-design/references/style-guide.md is the single source of truth for all visual styling
• Three customization paths exist: onboarding script automation, manual token editing, or profile-based switching
• Semantic tokens (accent, ink, paper) abstract colors from their usage, enabling global updates
• Validation tooling (taste-gate) enforces accessibility and brand consistency rules automatically
• All diagram types consume these tokens, so changes apply instantly without file-by-file edits

Frequently Asked Questions

What file format is the style guide written in?

The style guide is a Markdown file with structured tables defining tokens. This format balances human readability with parseability by the diagram-design tooling. Tables use standard Markdown pipe syntax, making edits possible in any text editor or via the repository's GitHub web interface.

Can I use multiple accent colors in one diagram skin?

No. The one-accent rule enforced by the taste-gate validation requires exactly one accent color per skin. This constraint maintains visual hierarchy and prevents chaotic multi-color diagrams. If you need variation, use the accent's tints and shades rather than introducing additional accent hues.

How do I revert to default styling after customization?

The repository's default tokens are preserved in Git history. Run git checkout HEAD -- skills/diagram-design/references/style-guide.md to restore the original file, or switch to the default profile if you've created named variants. The onboarding script also supports a --reset flag for clean slate operations.

Will custom fonts work if diagram recipients don't have them installed?

The typography tokens accept standard CSS font stacks. Define fallbacks in order of preference: theme-font: 'Custom Font', 'Helvetica Neue', Arial, sans-serif. The rendering engine uses the first available font, ensuring diagrams remain legible even when custom typefaces aren't present on the viewing system.

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