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

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

# 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
• ink: #2d3142 (light) / #f5f5f5 (dark) — defined in type-high-level.md
• muted: #4f5d75 (light) / #bfc0c0 (dark) — defined in type-process.md
• accent: #eb6c36 (light) / #f08a59 (dark) — defined in 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, muted in type-process.md, accent in 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.

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