The cognitive overlay, in CSS terms

Six base tokens carry the whole interface. Everything else is derived by mixing or fading them.

Derived tokens are alpha fades of the base set:

--rail:       rgba(131, 195, 255, 0.55);  /* signal @ 55% — the 1px outline everywhere */
--grid-major: rgba(131, 195, 255, 0.11);  /* signal @ 11% — 64px grid lines */
--grid-minor: rgba(131, 195, 255, 0.05);  /* signal @ 5%  — 16px grid lines */
--muted-ink:  rgba(208, 208, 208, 0.50);  /* nav-ink @ 50% — footnotes, version tags */
--steel-rail: #B5CBE0;  /* color-mix(in srgb, var(--nav-ink) 65%, var(--signal)) */

Three working faces plus one reserve, each with one job:

The in-game size ladder, in px, top to bottom:

Every surface cuts its corners at 45°. There is no border-radius anywhere in the language. On the web the cut is a clip-path octagon:

clip-path: polygon(
  var(--c) 0,  100% 0,
  100% calc(100% - var(--c)),  calc(100% - var(--c)) 100%,
  0 100%,  0 var(--c)
);

The cut size is per surface class:

Around every cut runs a 1px rail (--rail, signal @ 55%). In-game, ChamferStyleBox strokes the whole octagon, diagonals included. A CSS border cannot: a single element's border is cut away by its own clip-path at the four diagonal segments. So the web version splits by construction. Panels close the octagon by nesting: a clipped .vframe carries the rail color as its background, and 1px of padding reveals it around the clipped .vpanel child. Buttons and chips stay single elements and leave their corners open. At a 6 to 8px cut on a 1px rail that gap is invisible; at panel scale it is not, which is why panels pay for the extra element.

Three layers, outside in:

1. The glow is a drop-shadow(0 0 7px …) at signal @ 40% on the frame, so the halo follows the chamfered silhouette instead of the element's rectangle. In the game this glow breathes via shader; the web version holds still.
2. The rail is the frame's own background, revealed as a 1px line by the frame's padding. It is --rail by default, --cassius under .vframe.cassius, and --signal when the frame is a link under the pointer.
3. The fill is flat --panel-base. The quiet pass removed the gradient, the top highlight line, and the panel scanlines from the game, and the site follows.

Panels sit on a signal-tinted grid substrate: 16px minor lines at 5%, and every fourth line (64px) major at 11%:

The language allows one decorative motion: a slow additive shimmer band in the signal tint, travelling top to bottom at roughly 20 seconds per pass and 10% alpha. It never strobes. Surfaces opt into it individually, and on this site only the landing hero uses it.

The secondary .vbtn (hover it) is a steel hairline over the grid tint. The primary .vbtn.go drops the rail entirely and fills with the accent, so the committed action is marked by fill instead of a brighter outline:

The resting rail is desaturated on purpose: mix(nav-ink, signal 35%). Against that steel, the cyan hover registers as a clear step up. Both buttons use a 7px cut with open corners, and both labels are sans; the quiet pass reserved mono for data, and a button label is chrome. Pages may adjust padding and font size for their own scale, as the landing hero does. Colors, rails, and geometry stay the component's.

.vbtn {
  border: 1px solid var(--steel-rail);
  color: var(--nav-ink);
  background: var(--grid-minor);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px),
                     calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.vbtn:hover { border-color: var(--signal); color: #fff; background: var(--grid-major); }
.vbtn.go    { border: none; background: var(--online); color: var(--bg-deep); font-weight: 600; }

Chips are the smallest surface and the only chrome set in mono, because a chip's content is data: a system name, a credit count, a comms tag. The recipe is a 6px cut (--chamfer-chip-sm), 12px caps at 2px letter-spacing, an accent rail at 90%, and the same accent mixed 10% into panel navy for the fill. Scanlines are omitted; at this size they read as noise. A chip makes one decision, its accent, chosen with the .online / .cassius modifiers under the voice rules above. Chips never mint their own colors.

The authoritative source is the game code: common/UiThemeTokens.cs (tokens, size ladder, state tables) and common/ChamferStyleBox.cs (the chamfered draw model). The Godot theme resource vindicator_theme.tres is an editor preview mirror, normalized from those tokens at startup. build_docs.cs generates the two stylesheets this page loads from that code, byte-identical to what the in-game state server serves, and vindicator.css adds layout only. When a page needs a chrome look the components cannot give, the knob grows in VindicatorWebStyle and re-vendors; the site does not fork recipes. This page used to keep its own panel styles and drifted a full design pass behind the game, which is why the rule exists.