Visual reference
A live catalogue of Beck's visual vocabulary. Every card below is generated by reflecting over the
Beck.Authoring token enums, so this page can never drift from the engine: each token's name and
description come straight from the source, and the preview is a real diagram using that value.
For the keys these tokens slot into, see the YAML schema; for motion, see Flow & animation.
Node kinds
kind is a shorthand that picks a fitting icon, accent, and variant at once — every part stays
independently overridable.
A running service or application — the default. Primary accent, service icon.
A database or datastore. Info accent, database icon.
A message queue. Warn accent, queue icon.
A cache such as Redis or memcached. Warn accent, cache icon.
An API gateway, load balancer, or edge. Primary accent, gateway icon.
A third-party or external system. Neutral accent, external icon.
A person or client. Success accent, user icon.
A faint placeholder — dashed and transparent. Neutral accent, ghost variant.
Node variants
variant sets a card's visual weight, independent of its kind.
A full-weight card — the default.
A dimmed, lower-emphasis card.
Dashed and transparent — a placeholder.
Accents
A token follows the theme and recolours in light and dark mode. Anywhere a colour is accepted you can also pass a raw CSS colour, which stays frozen.
Your brand colour — the primary token.
A positive or healthy state (emerald by default).
A warning state (amber by default).
An error or critical state (red by default).
An informational accent (violet by default).
A muted, neutral grey.
Edge kinds
kind sets an edge's default style, colour, and packet motion. Each card animates so the per-kind
motion — size, speed, glow, and easing — reads at a glance.
A data flow — the default. Solid line; a medium, steady packet.
A control signal. Solid line; a small, fast, accelerating packet.
An asynchronous message. Dashed line; a large, slow, eased packet.
A dependency relationship. Dashed neutral line; a small packet with no glow.
Edge curves
curve shapes the routed line between two endpoints.
Orthogonal with rounded corners (default).
A straight line between endpoints.
Smooth S-curve.
Edge styles
style overrides the line stroke. Edge kinds set this for you; set it explicitly to override.
A solid line.
A dashed line.
Arrowheads
arrow chooses which ends of an edge carry an arrowhead.
No arrowheads — an undirected link.
An arrowhead at the target end — the default.
An arrowhead at the source end.
Arrowheads at both ends — a two-way link.
Class relation kinds
kind on a type: class relation picks the UML line and end markers. Write each one the way you'd
say it aloud — Order inherits Entity, Order is composed of OrderLines — and see Draw a class
diagram for the direction conventions.
Child extends parent (hollow triangle at the parent).
Class implements an interface (dashed, hollow triangle).
A plain directed association.
Whole–part where the part outlives the whole (hollow diamond at the whole).
Whole–part where the part's lifetime is owned (filled diamond at the whole).
A usage dependency (dashed, open arrowhead).
Layout directions
meta.direction sets the primary axis the layout flows along.
Top to bottom (default).
Bottom to top.
Left to right.
Right to left.
Packet shapes and easing
The shape and easing of a travelling packet live on the Flow & animation reference, where they animate alongside the rest of the motion vocabulary.