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

> Locate the diagram design style guide in the cathrynlavery/diagram-design repository. Customize colors and fonts with this essential reference.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-09-06

---

**The diagram-design style guide is located at [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/onboarding.md) | Automated brand import via URL | Quick setups from existing brand assets |
| [`profiles.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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:

```yaml

# 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`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/onboarding.md) extracts color variables and rebuilds the style guide automatically.

```bash
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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/profiles.md). Each profile is a self-contained token override set.

```json
{
  "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:

```bash
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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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.