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.

Service service

A running service or application — the default. Primary accent, service icon.

meta: { animate: false }
nodes:
  - { id: n, title: Service, kind: service }

Db db

A database or datastore. Info accent, database icon.

meta: { animate: false }
nodes:
  - { id: n, title: Db, kind: db }

Queue queue

A message queue. Warn accent, queue icon.

meta: { animate: false }
nodes:
  - { id: n, title: Queue, kind: queue }

Cache cache

A cache such as Redis or memcached. Warn accent, cache icon.

meta: { animate: false }
nodes:
  - { id: n, title: Cache, kind: cache }

Gateway gateway

An API gateway, load balancer, or edge. Primary accent, gateway icon.

meta: { animate: false }
nodes:
  - { id: n, title: Gateway, kind: gateway }

External external

A third-party or external system. Neutral accent, external icon.

meta: { animate: false }
nodes:
  - { id: n, title: External, kind: external }

User user

A person or client. Success accent, user icon.

meta: { animate: false }
nodes:
  - { id: n, title: User, kind: user }

Ghost ghost

A faint placeholder — dashed and transparent. Neutral accent, ghost variant.

meta: { animate: false }
nodes:
  - { id: n, title: Ghost, kind: ghost }

Node variants

variant sets a card's visual weight, independent of its kind.

Solid solid

A full-weight card — the default.

meta: { animate: false }
nodes:
  - { id: n, title: Solid, variant: solid }

Subtle subtle

A dimmed, lower-emphasis card.

meta: { animate: false }
nodes:
  - { id: n, title: Subtle, variant: subtle }

Ghost ghost

Dashed and transparent — a placeholder.

meta: { animate: false }
nodes:
  - { id: n, title: Ghost, variant: ghost }

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.

Primary primary

Your brand colour — the primary token.

meta: { animate: false }
nodes:
  - { id: n, title: Primary, accent: primary }

Success success

A positive or healthy state (emerald by default).

meta: { animate: false }
nodes:
  - { id: n, title: Success, accent: success }

Warn warn

A warning state (amber by default).

meta: { animate: false }
nodes:
  - { id: n, title: Warn, accent: warn }

Danger danger

An error or critical state (red by default).

meta: { animate: false }
nodes:
  - { id: n, title: Danger, accent: danger }

Info info

An informational accent (violet by default).

meta: { animate: false }
nodes:
  - { id: n, title: Info, accent: info }

Neutral neutral

A muted, neutral grey.

meta: { animate: false }
nodes:
  - { id: n, title: Neutral, accent: neutral }

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.

Data data

A data flow — the default. Solid line; a medium, steady packet.

meta: { direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, kind: data } ]

Control control

A control signal. Solid line; a small, fast, accelerating packet.

meta: { direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, kind: control } ]

Async async

An asynchronous message. Dashed line; a large, slow, eased packet.

meta: { direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, kind: async } ]

Dependency dependency

A dependency relationship. Dashed neutral line; a small packet with no glow.

meta: { direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, kind: dependency } ]

Edge curves

curve shapes the routed line between two endpoints.

StepRound step-round

Orthogonal with rounded corners (default).

meta: { animate: false }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b, curve: step-round }, { from: a, to: c } ]

Straight straight

A straight line between endpoints.

meta: { animate: false }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b, curve: straight }, { from: a, to: c } ]

S s

Smooth S-curve.

meta: { animate: false }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b, curve: s }, { from: a, to: c } ]

Edge styles

style overrides the line stroke. Edge kinds set this for you; set it explicitly to override.

Solid solid

A solid line.

meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, style: solid } ]

Dashed dashed

A dashed line.

meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, style: dashed } ]

Arrowheads

arrow chooses which ends of an edge carry an arrowhead.

None none

No arrowheads — an undirected link.

meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, arrow: none } ]

End end

An arrowhead at the target end — the default.

meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, arrow: end } ]

Start start

An arrowhead at the source end.

meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, arrow: start } ]

Both both

Arrowheads at both ends — a two-way link.

meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges: [ { from: a, to: b, arrow: both } ]

Layout directions

meta.direction sets the primary axis the layout flows along.

TB TB

Top to bottom (default).

meta: { animate: false, direction: TB }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b }, { from: b, to: c } ]

BT BT

Bottom to top.

meta: { animate: false, direction: BT }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b }, { from: b, to: c } ]

LR LR

Left to right.

meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b }, { from: b, to: c } ]

RL RL

Right to left.

meta: { animate: false, direction: RL }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b }, { from: b, to: c } ]

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.