Orgchart Node

Updated 3 weeks ago

Live preview

rectangle

rectangle-tall

rectangle-short

rectangle-compact

pill

ellipse

Components
6 variants Tokens-backed WCAG 2.2 AA target

An absolutely-positioned content box representing one entity in an ownership/hierarchy diagram. Renders at fixed pixel dimensions on a 1056×816px canvas (US Letter landscape) — three shape families across six variants, matching how these diagrams are actually produced and printed for regulatory/investor-relations use.

Rendered from components/orgchart-node/recipe.json

When to use Org Chart Node

Use Org Chart Node to represent one entity in a print-first ownership/hierarchy diagram — an absolutely-positioned content box on a fixed 1056×816px canvas (US Letter landscape). This is not a web-fluid layout component; every node renders at a fixed pixel position, matching how these diagrams are actually produced and printed for regulatory/investor-relations use.

Shape families

VariantUse forShape
RectangleStandard operating/holding entitySolid border, one of 5 role colors
Rectangle — tallBoard-level or managing entity145px height
Rectangle — shortAsset or subsidiary entity80px height
Rectangle — compactDense-layout variant160×60px
PillFund vehicle / limited partnershipAlways dashed border, 250px wide, fully rounded
EllipseCross-border flow-through entityDashed/dotted border, rounded

Entity-role colors

6 role colors are wired today (green/blue/purple/orange/grey/yellow) from the registry's 9-role primitive.color.orgchart.* palette — see Tokens and the Org Charts product page for the real Carbon-token gap analysis behind this color set. The remaining 3 reserved roles are not yet wired into a node variant.

Anatomy

  • Title — entity name, 12px bold.
  • Alias (optional) — italic secondary line, e.g. a trade name.
  • Node number — bottom-of-box reference number tying the node to a supporting schedule.

Behaviour

Print-first, static component — no interaction states, no motion. Each node carries role="group" with aria-label naming the entity and its node number; the SVG connector layer between nodes is pointer-events: none and needs no ARIA annotation of its own.

Open questions

Whether the short-radius and rounded administrative-entity variants should consolidate into one modifier, or stay distinct for different subcategories — not yet decided.

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.