# Default Color Values for Paper, Ink, Muted, Accent, and Link in Diagram Design

> Discover default light and dark mode color values for paper ink muted accent and link in Diagram Design. Optimize your designs with these essential color tokens.

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

---

**The Diagram Design repository defines default light and dark mode colors across five core tokens: paper (`#f5f5f5`/`#1c1f2e`), ink (`#2d3142`/`#f5f5f5`), muted (`#4f5d75`/`#bfc0c0`), accent (`#eb6c36`/`#f08a59`), and link (`#4da3d1`).**

These color tokens create a minimal, high-contrast palette that ensures diagrams remain legible in both lighting conditions. The values are hardcoded across multiple reference files rather than centralized in a theme configuration, with each diagram type capable of overriding defaults while falling back to these core values.

## Complete Default Color Reference

The Diagram Design skill set uses a deliberately restrained palette. Here are the exact hex values for all five tokens:

| Token | Light Mode | Dark Mode | Visual Role |
|-------|-----------|-----------|-------------|
| **paper** | `#f5f5f5` | `#1c1f2e` | Background/page color |
| **ink** | `#2d3142` | `#f5f5f5` | Primary text and lines |
| **muted** | `#4f5d75` | `#bfc0c0` | Secondary text, borders, subtle elements |
| **accent** | `#eb6c36` | `#f08a59` | Highlights, calls to action (coral) |
| **link** | `#4da3d1` | `#4da3d1` | Hyperlinks and interactive elements |

The **accent** token variations represent the same coral hue with adjusted brightness: `#eb6c36` in light mode provides stronger saturation against light backgrounds, while `#f08a59` in dark mode prevents harsh contrast against dark surfaces. The **link** token maintains identical values in both modes, relying on the surrounding context for sufficient contrast.

## Where These Values Are Defined in the Source

Each token is documented across separate reference files rather than a single stylesheet. This distributed approach allows diagram-specific overrides while maintaining consistency.

### Core Backgrounds and Text

The **paper** and **ink** tokens appear in [`type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-high-level.md). Paper serves as the page background, flipping from near-white `#f5f5f5` in light mode to deep navy `#1c1f2e` in dark mode. Ink inverts this relationship, using `#2d3142` (ink blue) for primary content in light mode and falling back to `#f5f5f5` (the paper color) in dark mode.

### Supporting Colors

The **muted** token is specified in [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md) as `#4f5d75` (slate blue-gray) for light mode and `#bfc0c0` (warm gray) for dark mode. These values appear in borders, secondary labels, and de-emphasized structural elements.

The **accent** token is defined in [`type-radar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-radar.md) as the coral brand color: `#eb6c36` for light backgrounds and `#f08a59` for dark backgrounds. This warm orange draws attention without the aggressive contrast of pure red.

The **link** token value `#4da3d1` appears in interactive diagram elements and maintains consistency across both modes.

## How to Reference These Colors in Diagram Code

Since the repository lacks a centralized theme object, colors are typically hardcoded or manually referenced. For reusable diagram generation, extract these values into constants:

```python

# Diagram Design default color tokens

DIAGRAM_COLORS = {
    "paper": {
        "light": "#f5f5f5",
        "dark": "#1c1f2e"
    },
    "ink": {
        "light": "#2d3142",
        "dark": "#f5f5f5"
    },
    "muted": {
        "light": "#4f5d75",
        "dark": "#bfc0c0"
    },
    "accent": {
        "light": "#eb6c36",   # coral

        "dark": "#f08a59"     # coral (brightened)

    },
    "link": {
        "light": "#4da3d1",
        "dark": "#4da3d1"     # unchanged

    }
}

def get_color(token: str, mode: str = "light") -> str:
    """Return the appropriate color for a given token and mode."""
    return DIAGRAM_COLORS.get(token, {}).get(mode, "#000000")

```

When creating custom diagrams that extend the Diagram Design system, respect the inversion pattern: **paper** and **ink** swap values between modes, **muted** shifts from cool to warm tones, **accent** adjusts brightness, and **link** remains stable.

## Contrast and Accessibility Considerations

The palette meets WCAG contrast requirements through careful value selection. The light mode **ink** (`#2d3142`) on **paper** (`#f5f5f5`) achieves approximately 11:1 contrast—well above the 4.5:1 AA threshold. The dark mode configuration maintains similar ratios by inverting the relationship.

The **accent** coral (`#eb6c36`) is reserved for non-text elements or large headings due to its lower contrast against light backgrounds (approximately 3.5:1). In dark mode, the brightened `#f08a59` improves to roughly 4.2:1 against `#1c1f2e`.

## Summary

- **paper**: `#f5f5f5` (light) / `#1c1f2e` (dark) — defined in [`type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-high-level.md)
- **ink**: `#2d3142` (light) / `#f5f5f5` (dark) — defined in [`type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-high-level.md)
- **muted**: `#4f5d75` (light) / `#bfc0c0` (dark) — defined in [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md)
- **accent**: `#eb6c36` (light) / `#f08a59` (dark) — defined in [`type-radar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-radar.md)
- **link**: `#4da3d1` (both modes) — interactive element color

These five tokens form the complete default color system in the cathrynlavery/diagram-design repository, with individual diagram types free to override while maintaining the core accessibility guarantees.

## Frequently Asked Questions

### Where are the default colors defined in the Diagram Design repository?

The colors are distributed across reference files in `skills/diagram-design/references/`. **paper** and **ink** appear in [`type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-high-level.md), **muted** in [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md), **accent** in [`type-radar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-radar.md), and **link** values appear in interactive element specifications. There is no single theme configuration file.

### Do all diagram types use these exact colors?

No. These are fallback defaults. Individual diagram types can and do override specific tokens. For example, a specialized diagram might substitute a different accent color while retaining the paper/ink relationship. The values documented here represent the baseline when no override is specified.

### Why does the accent color change between light and dark modes?

The accent shifts from `#eb6c36` to `#f08a59` to maintain perceptual brightness. Pure hue preservation would make the coral appear too dim against dark backgrounds. The lightened dark mode variant ensures highlights remain visually prominent without creating jarring contrast.

### Is there a link token in the standard palette?

Yes. The **link** color `#4da3d1` (medium blue) appears in interactive diagram elements. Unlike paper, ink, muted, and accent, the link token does not invert between modes—it relies on context and underlining to distinguish interactive elements.