Figures that explain a mechanism

Every figure takes its shapes from the Zerone glyph and its manner from the pages it sits on. Nothing here is a new style: the figures reuse what the logo and the diagrams pages already define.

Where it comes from

The glyph is built from a bar, a stroke at 45 degrees and a ring with an opening. The figures measure those parts from the glyph path as the site is built and draw them as keylines and shapes, never as the filled mark.

The exhibit language comes from the pages: hairlines for structure, mono labels for machine text, ink for a decision and the accent for a verified signal. There are no cards, no shadows and no gradients.

Which figure for which job

What the diagrams page already owns

Figures follow the diagrams page and do not restate it. Draw-on, the motion lifecycle and the pause control are defined there under motion. The colour roles sit under what colour means and the sentence every visual carries sits under text alternatives.

• Motion
• What colour means
• Text alternatives

The dam shows the claim of the Zero Door page in one scene: a file is legitimate when it matches its original. It is the illustration of the Zero Door hero, and a page that makes the same claim uses the same figure.

What it shows

A stream brings one file at a time from the top right: real names that Linux and Windows ship, each card with its operating system above its name. A beaver sits on the crest of the dam and holds the arriving card beside the legitimate original of the same file, lifted from the stack of its kind in the dam: binaries, libraries and packages. A file that matches gets the seal of its original, a tick in a ring; then it goes through the single opening of the dam into the calm pond behind it. The files that do not match, one Linux and one Windows, stand on the bank with a raw outline, an empty raw ring and one verdict tag.

The beaver is Castor, the mascot of the Zero Door page. His own page tells who he is, what each part of the scene stands for and where he may appear. Castor, the mascot

How it moves

The intro draws the water, the dam and the stacks, sets the seals and brings the beaver in. The files that do not match arrive first: the beaver lifts the original of each, compares and sets the card on the bank, where it turns raw. The verdict tag opens when the first one does. When the loop is on, every file of the dictionary passes once in each period, in order; each pass rests for a different multiple of the rest of the motion vocabulary before it moves. Nothing that has been decided moves again.

How it is built

Every position in the dam is a function of these measures and of time. They are read from the glyph path as the site is built, in the units of the glyph itself. The posture and the face of the beaver and the rhythm of the loop are drawing decisions, kept in named constants of the same module.

• Every part of the dam is a measure of the glyph: the card is half the bar, the body and the head come from the ring and the crest from the stroke.

  WhyIf the glyph changes, the dam follows it. A typed coordinate would drift away from the mark it claims to come from.

  TestEnforced by a test on every change.

• The names and operating systems on the cards come from the dictionary of the Zero Door page, the same in English and Turkish; the figure writes no text of its own.

  WhyA figure is read as evidence. A file name it made up would be a claim nobody checked.

  TestEnforced by a test on every change.

• Every file that stops on the bank also passes through the door in the loop, so no real file is ever shown only as suspicious.

  WhyThe names are real files that ship with every system. A name drawn only on the bank would read as an accusation against that file.

  TestEnforced by a test on every change.

• One accent: the deep accent marks the originals, their seals and the water; raw appears only on the stopped cards.

  WhyThe deep accent means verified and raw means unverified everywhere on the site.

  TestEnforced by a test on every change.

• Nothing that has been decided moves: the loop never touches the stopped cards, their rings or the verdict tag. A pause control sits beside it.

  WhyA loop that erased the verdict would hide the result the figure exists to show.

  TestEnforced by a test on every change.

• The rest frame is the server render and the last frame of the loop: paused, under reduced motion and without JavaScript the dam shows the same picture.

  WhyStopping the motion must never take the result away or show a different one.

  TestEnforced by a test on every change.

The evidence spine is a rail from left to right with one node for each step of evidence, and the last node is the verdict. Its labels and texts are real text, so it is a list that screen readers read, not a picture.

How it is built

The rail draws itself and each node scales in on the single CSS curve as the rail reaches it. The verdict node settles like the others, and the figure rests. There is no loop, so there is no pause control. Each node mark is a ring mark at its larger size, 24 px. When the figure itself is 760 px wide or narrower, the rail turns vertical and the nodes stack, with the same markup, so a figure in a narrow column stacks on a wide screen too.

States are optional

A node may carry a ring state together with its word, for a step the page says is verified, pending or failed. A node without a state is a plain ink ring and claims nothing. The verdict node never carries a state: it is always drawn in ink with its ring full, because a verdict is a decision, not one more check.

What a screen reader hears

The caption is a sentence from the page that holds the figure and names it. The steps are read as an ordered list, label and text, with the state word where there is one. The rings and the rail are hidden from screen readers, because the words already say what they show.

• The spine is a real ordered list with a caption, and its rings and rail are hidden from screen readers.

  WhyThe content is text. A picture with a label would hide the steps from anyone who cannot see them.

  TestEnforced by a test on every change.

• A node with a state carries its word, and the verdict node carries no state.

  WhyA ring is never drawn without its word, and a verdict that looked like one more check would weaken it.

  TestEnforced by a test on every change.

• Nodes sit at the centres of equal columns, and the rail runs from the first node to the verdict.

  WhyThe reading direction of the diagrams page holds: source on the left, verdict on the right.

  TestEnforced by a test on every change.

Ring marks are a single shape, proportioned from the ring of the glyph, that changes form with each verification state. A mark always stands beside its word.

Proportions from the glyph

The band of a mark is 0.43 of its outer radius, the share the ring of the glyph has. The pending opening covers 36 degrees seen from the centre, the angle the opening of the glyph covers at the middle of its band. It faces the upper right as it does in the glyph. The sizes are 16 px and 24 px.

Never colour alone

A state is told by its shape and its word, and colour only repeats it. A reader who cannot tell the deep accent from raw still sees a full ring, a ring with an opening, a filled hole or a notch. The same reader also has the word beside it.

Never for severities

Ring marks name verification states. Severities belong to the status icons of the product, and their colours are not borrowed for anything else. How colour is assigned

• Every state is a different shape: the paths differ in their subpaths and in the points they pass through.

  WhyColour is never the only carrier of a state.

  TestEnforced by a test on every change.

• The band ratio and the opening angle are read from the ring of the glyph, not typed.

  WhyThe mark keeps the proportions of the logo it comes from.

  TestEnforced by a test on every change.

• A ring mark always prints its word as text and hides its shape from screen readers.

  WhyThe word is what a screen reader hears, and what a reader who cannot tell the colours apart reads.

  TestEnforced by a test on every change.

• Ring marks are not used for severities.

  WhyA severity is a different question from a verification state, and the product already answers it with its own icons.

  ReviewKept by review, not by a test.

The loop is the mechanism of the home page in a small frame. Short raw strokes scattered in a field converge on one point, and one accent wire leaves that point and stays.

The large form on the home page

The opening of the home page is the large form of the same figure, drawn on a canvas. Both read the same constants: the focus sits at 0.56 of the height and the seal closes in rings of 16 px and 26 px. The wire keeps the wavelength of the hero as a share of the width. The hero braids 3 wires and places its focus at 0.55 of the width; the small form keeps a single wire and moves its focus to 0.3, so that the noise has room to arrive.

At rest

Under reduced motion and without JavaScript the loop shows its converged state: the wire, the seal rings and the focus, with no raw strokes. A paused loop shows the same frame.

• The loop is marked as one: it carries data-ambient once it runs, and the page puts a pause control beside it.

  WhyMotion that keeps running must give the reader a way to stop it.

  TestEnforced by a test on every change.

• The pause control stops the loop, and the wire stays drawn while it is paused.

  WhyStopping the motion must never take the result away.

  TestEnforced by a test on every change.

• The scatter comes from a seeded generator, so every build draws the same field and nothing calls Math.random.

  WhyA figure that changed on every build could not be reviewed or tested.

  TestEnforced by a test on every change.

• The small form uses the constants it shares with the hero, and a test finds each one in the source of the hero.

  WhyThe page says the hero and the small form are the same figure. That sentence is only true while the numbers agree.

  TestEnforced by a test on every change.

This table is read from the source of the site as it is built. For each figure it lists the pages outside the design language that import it, through a component or in the text of an article, with what the figure shows there.

Of the 4 figure types, 3 appear on a page outside the design language: DamFigure, EvidenceSpine and RingMark. A figure with no page says so.

• A page that shows a figure imports its component and never copies the drawing.

  WhyOne source keeps every instance the same, and this table can only see imports.

  TestEnforced by a test on every change.

These hold for every figure on the site, the ones on this page and any that is added later. Where a test holds a rule, the card says so.

• A figure explains a mechanism the copy already describes. Every text it shows comes from the page that holds it, and it carries no invented data, counts or percentages.

  WhyA figure is read as evidence. A number it made up would be a claim nobody checked.

  TestEnforced by a test on every change.

• Geometry comes from modules: glyph measures from the glyph path, layout from a pure function, durations and curves from the motion language. No drawing element types a coordinate.

  WhyA typed number drifts from the source it was copied from, and nothing would notice.

  TestEnforced by a test on every change.

• The glyph itself is never pasted, outlined or stroked. Figures use its construction, drawn as keylines and shapes.

  WhyThe logo has one source and is shown only as itself. A traced or outlined copy would be a second logo.

  TestEnforced by a test on every change.

• Colour follows the roles of the diagrams page and comes from tokens only. Severity colours are never borrowed.

  WhyThe deep accent means verified and raw means unverified everywhere on the site. A figure that used them otherwise would teach the wrong reading.

  TestEnforced by a test on every change.

• Motion never animates opacity. Lines draw on and shapes scale or move. Reduced motion shows the final state.

  WhyFading hides what is changing; drawing shows it.

  TestEnforced by a test on every change.

• Without JavaScript and under reduced motion every figure shows its final state, and nothing on the page moves.

  WhyThe result is the point of a figure. A reader who cannot or does not want to see motion still gets it.

  TestEnforced by a test on every change.

• A drawn figure that carries meaning is role="img" with a sentence from the dictionary as its label. A figure whose content is text, such as the evidence spine, is a real list with a caption instead.

  WhyA screen reader user gets the same point as a sighted reader, in a sentence or in the words themselves.

  TestEnforced by a test on every change.

• Each figure has one component and one geometry module, and every public figure with role="img" is listed in the inventory of the diagrams page.

  WhyA figure drawn in more than one place would drift apart, and one missing from the inventory would escape its checks.

  TestEnforced by a test on every change.

• At a narrow phone width nothing overflows.

  WhyA figure that scrolled sideways would lose the part that holds the result.

  TestEnforced by a test on every change.

• Below the breakpoint of the site, or when the column that holds it is narrow, a figure may stack, with the same markup; the evidence spine measures its own width.

  WhyA spine squeezed into a narrow column would crush its steps. Because it measures itself, it stacks wherever it is narrow, not only on a phone.

  TestEnforced by a test on every change.