What Is the Default Color Palette Used by Diagram Design?

Diagram Design ships with a fixed, editorial-grade "jet-black + atomic-tangerine" color palette defined centrally in skills/diagram-design/references/style-guide.md, using semantic tokens like paper, ink, and accent that render consistently across light and dark modes unless a brand-onboarding step overrides them.

The cathrynlavery/diagram-design repository provides a diagramming system that renders visual documentation using a strict, opinionated aesthetic out of the box. Understanding the default color palette used by Diagram Design ensures your diagrams maintain the intended editorial-grade appearance across all output formats.

Where the Default Color Palette Is Defined

According to the source code, the single source of truth for all color values resides in skills/diagram-design/references/style-guide.md. This file declares semantic color roles—paper, ink, muted, accent, rule, and link—each mapped to specific hex codes for light and dark modes.

The repository's README.md confirms this implementation, describing the system as rendering in a "clean jet-black + atomic-tangerine palette" featuring white-smoke paper, jet-black ink, and atomic-tangerine accents.

The Six Core Semantic Colors

The default skin comprises six foundational colors referenced by semantic tokens rather than raw hex values. These tokens ensure every diagram type specification in type-*.md files remains maintainable and themeable.

Token	Light Mode	Dark Mode	Usage
paper	#f5f5f5 (white-smoke)	#2d3142 (jet-black)	Page background and default node fill
ink	#2d3142 (jet-black)	#f5f5f5 (white-smoke)	Primary text and strokes
muted	#4f5d75 (blue-slate)	#bfc0c0 (silver)	Secondary text and arrow strokes
accent	#eb6c36 (atomic-tangerine)	#f08a59	Highlight and focal points (max 1-2 per diagram)
rule	rgba(45,49,66,0.12)	rgba(245,245,245,0.12)	Hairline borders
link	#2e5aa8	#6a95d8	Hyperlink and API-call arrows

Additional derived tokens such as accent-tint, soft, and paper-2 extend this core set for subtle variations while maintaining the editorial aesthetic.

How Diagram Types Reference the Palette

All diagram specifications in skills/diagram-design/references/type-*.md—such as type-architecture.md—reference these semantic tokens exclusively. This architecture means changing the hex value in style-guide.md instantly re-skins every diagram type without requiring edits to individual specification files.

The system enforces this indirection to prevent hard-coded color values from fragmenting the visual identity across different diagram types.

Validating Default Palette Implementation

You can verify that a generated diagram correctly implements the default color palette using the built-in self-check utility.

# Validate token usage in a generated diagram

python3 skills/diagram-design/scripts/self_check.py path/to/diagram.html

This script prints the detected token table, confirming whether the default skin values are applied or if custom overrides are present.

To manually implement the default light variant in HTML, reference the exact token values as follows:

<!-- Minimal light variant using default skin -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap">

<div style="background:#f5f5f5;color:#2d3142;">
  <h1 style="font-family:'Instrument Serif',serif;color:#eb6c36;">Architecture</h1>
  <p>Core services communicate over <span style="color:#2e5aa8;">HTTPS</span>.</p>
</div>

Summary

• Diagram Design's default color palette is defined in skills/diagram-design/references/style-guide.md and consists of six core semantic tokens: paper, ink, muted, accent, rule, and link.
• The palette features an editorial-grade combination of jet-black, atomic-tangerine, white-smoke, blue-slate, and silver that adapts automatically between light and dark modes.
• All diagram type specifications reference these semantic tokens rather than hard-coded hex values, enabling centralized theme updates via the style guide.
• Use skills/diagram-design/scripts/self_check.py to validate that generated diagrams conform to the default skin.

Frequently Asked Questions

What are the exact hex codes for Diagram Design's default accent color?

In light mode, the accent token uses #eb6c36 (atomic-tangerine), while dark mode renders it as #f08a59. According to the style guide, use this color for a maximum of one to two focal points per diagram to maintain proper visual hierarchy.

How do I verify that my diagram is using the default color palette?

Run the self-check script located at skills/diagram-design/scripts/self_check.py with your diagram file as an argument. The utility analyzes the HTML and outputs the detected token table, confirming whether default values like paper (#f5f5f5) and ink (#2d3142) are present or if brand-onboarding overrides have been applied.

Can the default colors be customized without editing source files?

The default palette applies universally unless a brand-onboarding step explicitly overwrites the tokens in style-guide.md. While the repository architecture supports centralized skinning, specific override mechanisms depend on the brand-onboarding implementation detailed in the repository's configuration documentation.

Which source files should I reference to understand color implementation?

Consult skills/diagram-design/references/style-guide.md for the complete token definition table and README.md for high-level palette descriptions. For practical usage examples, review the type-*.md specification files in the same directory, which demonstrate how semantic colors apply to specific diagram architectures.

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