# Fill and Stroke Combinations for Different Node Types in Diagram-Design
> Discover precise fill and stroke combinations for diagram-design node types. Learn how our four-color palette creates clear, accessible diagrams with one focal node.
- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-08-23
---
**The diagram-design repository defines a strict four-color palette (paper, ink, muted grey, and coral accent) where each node type uses specific fill and stroke combinations declared in reference markdown files, allowing exactly one focal node per diagram to receive the accent color treatment.**
The **cathrynlavery/diagram-design** skill implements a controlled visual language for SVG-based diagrams. Each node type—from process flows to Wardley maps—adheres to prescribed **fill and stroke combinations** documented in the reference files under `skills/diagram-design/references/`. These rules ensure consistent rendering across all diagram generators while distinguishing between default states and highlighted focal elements.
## The Core Color Palette
The system relies on four semantic colors that drive all **fill and stroke combinations**:
- **Paper**: The light background color used for hollow shapes and neutral fills
- **Ink**: The dark text color (`rgba(45,49,66,...)`) used for strokes and solid fills
- **Muted**: Low-opacity grey tints for background elements and non-focal cells
- **Accent**: Coral orange (`#eb6c36`) reserved exclusively for the single focal node in any diagram
This limited palette ensures accessibility and visual hierarchy across different node types.
## Process and Flow Nodes
Standard flow diagrams rely on rectangular nodes defined in [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md). The implementation distinguishes between default operations and highlighted steps.
### Default Process Nodes
Regular rectangular nodes use a **white fill** (or `rgba(245,245,245,0.04)` for transparent backgrounds) with a subtle grey **stroke** of `rgba(45,49,66,0.25)`. According to the source in [`skills/diagram-design/references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-process.md) at lines 297-300, this combination applies to standard process steps and flow elements.
```svg
```
### Focal Nodes
One node per diagram may be designated as *focal*, receiving the accent treatment. The **fill** becomes `rgba(235,108,54,0.08)` (a translucent coral tint) while the **stroke** switches to solid `#eb6c36` (bright orange). Lines 299-300 of [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md) specify this combination for critical hand-offs or highlighted steps.
```svg
```
### Data Type Chips
Small badges inside nodes follow similar logic but omit strokes entirely. **Default chips** use `rgba(45,49,66,0.12)` (muted fill, no stroke), while **focal chips** use `rgba(235,108,54,0.20)` when appearing inside a focal node. These definitions occupy lines 295-296 of [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md).
## Specialized Diagram Types
Beyond standard flows, each diagram variant implements unique **fill and stroke combinations** tailored to its specific visualization needs.
### Loop Diagrams (type-loop.md)
Nodes in loop diagrams use semantic color names rather than raw RGBA values. The standard node receives a **paper fill** and an **ink stroke**, creating a hollow rectangle effect. Line 146 of [`skills/diagram-design/references/type-loop.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-loop.md) establishes this pairing for iteration visualizations.
### Wardley Map Components (type-wardley.md)
Wardley map components render as circles with **paper fill** and a 1px **ink stroke**. File [`type-wardley.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-wardley.md) at lines 9-10 defines this combination for evolutionary mapping components.
### Venn Diagram Circles (type-venn.md)
Venn diagrams use translucent fills without strokes to enable overlap visualization. The circles employ very low-opacity tints: `rgba(45,49,66,0.04)` or `rgba(79,93,117,0.05)`. Lines 8-12 of [`type-venn.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-venn.md) specify these values, relying on composited transparency rather than outline definition.
### Sankey Node Bars (type-sankey.md)
Sankey visualization bars break from the standard pattern by using solid **ink fill** with **no stroke**. The vertical quantity-encoding bars at lines 8-9 of [`type-sankey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-sankey.md) use `rgba(45,49,66,1)` for maximum data-ink ratio.
```svg
```
### Treemap Cells (type-treemap.md)
Treemap hierarchies distinguish between standard and focal cells:
- **Non-focal cells**: `rgba(45,49,66,0.16)` fill with `rgba(45,49,66,0.30)` stroke (lines 40-41)
- **Focal cell**: `rgba(235,108,54,0.16)` fill with `#eb6c36` stroke (line 45)
This mirrors the process node logic but applies to rectangular subdivisions.
### UML Class Relationships (type-uml-class.md)
UML diagrams use specialized shapes with distinct styling:
- **Inheritance arrows**: Hollow triangles with **paper fill** and **ink stroke** (lines 32-34)
- **Composition diamonds**: Filled diamonds using **ink fill** with no separate stroke, effectively making the shape a solid colored glyph (lines 34-35)
## SVG Implementation Reference
When generating diagrams programmatically, apply these **fill and stroke combinations** using the exact RGBA values from the reference files. The repository enforces these values through markdown-based generators that parse the reference tables.
Key implementation files include:
- [`skills/diagram-design/references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-process.md) — Process nodes and chips
- [`skills/diagram-design/references/type-loop.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-loop.md) — Loop diagram rectangles
- [`skills/diagram-design/references/type-wardley.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-wardley.md) — Component circles
- [`skills/diagram-design/references/type-venn.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-venn.md) — Overlapping circles
- [`skills/diagram-design/references/type-sankey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-sankey.md) — Quantity bars
- [`skills/diagram-design/references/type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-treemap.md) — Hierarchical cells
- [`skills/diagram-design/references/type-uml-class.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/type-uml-class.md) — Relationship indicators
## Summary
- The **diagram-design** skill uses a constrained palette of paper, ink, muted grey, and coral accent (`#eb6c36`).
- Exactly **one node per diagram** may receive focal styling with accent fill and stroke.
- **Strokes are optional**: Sankey bars, chips, and Venn circles render without outlines.
- Reference files in `skills/diagram-design/references/` define specific RGBA values for each node type.
- **Opacity values** differentiate states: default nodes use `0.25` stroke opacity, while focal fills use `0.08` or `0.16` tint opacity.
## Frequently Asked Questions
### What is the maximum number of focal nodes allowed per diagram?
Only one node (or treemap cell) may be designated as focal per diagram. This constraint ensures the coral accent color (`#eb6c36`) remains a singular visual highlight, preventing conceptual dilution of the "critical step" or "key component" concept across the visualization.
### Why do Sankey nodes use solid ink fill without a stroke?
Sankey bars prioritize data-ink ratio and quantitative clarity. According to [`type-sankey.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-sankey.md) lines 8-9, these vertical bars use solid `rgba(45,49,66,1)` fill with no stroke to maximize contrast against the background while minimizing visual noise, as strokes would distort the perceived width of quantities.
### How do chip colors differ from regular node colors?
Chips use higher opacity muted fills (`0.12` vs `0.04`) and never display strokes. Default chips use `rgba(45,49,66,0.12)`, while focal chips use `rgba(235,108,54,0.20)`—approximately double the tint opacity of their parent focal nodes—to maintain visibility at smaller sizes inside the node containers defined in [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md).
### Where are these fill and stroke rules defined in the repository?
All **fill and stroke combinations** reside in the `skills/diagram-design/references/` directory. Each diagram type has a dedicated markdown file (e.g., [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md), [`type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-treemap.md)) containing reference tables that SVG generators parse to apply the correct color values to specific node types.