# Fill and Stroke Treatments for Focal Nodes in Diagram Design

> Discover how to apply fill and stroke treatments to focal nodes in Diagram Design. Learn to use coral accent fills and matching strokes for impactful visuals.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: deep-dive
- Published: 2026-08-16

---

**The focal node in Diagram Design uses a coral accent fill (`rgba(235,108,54,0.20)`) and a matching `#eb6c36` stroke at approximately 1.5 px width, overriding any explicit color settings.**

In the `cathrynlavery/diagram-design` repository, the **focal node** is the single element that commands the reader's visual attention. This article explains the exact fill and stroke specifications, how role-chips inherit these treatments, and the automatic styling applied to connected edges—all based on the design system documented across the reference files.

## What Makes a Node "Focal"

A focal node is strictly limited to **one per diagram** (or one per tier in certain diagram types). Additional focal-style nodes would dilute the visual signal. The system enforces this through validation scripts like [`scripts/verify-drawio-import.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/verify-drawio-import.py), which checks that only the focal node plus legend elements receive the accent color.

The focal state is triggered by setting `focal: true` in the node definition:

```yaml
nodes:
  - { lane: "RDE", step: 2,
      title: "Pilot test",
      sub: "field debug",
      chips: {in: "TB", out: "TB"},
      focal: true }

```

## Fill Treatment: Accent Coral with 20% Opacity

The **fill** property for focal nodes uses the accent coral at reduced opacity:

| Property | Value | Application |
|----------|-------|-------------|
| Fill color | `rgba(235,108,54,0.20)` | Node rectangle background |
| Fill color | `rgba(235,108,54,0.20)` | Role-chip interior (when present) |

This 20% opacity tint provides sufficient visual weight without overwhelming surrounding elements. As noted in [`skills/diagram-design/references/type-data-flow.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-data-flow.md), any explicit `color` override on a focal node is **ignored**—the accent treatment always wins.

The rendered SVG output shows this fill applied directly:

```svg
<rect x="..." y="..." width="100" height="64"
      fill="rgba(235,108,54,0.20)"
      stroke="#eb6c36"
      stroke-width="1.5"/>

```

## Stroke Treatment: Solid Accent Border

The **stroke** treatment for focal nodes follows these specifications:

- **Color**: `#eb6c36` (coral accent)
- **Width**: Approximately 1.5 px
- **Application**: Outer rectangle and role-chip border

This stroke is noticeably thicker than non-focal elements, creating the primary visual hierarchy. The accent border also extends to the node's **role-chip**, giving it both an accent-filled background and accent outline.

## Text and Typography Handling

The **title text** inside a focal node remains in the standard "ink" color—it is **not** recolored to coral. This preserves readability while allowing the border and fill to convey the focal signal. The design system in [`skills/diagram-design/SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md) (section 5) emphasizes this separation of semantic color (accent for structure) from content color (ink for readability).

## Automatic Edge Styling

Connected edges that touch a focal node automatically adopt the **accent arrow style**:

```yaml
arrows:
  - { from: {lane: "IT", step: 1},
      to:   {lane: "RDE", step: 2},
      style: "focal-in" }

```

This style renders edges with:
- `stroke: #eb6c36`
- Width ≈ 1.2 px
- `arrow-accent` marker

This reinforces the node's prominence through the entire visual path leading to it.

## Implementation Across Diagram Types

The focal node treatment is consistently documented across reference files:

- **[`skills/diagram-design/references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-process.md)**: Defines the accent border and fill with YAML examples
- **[`skills/diagram-design/references/type-data-flow.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-data-flow.md)**: Confirms color overrides are ignored on focal nodes
- **[`skills/diagram-design/references/type-org-chart.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-org-chart.md)**: Describes the single coral focal node for "front-door" elements

## Summary

- **Fill**: `rgba(235,108,54,0.20)` applied to node rectangle and role-chips
- **Stroke**: `#eb6c36` at ~1.5 px on node border and chip outline
- **Color overrides**: Ignored—accent treatment is mandatory for focal nodes
- **Text**: Remains ink-colored for readability
- **Connected edges**: Automatically receive accent arrow styling
- **Limit**: One focal node per diagram (enforced by validation)

## Frequently Asked Questions

### Can I change the focal node color to something other than coral?

No. The [`scripts/verify-drawio-import.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/verify-drawio-import.py) validation script enforces that only the focal node receives the accent color. Any explicit `color` property on a focal node is ignored, as documented in [`skills/diagram-design/references/type-data-flow.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-data-flow.md). The coral accent (`#eb6c36`) is hardcoded as the design system's singular focal signal.

### Why does the focal node text stay black instead of matching the border?

Title text inside focal nodes uses the standard "ink" color to ensure maximum readability against the 20% opacity coral fill. Recoloring text to match the border would reduce legibility, particularly at smaller sizes. The design system separates structural emphasis (accent fill/stroke) from content legibility (ink text).

### How thick should the focal node stroke be compared to regular nodes?

Focal nodes use a stroke width of approximately **1.5 px**, while non-focal elements typically use 1.0 px or less. This 50% increase creates immediate visual hierarchy without requiring dramatic color differences. The same proportion applies to connected edges, which render at ~1.2 px versus the standard 1.0 px.