Design System: Void Video

Overview

Creative North Star: "The Blacked-Out Theater"

This interface is designed for a room with the lights off. Not dark-as-a-style-choice — dark because the person using it is sitting in a dedicated cinema room with velvet walls and a projector, and any bright surface thrown onto that screen is a defect. The name Void Video refers to the absolute black those rooms chase, and the interface has to hold that same black rather than interrupt it.

Everything follows from that. Surfaces separate by a few points of luminance instead of by borders and shadows, because heavy separation would mean bright edges. There is effectively no shadow vocabulary — depth is tonal. The only element permitted to genuinely glow is the accent, drawn from the logo's accretion ring, and it earns that by marking what matters: the primary action, the active state, the live readout.

The voice is technical but not cold. The audience owns projectors, understands HDMI signal chains, and knows what tone mapping is — so the interface uses correct terminology without hedging, and reaches for a mono readout or a status dot where a softer product would use an illustration. It is precise and restrained by default, with instrument-grade readouts where real measurement is being reported.

Key Characteristics:

• Dark-only; there is no light theme and no appearance toggle
• Four tonal surface tiers spanning just 16 points of luminance
• Flat by construction — one shadow exists in the entire system
• Hairline 1px borders at 6% white as the primary separator
• Cyan-to-purple accretion spectrum as the sole chromatic range
• Mono type reserved strictly for labels, measurements, and identifiers

Colors

A near-black field with a single cyan-through-purple spectrum lifted from the logo's accretion ring.

Primary

• Accretion Cyan (#4fc3f7): The one color that glows. Primary buttons, links, active states, focus rings, live status, and every accent stroke in the canvas demonstrations. On the darkest surface it reaches 10.12:1 — it reads as light, not as decoration.
• Ring Light (#80dcff): Hover only. The accent brightening under the pointer, never a resting state.
• Photon White (#c0eeff): The innermost ring. Reserved for peak emphasis; effectively unused in UI chrome.

Secondary

• Event Purple (#7c4dff): The outer accretion ring. Strokes, fills, gradient terminations, and diagram accents. Not for text — 4.01:1 on the primary surface fails AA.
• Halo Purple (#7c68c0), Mid Purple (#5a48a0), Deep Purple (#2a1870): The spectrum's outer falloff, used in the logo mark and canvas atmospherics.

Tertiary

• Signal Gold (#f4a842) and Signal Green (#80e0a0): Semantic only. Gold marks a headline capability; green marks a corrected or healthy state. Never decorative.
• LED Green (#76ff03): Hardware-style live indicator, at the intensity of an actual panel LED.

Neutral

• Void Black (#04060a): The hero field and the color text sits on when reversed out of the accent. The deepest surface in the system.
• Room Black (#0c0e14): The default page field.
• Panel (#10121a): Cards and visual containers.
• Riser (#14161e): The one step up, for elements that must read as lifted without a shadow.
• Text ramp — #f0f2f8 headlines, #b0b8cc subheads, #8a90a4 body, #7a8098 mono captions.

Named Rules

The Never-White Rule. No surface is ever white or light. There is no light theme, and the appearance toggle is removed from the navigation rather than merely defaulted to dark. Pure #fff appears in exactly three places: the V in the logo, hero headline text, and diagram strokes.

The Spectrum Rule. The accretion range from cyan through purple is open for strokes, fills, borders, gradients, and atmospherics. It is not open for text: only cyan clears contrast at body sizes. Any purple carrying words is a bug.

The Four-Tier Rule. Every text color in the system clears 4.5:1 on every surface in the system — 17.24 / 9.71 / 6.07 / 4.93 on the primary field. A fifth, dimmer tier does not exist, because at this background darkness it cannot be made legible. Hierarchy below the fourth tier is carried by typeface and letterspacing, not by fading further.

Typography

Display / Body Font: DM Sans (with Helvetica Neue, sans-serif) Label / Mono Font: JetBrains Mono (monospace)

Character: DM Sans is geometric and slightly warm — it carries authority at heavy weights without the corporate neutrality of the defaults. JetBrains Mono supplies the instrument voice: measurements, states, and identifiers rendered the way test equipment renders them. The pairing reads as engineering documentation written by someone who cares how it looks.

Hierarchy

• Display (800, 48px, 1.12, -1px): Hero headline only. One per page.
• Headline (700, 32px, 1.3, -0.5px): Section titles.
• Title (700, 24px): Feature headings.
• Body (400, 15px, 1.75): Paragraph copy, held to roughly 540–620px measure.
• Label (500, 10–11px, +1 to +3px tracking, uppercase): Mono. Section kickers, feature tags, stat labels, hints, status readouts.

Named Rules

The Instrument Rule. JetBrains Mono is for labels, tags, captions, statistics, status readouts, and technical identifiers. Never body text, never headlines. It is always uppercase and always letterspaced. Mono here means measurement, not "this product is technical."

The Named-Face Rule. Never Inter, Roboto, Arial, or a system stack. The typeface is part of the identity, and the defaults are what every generated interface already looks like.

Layout

A single centered 960px column with 24px gutters carries the marketing surface; forms and account pages narrow to 440px (520px for profile). Sections breathe at 96px vertical padding, dropping to 72px where a hairline rule already separates them.

Feature presentations use a two-column 1fr 1fr grid at 40px gap, alternating which side holds the visual — text left, then visual left, then back. Supporting content uses a three-column grid at 32px gap; install steps use four columns at 14px.

Responsive behavior collapses in two steps. At 768px every multi-column grid drops to one or two columns, the display size falls from 48px to 32px, and alternating feature rows force the visual below the text so reading order survives. At 480px everything becomes a single column. Canvas demonstrations are fluid at every width — width: 100% over a fixed logical drawing size — so they never need a breakpoint of their own.

Interactive controls are never smaller than 44px in either axis. Where a control must stay visually compact — the demo mode pills, the aspect ratio row — the hit area is extended with a transparent ::after overlay rather than by inflating the pill.

Elevation & Depth

This system is flat. One shadow exists in the entire codebase, on the navigation dropdown, and it is there only because a floating menu genuinely leaves the page plane. Everything else conveys depth through tonal layering: four background tiers spanning #04060a to #14161e, separated by 1px hairline borders at 6% white.

This is not minimalism for its own sake. In a blacked-out room, a shadow is a bright gradient and a lifted card is a light source. Tonal layering is how you build hierarchy without emitting light.

Shadow Vocabulary

• Floating menu (box-shadow: 0 4px 16px rgba(0,0,0,0.15)): Overlay surfaces that leave the page plane. The only sanctioned shadow.

Named Rules

The Hairline Rule. Separation is a 1px border at rgba(255,255,255,0.06), warming to rgba(79,195,247,0.1) on accent containers and rgba(79,195,247,0.3) on hover. A border that needs to be thicker than 1px is a hierarchy problem, not a border problem.

The No-Lift Rule. Hover does not raise, scale, or shadow an element. It warms the border and shifts the background by a few percent. The one permitted transform is a 1px downward press on :active — the surface receiving pressure, not rising to meet it.

Shapes

Rounded rectangles throughout, on a scale that tracks element size: 6px on nav affordances, 8px on inputs, tags, and small controls, 10px on buttons, 12px on canvas demonstrations, 16px on visual containers, 20px on pills, and full circles on step numbers and status dots.

The recurring silhouette is a bordered dark rectangle holding a live rendering — the visual box. It appears wherever the product demonstrates rather than describes, and it is the closest thing the system has to a signature form.

Components

Buttons

• Shape: Softly rounded (10px), minimum 44px tall.
• Primary: Solid cyan with near-black label (#04060a) — reversed out rather than white on color, which is what carries it to 10.12:1. Padding 13px 30px.
• Hover / Focus: Background brightens to #80dcff; :active presses 1px down. Focus shows a 2px cyan outline at 3px offset.
• Secondary (ghost): 4% white fill, 10% white border, subhead-tier label. On hover the fill takes a cyan tint, the border warms to 30% cyan, and the label turns cyan.

Inputs

• Style: Page-black fill, 1px hairline border, 8px radius, 11px/14px padding at a 44px minimum height.
• Focus: Border shifts to accent cyan. No glow, no ring expansion.

Cards / Containers

• Corner Style: 16px on visual containers, 14px on step cards.
• Background: Panel #10121a for visual boxes; 2–3% white for step and stat cards, which lets the page field show through rather than introducing a new tone.
• Shadow Strategy: None. See Elevation & Depth.
• Border: 1px hairline, or border-acc where the card holds an interactive demonstration.
• Internal Padding: 12px on visual boxes, 24px/18px on step cards.

Pills & Tags

• Pills: Fully rounded (20px), 3% white fill, hairline border, mono caption label. Used for feature keywords.
• Feature tags: 8px radius, 10% tint of their own semantic color with a 20% border of the same — gold, green, or cyan. The tag color is the meaning.

Navigation

• Compact 56px bar. Mono is absent here; nav is DM Sans at 13–14px in the subhead tier, going to accent cyan on hover. The account trigger and dropdown items hold a 44px minimum height. Dark/light toggle is removed entirely.

Visual Box (signature)

The system's defining component: a #10121a panel with a cyan-tinted hairline border and 16px radius, holding a live <canvas> demonstration at device pixel ratio. Every one is operable by keyboard as well as pointer — the HDR comparison is a role="slider" driven by arrow keys, the geometry correction is a role="switch" toggled by Enter or Space. Status is reported inside the canvas as an instrument would: a colored dot and a mono uppercase label.

Do's and Don'ts

Do:

• Do keep every surface dark. --bg-deep or --bg-primary is the page field, always.
• Do convey depth with tonal layering and 1px hairlines, not shadows.
• Do reverse dark text out of the cyan accent (--bg-deep on --cyan) rather than setting white on it.
• Do reserve JetBrains Mono for labels, stats, states, and identifiers — uppercase and letterspaced.
• Do give every interactive element a 44px hit area, extending it with a transparent overlay when the visual must stay small.
• Do make demonstrations operable by keyboard, with a visible 2px cyan focus ring.
• Do hold text to the four defined tiers; all four clear AA on every surface.

Don't:

• Don't introduce a light theme, a white surface, or an appearance toggle.
• Don't set body or caption text in purple — only cyan clears contrast among the accents.
• Don't add shadows to cards, buttons, or panels. The dropdown is the sole exception.
• Don't raise or scale an element on hover; warm its border instead.
• Don't use gold or green decoratively — they carry semantic state.
• Don't set body copy in mono, or labels in anything else.
• Don't substitute Inter, Roboto, Arial, or a system font stack for DM Sans.
• Don't animate without honoring prefers-reduced-motion, or run an animation loop while its element is off-screen.