# What Is the Default Color Palette Used by Diagram Design?

> Discover the default color palette in Diagram Design. Learn how jet-black and atomic-tangerine render consistently for your diagrams.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: getting-started
- Published: 2026-08-16

---

**Diagram Design ships with a fixed, editorial-grade "jet-black + atomic-tangerine" color palette defined centrally 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 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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/type-architecture.md)—reference these semantic tokens exclusively. This architecture means changing the hex value in [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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.

```bash

# 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:

```html
<!-- 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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) for the complete token definition table and [`README.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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.