Fill and Stroke Treatments for Focal Nodes in Diagram Design

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, 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:

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, any explicit color override on a focal node is ignored—the accent treatment always wins.

The rendered SVG output shows this fill applied directly:

<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 (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:

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: Defines the accent border and fill with YAML examples
• skills/diagram-design/references/type-data-flow.md: Confirms color overrides are ignored on focal nodes
• 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 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. 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.

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