Diagram Design Light Mode Hex Codes: Primary Color Palette Reference

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 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 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 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 (line 21): Defines the ink token (#2d3142) for primary text and strokes.
• skills/diagram-design/references/type-high-level.md (line 247): Specifies the primary accent color (#eb6c36) for focal edges.
• .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:

# 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, type-high-level.md, and 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 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 contains the ink color (#2d3142), skills/diagram-design/references/type-high-level.md defines the accent color (#eb6c36), and .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.

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