Shapes

Shapes

The figures a diagram on the stage is drawn with (stage-shape): what they mean is the page's — a process, a workflow, a plan —, how they look is said once, on the tokens of the design system. Each one fills the element the stage gives it.

The box

A block of the design system with its edge drawn: what it is in its corner (block--mark), its words in the middle, three lines at most. Heavier (stage-shape--thick) for one that holds more than itself.

Review the article
Send the invoice
No mark at all
Holds more than itself
A long name that takes up to three lines before it is cut short

The circle

Where something starts, waits or ends: a glyph in it, its words under it. Its edge heavier (stage-shape--thick) or doubled (stage-shape--double), in a tone (stage-shape--tone-success, -warning, -error, -info).

Plain
Start
End
Waiting
Interrupting
Message

The diamond

Where the way forks: the square turned, its glyph upright, its words under it; the same edges and tones as the circle.

One way
Every way
First event
Plain
Thick