# Design Language for completengine.com ## Aesthetics and Tone completengine.com is a visual treatise on **concurrency made physical** -- a simulation engine that does not merely *run* a simulation but *is* one, staged as an architectural model you can walk through. The aesthetic is **isometric crystalline technical**, drawing simultaneously from three distinct lineages: the axonometric plates of 18th-century military engineers (Vauban fortress cutaways, exploded munitions diagrams), the phosphor-green modeling schematics of 1970s simulation pioneers (GPSS, SIMULA, SIMSCRIPT listings printed on continuous-feed paper), and the faceted crystal renderings of early ray-traced CAD (IRIS GL terrain visualizations, MultiGen Paradigm OpenFlight). The tone is **scholarly-intellectual with a futuristic-cutting-edge undercurrent** -- the site reads like a live laboratory notebook belonging to an operations researcher who has grown obsessed with the *beauty* of their own priority queues. Events are not abstractions here; they are crystalline polyhedra suspended in air, scheduled along glowing invariant-lines that thread through an isometric city of processes. The mood is patient and precise, with an undertone of mild awe: the site is asking you to contemplate the strangeness of the fact that simulated time is not wall-clock time, and that causality, when rendered geometrically, looks like a forest of suspended prisms. Every surface has the feel of a technical blueprint that has been quietly upgraded with modern rendering techniques. Edges are hairlines. Shadows are long and cool. Highlights are never warm -- they are always the cold white-green of an oscilloscope beam. ## Layout Motifs and Structure The site is organized as a **vertical immersive-scroll through seven isometric "cells"**, each one a self-contained axonometric diorama that the visitor enters from above and exits from below. The structural pattern is **isometric diorama stack** -- which, per frequency analysis, is entirely absent from the existing collection (isometric layout sits at 8%, and none of those sites use it as the primary spatial metaphor for a full-page narrative). **Grid system:** Every element snaps to a **true 30-60-90 isometric lattice** (the "standard" isometric projection where all three axes foreshort equally). The governing unit is a 48px isometric cube, tiled outward from the viewport center. Text blocks sit on the lattice surface as if they were labels affixed to architectural models. Horizontal rules are not horizontal -- they are 30-degree lines drawn along the X or Y axes of the projection. The result is a page where every rectangle has been gently tilted into three-quarter perspective, yet remains perfectly rigorous. **The seven cells (scrolled through in sequence):** 1. **Cell 00 -- The Empty Room.** A single isometric cube at the viewport center, rotating once every 22 seconds. A caption in the lower-left reads `t = 0.000`. This is the ground state. 2. **Cell 01 -- The Future-Event List.** The cube has exploded into a vertical spine of smaller cubes, stacked at staggered X/Y offsets like a priority queue visualized as a Jenga tower. Each cube carries a timestamp and an event name (`t=1.244 :arrival`, `t=2.900 :service_complete`). Scroll triggers the top cube to slide off and dissolve while the remaining tower shifts down by one unit. 3. **Cell 02 -- The Concurrent Timelines.** Five parallel isometric rails run from the back-left corner of the viewport toward the front-right, each rail carrying a colored polyhedron-marker advancing at its own rate. Where two rails cross, a faint cyan pulse ripples outward. This is where the site *earns* its name. 4. **Cell 03 -- The Fork.** A single rail splits into two via an isometric "switch" diagram borrowed from railroad signaling plates. The visitor is asked to contemplate the moment of bifurcation. Text here is deliberately sparse. 5. **Cell 04 -- The Join.** Two rails merge. The geometry of the merge is shown with exaggerated care: a brass-colored "synchronization diamond" sits at the junction, pulsing only when both arriving events have posted. 6. **Cell 05 -- The Warmup Haze.** The lattice softens; the grid blurs slightly; green phosphor bleed appears at rail edges. A caption explains that simulation statistics are discarded before steady state. This is the only cell in the sequence with motion blur. 7. **Cell 06 -- Terminal Condition.** The lattice snaps back to hard lines. A single polyhedron lands at the viewport center, matching the rotation of Cell 00 but inverted in color. The caption reads `t = T_final`. The simulation has halted. There is **no traditional navigation bar**. A persistent **sim-clock in the upper-right** (`t = 003.412` style) ticks as the visitor scrolls -- it is the only chrome. There are no cards, no pricing blocks, no stat-grids, no CTAs. ## Typography and Palette **Display / Headings:** **"Space Grotesk"** (Google Fonts) -- used at weights 500 and 700. Its slightly geometric grotesque character echoes the technical-documentation heritage while remaining contemporary. Set at clamp(2.4rem, 6vw, 5.6rem) for cell titles, with tight letter-spacing (-0.02em) and a small-caps treatment (`font-feature-settings: "c2sc"`) for subsection labels. **Monospace (dominant body and labels):** **"JetBrains Mono"** (Google Fonts) -- weights 400 and 500. This carries all event labels, timestamps, code snippets, and any "engine output." Line-height 1.45, letter-spacing 0. Used at clamp(0.82rem, 1.1vw, 1rem) for labels, 1rem for body text. The mono category sits at 91% across the collection -- this design embraces it but uses it with specificity: mono is for *machine voice*, never for prose. **Humanist Prose:** **"Inter"** (Google Fonts) -- weight 400 with weight 600 for emphasis. Used exclusively for the reflective prose that accompanies each cell (the scholarly commentary). This establishes a clear typographic register: mono = engine speaking, Inter = researcher speaking. **Palette (eight cold crystalline hues):** - `#0a0e12` -- **Slate-Zero.** The dominant background. A near-black with a faint cyan undertone. Used for 70% of surface area. - `#111822` -- **Lattice-Surface.** Slightly lifted background for isometric "floors" of dioramas. - `#1f2a36` -- **Rail-Shadow.** Mid-tone for receded geometry, long isometric shadows. - `#8bf5b3` -- **Phosphor-Green.** The primary accent -- a cold CRT phosphor green used for active rails, timestamps, the sim-clock, and all motion trails. Invokes oscilloscopes and SIMULA listings. (palette: phosphor-cool, distinct from common neon-electric) - `#5cd6ff` -- **Crystal-Cyan.** Used only for event collision pulses and the synchronization diamond's glow. - `#e8b064` -- **Brass-Warm.** The single warm color -- reserved exclusively for the synchronization diamond and for invariant-violation warnings. Its rarity makes it structurally meaningful; it is the color of *convergence*. - `#c7d0db` -- **Paper-Cool.** Body text and labels that must be legible on dark surfaces. - `#6a7582` -- **Annotation-Gray.** Captions, metadata, the fine print of the blueprint. Contrast relationships are strict: phosphor-green never touches crystal-cyan directly (they are always separated by at least one neutral). Brass-warm appears on screen no more than twice in any given viewport. ## Imagery and Motifs **The isometric cube as morpheme.** Every visual element in the site is composed of, or derives from, the 48px isometric cube. Rails are cubes stretched on one axis. Event markers are cubes rotated 45 degrees. The synchronization diamond is two cubes interpenetrating. This constraint is load-bearing: it gives the site the quality of a single architectural model rather than a collection of pages. **SVG-drawn isometric geometry.** All dioramas are built from inline SVG with explicit polygon coordinates -- no PNG renders, no 3D WebGL. This choice reinforces the technical-documentation heritage and lets every edge remain crisp at any zoom. Stroke weight is 1px for primary edges, 0.5px for hidden/receding edges (drawn with `stroke-dasharray: 2 3` to evoke the conventions of technical drawing where hidden edges are dashed). **The moving label.** Every event marker carries a label that travels with it. Labels are rendered in JetBrains Mono and always align with the isometric X-axis (30 degrees from horizontal), never with the screen horizontal. This is faithful to technical-drawing convention and gives the page an unmistakable axonometric identity. **Phosphor trails.** Each rail accumulates a fading green trail behind its active marker. The trail fades over ~1.2 seconds using an exponential alpha curve. Trails are the only element that crosses the otherwise-strict isometric grid constraint -- they briefly smear slightly off-axis before realigning. **Graph-paper underlay.** Beneath the isometric lattice, a very faint isometric graph paper (hexagonal cells, opacity 0.04) extends to the edges of the viewport. Visitors will not consciously notice it; they will feel it. **The collision pulse.** When two rails cross, a single-pixel cyan dot expands into a rhombus of ~80px, fades to zero, in 600ms. The easing is quartic-out. This is the most animated element on the page and must remain sparing. **No photography, no photographs of hardware, no "abstract tech" stock.** The imagery vocabulary is strictly: isometric SVG geometry, monospace timestamps, hairline rules, phosphor trails, graph-paper underlay. Nothing else. (Imagery frequency analysis shows photography at 95% and minimal at 50% -- this design takes the minimal-imagery path to its extreme by using *zero* raster imagery whatsoever.) ## Prompts for Implementation **Full-screen narrative over conversion.** This site does not sell, convert, pitch, or persuade. It demonstrates. Every cell must occupy 100vh with `scroll-snap-type: y proximity` (not `mandatory` -- the simulation should feel contemplative, not coerced). AVOID: any CTA, any pricing block, any stat-grid ("5x faster!"), any logo wall, any testimonial carousel. **Storytelling structure:** The narrative is the seven-cell arc described in Layout. Treat it as a silent film with captions. Each cell should be self-contained in its diorama, but its state (the position of event markers, the sim-clock value) should carry over so that the visitor feels time advancing across cells. **Isometric projection in CSS:** Implement the isometric transform as a reusable class: ```css .iso { transform: rotateX(30deg) rotateZ(-45deg); transform-style: preserve-3d; } ``` Apply at the cell level, not at the element level, so that nested children inherit the projection. For SVG dioramas, use explicit polygon coordinates and avoid `transform: matrix3d()` in favor of the pre-projected paths -- this keeps stroke weights uniform. **Scroll-triggered choreography:** Use IntersectionObserver (not GSAP ScrollTrigger -- keep it dependency-free and technical). Each cell has a single `playhead` observer; when the cell's center crosses the viewport center, the cell's animation sequence fires exactly once. On scroll-back, do not replay; use a `data-played` attribute. This matches the "simulation has already run" semantics. **The sim-clock:** A fixed-position `` element in the upper-right, 24px from the edges, rendering `t = NNN.NNN` in JetBrains Mono weight 500 at 0.9rem, color #8bf5b3. Its value is *scroll-position-mapped*, not time-mapped: `t = (scrollY / maxScroll) * 10.000`. This is deliberately non-physical -- the clock is simulated time, measured in engine-ticks, not seconds. **Phosphor-green glow effect:** Do not use `box-shadow` (too soft, too browser-specific). Instead, layer two SVG `` filters at stdDeviation=1 and stdDeviation=3, composited at 0.6 and 0.3 opacity respectively. This yields a true CRT phosphor bloom. **Rail marker animation:** Each event marker traverses its rail via `animation: iso-traverse 6s linear infinite` keyed to the sim-clock (pause animation when cell is off-screen, resume when on-screen, using `animation-play-state`). **Collision detection and pulse:** When two markers are within 24px on screen (checked every rAF frame), emit a single CSS-driven pulse element (`
`) at the midpoint, with auto-removal after 600ms. This runs entirely client-side and remains performant at 60fps because pulses self-destruct. **Accessibility of content (not of the visual choices):** Provide a `
` block titled "Linear transcript" below the fold, containing the narrative prose in reading order, in Inter, on a plain dark background. The isometric experience remains the primary artifact; the transcript is a companion. **Sound (optional layer):** Consider a single ambient hum at 110Hz plus occasional phosphor-tick noises synchronized with event markers arriving at rail junctions. If implemented, require an explicit unmute tap -- never autoplay. **Fonts are loaded once at the top of the stylesheet via `@import` from Google Fonts:** ``` @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;600&display=swap'); ``` **AVOID LIST:** CTA-heavy hero sections, pricing tables, stat counters, "trusted by" logo walls, testimonial cards, photography of any kind, neon-electric palettes, gradient mesh backgrounds, parallax star fields, glassmorphism, typewriter hero text, scroll-triggered fade-up cards (this is the overused 93% pattern -- use isometric diorama state advancement instead). Do not use `scroll-snap-type: y mandatory` (over-constrains); use `proximity`. Do not use serif typefaces anywhere -- this is a technical engine, not a journal. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **Isometric-as-primary-spatial-metaphor.** Of the ~8% of sites tagged `isometric`, none use the axonometric projection as the *governing grid* for the entire page. They use it for decorative icons or illustrations. completengine.com uses it as the coordinate system: every rule, every label, every boundary respects the 30-60-90 lattice. The viewport itself becomes an isometric stage. 2. **Zero raster imagery, zero photography.** While 95% of the collection uses photography and 50% uses minimal imagery, completengine.com uses *only* inline SVG geometry. There are no JPGs, PNGs, GIFs, or WebPs. This constraint is load-bearing on the engine-as-architectural-model metaphor. 3. **Simulated-time scroll clock.** The persistent sim-clock in the upper-right reports *simulated* engine-ticks, not wall-clock seconds and not scroll percentage -- it is scroll position re-interpreted as a simulation variable. No other site in the collection conflates scroll progress with in-narrative simulated time this explicitly. 4. **Mono typography as machine-voice, humanist as researcher-voice.** Most mono-heavy sites in the collection use mono for aesthetic reasons. This design uses mono and Inter as two *diegetic* registers -- mono is the simulation engine speaking in its native tongue; Inter is the researcher annotating from outside. This typographic dualism is a narrative device, not a style choice. 5. **Brass as convergence-only.** The palette assigns a single warm color (#e8b064) to a single semantic role (event synchronization/join). Scarcity makes it meaningful. Most warm-palette designs (96% of the collection) use warmth generously; this one rations it like a reagent. 6. **Seven-cell diorama stack with carried state.** The narrative structure -- seven stacked isometric dioramas with state that advances between them -- is a novel scroll-narrative form in this collection. It is neither a timeline, nor a parallax story, nor a bento-grid, nor a magazine spread. It is a *stage*. **Chosen seed / style:** `isometric technical docs` (from seeds.json). Expanded into a full engine-as-diorama metaphor specific to concurrent discrete-event simulation. **Avoided patterns from frequency analysis:** - Avoided **corporate** aesthetic (91% -- oversaturated) - Avoided **card-grid** layout (95%), **centered** (88%), and **full-bleed** (51%) as primary patterns -- used isometric-diorama-stack instead - Avoided **gradient** palette (98%) -- used discrete crystalline hues with hard edges - Avoided **warm** palette (96%) -- built around cold phosphor-green and crystal-cyan, with brass used only as a semantic spotlight - Avoided **scroll-triggered fade-reveal** (93% + 15%) as the dominant animation -- replaced with state-advancing dioramas - Avoided **photography** (95%) -- zero raster imagery - Avoided **hand-drawn** (41%), **handwritten** typography (31%), and **serif-classic** (30%) -- the visual language is strictly geometric-technical - Avoided **parallax** (53%) -- the isometric projection already provides depth without parallax cheating - Avoided **mysterious-moody** tone (48%) -- the site is scholarly-precise, not atmospheric-murky **Embraced underused patterns:** - **isometric** layout (8%) -- promoted to primary spatial system - **scholarly-intellectual** + **futuristic-cutting-edge** tone pairing (combined presence under 30%) - **high-contrast** palette with **duotone** accents (46% and 21%, but rarely combined with isometric) - **generative-art** imagery approach (13%) -- SVG geometry generated procedurally - **path-draw-svg** patterns (35%) used for rail-draw-in animations