VISUALLIdesign system

Canvas

Geometry of nodes, rings and connectors. See Canvas language.

TokenValueUsage
node-width200pxBase node width at zoom 1 (rx = 100).
node-height148pxBase node height (ry = max(64, rx × 0.74)).
node-stroke3pxNode outline width; 4px when selected.
ring-gap-11.10Scale of the innermost depth ring (one child layer).
ring-gap-21.20Scale of the second ring (two child layers).
ring-gap-31.30Scale of the outer ring (three or more), dashed 6 4.
edge-width2.5pxConnector stroke.
edge-gap15pxSpace between a connector end and the outermost ring.
edge-arc-max45pxMaximum bow of a connector, shrinking with distance.
immersion-alpha0.15Parent topic fill over canvas behind a child layer.
zoom-min0.3Smallest zoom; labels hide below it.
zoom-max5Largest zoom.