CIPHER. Design guide · Site 21 of 25
How this site was made

The interface is
need-to-know.

CIPHER is a fictional museum of secret writing, art-directed as a declassified dossier: manila stock, typewriter headings, one rubber stamp, and wall text that must be decrypted, dialled, or de-redacted before it will talk.

Concept

Museums of cryptography tend to look like server rooms. This one looks like the filing cabinet the subject actually lived in. Every interaction is a period technique made honest: a working Caesar wheel, redaction bars that lift, a headline that arrives as ciphertext and resolves as you watch.

Palette

Manila#E7DFCC
Ribbon ink#221F1A
Stamp red#C03428
Pencil#7C7566

Typography

Twenty-six positions of paranoia.

Special Elite — a worn typewriter face for headings and stamps; the voice of the file itself.

PHHW PH XQGHU WKH FORFN DW QRRQ

Cutive Mono — ciphertext and file numbers. Spectral carries the curator's prose.

Techniques

ElementHow it works
Decrypting headlineThe hero text starts as Greek-and-dagger noise and resolves left to right on a 30ms clock — non-letters stay put so the sentence shape is legible before the words are.
Caesar wheelTwo SVG alphabet rings drawn programmatically, each glyph rotated on its own radius. The shift buttons redraw the inner ring and re-encode the sample sentence live — the wheel is the encoder, not an illustration of one.
Redaction barsInk-filled spans with transparent text; hover or keyboard focus lifts the bar. The joke in the dossier text is historically real — redaction-length attacks forced agencies to pad their bars.
PaperAn feTurbulence grain overlay and double-ruled stamp rotated 7° — the whole file styled from museum-archive conventions rather than "hacker" ones.
AccessibilityReduced motion shows the headline in plaintext. Redactions are focusable with tabindex, so keyboard readers can lift every bar. The wheel's buttons are labelled.

Interaction map

You doThe page does
ArriveThe headline decrypts itself, once
Turn the wheelThe inner alphabet rotates and the sample sentence re-encodes at every stop
Hover a redactionThe bar lifts; the secret is a punchline
← Return the file