Diagram Engine — Proof Gallery

Token-driven diagram engine. Each diagram's markup is brand-agnostic; a client's brand is a swappable token file. The two columns below are the same diagrams — the only difference between a left page and its right counterpart is one line: okta.css → northwind.css.

Okta (originals) · vs · Northwind (same diagrams, rebranded)

Diagram A · “Any source of truth” — Okta

Calm cream panel. Source systems collapse into a single Okta identity, shown by the indigo pill stack feeding the sunburst hero tile.

Open full page →

Diagram A · “Any source of truth” — Northwind

Identical markup. Emerald accent, DM Sans, and an “N” monogram hero — produced purely by swapping the token file.

Open full page →

Okta (originals) · vs · Northwind (same diagrams, rebranded)

Diagram B · “Partners → Okta” — Okta

Premium blue-gradient panel. Three partner IdPs route through orthogonal connectors into the Okta hero, each edge labelled “IdP”.

Open full page →

Diagram B · “Partners → Okta” — Northwind

Same diagram, Northwind’s emerald gradient. The connector routing, tiles, and labels are unchanged — only brand tokens differ.

Open full page →

How the rebrand works. Every diagram links two stylesheets: a brand token file (engine/tokens/<brand>.css — colors, fonts, hero mark, radii) and the shared style pack (engine/packs/okta-marketing.css — component classes that only ever read var(--token)). The pack hard-codes no brand value, so pointing a page at a different token file re-skins it completely. any-source-of-truth.html and any-source-of-truth.northwind.html have byte-identical diagram markup — verified by diff.