Runtime-matched visual reference
Design readable graphs with the system OGJS ships
Prototype and build with one set of semantic roles, contrast-tested colors, relationship treatments, and application tokens. The files below are generated from the same prismPack used by the renderer.
- Node roles
- 8
- Relationship roles
- 7
- Surface themes
- 2
- Token source
- PrismPack
01 · Live comparison
One graph, two surfaces
The topology, labels, roles, and selected alert stay identical. Only theme tokens change, so a light-to-dark switch cannot alter the graph’s meaning or position.
02 · Semantic roles
Use roles that carry meaning
Put a stable role in graph data and call present(). OGJS chooses theme-aware marks, size, routing, arrowheads, and labels while your data remains portable.
Node roles
Relationship roles
// Your records describe the investigation. OGJS completes the presentation. og.setGraph({ nodes: [{ id: 'gateway', data: { role: 'service', label: 'Payment gateway' } }], edges: [{ source: 'alert', target: 'gateway', data: { role: 'risk' } }], }); og.present({ theme: 'dark' });
03 · Tokens
Paired colors with measured contrast
Every category keeps its identity across daylight and night. The downloadable files also include semantic canvas, surface, text, edge, focus, map, and export tokens.
04 · Interaction
Keep state visible without muting the graph
Hover, selection, and keyboard focus add a local cue. Unrelated nodes keep their category color and the camera stays fixed.
Default
Category color and label remain legible.
Hover
A local ring identifies the target.
Selected
A persistent focus-colored ring carries state.
Keyboard focus
A visible outer outline supports non-pointer navigation.
05 · Icons
Choose symbols by meaning
Use the self-hosted Material Symbols catalog for common graph concepts. Use an application-hosted SVG only when exact brand artwork or multicolor imagery is required.
06 · Ownership
Put each decision in one place
This boundary keeps graph code short and prevents the canvas, application UI, and domain data from drifting into three competing visual systems.
Graph dataStable ids, labels, node roles, relationship roles, domain groups
present()Readable defaults, marks, edge routing, arrowheads, label treatment, theme pairingStyle rulesBusiness-specific exceptions that genuinely depend on data
Application chromePanels, tables, buttons, filters, and layout using the generated CSS variables
07 · Download
Take the same system into your product
JSON works with design tools and build scripts. CSS styles the surrounding application. The README defines the boundary between application chrome and graph presentation.