How to Use the Accent Color in Diagram Design: Guidelines and Examples

The accent color in Diagram Design is a single focal color used to mark the editorial focal point in a diagram, limited to at most one or two elements to maintain visual signal strength.

In the cathrynlavery/diagram-design repository, the accent color serves as the primary visual mechanism for guiding viewer attention. This system design token ensures diagrams remain clear, accessible, and consistent across different visualization types.

What Is the Accent Color in Diagram Design?

The accent token is the single focal color within the Diagram Design system. Its exclusive purpose is to highlight the most important element—or the item the story is about—within any given diagram. According to skills/diagram-design/references/style-guide.md, using this color sparingly creates a strong visual hierarchy that prevents cognitive overload.

When an element is marked as focal within a type specification, the rendering engine automatically assigns the accent color properties. Manual hex color assignments on focal elements are ignored in favor of the system token.

The 1-Accent Rule: Using Focal Colors Sparingly

Diagram Design enforces strict constraints on accent usage through the "1-accent rule" defined in style-guide.md (lines 26-27). This guideline mandates:

• Maximum quantity: At most one or two accent elements per diagram
• Signal preservation: Adding more than two accent elements dilutes the visual signal and removes the intended focal emphasis
• Editorial discipline: The restriction forces explicit decisions about what constitutes the true focal point of the visualization

Violating this rule breaks the diagram's visual grammar and reduces accessibility for readers scanning for the primary insight.

Accent Color Token Values and Definitions

The accent color uses specific hex values depending on the color scheme, documented in skills/diagram-design/references/style-guide.md (lines 26-28):

Token	Light Mode	Dark Mode	Usage
accent	#eb6c36	#f08a59	Strokes, borders, and line elements
accent-tint	Derived from base	Derived from base	Fill backgrounds for focal nodes

The accent-tint variant provides a lighter fill application for backgrounds while maintaining the same hue family as the primary stroke accent.

Where to Apply the Accent Color in Diagrams

The Diagram Design system specifies four primary placements for the accent token across different diagram types.

Focal Nodes and Components (accent-tint Fill)

In process diagrams, the accent color appears as both stroke and fill on the primary focal node. As noted in style-guide.md (lines 13-14), this combination uses:

• Stroke: accent token for the border
• Fill: accent-tint token for the background

This dual application creates a "glow" effect that separates the focal element from muted background components.

Accent Arrows in Process Diagrams

Directional indicators leading to or from the focal node use the accent color variant arrow-accent. The reference implementation in type-process.md (lines 42-43) shows these connectors maintain the same orange hue family while directing attention toward the focal element.

Accent Bubbles in Scatter Charts

For scatter plot visualizations, the accent color highlights the editorially significant data point. According to type-scatter.md (lines 10-12), all other points use muted grayscale tokens while the focal bubble alone receives the accent fill and stroke treatment.

Release-Cut Rule Lines in Story Maps

Story-map diagrams use accent strokes on release-cut rule lines to indicate significant architectural boundaries. The specification in type-story-map.md (lines 18-23) describes applying the accent token to horizontal divider lines that mark release transitions or risky architectural cuts.

How the Rendering Engine Applies Accent Automatically

The Diagram Design rendering system enforces token consistency through automatic application. As implemented in type-process.md (lines 254-255), when a node specification includes focal: true, the engine:

1. Ignores any manual color property assignments
2. Overrides with the system accent token for strokes
3. Applies accent-tint for fill backgrounds

This automatic enforcement prevents design drift and ensures compliance with the 1-accent rule across generated diagrams.

Code Examples

Marking a Focal Node in YAML

# Example: Highlight a focal node in a process diagram

nodes:
  - id: "A"
    label: "Start"
    focal: true          # → rendered with accent-tint fill & accent stroke

  - id: "B"
    label: "Validate"
    focal: false
edges:
  - from: "A"
    to: "B"
    style: "focal-out"  # → arrow uses the accent token

Accent Bubble in Scatter Plot HTML Template

<!-- Example: Accent bubble in a scatter plot -->
<circle cx="120" cy="80" r="6" fill="var(--accent)" stroke="var(--accent)"></circle>
<!-- All other points use muted colors -->
<circle cx="200" cy="150" r="5" fill="var(--muted)" stroke="var(--muted)"></circle>

Release-Cut Rule Line in Story Maps

<!-- Example: Release-cut rule line in a story-map diagram -->
<line x1="0" y1="200" x2="800" y2="200"
      stroke="var(--accent)" stroke-width="1.5"></line>

Summary

• The accent color (#eb6c36 light / #f08a59 dark) marks the single editorial focal point in Diagram Design visualizations
• The 1-accent rule restricts usage to one or two elements maximum per diagram
• The system automatically applies accent and accent-tint tokens when focal: true is set, ignoring manual color overrides
• Primary placements include focal nodes, accent arrows, scatter bubbles, and release-cut rule lines
• Core definitions reside in skills/diagram-design/references/style-guide.md with type-specific implementations in type-process.md, type-scatter.md, and type-story-map.md

Frequently Asked Questions

What hex values does the accent color use?

The accent color uses #eb6c36 in light mode and #f08a59 in dark mode. The fill variant, accent-tint, derives from these base values but applies at reduced opacity for background highlighting. These specifications are documented in skills/diagram-design/references/style-guide.md.

How many accent elements should a diagram contain?

Diagram Design permits at most one or two accent elements per diagram. This "1-accent rule" ensures the focal point maintains sufficient visual contrast against muted background elements. Exceeding this limit removes the hierarchical signal and creates visual noise.

Do I need to manually set the accent color for focal elements?

No. When you set focal: true on a node or component, the rendering engine automatically applies the appropriate accent tokens. Manual color assignments are ignored in favor of the system tokens, as implemented in the reference logic found in type-process.md.

Where is the accent color defined in the source code?

The accent color token is defined in skills/diagram-design/references/style-guide.md, with specific type implementations scattered across type-process.md, type-scatter.md, and type-story-map.md. The core Skill implementation in skills/diagram-design/SKILL.md enforces these constraints during diagram generation.

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