Dreambase Industrial Schematics

Industrial Schematics — Cinematic Technical Diagrams

The style: sci-fi HUD instrument graphics fused with exploded technical illustration. It treats a software product like precision hardware — a lens assembly, a turbine, a control dial — photographed in a dark room. Popularized by Linear, Vercel, and similar AI/dev-tool sites. Everything here is buildable as SVG/HTML/CSS (no raster tools needed), so output works in artifacts, landing pages, and React components.

The three families

A. Orbital process rings — a circular process (lifecycle, agent loop, pipeline) drawn as a tilted ring viewed in perspective: dense radial tick marks, a thin ring line, glowing node dots at stage positions, one bright “progress” arc, uppercase monospace labels. Strictly monochrome white-on-black; depth is conveyed by dimming + blurring the far side.

B. Cel-shaded machinery — the product/system as flat-vector hardware (stacked cylinders, knurled rings, housings), optionally exploded along one axis. 3–4 flat gray values, zero gradients, a single warm rim-light color on lit edges only, and a sparse muted-red accent (tick rings, calibration marks).

C. Holographic mesh objects — data objects (extruded donut/pie charts, dials, surfaces) drawn as 2D or 3D wireframe meshes, viewed from any x/y/z rotation: structural edges bright, interior grid dim, with a phosphor bloom. Fills are a choice per scene: wire (fully transparent — pure hologram), hybrid (dark translucent fills under the mesh — you can just see through), or cel (opaque flat-shaded faces with rim light — family B’s shading applied to a data object). Often composed with elbow callout leaders and a perspective dashboard deck of micro-panels below.

Shared vocabulary across all three: radial/linear tick marks, ruler-strip sliders, node markers (glowing dot + trailing open circle), hairline and elbow leaders, film grain, and monospace micro-typography.

Design tokens

Palette (dark-only — this style does not have a light mode; when embedding in a light page, keep the graphic on its own dark panel):

Monochromatic hue themes

A scene commits to one hue family and derives every color from it by varying only lightness/saturation — lines, glow, fills, labels, and even the background all carry the same hue. Three named themes cover the reference material; any brand hue can be substituted using the derivation formula in references/recipes.md:

Swapping hue (green → cyan → amber) is legitimate; mixing hues in one scene is not — the ember rim + red accents count as a single “warm neutral” family and stay out of phosphor/mono scenes.

Typography: monospace only (ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace), UPPERCASE, letter-spacing 0.2em–0.4em, sizes 10–13px. Two-level hierarchy: primary label in --industrial-ink, secondary in --industrial-ink-dim with wider tracking. No sentence case, no bold, no text blocks — labels are 1–4 words. Density comes from repeating tiny elements (ticks, dots), never from text.

Hard rules (why they matter)

• Flat values only on machinery — the cel-shaded look dies the moment a gradient appears. Model form with 3–4 flat fills; the ground color itself is the shadow value.
• One light source — rim highlights all fall on the same side (top-left by default). A sliver of --industrial-rim on a shadow-side edge breaks the illusion instantly.
• One hue per scene — monochromatic discipline is what separates instrumentation from decoration. Rings stay in mono; machinery stays in ember; meshes pick one theme. Never mix hue families in a scene.
• Perspective is a free parameter, not a default — meshes and rings can be viewed straight-on (2D dial), classically tilted (x≈60°), or from any x/y/z rotation. Pick the camera for the job: straight-on for in-product components, three-quarter tilt for hero scenes. Whatever the rotation, depth cues (near bright/sharp, far dim/blurred) must agree with it.
• Glow is earned — at most one bright arc and the active node(s) glow. If everything glows, nothing reads as “live”.
• Depth cues, not 3D engines — perspective is faked with ellipse math (squash + rotate), far-side dimming, and a blur pass. That keeps output as portable SVG.

Building it

Read references/recipes.md before drawing — it has the projection math, SVG filter snippets (glow, grain, depth-of-field), the node-marker anatomy, and step-by-step construction for cel-shaded cylinders, exploded views, and ruler strips. references/style-guide.md holds the full anatomy breakdown of each family plus composition and motion specs.

For ring diagrams and ruler strips, generate the SVG scaffold with the bundled script instead of hand-computing tick positions:

# Orbital ring from a JSON config (see --help for all options)
node scripts/industrial-ring.mjs ring config.json -o ring.svg

# Tick-strip ruler/slider
node scripts/industrial-ring.mjs ruler '{"count":64,"progress":0.3}' -o ruler.svg

# Holographic 2D/3D mesh donut/pie — free x/y/z rotation, themed,
# fill: wire | hybrid | cel (see --help for the full config)
node scripts/industrial-mesh.mjs donut '{
  "theme":"phosphor", "fill":"hybrid", "rotate":{"x":62,"y":0,"z":-14},
  "segments":[{"share":0.3,"label":"MCP Tools"},{"share":0.7,"label":"Skills"}]
}' -o mesh.svg

industrial-mesh.mjs handles the whole 3D problem — Euler rotation, perspective projection, painter-sorted faces, backface culling (cel), depth-based line opacity, callout leaders, and theme derivation from any hue. depth: 0 gives a flat 2D mesh; innerR: 0 gives a pie; perspective: 0 gives orthographic. Ring diagrams can be themed too: pass "ink": "#57DE8D" (or any theme’s line color) to industrial-ring.mjs.

The script emits clean, editable SVG — treat its output as the scaffold, then hand-tune labels, arc placement, and composition. Machinery illustrations are drawn by hand (no script can art-direct them); follow the cylinder recipe and keep a written light-direction note while you work.

Motion (optional, CSS-only)

Animate sparingly — one continuous motion plus one pulse is the ceiling: slow ring rotation (60–120s linear infinite on the ring group), progress arc sweep via stroke-dashoffset, active-node pulse (opacity 0.6→1, 2–3s), typewriter reveal on a primary label. Wrap all of it in @media (prefers-reduced-motion: no-preference).

Quality check before shipping

1. Squint test: the image should read as a single bright focal point (arc or active node / rim-lit edge) against near-black — not a busy diagram.
2. Labels: all uppercase mono, tracked, ≤4 words, two brightness levels.
3. Machinery: count the fill values (≤4 grays + rim + accent), verify one light direction, zero gradients/strokes.
4. Ring: far side dimmer and blurrier than near side; ticks pass through depth-based opacity.
5. Grain/vignette present but subtle (grain alpha ≤ 0.07).
6. Mesh: one hue only (check fills AND labels); structural edges clearly brighter than interior grid; if cel-filled, faces are flat values with rim on lit edges only; if transparent, no fills fight the mesh.