Linked.Archi Diagram Color Palette¶
Standard colors for D2 diagrams, derived from the site brand palette.
Brand Colors (from extra.css)¶
- Primary blue:
#1565c0 - Primary dark:
#0d47a1 - Accent teal:
#00baa3 - Red accent:
#d55342 - Gold accent:
#efc945
Diagram Semantic Colors¶
Use these consistently across all diagrams for the same conceptual meaning:
| Role | Fill | Stroke | Use for |
|---|---|---|---|
| Data / Input | #e3f2fd |
#1565c0 |
Raw data, source systems, inputs |
| Information / Processing | #fff8e1 |
#f9a825 |
Structured info, intermediate state |
| Knowledge / Output | #e0f2f1 |
#00897b |
Knowledge, results, outputs |
| Wisdom / Governance | #ede7f6 |
#5e35b1 |
Principles, governance, wisdom |
| Neutral / Container | #fafafa |
#bdbdbd |
Grouping containers, backgrounds |
| Highlight / Question | #fff3e0 |
#e65100 |
Callouts, questions, emphasis |
| Negative / Problem | #fce4ec |
#c62828 |
Problems, gaps, issues |
| Positive / Solution | #e8f5e9 |
#2e7d32 |
Solutions, benefits, success |
| Node (inner) | #ffffff |
(inherit) | Individual items inside containers |
Typography¶
- Container labels: 14px
- Node labels: 12-13px
- Edge labels: 11-12px
D2 Theme¶
- Use theme
0(Neutral Default) — light background, clean typography - Layout:
elk— best for hierarchical/nested diagrams