Visual language

Cipher Gothic

The language of systems made intimate

There is a particular tension in work that lives inside locked doors and open poems — the knowledge that infrastructure is a kind of literature, that security protocols are a form of care. Cipher Gothic holds that tension: the schematic precision of a network diagram and the soft breath of handwritten marginalia, occupying the same dark page.

This site refuses to separate technical writing from literary work. Infrastructure and story are the same problem told in different grammars, and the job is to make both legible to the people who depend on them. Cipher Gothic is the design language that enforces that refusal.

Design tokens

Background
#0b0d12

Obsidian ground — deep enough to hold everything else without collapsing.

Teal
#5CCFCF

Signal color. Used for active states, accents, and anything that needs to say: this matters.

Coral
#F07178

Secondary accent — warmth without softness. Used for friction points and secondary highlight.

Ink
#f4f5f7

Primary text. Near-white with just enough warmth to breathe against the background.

Typography

Display / HeadingsPlayfair Display, Cormorant Garamond
The architecture of meaning
Body / Long-formCrimson Pro
Infrastructure is a kind of literature. Security protocols are a form of care.
UI / SansSpace Grotesk Variable
Signal / Threat model / Access control
Code / MonoMartian Mono, DM Mono
const cipher = 'gothic'; // locked doors, open poems

Principles

Legibility is a form of care. Every design decision that makes content harder to read is a failure of the system's relationship to the people it serves. WCAG 2.1 AA is a floor, not a ceiling.

Dark ground, precise signal. The obsidian background is not an aesthetic choice alone — it reduces eye fatigue for people doing technical reading at depth. Teal is reserved for things that actually need your attention.

All colors via CSS variables, never hardcoded. The system must be overridable by the person using it. Hardcoded hex values are a control problem as much as a maintenance problem.

Infrastructure and story share grammar. A well-structured incident report and a well-structured poem have the same bones: a clear frame, a sequence of events, and an honest accounting of consequence.