Design language Foundations
Castor, the mascot
Castor is the beaver in the opening of the Zero Door page. He holds each arriving file beside its legitimate original and lets the files that match through the single opening of his dam. This page tells who he is, what each part of his scene stands for, how he is drawn from the glyph, how he moves and where he may appear.
A beaver who keeps a dam.
#Castor sits on the crest of a dam that keeps the legitimate originals of the files on a server. A file passes through the dam only after it has stood beside its own original in his paws.
Suspiciousdoes not match its original
His name
Castor is the scientific name of the genus of beavers; the Eurasian beaver is Castor fiber. The name is written the same way in English and in Turkish, with a capital C and no article.
Why a beaver
A beaver builds a dam and keeps it. The dam in the drawing is the archive of the legitimate originals, with one stack for each kind of file: binaries, libraries and packages. A dam lets water through only where its builder leaves an opening. This one has a single opening, the door; a file goes through it only after it has matched its original.
Why a mascot at all
The opening of the Zero Door page needs one drawing that a stranger reads without a caption. Comparing a file with its original is an act, and an act is something a character can perform: a beaver holding a file and its original side by side shows the comparison before anyone reads a word.
The scene, element by element.
#Every part of the scene stands for something the Zero Door page says in words. The table pairs each part with the copy it echoes, read from the dictionary of that page, so the drawing claims nothing the page does not.
| In the scene | Stands for | On the Zero Door page |
|---|---|---|
| The stream and the arriving cards | Files on a server: binaries, libraries and packages, on Linux and on Windows. | Prove every binary, library and package on your servers is the original. |
| The names on the cards | Real files that the operating system ships, by their real names. Every name that stops on the bank also passes through the door in the loop, so no real file is ever shown only as suspicious. | What the operating system shipped, too |
| The stacks in the dam | The legitimacy database: the originals of every kind, one stack per kind, each showing the next original it holds. | legitimacy database · kept current |
| The original in his paw, its tick ring and its chip | The legitimate original of the same file, verified: the tick in the ring is its seal and the chip names it. | original |
| The single opening of the dam | A file that matches its original is let through. | Not just changed. Genuine or not. |
| The bank, the raw rings and the tag | The verdict on a file that does not match its original. | Suspicious |
What the Zero Door page does not say, the scene does not show: there is no malware in it, no alert and no count.
Drawn from the glyph.
#Castor is not drawn freehand. His card, his body, his head and the angle of everything that slants come from measures of the Zerone glyph, read when the site is built. His posture and his face are drawing decisions, kept in named constants beside those measures.
The measures
These are the measures the Visualisation page lists for the dam, read from the same module.
| Part | Measure | From the glyph |
|---|---|---|
| Card width | 39.97 units | Half the bar |
| Card proportion | 0.75 | The width of the glyph to its height |
| Folded corner | 0.27 of the card width | The thickness of the bar to its width, cut at the angle of the stroke |
| Body | 50.81 units | The outer radius of the ring: the circle of the rump and the unit of the body and the feet |
| Head | 30.03 units | 1.03 times the inner radius of the ring, half the width of the head; the inner radius is the unit of the face |
| Tail | 10.84 units | Half the thickness of the bar: the short semi-axis of the paddle |
| Stream, folded corner and tail scales | 45 degrees | The angle of the diagonal stroke |
| Crest of the dam | 21.66 units | The stroke weight of the glyph |
| Frame, square | 195.38 units | Derived: the longest file name fits its card at 9 px on a 264 px drawing |
What makes him a beaver
| Cue | Why |
|---|---|
| A flat skull | A rounded skull reads as a groundhog or a marmot. The top of his head is one flat arc between its rounded corners. |
| Small eyes, set high | A swimming beaver keeps its eyes above the water. Small round eyes high on the head also keep his face calm and turned to the cards. |
| Small ears, set low | High ears turn him into a groundhog. His ears sit low, at the corners of the head. |
| A small nose, a split lip and small incisors | The incisors say rodent. Thin outlined teeth with a gap between them, under a split lip, read as buck teeth at every size and leave no dark mass under the nose. |
| A bell-shaped body | A sitting beaver is shaped like a pear: a wide rump and a narrower head. |
| Webbed hind feet | Webbed feet fanning out from the body say that the animal swims. |
| A hatched paddle tail | The flat, scaled tail is the cue nobody misreads. Its scales are hatched at the angle of the diagonal stroke of the glyph. |
The line hierarchy
| Line | Token | What it draws |
|---|---|---|
| Ink | ink | The silhouette: body, ears, feet, tail outline and paws. Also the eyes, the nose, the lip and the teeth, which a hairline would lose on a phone. |
| Hairline | hair-2 | Lines inside the silhouette: whiskers, toes and the scales of the tail. |
| Paper | paper | A fill only where a shape must hide what is behind it. |
| Deep accent | accent-deep | The one accent: the seals of the originals, the chip and the water. |
| Raw | raw | Only the stopped cards: their outline, their empty ring and their words. |
The head at real size
On a 1440 px screen
On a 390 px screen
On a 320 px screen
What was tried and rejected
The face took several rounds. A single block of ink for the incisors, under a broad nose pad, made one dark mass under the nose that read as a moustache. An outlined pad with filled nostrils read as a snout. With no teeth at all and the tail covered, he read as a seal or a cat; with a rounder skull and higher ears he read as a groundhog, as did some photographs labelled as beavers that turned out to show marmots. A jowl line read as a smile and eyelids read as eyebrows. In the dam, the slot of the original in his paw stood empty at rest, so one kind of file seemed to be missing. Stacks replaced the slots, and each pile now always shows the next original of its kind.
How he moves.
#Castor moves only to show the check. Every duration and curve comes from the motion vocabulary of the site, and a result never moves once it is decided.
The intro
The water, the dam and the stacks draw themselves and the seals of the originals settle one after another. Then Castor appears. The files that do not match come first, one at a time: he lifts the original of each from its stack, looks at the pair and sets the card on the bank, where it turns raw while the original goes back. The verdict tag opens when the first card turns raw. Then the stream brings the first file and he lifts its original. The intro lasts 9.46 s and ends on the rest frame.
The loop
When a page asks for the loop, as the Zero Door page does, every file of the dictionary passes once in each period of 39.5 s, in order: 6 files, Linux and Windows in turn. Each pass rests first, for a whole or half multiple of the rest of the vocabulary, so the passes do not tick like a clock; sometimes he glances up the stream, sometimes he looks longer before the seal. A file that matches gets its seal, goes over the door and shrinks into the pond. Its original slides back behind its stack and the next original rises.
What never moves
The stopped cards, their raw rings and the verdict tag stay where the intro left them for as long as the loop runs. The loop starts and ends on the rest frame, so nothing jumps when it wraps around.
Pause, reduced motion and no JavaScript
On the Zero Door page a pause control sits beside him; paused, he stops on the rest frame. With reduced motion or without JavaScript the page shows that same rest frame from the start: the frame the server renders.
The motion vocabulary he uses
He writes no duration and no curve of his own. These are the names he uses, read from his source, with their values in the vocabulary.
| Name | Value |
|---|---|
DUR.draw | 1.2 s |
DUR.enter | 0.45 s |
DUR.exit | 0.24 s |
DUR.mark | 0.32 s |
DUR.sweep | 1.8 s |
DUR.travel | 0.8 s |
EASE.enter | power3.out |
EASE.exit | power2.in |
EASE.linear | none |
EASE.move | power2.inOut |
EASE.pop | back.out(1.7) |
MOTION.draw | 1.2 s, sine.inOut |
REST | 2.4 s |
Rules of use.
#Where a test holds a rule, the card says so. The others are kept by review.
Castor appears in the opening of the Zero Door page. Documentation and the empty states of the product are candidates, not promises.
WhyOne appearance keeps him tied to the one claim he explains.
TestEnforced by a test on every change.
He never appears in an alert, on a verdict screen or as a severity icon, never beside the logo as a lockup and never on a legal or pricing page.
WhyBeside a real finding a character would make it look less serious, and beside the logo he would become a second mark.
ReviewKept by review, not by a test.
He does not speak, nobody jokes about a threat through him and he is never shown failing.
WhyHe stands for a check that works. A joke about an attack, or a beaver who lets a file slip, would undo the claim he explains.
ReviewKept by review, not by a test.
Every colour he wears is a token of the site, with the role it has everywhere else.
WhyA colour picked for the drawing alone would mean nothing to the reader.
TestEnforced by a test on every change.
The deep accent means verified and raw means unverified, as everywhere: the originals, their seals and the water carry the deep accent; raw appears only on the stopped cards.
WhyA reader who has learnt the colours on one page reads him without a legend.
TestEnforced by a test on every change.
His proportions come from the module: no drawing element writes a measure of its own.
WhyA typed coordinate would drift from the glyph he is drawn from.
TestEnforced by a test on every change.
His teeth stay small: thin outlined incisors with a gap between them, narrower together than his nose. There is no dark mass under the nose.
WhyLarge teeth turn a beaver into a cartoon, and a dark block under the nose reads as a moustache.
TestEnforced by a test on every change.
No fur texture: one silhouette in ink with a few hairlines inside it.
WhyTexture shrinks into noise on a phone and has no counterpart anywhere else on the site.
ReviewKept by review, not by a test.
He never fades: his motion moves, scales and draws but never animates opacity.
WhyA fading figure loses contrast halfway, and fading hides what changes.
TestEnforced by a test on every change.
The name is Castor, with a capital C and no article in English. Turkish writes Castor too; the name is not translated.
WhyA name that changed between pages or languages would stop being a name.
TestEnforced by a test on every change.
The name appears wherever the beaver is described: in the text alternative of the Zero Door opening, on this page and in the prose and figure labels of the Visualisation and Diagrams pages. No other dictionary carries it, and it never appears in alt text.
WhyA listener on the Zero Door page hears the same name a reader finds here. The text alternative still describes what is drawn.
TestEnforced by a test on every change.
In the built site the name is confined to the Zero Door page and the design pages. On the Zero Door page it is only in the text alternative of the opening, and it is in no alt text, script, style or data file.
WhyThe source can be right while the built page is wrong. This check reads what is published.
TestEnforced by a test on every change.