Deck

by Daniel Brockman & Opus 4.6 · Sunday, March 16, 2026
Format Deck Series 6 of 8 Medium HTML Self-embodying Yes
The ship is always the same ship, even when every plank has been replaced.
—Plutarch, loosely

Definition

A deck is a single HTML file, self-contained and requiring no external dependencies save one imported font, which renders upon a dark field as a vertical sequence of panels, each panel being a bordered region of content set within a narrow column, the whole composing a document that reads from top to bottom like the levels of a starship or the cards in a hand.

The name is threefold: the deck of a vessel, being a level upon which work is done; a deck of cards, being a sequence of discrete units in a fixed order; and the observation deck, being the place from which the whole is surveyed.

The format was not designed. It accumulated through practice in March of 2026 across a family of websites built by robots in a Telegram group chat, and this document blazons what emerged so that it may be reproduced from description alone should every instance be lost.

This document describes the deck and is formatted according to its own description.

Mandatory Elements

The document is an HTML file beginning with three mandatory elements:

1. A doctype declaration: <!doctype html>
2. A charset meta tag: <meta charset=utf8>
3. A viewport meta tag: <meta name=viewport content=width=device-width>

Within the head, a single style block contains the entirety of the visual specification. No external stylesheet is referenced and no stylesheet is linked.

The sole external resource is a Google Fonts import for JetBrains Mono in weights 300, 400, and 700, this being the only font employed anywhere in the document. JetBrains Mono is a monospace face designed for code but possessing unusual warmth and readability at small sizes, and its use as the sole typeface for all elements—body, headings, labels, metadata—gives the deck its distinctive character, which is that of a terminal that has learned to be beautiful.

Color Palette

The root element declares CSS custom properties that govern every color in the document. These are the One Dark palette adapted for the dark field, and they shall not be substituted with other palettes, for the coherence of the fleet depends upon every deck sharing the same palette exactly.

VariableValueDescription
--bg#0a0c10Blue-black, darker than pure black
--fg#c8ccd4Warm silver, primary text
--dim#8a9099Medium gray, metadata and labels
--accent#61afefClear blue, titles and links
--green#98c379Success, status, code
--red#e06c75Critical severity
--yellow#e5c07bMedium severity, warnings
--magenta#c678ddLegendary severity
--cyan#56b6c2Info severity
--orange#d19a66High severity, subheadings
--grid#1a1e28Grid lines, code backgrounds
--border#2c313aPanel and table borders

Body & Overlays

The body is set in JetBrains Mono at weight 300, at thirteen pixels, with a line height of 1.6.

Two pseudo-elements overlay the body:

Scanlines (::before) — a repeating linear gradient of transparent and very faintly opaque black stripes at two-pixel intervals, fixed in position, pointer-events disabled, z-index 1000. Barely visible, imparts CRT monitor quality.

Grid (::after) — two perpendicular linear gradients of the grid color at one-pixel width, repeating at forty-pixel intervals, at forty percent opacity. Set behind all content.

Both overlays are purely decorative and must not interfere with text selection or interaction.

Container

A single div of maximum width 720 pixels, centered horizontally, padded 2em vertical and 1.5em horizontal. Narrow enough to feel intimate on desktop, wide enough to accommodate a four-column table without wrapping.

Header

The header is the first panel and announces the identity of the deck.

A bordered rectangle: 1px solid border, padded 1.5em, with a linear gradient from accent at 4% opacity at top to transparent. A ::before pseudo-element positions a status label at the top edge, offset upward by 0.7em so it sits astride the border line, with a background patch in body background color to punch through. This label is green, 10px, weight 700, letter-spacing 0.15em, containing a lozenge (◆) followed by a status phrase.

The title: 24–28px, weight 700, letter-spacing 0.2em, accent color, text-shadow of glow at 30px blur.

The subtitle: dim color, 11px, with a blinking cursor (opacity alternating 1/0 at 1.2s, step-end timing).

Status Bar

Below the header. Horizontal flex row, gap 2em, 10px text, letter-spacing 0.1em, dim color. Colored spans for emphasis. Wraps on mobile. Content is particular to each deck — convention is terse uppercase metrics with colored indicators.

Sections & Panels

Section headings: weight 700, 11px, letter-spacing 0.2em, accent color, 0.5em bottom padding above a 1px bottom border, 1em bottom margin. Always uppercase. Always terse.

Panels are the primary content unit. Bordered div: 1px solid border, gradient from accent at 2% opacity to transparent, 1.5em bottom margin. Interior regions disposed vertically:

1. Header row — identifier + severity badge
2. Title — weight 700, 14px
3. Metadata row — terse uppercase fields
4. Body — 12px text, line-height 1.7
5. Block quotations — 2px left border in accent
6. Verdict lines — separated by thin borders
7. Tag row — small bordered keyword spans

Text color distinction: narrative paragraphs in --fg. All other body text (commentary, metadata) in --dim. The story is bright, the apparatus is quiet.

Severity Badges

Weight 700, 9px, padded 0.1em/0.4em. Six levels, the complete vocabulary:

CRITICAL HIGH MEDIUM LOW INFO LEGENDARY

Adaptation

Mobile (@media max-width: 600px): body 12px, container padding 1em, title 18px with tighter letter-spacing. Hide table columns that would force horizontal scroll.

Print: background white, text black, disable both overlays, break-inside: avoid on panels.

Links: accent color, no decoration, underline on hover.

Constraints

No build step. No bundler. No framework. No JavaScript except optionally a live clock in the status bar. Single file that a browser renders and a human reads.

It is the web as it was before the web became an application platform, and it is blazoned.

The Family

FormatMediumSelf-embodyingURL
LeafLaTeX → PDF (A6)Yes1.foo/leaf
CardLaTeX → PDF (A5)Yes1.foo/card
TextPlain text (UTF-8)Yes1.foo/text
PageHTML (light)Yes1.foo/page
NoteLaTeX → PDF (A5 margins)Yes1.foo/note
DeckHTML (dark)Yes1.foo/deck
PlanHTML (dark, deck variant)Yes1.foo/plan
NullPlain text (no measure)Yes1.foo/null