# How Different Node Types Are Treated With Fill and Stroke in diagram-design

> Discover how diagram-design applies fill and stroke to different node types using semantic color families. Learn the rules for default and focal elements.

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

---

**The diagram-design system applies fill and stroke through four semantic color families—paper, ink, muted, and accent—with each node type following strict rules: paper-fill with ink-stroke as default, and accent-tint fill with accent-stroke for focal elements.**

The **diagram-design** repository defines a comprehensive visual language that ensures consistent rendering across multiple diagram types. Understanding how **fill and stroke treatments** vary by node type is essential for implementing compliant diagrams that maintain accessibility and visual hierarchy. This article examines the specific conventions for nine diagram types based on the reference specifications in the repository.

## Wardley Map Nodes: Paper-Fill with Ink-Stroke

**Wardley map components** use small circles that establish the baseline visual treatment.

According to [`skills/diagram-design/references/type-wardley.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-wardley.md), non-focal components receive:

- **Paper-fill**: The base canvas color (`#f5f5f5`)
- **Ink-stroke**: 1 px stroke in the primary ink color (`#4f5d75`)

Focal components escalate to accent treatment with an **accent-tint fill** and **accent stroke**, counting as two of the allowed "accent elements" per the one-accent rule.

```svg
<!-- Wardley component (non-focal) -->
<circle cx="200" cy="150" r="6"
        fill="#f5f5f5"
        stroke="#4f5d75"
        stroke-width="1"/>

<!-- Wardley component (focal – accent) -->
<circle cx="400" cy="150" r="6"
        fill="rgba(235,108,54,0.15)"
        stroke="#eb6c36"
        stroke-width="1.2"/>

```

## Sankey Diagram Nodes: Solid Ink-Fill, No Stroke

**Sankey vertical bars** deviate from the standard pattern. Per [`skills/diagram-design/references/type-sankey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-sankey.md):

- Nodes render with **solid ink-fill** (`#4f5d75`)
- **No stroke** is applied
- Focal paths use **accent-fill** at higher opacity but maintain **no stroke**

The z-ordering rule requires connectors to render before node rectangles in this diagram type.

```svg
<!-- Sankey node bar (default) -->
<rect x="100" y="80" width="12" height="120"
      fill="#4f5d75"
      stroke="none"/>

```

## UML Class Diagram Nodes: Rounded Paper-Fill with Ink-Stroke

**UML class boxes** follow the standard pattern with rounded corners. From [`skills/diagram-design/references/type-uml-class.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-uml-class.md):

- Rectangle with `rx=6` corner radius
- **Paper-fill** with **ink-stroke**
- Focal classes receive **accent-tint fill** and **accent stroke**

## Process Diagram Nodes: White or Variant Fill with Muted Border

**Process nodes** use fixed-dimension rectangular cards (`100 × 64 px`). Per [`skills/diagram-design/references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-process.md):

| State | Fill | Stroke |
|-------|------|--------|
| Default | **White** or `rgba(245,245,245,0.04)` (light-dark variant) | Muted: `rgba(45,49,66,0.25)` |
| Focal | **Accent-fill**: `rgba(235,108,54,0.08)` | **Accent-stroke**: `#eb6c36` |

```svg
<!-- Process node (focal) -->
<rect x="300" y="200" width="100" height="64" rx="6"
      fill="rgba(235,108,54,0.08)"
      stroke="#eb6c36"
      stroke-width="1.2"/>

```

## Tree and Hierarchy Nodes: Flexible Paper-Based Fill

**Tree nodes** as specified in [`skills/diagram-design/references/type-tree.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-tree.md) permit designer discretion:

- Small rectangles with `rx=6`
- Standard **paper-fill** with **ink-stroke** recommended
- Leaf highlighting through **thinner stroke** (`0.8 px`) or alternate fill
- Must preserve color-family hierarchy

Connectors render before node rectangles per z-ordering rules.

## Scatter Chart Points: Muted-Fill Default, Accent-Fill Focal

**Scatter points** use variable-radius circles. According to [`skills/diagram-design/references/type-scatter.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-scatter.md):

- Default: **Muted-fill** `rgba(79,93,117,0.20)` with **muted-stroke**
- Focal: **Accent-fill** `rgba(235,108,54,0.15)` with **accent-stroke** `#eb6c36`

Stroke colors meet WCAG contrast ratios (≥ 6:1 against paper backgrounds).

```svg
<!-- Scatter focal point -->
<circle cx="520" cy="340" r="6"
        fill="rgba(235,108,54,0.15)"
        stroke="#eb6c36"
        stroke-width="1.2"/>

```

## Radar Chart Polygons: Series-Color Stroke with Tinted Fill

**Radar series polygons** implement fill/stroke differently per [`skills/diagram-design/references/type-radar.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-radar.md):

- **Non-focal series**: Series-color stroke, fill at `0.18` opacity (muted)
- **Focal series**: Thicker stroke, same fill opacity
- Hierarchy preserved through stroke weight rather than fill saturation

## Venn Diagram Circles: Ultra-Low Opacity Tints

**Venn circles** use minimal opacity to enable overlap compounding. Per [`skills/diagram-design/references/type-venn.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-venn.md):

- Ink circles: `rgba(45,49,66,0.04)`
- Muted circles: `rgba(79,93,117,0.05)`
- **Focal intersection**: **Accent-tint fill** `rgba(235,108,54,0.10)` with **accent-stroke**

Overlap regions automatically compound tint values.

## Quadrant Chart Cells: Ink-Fill Default, Accent-Fill Focal

**Quadrant cells** as defined in [`skills/diagram-design/references/type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-quadrant.md):

- Non-focal: **Ink-fill** at `0.04` opacity, **muted-stroke** at `0.28` opacity
- Focal: **Accent-tint fill** with **accent-stroke** at `1.2` px

## Core Principles Governing Fill and Stroke

The **diagram-design** system enforces four architectural rules across all node types:

1. **Color family hierarchy**: `paper` → `ink` → `muted` → `accent`
2. **One-accent rule**: Maximum two accent elements per diagram
3. **Z-ordering**: Fills first, strokes second, accents last; connectors before nodes where specified
4. **Accessibility compliance**: WCAG contrast ratios for all stroke combinations

## Summary

- **diagram-design** defines **four semantic color families** (paper, ink, muted, accent) that determine fill and stroke across all node types.
- **Default treatment** is paper-fill with ink-stroke for most shapes; Sankey bars use solid ink-fill with no stroke.
- **Focal elements** escalate to accent-tint fill and accent-stroke, with strict limits on accent quantity.
- **Reference specifications** in `skills/diagram-design/references/type-*.md` files govern each diagram type's exact values.
- **Accessibility and z-ordering rules** ensure consistent, legible rendering in both light and dark themes.

## Frequently Asked Questions

### How do I implement a focal node in a Wardley map?

Apply an **accent-tint fill** (`rgba(235,108,54,0.15)`) and **accent stroke** (`#eb6c36`) to the circle element. This consumes two of your permitted accent elements for the diagram. Reference [`skills/diagram-design/references/type-wardley.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-wardley.md) for the complete component specification.

### Why do Sankey nodes have no stroke?

Sankey bars use **solid ink-fill with no stroke** to emphasize the flow ribbons connecting them. Adding strokes would create visual noise that competes with the ribbon gradients. The focal path instead uses accent-fill opacity changes to indicate selection without introducing stroke elements.

### What is the maximum number of accent elements allowed per diagram?

The **one-accent rule** permits at most **two accent elements** per diagram. This typically manifests as one focal node and its connected edge, or one focal node and one focal state indicator. Exceeding this limit breaks the visual hierarchy and degrades focus clarity.

### How are Venn diagram overlaps calculated?

Venn circles use **ultra-low opacity tints** (`0.04`–`0.05`) that compound mathematically when regions overlap. The focal intersection receives a dedicated **accent-tint fill** at `0.10` opacity with an accent stroke, ensuring it remains distinguishable despite the additive tint behavior.