Page title
Section title
Internal reference
The VoxShield
design system
Every component this website uses, in one place. New pages compose these tokens rather than restyling from scratch — that is what keeps ten pages looking like one product.
Typography
Two families, five roles
Lead paragraph, used once per page under the title.
Body copy. Line height 1.68, colour #a4a4a8 on black, which clears AA at this size.
Monospace for identifiers: LOW_CONFIDENCE, MIN_SNR_DB
Colour
Semantic, taken from the Console
The verdict families are the Console's own tokens, so a colour means the same thing in the product and on the site.
SAFE#16c89e
SUSPICIOUS#fbbf24
HIGH_RISK#f97373
LOW_CONFIDENCEdashed
ERRORneutral
LOW_CONFIDENCE never relies on hue alone. It carries a dashed 2px border and its own copy, so it survives a greyscale screenshot — a documented acceptance check in the Console.
Status chips
The vocabulary this project uses
A chip is never decorative. It states where something actually is.
Built
Implemented
Measured
Measured with a caveat
In progress
Specified
Planned
Heuristic
Known limitation
Not claimed
You're here
Annotated text
Twelve ways to mark a phrase
Hand-drawn emphasis, rendered as inline SVG and drawn once when the phrase scrolls into view. Used sparingly — at most one or two per screen.
wavy
underline
doubleUnderline
dottedUnderline
line
arrow
highlight
circle
box
bracket
strikethrough
crossOut
Markup: <span class="annot" data-annot="circle" data-annot-delay="0.2">text</span>. Colour helpers: annot--safe, annot--warn, annot--bad, annot--mark. Under prefers-reduced-motion the mark appears fully drawn, with no animation.
Controls
Buttons, cards and tables
Standard card
BuiltGlass surface, 20px radius, lifts 3px on hover with a brighter border.
Card linkFlat card
No blur. Used inside dense grids where a dozen glass panels would fight each other.
Muted card
PlannedReserved for things that do not exist yet, so unbuilt work reads as quieter.
| Column | Numeric | Meaning |
|---|---|---|
| Row label | 16.7 ms | Good — teal |
| Row label | 1.21 s | Caution — amber |
| Row label | Not claimed | Against us — red |
Diagrams
Circuit board
Nodes are HTML chips positioned over an SVG trace layer; animated connections carry a pulse. Dashed traces and chips mean specified-not-built, everywhere on the site.
Built
Gate
Planned
Raster renderer
ASCII & dither effect
A Canvas2D renderer that samples an image or video on a cell grid and redraws every cell as a glyph or shape. It pauses when off-screen and renders a single static frame when the viewer prefers reduced motion.
The config above is passed verbatim in data-config. Point data-src at any local image, or at a video already on the page with data-src="video:.bg-video" — a cross-origin source cannot be sampled by a canvas, and the component says so on itself rather than failing silently.
Render modes: characters, dither, mosaic, pixel, dots, cross, diamond, voxel, lego, mixed, lines, diagonal, braille, halfblocks, disco, hexdump, matrix, rings, hearts, stars, hexagons, triangles, bubbles, hatch, contour. Post effects: scanLines, vignette, bloom, chromatic, filmGrain, glitch, halftone, pixelate, filmDust. Animation styles: wave, pulse, shimmer, ripple, flicker.
Motion & responsiveness
Rules, not decoration
Motion
One easing curve, cubic-bezier(0.22, 1, 0.36, 1). Entrances are 0.6–0.85 s, hovers 0.2–0.3 s. Only transform, opacity and filter animate. Every animation has a prefers-reduced-motion path that shows the final state instead.
Breakpoints
900px collapses the docs sidebar and the bento grid; 720px swaps the nav pill for the sheet menu, relaxes display tracking and stacks tables into their own scroll container; 420px tightens the hero. Wide diagrams scroll horizontally rather than shrinking to illegibility.