# How to Use the Accent Color in Diagram Design: Guidelines and Examples
> Learn how to use the accent color in Diagram Design to create a visual focal point. Discover guidelines and examples for effective diagram design, limiting its use to maintain signal strength.
- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: best-practices
- Published: 2026-08-22
---
**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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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
```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
```html
```
### Release-Cut Rule Line in Story Maps
```html
```
## 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`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md) with type-specific implementations in [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md), [`type-scatter.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-scatter.md), and [`type-story-map.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md), with specific type implementations scattered across [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md), [`type-scatter.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-scatter.md), and [`type-story-map.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-story-map.md). The core Skill implementation in [`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md) enforces these constraints during diagram generation.