Style Guide

HUD / instrument-panel design is the screen-graphics language of films like Oblivion, The Martian, and Iron Man: instrument readouts, dials, tick marks, mono type on black. AI/dev-tool brands (Linear most visibly, also Vercel, Raycast-adjacent work) fused it with classic technical illustration — exploded axonometric drawings of lenses and engines — to say “this software is precision hardware”. The result is cinematic: shallow depth of field, film grain, a single bright element in a dark frame, like a product photographed in a black studio.

Family A anatomy — orbital process ring

From outermost to innermost layer:

• Tick corona: 100–180 radial ticks just outside or inside the ring line, 14–30px long, 1–1.5px wide. Opacity varies with depth. This is the signature texture — without it the ring is just a circle.
• Ring line: 1–1.5px, ink at ~65% near / ~20% far. Sometimes a second concentric ring at 0.6× radius, much fainter, carrying its own sparse dot markers.
• Progress arc: one bright glowing segment, 30–70° of sweep, marking “where the process is now”. Its leading end meets the active node.
• Nodes: 3–7 stage markers on the ring (see recipes §3). Exactly one is active/glowing.
• Labels: primary = stage names at nodes, horizontal. Secondary = category names (“LOOP TRIGGER”, “BUG TRIAGE”) rotated along the ring’s inside, dimmer, wider tracking. Far-side labels get the DOF blur.
• Interior dot field (optional): a sparse grid of 1px dots suggesting a data surface inside the ring, ≤15% opacity.
• Atmosphere: grain over everything; optional faint light shaft crossing the ellipse; vignette toward corners.

Composition: the ring bleeds off at least one edge of the frame at larger sizes — cropping it is what makes it feel photographed rather than diagrammed. Put the active node + arc in the upper third when the diagram accompanies copy. Multiple rings can nest/offset to suggest a system of loops (keep secondary rings far dimmer).

Family B anatomy — cel-shaded machinery

• Subject: invented-but-plausible hardware. Map the product concept to a mechanism: pipeline → turbine stages; model/agent → lens assembly (input glass → processing barrel → output mount); infra → engine block.
• Values: ground #1F1D1B; three steels (see tokens); rim #F6D9BC; red accents. Nothing else. The shadow side of the object merges into the ground — silhouette dissolving into black is desirable.
• Rim light: the single most identifying feature. Thin peach slivers along lit edges, covering maybe 2–5% of the object’s area. It should look like one softbox top-left.
• Red accents: a dashed tick ring near the “lens” opening, calibration marks on a ruler strip, at most one hot-red active mark. Red never fills a large shape.
• Props: a ruler/tick-strip slider floating in a lower corner grounds the scene as an instrument panel. Small mono labels with hairline leaders (“STAGE 02”, “INTAKE”) are optional; keep ≤4 per scene.

Composition: object on a strong diagonal (30–45°), centered mass but asymmetric detail. Exploded views read best moving from lower-left (smallest part) to upper-right (housing), gaps widening along the axis. Leave 20%+ pure ground on at least two sides.

Family C anatomy — holographic mesh scene

The third reference set (phosphor-green wireframe donuts over dashboard decks) composes three layers:

• The mesh object: an extruded donut/pie (or dial, surface, bar volume) hovering above the deck, tilted x≈55–65° with a small z spin. Structural edges bright with bloom; interior grid (radial spokes, concentric rings, wall lines) at ~30% — the two-level line hierarchy is what makes it read as engineered mesh rather than clip-art wireframe. Fill mode sets the mood: wire = pure hologram, hybrid = translucent dark surfaces (the reference look), cel = solid machined object (family B shading — the ember pie-chart reference).
• Callout ring: 3–6 elbow leaders labeling segments (recipes §11), distributed around the object, never crossing it.
• The deck (optional): a dashboard panel lying in perspective below the object — rounded-rect panels sharing the object’s rotation (rotXYZ the panel corners), each holding one micro-visual: big-number stat + delta, tiny line chart, dotted-world-map, mini bars, % dial ring, labeled hairline bars. Everything themed with the scene hue; panel titles 10–11px mono uppercase. A particle stream (dots along converging curves, brightening toward the sink) can connect object to deck — opacity-varied 1–1.5px dots, never solid lines.

Monochrome hue discipline (SKILL.md themes) applies to the whole scene: deck text, chart bars, map dots, and particles all carry the theme hue.

Choosing a family

• Process, lifecycle, loop, pipeline stages, “how the agent works” → ring.
• Product/system as an object, “under the hood”, architecture hero, brand illustration → machinery.
• Dashboard/UI component (progress, scrubber, gauge, stepper) → ruler strip or a face-on dial (ring with tilt: 0, cropped).
• Proportions/composition data (share-of, breakdown, segments) or an “analytics as hologram” hero → mesh object (donut/pie), 3D for heroes, flat 2D (depth: 0, straight-on) for in-product graphics.
• When several could work: rings explain processes, meshes explain data, machinery impresses. Landing-page hero → machinery or a mesh scene with deck; docs/feature section → ring.

Motion specs

One continuous motion + one pulse per scene, maximum. Everything inside @media (prefers-reduced-motion: no-preference).

Embedding

The style is dark-only by design. In light-mode pages, keep the graphic on its own --industrial-ground panel with a 12–16px radius; don’t invert it. For React, render the generated SVG inline (filters and textPath survive; they often break in <img> on older Safari when referenced cross-document). Set role="img" and an aria-label describing the process — the labels inside are decorative-scale and screen readers should get the summary instead.