# Design Language for parallengine.com ## Aesthetics and Tone parallengine.com is an **isometric blueprint observatory** — a site built like the cutaway technical illustration on the inside cover of a 1970s engineering manual, redrawn for a parallel-compute engine. The name reads two ways at once: *parallel + engine* and *parallel + engine[ering]*, and the whole site lives in that double exposure — a machine made entirely of machines, every part of it running at the same time. The mood is **grounded-earthy meets futuristic-cutting-edge**: not the chrome-and-neon cliché of "parallel computing," but the warm, oiled, exploded-axonometric look of a real workshop drawing — Sabattier-toned ozalid prints, the smell of ammonia and pencil shavings, an architect's plan chest left half-open. Everything is drawn at a true 2:1 isometric angle (30°), as if the entire product is a single immense apparatus we are walking *around* rather than scrolling *through*. Nothing tilts toward the viewer in fake-3D perspective; the projection stays honest and parallel, because that is the joke and the thesis: parallel lines never meet, parallel work never waits. Tone of voice in copy: a senior field engineer who has actually built the thing, talking you through the cutaway with a mechanical pencil. Confident, precise, slightly dry, never breathless. No "revolutionary." No "unleash." Things "engage," "mesh," "spin up," "come on-load." ## Layout Motifs and Structure The site is one continuous **diagonal-sections** scroll — but the diagonal is not a decorative slash, it is the **isometric ground plane** itself. Imagine a single infinitely long workbench drawn in axonometric projection running from top-left to bottom-right of the viewport; every "section" is a different assembly bolted onto that bench, and scrolling pans the camera along it. Sections are joined by visible **load paths** — thin double-ruled lines (like a blueprint's center-line: long-dash / dot / long-dash) that thread out of one assembly and into the next, never breaking. - **Grid:** an isometric lattice, not a Cartesian one. The base unit is a 64px isometric "tile" (a rhombus 64px wide, 37px tall). Content blocks snap to this lattice — text columns sit *on* tiles, callout cards float one tile-height *above* the bench casting a hard-edged isometric shadow (offset exactly +24px x, +14px y, no blur, 18% ink). Real text for reading is set on a flat overlay plane that is *not* skewed (legibility wins), but it is framed and pinned by isometric hardware: corner brackets, rivet dots, a torn ozalid edge. - **Composition:** five assemblies on the bench, panned left-to-right as you scroll down — 1. **The Intake Manifold** (hero): the wordmark `parallengine` machined out of solid stock, sitting on the bench, with eight intake runners feeding into it, each runner labelled with a workload type. A `path-draw-svg` animation "cuts" the wordmark out of a billet on load. 2. **The Splitter Gearbox**: a single input shaft entering a housing; inside, an exploded view of bevel gears fanning the one shaft out into N parallel output shafts. Hover any output shaft and the whole train counter-rotates correctly (gears that mesh turn opposite ways — get this right, it is the soul of the page). 3. **The Lane Deck**: a flat isometric floor of numbered lanes, each lane a conveyor; little ingot-blocks of work travel down the lanes simultaneously, finishing at slightly different times — the deliberate, honest stagger of real parallel execution, not a fake synchronized march. 4. **The Reconciler**: all lanes converge into a single collector funnel; ingots drop in out of order and a `morph` animation re-sorts them into sequence as they land in the output tray. 5. **The Service Hatch** (footer): a hinged inspection panel swung open, the inside of the lid stencilled with the contact info, part numbers, and a torque spec, like the data plate riveted inside a real machine's access door. There is **no card-grid, no bento-box, no centered hero block, no stat-grid, no pricing table.** If a number needs to appear (e.g. "N lanes"), it appears as an engraved dial reading, not a big number in a box. ## Typography and Palette **Type stack — Google Fonts only.** - **Major Mono Display** — for the wordmark, all labels on the technical drawing (runner names, lane numbers, torque specs, the "DETAIL A" / "SECTION B–B" callouts), and every numeral on a dial or gauge. It is monospaced, slightly engineered-looking, and reads exactly like the lettering on an old Letraset technical-drawing sheet. Tracked +0.12em, uppercase, weight 400 only. This is the **mono** typographic backbone (94% common — used deliberately and idiomatically here, not as a default). - **Familjen Grotesk** — the humanist-grotesque workhorse for all running body copy, paragraph text, and the engineer's-narration captions. Chosen over Inter/Space Grotesk because its slightly mechanical `a` and squared terminals echo Swiss technical drafting standards (DIN 17 lineage) while still being warm at reading sizes. Weights 400 / 500 / 700. Set on the flat overlay plane only, never skewed. - **Fraunces** (variable, opsz on, slight `SOFT` and `WONK`) — used *only once*, very large, for a single hand-set epigraph at the top of the page: *"Many hands. One stroke."* Its old-style warmth against all that mono is the human thumbprint on the machine. **Palette — ozalid blueprint, warmed:** - `#F4EBD9` — **Ozalid Cream**: the paper. Dominant surface (~50% pixel area). Slightly uneven, faint diazo mottle. - `#1C2B2D` — **Drafting Ink**: near-black with a green-grey undertone, for all line work, lettering, and the engine's drawn outlines. The "pencil." - `#2E5E4E` — **Verdigris**: the patinated-bronze green of old machinery. Primary structural fill for gear bodies, housings, the manifold. - `#C24A1E` — **Lead Oxide Orange**: the priming-paint orange used to flag the *moving* / *active* part — the currently-hovered shaft, the in-flight ingot, the load-path highlight. High-energy accent, used sparingly (<8% area), the only saturated color. - `#8C9A8E` — **Faded Cyanotype**: a dusty sage-blue-grey for secondary linework, dimensions, hidden-detail dashes, and the hard isometric shadows. - `#E0D2B4` — **Toned Tracing**: a half-step darker than the cream, for the recessed planes of the isometric solids so the projection reads without heavy shading. Palette character: **warm + muted + earth-tones** (warm 98% / muted 37% — leaned into here as oiled-workshop warmth, *not* gradient-mesh warmth; there is essentially no gradient on this site, only flat fills and hard isometric shading steps). ## Imagery and Motifs Everything is **line-illustration** — specifically inline SVG technical drawing, hand-built, no photography anywhere. The motif vocabulary: - **The exploded axonometric**: the engine and its sub-assemblies are always drawn as if mid-disassembly, parts floated apart along their assembly axes with thin lead-lines (the long-dash/dot center-line style) showing where each piece came from. Gears, shafts, runners, conveyors, funnels. - **Working mechanism, not decoration**: gears that visibly mesh and turn the right way; conveyors that actually carry items; a funnel that actually receives them. The illustration *runs*. This is the one non-negotiable: if a part is drawn touching another part, it must move consistently with it. - **Blueprint furniture**: corner registration crosses, a North/scale rosette in one corner of the hero, dimension lines with arrowheads and gap-for-the-number, "DETAIL ⌀ / SCALE 2:1" callout bubbles on lead-lines, revision-cloud bumps around anything recently "engineered," a title-block strip along the very bottom edge with drawn-by / checked-by / sheet N-of-N fields filled with the site's real metadata. - **The ozalid texture**: a faint, very subtle `noise-texture` / grain-overlay tuned to look like diazo-print mottle and the ghost of a fold-line down one third of the page — barely there, never crunchy. - **Ingots of work**: the recurring "unit of computation" is a small drawn metal billet — a stubby isometric box with a chamfered top. They are minted at the manifold, fanned by the gearbox, ride the lanes, drop into the reconciler, get stamped in sequence. They are the only thing that travels the full length of the site, and they carry the orange when "in flight." ## Prompts for Implementation Build parallengine.com as **one long static HTML document** — no SPA, no router, no framework. Five `
` stacked vertically; total scroll ~560vh desktop, ~700vh mobile. The entire visual layer is **inline SVG drawn at a fixed 2:1 isometric projection** (use a shared `transform` recipe — for true isometric: `rotate(30) skewX(-30) scaleY(0.864)` applied per-face, or simpler, hand-author the rhombus coordinates on a 64×37 lattice). All animation is **scroll-triggered** + a few **hover** mechanisms; honor `prefers-reduced-motion` by freezing every mechanism in a clean assembled state. **Assembly-by-assembly:** 1. **Intake Manifold (hero).** On load: a `path-draw-svg` animation traces the outline of the `parallengine` wordmark as if a CNC tool is cutting it from a billet of Verdigris — the cut path glows Lead Oxide Orange where the "tool" currently is, then cools to Drafting Ink line + Toned Tracing fill once cut. Then eight intake runners draw themselves one by one (`stagger`, ~90ms apart) feeding into the manifold's plenum, each labelled in Major Mono Display. The Fraunces epigraph fades in above. A drawn scale-rosette spins once to true north in the corner. 2. **Splitter Gearbox.** Pinned for ~120vh while the input shaft drives in from the left. The gear train is real: author the gear meshes so `data-teeth` ratios drive `animationDuration`, and adjacent gears get opposite `animation-direction`. Idle state: the whole train turns slowly. **Hover** an output shaft → that shaft and its driving gear pulse Lead Oxide Orange and the *entire* train momentarily speeds up (a `spring`-eased rate change, not a jump), then settles. As scroll continues, more output shafts "engage" with a small `elastic` snap into mesh. 3. **Lane Deck.** Camera pans down onto the flat isometric conveyor floor. Ingots are minted at the top of each lane on scroll and travel down using `cubic-bezier` ease-outs with **intentionally different durations per lane** — parallel, not synchronized. Each lane number ticks on a tiny engraved dial via `counter-animate`. No progress bars. The honest, slightly-ragged finish order is the point — do not "fix" it. 4. **Reconciler.** Lanes funnel together; ingots drop into the collector out of order, each landing with a hard isometric `bounce`-less thunk (a 1-frame squash, no springy overshoot — these are metal). As they settle into the output tray, a `morph` reorders them left-to-right into sequence and a Major Mono Display stamp hits each one with its index. A single drawn "OUTPUT — IN ORDER" title-block field fills in. 5. **Service Hatch (footer).** A hinged inspection panel `path-draw`s itself and swings open on scroll (CSS `transform-origin` on the hinge edge, eased open). The inside of the lid is stencilled — contact email, "PART NO. parallengine.com", a torque spec joke ("TIGHTEN TO 42 N·m"), the drawn-by/checked-by/sheet fields populated from the site's real metadata. This is the only place "contact info" lives, and it lives as a riveted data plate. **Cursor / micro:** the cursor is a small drawn caliper-cross (`cursor-follow`, gentle `spring` lag); over any moving mechanism it picks up the Lead Oxide Orange. Hovering a labelled part summons a thin lead-line + "DETAIL" bubble (`path-draw-svg`) with one sentence of engineer's narration in Familjen Grotesk. Section transitions: the center-line load-path threading from one assembly to the next draws itself as you cross the boundary, so the whole engine reads as one connected machine. **Forbidden:** no CTA-stacked screens, no pricing blocks, no stat-grids, no testimonial cards, no big-number boxes, no gradient meshes, no glassmorphism, no fake one-point-perspective 3D, no parallax-by-translateY-on-everything. Numbers, if any, are engraved dial readings. ## Uniqueness Notes Distinct departures from the registry and from the seed's defaults: 1. **True parallel (axonometric) projection as the entire layout system** — not as a decorative "isometric-icons" garnish (the common 3% usage), but as the literal grid the whole page snaps to. Isometric here is *load-bearing*: parallel lines that never converge, for a parallel-compute engine. No registry design uses an isometric *lattice* as its layout substrate. 2. **The illustration is a working mechanism, not an illustration.** Gears mesh and rotate correctly, conveyors carry, the funnel receives, ingots travel the full page length. Most "tech" designs in the registry use circuit/abstract-tech motifs as static texture; this one is a functioning drawn machine where every contacting part moves consistently. 3. **Warm ozalid blueprint, not cold blueprint.** Blueprint aesthetics in the wild are cyan-on-navy and chilly; this is diazo-print *cream + drafting-ink + verdigris + lead-oxide-orange* — a warm oiled-workshop palette with flat fills and hard isometric shading steps, essentially zero gradient. Rare combination of warm/muted/earth-tones with a technical-drawing genre. 4. **Diagonal sections re-read as one continuous bench.** Instead of decorative diagonal slashes between sections, the diagonal *is* the isometric ground plane, and center-line load-paths physically connect each assembly to the next — the site is one machine, not a stack of panels. 5. **No CTA / pricing / stat-grid surfaces at all** — and the usual "metrics" are recast as engraved dial readings and a riveted data plate in a swing-open service hatch (the footer). Information lives as machine hardware. Chosen seed/style: **isometric technical docs** (`isometric` aesthetic — underused at 12%; `diagonal-sections` layout — 5%; `mono` + `humanist` typography used idiomatically; `line-illustration` imagery — 13%). Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (80%), photography (98%), card-grid (91%), centered (83%), full-bleed (88%), gradient (95%), warm-gradient-mesh, cursor-follow-as-only-idea, parallax-everything (91%), tilt-3d (29%) — and the pastoral-romantic / warm-inviting tonal default.