Org Charts
Print-first component set for entity/ownership hierarchy diagrams — the newest of three product lines built on this design system's tokens, landed this release.
Org chart diagrams are a print-first surface — every node renders at a fixed pixel position on a 1056×816px canvas (US Letter landscape at 96dpi), not a fluid web layout. That constraint, and the entity-role color system it needs, don't map cleanly onto a general-purpose status/interactive color palette — see the gap analysis below.
The token registry reserves a 9-role entity-color palette
(primitive.color.orgchart.*, see Tokens)
— the shipped Org Chart Node component uses 6 of those 9 roles today (green, blue,
purple, orange, grey, yellow); the remaining 3 (two "legacy entity" colors plus an
extra grey variant) are reserved capacity, not yet wired into a component variant.
Why org-chart tokens are their own namespace, not reused status tokens
From the real, ratified gap analysis
(dtcg-vault/research/orgchart-status-palette-gap.md): of the six entity-role
colors, one (Broker / Asset Manager, purple) has no equivalent at all in a typical
general-purpose status palette. That kind of palette's semantic system has nothing
similar. Two more — Investment Vehicle's blue and Corporate Holding's green — map to a
same-intent status-palette role, but at a meaningfully different hex value or semantic
register (see the table).
Reusing status-palette support-color tokens for the remaining three would import status/alert semantics (success, caution, warning) into what are structural, not evaluative, distinctions between entity types.
Box dimensions (110–250px, plus the 1056×816px canvas) don't derive from a typical 8px spacing scale either — they're set by print legibility and the US Letter page geometry. Typography runs 9–12px, below the 12px floor a general-purpose UI type scale typically sets. Only about five 210px-wide boxes fit across the 1056px canvas in one row, which leaves little room to spare at a larger type size.
| Entity role | Our token | Nearest status-palette role | Assessment |
|---|---|---|---|
| Corporate holding | primitive.color.orgchart.green | success-status green | Different hue — ours is lighter sage, the status-palette equivalent is darker forest |
| Investment vehicle | primitive.color.orgchart.blue | primary interactive blue | Different register — institutional navy vs. bright interactive blue |
| Broker / asset manager | primitive.color.orgchart.purple | none | No equivalent at all in a general-purpose status palette |
| Equity partner | primitive.color.orgchart.orange | major-caution amber | Close visually, wrong semantic — caution implies a warning |
| Admin entity | primitive.color.orgchart.grey | strong border gray | Similar lightness, different use — border vs. entity fill |
| LP / fund vehicle | primitive.color.orgchart.yellow | warning amber | Close visually, wrong semantic — warning implies an alert |
Org Chart Node
Absolutely-positioned entity box on the print canvas. Three shape families — rectangle (operating entities), pill (fund vehicles, always dashed), ellipse (cross-border flow-throughs).
Org Chart Canvas
The fixed-dimension print canvas hosting all node boxes and connector overlays — exactly US Letter landscape at 96dpi (1056×816px), fills the page edge-to-edge when printed.
Org Chart Connector
SVG overlay of directed connection lines between nodes, beneath the node boxes. Arrowhead fill matches the source box's border color.
3 real components, the newest product line.
Every card above is a real, registered component with its own recipe.json — get the raw tokens or browse the full registry.
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.