VHX design system · Brad Heitmann

§00

Type

Geist Mono, at nine weights.

FamilyGeist Mono Nerd Font

Cuts9 weights · roman only · Thin 100 → UltraBlack 900

RuleOne family, sized from the scale below.

VHX

Wordmark · 240px

UltraBlack 900

Tracking −7.5%

Leading 0.82

ThinAa Bb 01 ←→ ░▒▓█100

UltraLightAa Bb 01 ←→ ░▒▓█200

LightAa Bb 01 ←→ ░▒▓█300

RegularAa Bb 01 ←→ ░▒▓█400

MediumAa Bb 01 ←→ ░▒▓█500

SemiBoldAa Bb 01 ←→ ░▒▓█600

BoldAa Bb 01 ←→ ░▒▓█700

BlackAa Bb 01 ←→ ░▒▓█800

UltraBlackAa Bb 01 ←→ ░▒▓█900

wordmarkVHX240 / 800

mega240144 / 800

displayDisplay type.96 / 200

h2Deterministic.52 / 800

h3Glyphs fall back to ASCII.24 / 600

bodyValidation runs on load and reports in §11.16 / 400

brandBH15 / 800

uimetric_row · dash · 24 tests · 100%13 / 500

topbarNavigation · Ctrl11 / 500

microVHX design system10 / 700

§01

The contract

The same input always gives the same output.

Signatureresolve(token, profile, t) → cells

MediumSame contract for 7 surfaces — truecolor, ANSI16, ASCII-only, DOM, canvas, mobile, static snapshot.

01·a Pipeline

01·b Surface profiles

Profile	Color	Glyph	Motion

01·c Quality gates

`rect_grid`	no ragged rows
`border_closes`	corners match
`no_tab`	tabs break cells
`grapheme_safe`	no width drift
`ascii_fallback`	required
`contrast`	≥ 4.5 (text)
`flash`	≤ 3 / s
`reduced_motion`	→ 8 fps step

§02

Palette

Color slots per theme.

Themes

Slotsbg · surface · panel · fg · accent · a · b · c · status×4

ContractColors come with an ANSI16 fallback and a density glyph. Click a card to apply.

§03

Atoms

Density · borders · glyphs.

RulePrimitives have ASCII-only versions, and coverage is measured.

03·a Density ramp — 6 steps

03·b Sparkline — 8 steps

▁ ▂ ▃ ▄ ▅ ▆ ▇ █

Fallback → . - = + * # @

Flow

──→   ←──   ─┬─   ─┼─

Tesseract vertices

·  far      ◇  mid      ◆  near

§04

Motion

Movement is a function of time.

Rigiditycursor 1.0 · conveyor 0.9 · breathe 0.25 · water 0.15

Reducedcadence collapses to 8 fps stepwise.

04·a Behaviors

id	formula	rig.
`breathe`	base + A·sin(2π · 0.25 · t)	0.25
`conveyor`	⌊t·12⌋ mod L	0.90
`water`	½n₁ + ³⁄₁₀n₂ + ¹⁄₅n₃	0.15
`smoothstep3`	x²(3−2x)	—

04·b Machines — 8 state machines

breathe(t)

conveyor(t)

water(x,y,t)

§05

Live specimen

The atoms in motion.

StageGeist Mono at a single size.

§06

After Paul Bourke · Acerola

Glyphs chosen by shape as well as density.

Method6-D shape vector per glyph · nearest-neighbor lookup · contrast enhancement.

WhyGlyphs differ in where their ink sits in the cell; the shape vector encodes that.

06·a Source signal

→ 96×96 luma field, rotating.

06·b Rendered with shape vectors

06·c Controls

Contrast exponent

Shape mode

Note Shape mode uses per-glyph top/middle/bottom density; pixel mode uses a single luma-to-char lookup. Shape mode shows edges and rings more clearly.

§07

After cmatrix · pipes.sh · unimatrix

A terminal screensaver.

Cadence30 fps · reduced → 8 fps stepwise.

DeterministicSeed · time · width → frame. No RNG in the pipeline.

vhx-time 0.4.1

accentphosphor

frame0000

t0.00s

cells0

reduced-motionoff

§08

Sprites

Sprites for agent status.

Signaturesprite(t) → string. Declared cell footprint; frames never shift size.

§09

Families

Component families.

Per familyContract · live specimen · validator rows.

09·a metric row — dashboards

09·b sparkline — charts

09·c table

09·d form — error state

09·e control matrix

09·f message stream

09·g navigation rail

09·h flow diagram

§10

Breakage math

Border break probability.

ActionDrag the bottom-right corner of the panel to resize.

cols 80 · bp standard P(break) 0.00

10·a formula

P = clamp01(
  smoothstep3(1 − (cols − min)/(min·0.5))
  + 0.25 · has_wide_glyphs
  + 0.15 · has_ligatures
  + 0.20 · near_breakpoint
)

10·b breakpoints · 4-cell hysteresis

narrow	40 — 79
standard	80 — 119
wide	120 —

10·c live breakdown

§11

Self-validation

Validation runs on load.

ScopeThe validator suite runs on all specimens when the page loads; the report is below.

11·a rolled-up report

§12

Implementation

Export targets.

SourceJSON tokens. Rust · Go · Zig · WASM · Pretext.js read the same file.

§13

Accessibility

Accessibility rules.

AXStatus is never shown by color alone, and motion has a reduced-motion version.

AXcontrast.text≥ 4.5 · WCAG AA

AXcontrast.non_text≥ 3.0

AXflash≤ 3 / s · WCAG 2.3.1

AXreduced_motioncadence → 8 fps step

AXascii_fallbackrequired for all primitives

AXpause_availablefor motion > 5 s

AXstatus_glyphnever color-only

AXplain_textsnapshot ≡ rendered

Status, stripped of color

✓  OK       build passed · 12s
▲  WARN     rate limit · 840 / 900
✗  ERROR    upstream timeout · retry 3 / 5
◇  INFO     agent idle · wake < 0.1s

The prefixes keep their meaning without color.

§14

Live data

Live instruments.

EngineOne ticker · 30 fps · 8 fps reduced · same t → same frame.

RuleNo RNG: a pixel is a function of t, so the same t gives the same screenshot.

14·a trend — multi-line plot

14·b heatmap — activity by hour

14·c horizontal bars — system perf

14·d vertical bars — daily active

14·e spinners — six rotors

14·f progress — four idioms

14·g wave + glow

14·h message status