# Diagram Design Light Mode Hex Codes: Primary Color Palette Reference

> Find Diagram Design light mode primary color hex codes. Discover hex codes for ink, primary accents, and brand metadata to enhance your diagrams.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: api-reference
- Published: 2026-09-10

---

**Diagram Design’s light mode primary palette uses `#2d3142` for ink (text and strokes), `#eb6c36` for primary accents (focal elements), and `#b5523a` for brand metadata.**

The cathrynlavery/diagram-design repository maintains a strict color system for diagram theming. These specific hex codes represent the source-of-truth values for light mode implementations before any dark mode transformations are applied.

## Primary Color Tokens in Light Mode

### Ink (Primary Text and Stroke)

The **`ink`** token serves as the base color for most UI elements, labels, and outlines. According to [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) at line 21, the light mode hex code is **`#2d3142`** (jet black).

### Primary Accent (Focal Elements)

For main accent and focal components such as primary connector strokes, the repository defines the **`primary`** token. As implemented in [`skills/diagram-design/references/type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-high-level.md) at line 247, the light mode value is **`#eb6c36`** (vivid orange).

### Brand Primary (Metadata)

The brand-specific primary color appears in plugin metadata and promotional contexts. Located in [`.codex-plugin/plugin.json`](https://github.com/cathrynlavery/diagram-design/blob/main/.codex-plugin/plugin.json) at line 42, this light mode hex code is **`#b5523a`** (deep coral).

## Source File Locations

These three locations constitute the authoritative source for Diagram Design’s primary color palette. The dark mode equivalents are generated algorithmically by lightening these base colors approximately 15%.

- **[`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md)** (line 21): Defines the `ink` token (`#2d3142`) for primary text and strokes.
- **[`skills/diagram-design/references/type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-high-level.md)** (line 247): Specifies the `primary` accent color (`#eb6c36`) for focal edges.
- **[`.codex-plugin/plugin.json`](https://github.com/cathrynlavery/diagram-design/blob/main/.codex-plugin/plugin.json)** (line 42): Stores the brand primary color (`#b5523a`) used in plugin metadata.

## Implementation Example

When building custom SVG renderers or theming engines, reference these constants directly to maintain consistency with the design system:

```python

# Diagram Design Light Mode Primary Colors

LIGHT_INK = "#2d3142"      # Primary text and stroke

LIGHT_ACCENT = "#eb6c36"   # Primary accent for focal elements

BRAND_COLOR = "#b5523a"    # Brand primary for metadata

svg_template = f'''
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Base rectangle using primary ink colour -->
  <rect x="10" y="10" width="80" height="80" fill="{LIGHT_INK}" />
  <!-- Accent line using primary accent colour -->
  <line x1="100" y1="20" x2="190" y2="80" stroke="{LIGHT_ACCENT}" stroke-width="4"/>
  <!-- Brand logo placeholder -->
  <circle cx="150" cy="50" r="20" fill="{BRAND_COLOR}" />
</svg>
'''
print(svg_template)

```

## Summary

- Diagram Design’s light mode uses `#2d3142` for ink, `#eb6c36` for primary accents, and `#b5523a` for brand elements.
- Color definitions reside in [`style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/style-guide.md), [`type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-high-level.md), and [`plugin.json`](https://github.com/cathrynlavery/diagram-design/blob/main/plugin.json) within the cathrynlavery/diagram-design repository.
- These hex codes represent the canonical values before dark mode lightening transformations are applied.
- Developers should reference these specific tokens to ensure visual consistency across SVG, CSS, or Canvas implementations.

## Frequently Asked Questions

### What is the primary text color hex code in Diagram Design's light mode?

The primary text and stroke color uses the **`ink`** token defined as **`#2d3142`** (jet black) in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) at line 21. This serves as the base color for labels, outlines, and most UI elements in the light mode theme.

### Where are the light mode primary colors defined in the repository?

The light mode primary colors are documented across three authoritative files: [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) contains the ink color (`#2d3142`), [`skills/diagram-design/references/type-high-level.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-high-level.md) defines the accent color (`#eb6c36`), and [`.codex-plugin/plugin.json`](https://github.com/cathrynlavery/diagram-design/blob/main/.codex-plugin/plugin.json) stores the brand color (`#b5523a`).

### How are dark mode colors generated from these light mode hex codes?

According to the repository source, dark mode equivalents are algorithmically generated by lightening the light mode base colors by approximately 15%, ensuring consistent hue relationships while adapting to darker backgrounds.

### Can I use these hex codes directly in CSS or SVG implementations?

Yes, these hex codes (`#2d3142`, `#eb6c36`, and `#b5523a`) are the canonical values suitable for direct use in CSS properties, SVG fill and stroke attributes, Canvas rendering contexts, or any design tool supporting hexadecimal color notation.