# Design Language for completengine.net ## Aesthetics and Tone completengine.net is the public face of a **Concurrent Event Simulation Engine**, but instead of presenting that engine as a polished SaaS product or as a tidy drafting-table schematic, this site stages it as **a derelict municipal substation that mysteriously refuses to die** -- a brutalist, concrete-poured, fluorescent-lit chamber, abandoned by its operators decades ago, in which thousands of simulated events nevertheless continue to clock through, hour after hour, year after year, with nobody watching. The viewer is the first person in a long time to find their way down the access stairwell, push open the iron door, and discover the racks still humming. The mood is **brutalist** and **mysterious-moody**, but specifically the post-Soviet / post-civil-defense brutalism of bunker control rooms: stamped concrete, raw rebar, riveted steel plate, peeling stenciled signage in a forgotten language, a single magenta fluorescent tube buzzing overhead, and -- everywhere -- the cool electric breath of computation that nobody is supervising any longer. The engine, in other words, has *outlived its operators*. It runs because it was wired to run, and the website is the act of stumbling into the room while it is still running. The tonal register is **edgy-rebellious** crossed with **scholarly-intellectual**, a deliberate refusal of the warm-gradient corporate dialect. There is no reassurance, no "Trusted by 10,000 teams," no friendly aqua splash. The page gives no comfort and asks for none. Instead it *documents*: terminals blink, panel lamps strobe, a klaxon-yellow hazard band runs above each section header, and concrete texture undergirds everything. The viewer is invited to *understand the machine on its own terms*, in its own preserved environment, the way one might wander Pripyat with a Geiger counter and a notebook. Crucially, completengine.net rejects every conversion-oriented instinct. There is no hero CTA, no pricing block, no testimonial carousel, no logo wall, no stat-grid claiming "10× faster." There is only the room, the racks, and the running engine. If the visitor learns something, that is the conversion event. ## Layout Motifs and Structure The governing structural metaphor is **a vertical descent through a six-floor decommissioned substation, ending at the still-running compute floor**. The site is one long downward scroll, treated as an architectural section drawing rendered at full screen. The `layout` register is a hybrid of **brutalist broken-grid** (4% in the corpus) plus **diagonal-sections** (14%) plus a **timeline-vertical** spine (19%, used here in an unusual way -- it tracks floor depth in meters below grade, not chronological time). **Floor plan (top-to-bottom scroll path):** - **0m / Surface — STREET LEVEL**: A locked iron door, photographed straight-on, occupies the entire first viewport (rendered as SVG concrete-wall vector art, not a raster image). Stenciled in faded paint: `BUREAU OF SIMULATED CAUSALITY · COMPLETE-ENGINE SUBSTATION 7 · ACCESS RESTRICTED`. The page offers no nav. The only interaction is a small magenta cursor-arrow that, when held over the door's keypad, reveals an animation of a six-digit code being entered (the digits are the visitor's session-id hash). The door swings open. The viewer descends. - **−4m / FLOOR I — RECEPTION & LOG ARCHIVE**: A long, low-ceilinged room rendered in 2-point perspective, walls of bush-hammered concrete, a steel filing rack lining the right wall holding spool tapes labelled `EVENT LOG / 1991-Q3` etc. Here the page introduces the engine's central abstraction (an "event") via floor signage rather than headings. The signage is brutalist-stenciled in a way that feels louder than any H1 ever could. - **−9m / FLOOR II — SCHEDULER GALLERY**: A double-height industrial hall, the page's centerpiece. Six concrete columns rise from floor to ceiling; each column is a "worker thread." Around each column, **paper tape** spirals from ceiling to floor like a punched-card reel, perforated with the events the worker is currently processing. When the visitor scrolls, the reels actually animate (CSS `transform: translateY` on a vertical SVG pattern), and the user can hear (visually -- via animated waveform glyphs, no audio) the tap-tap-tap of dispatch. - **−14m / FLOOR III — CHANNEL BUS**: A narrow, low corridor crossed by **eight horizontal pipes** (the inter-actor message channels). The pipes glow faintly magenta where messages currently travel. Hovering reveals each pipe's metadata stenciled directly onto its surface. This is where the site's prose density is highest -- the pipes are labeled with the engine's actual semantic primitives: `CHAN/0 · CAUSAL · BLOCKING`, `CHAN/3 · BROADCAST · LOSSY`. - **−19m / FLOOR IV — DEADLOCK MUSEUM**: A wider, gallery-like room presenting six framed "specimens" of historical deadlocks the engine is designed to detect: dining philosophers, livelock, priority inversion, ABA, etc. Each specimen is rendered as a **schematic engraving** in white-on-black, mounted on the concrete wall under a small stenciled label and a single overhead picture-light. This floor *is* the educational content; it teaches concurrency hazards via museum vitrines. - **−24m / FLOOR V — CAUSAL OBSERVATORY**: A circular room with a domed concrete ceiling, the only room in the site rendered in a slight fish-eye, where the **causal graph** of every event in the visitor's session is drawn live as a constellation projected on the ceiling. Edges are magenta, nodes are pale concrete-grey, and Lamport timestamps trail each node in a tabular monospace. - **−30m / FLOOR VI — COMPUTE CORE**: The deepest floor. A single long row of **8U server racks** (drawn in black-and-grey orthographic line work, cabinet doors swung open) along which red, magenta, and amber LEDs blink in patterns dictated by the engine's actual scheduling decisions. The visitor stands in the middle of the row. There is no exit at the bottom; the page simply ends with the racks still blinking and the cartouche `END OF DESCENT / ENGINE STILL RUNNING / TURN BACK WHEN READY`. **Structural rules:** - **Broken-grid, not card-grid**: 95% of the corpus uses card-grid; completengine.net uses *no equal-sized cards*. Information sits where it would sit in a real room: stenciled on a concrete wall, taped to a column, mounted in a vitrine, printed on a clipboard hanging off a door. Position carries semantic weight. - **Diagonal sections**: Floor-to-floor transitions are not horizontal; they tilt, mimicking the descent down a concrete stairwell. Each floor's viewport rotates 1.5° around a horizontal axis as the user scrolls between them. - **No navbar, no footer**: Navigation is the act of descent. There is no menu. There is, in the upper-left corner, a small **floor indicator** (`FLOOR III / −14m`) that updates as the user scrolls; clicking it does nothing. Wayfinding is done by the architecture itself. - **ma-negative-space at the brutalist register**: Each floor leaves vast vertical concrete walls empty. Empty wall is not wasted space -- it is *the room*. Filling every pixel would betray the metaphor. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Stenciled signage**: **"Stardos Stencil"** -- a literal stencil typeface used for floor signage, room labels, hazard bands, and the wordmark. Rendered at clamp(2.6rem, 7vw, 6.4rem) with `letter-spacing: 0.06em`. This typeface is essentially absent from the existing portfolio (no design uses a stencil display); it replaces the now-overused Space Grotesk / Bebas display-grotesque dialect. Used sparingly: at most one stencil block per floor. - **Body prose / wall-mounted plaques**: **"Archivo Narrow"** at weight 500 and 600, 15/24, set in **uppercase tracked at 0.04em** for plaques and warning text, and in standard case for the longer paragraphs that appear on clipboards and folder tabs. Archivo Narrow's industrial-sans character carries the bureau-of-public-works register. - **Technical annotations / channel labels / event ids**: **"VT323"** -- a CRT-terminal monospace at 14/18, used for any data the engine is *currently* emitting: live tick counters, channel labels, blinking LED captions, paper-tape annotations. VT323's flickery legibility is doing semantic work; it is the typeface of "this machine is still talking to you." - **Long-form scholarly prose / vitrine descriptions**: **"Crimson Pro"** -- a quietly authoritative serif at 17/28 used only on the Deadlock Museum floor, where the register shifts from "hazard signage" to "museum placard." This contrast (signage-stencil vs. museum-serif) is the single most important typographic choice on the site: it tells the visitor which mode they are in. No system fonts. No fallback-stack tricks. All four faces are loaded with `font-display: swap` and the FOUT is *welcome* -- a flicker of unstyled text fits the substation conceit. **Palette (strict 6-color system, zero gradients):** - `#1B1A18` -- **Cast Concrete (deep)**. The dominant background. A near-black with a faint umber undertone, suggesting concrete poured in 1971 and never repainted. Used as `background-color` for Floors II–VI. - `#3F3D38` -- **Cast Concrete (mid)**. Wall surfaces, column shafts, and the second-tier background fill. Hatched with a 1px noise texture (a tiled SVG of stippled dots) so it reads as *poured*, not flat. - `#A39E92` -- **Bone-White Stencil**. Body text, stenciled signage. Not pure white -- pure white would feel digital. Bone-white reads as paint applied to concrete decades ago. - `#FF2D9C` -- **Magenta Klaxon**. The accent color, used *only* for live, currently-active simulation elements: a pipe with a message in flight, a worker thread mid-dispatch, a node in the causal graph that is currently the head of the queue, and the cursor reticle. Magenta covers ≤4% of any given viewport at any time. It carries enormous semantic weight precisely because it is rare. - `#F0C300` -- **Hazard Yellow**. Used exclusively for the **stenciled hazard band** that runs above each floor heading (a 12px-tall yellow stripe with 45° black slashes). Also used for the floor-depth indicator in the upper-left. Never used in body text. Never used decoratively. - `#5B7A3C` -- **Oxidized Copper-Green**. Reserved for the *retired* state -- events that have completed and been logged are rendered in copper-green on the Floor I archive racks. Also tints the backs of the spool tapes. This is the only second chromatic color and it carries one specific meaning: "this event is finished." No gradients. No translucent fills. No glassmorphism. If a surface needs to be distinguished from another, it is done by a different concrete-noise texture or a hard 1px stenciled outline. This is a strict rejection of the 98% gradient saturation of the corpus and the 95% photography norm. ## Imagery and Motifs The site contains **zero photography**, **zero stock illustrations**, **zero 3D renders**, and **zero gradients**. Every visual is one of four kinds: (a) SVG architectural line-work, (b) procedurally-tiled concrete-noise texture, (c) animated CRT-glyph annotations, or (d) typographic signage rendered in Stardos Stencil. **Core visual motifs:** - **Concrete-noise texture**: A 256×256 tiled SVG stipple pattern, rendered at 0.6 opacity over every wall and floor surface. Two variants -- "fine" (for column shafts) and "coarse" (for floor slabs). Both are static -- they do not animate, because concrete does not move. Their unmoving presence is the foundation of the site's visual stillness. - **Stenciled signage**: Every heading, room label, and warning is rendered as if spray-painted through a brass stencil onto concrete. The `paint-fill` slightly bleeds over the letter edges (achieved with a 1.2px SVG `feMorphology` dilation followed by a 0.6px `feGaussianBlur`) so the text reads as physical paint rather than digital glyphs. - **The Hazard Band**: A 12px-tall horizontal band with 45° black-on-yellow slashes (`linear-gradient(45deg, #1B1A18 25%, #F0C300 25%, #F0C300 50%, #1B1A18 50%, #1B1A18 75%, #F0C300 75%)`) appears above every floor heading. This is the only patterned fill on the site, and its appearance is strictly semantic: "approach with caution; what follows is computationally hazardous." - **Punched paper tape**: The Scheduler Gallery floor is dominated by six vertical strips of SVG paper tape, each perforated with a procedurally-generated pattern of holes representing the events that worker thread is currently processing. The tape pattern updates as the visitor scrolls, scrolling vertically itself. Holes are 4px circles cut from a 24px-wide tape. This is a unique motif (no other site in the corpus uses paper-tape iconography). - **The Deadlock Vitrines**: Six framed schematic engravings, each depicting a classic concurrency hazard rendered as a Victorian-engineering illustration in pure white-on-black line work. Frames are SVG-drawn brushed-steel rectangles with rivet-headed corners. Picture-lights above each vitrine are rendered as small isosceles trapezoids of bone-white casting a faint cone-shaped highlight on the vitrine glass. - **CRT terminal panels**: At three points on the descent, a small green-on-black CRT panel appears mounted on the wall, displaying `top`-style live output from the engine: tick rate, queue depth, dispatch latency. The text uses VT323 with a subtle scanline overlay (a repeating SVG pattern of 2px-tall horizontal bands at 50% opacity) and a **CRT phosphor glow** (a soft blur on the green pixels only). One of the panels has a **scrambled-glitch** moment every ~9s where its text briefly garbles -- as if the cathode tube is dying. - **Server-rack LEDs**: On Floor VI, twenty-four 4×4px LEDs blink along the front of each rack. Their blink pattern is *not random* -- it is a faithful animation of the engine's actual scheduling decisions, computed from the visitor's scroll velocity. This is the only Floor where magenta and amber are used together. - **Hand-drawn arrows and circled callouts**: Specifications are linked to their referent by hand-drawn-style SVG arrows in bone-white ink, terminating in circled integers (① ② ③) drawn in the same stencil register. These callouts are everywhere on Floors II–IV. There are no mascots, no abstract blobs, no decorative gradients behind headings, no soft-shadowed cards, no rounded-corner panels. ## Prompts for Implementation The site is implemented as a single long vertical scroll mapped onto the architectural descent. Scroll position drives both the camera (which floor is visible, at what tilt) and the simulation (which workers are dispatching, which channels are firing). Animations target 60fps and are built on `requestAnimationFrame` reading off a single virtual clock. 1. **Opening (the iron door)**. On load, the browser displays the locked iron door (full viewport, SVG vector concrete + steel + stenciled paint). For 800ms, nothing happens. Then the magenta cursor-arrow appears wherever the user's mouse rests. If the user moves the cursor near the keypad, the keypad reveals six digits being entered procedurally (computed from a hash of `Date.now()`). The door unlocks, swings open over 1200ms via SVG `` rotating about its hinge, and the user is invited to scroll down the stairwell. 2. **Scroll as descent**. Scroll position maps linearly to a `depth_m` value. Each floor occupies ~600vh of scroll. The depth meter in the upper-left corner ticks up continuously (`−4.0m`, `−4.1m`, ...). At each whole-meter boundary an extremely faint typographic flicker passes across the screen -- a one-frame magenta tint -- as if a fluorescent tube above just re-fired. 3. **Floor-to-floor diagonal transition**. Between any two floors, the entire stage rotates 1.5° about a horizontal axis (`transform: rotateX(1.5deg)`) over a 600ms `cubic-bezier(.6, .04, .98, .335)` ease, then snaps back to 0° as the next floor settles. This is the *only* 3D transformation on the site; everywhere else is strict 2D. 4. **The Scheduler Gallery's paper tape**. Implement six vertical SVG `` elements, each filled with a distinct hole pattern (a non-repeating pseudo-random sequence seeded by floor index). On scroll, translate each pattern's `y` offset proportionally to scroll position. When a hole passes the level of the worker's "read-head" (a horizontal magenta line crossing the column at 60% viewport height), trigger a 120ms magenta pulse along the column shaft. This pulse is the only animation on the floor; it should feel mechanical, like a typewriter strike. 5. **The Channel Bus's pipes**. Eight horizontal pipes cross Floor III. Each pipe is an SVG `` with a thick (8px) bone-white stroke. When a "message" travels along a pipe, animate a magenta segment of `stroke-dasharray` from one end to the other at variable speed (200–800ms). Stagger pipe activations using a hash of scroll-y so they feel orchestrated, not synchronized. Hovering a pipe pauses its current message at the cursor position, with metadata typeset in VT323 directly above the cursor. 6. **The Deadlock Museum's vitrines**. Each of the six vitrine engravings is initially dim. As the visitor scrolls past it, the picture-light above it brightens (SVG `` opacity 0 → 0.7 over 400ms), illuminating the engraving. The visitor can hover any vitrine to read a longer Crimson Pro placard that fades in below the frame. The placards are the longest prose on the site -- treat them as actual museum text, scholarly and unhurried. 7. **The Causal Observatory's constellation**. Implement a force-directed graph over `` whose nodes are events from the user's actual scroll history, drawn as 4px bone-white dots, with edges in 1px magenta. The graph "lives" on the domed ceiling, which means it is rendered with a slight fish-eye distortion (achievable with an SVG `` driven by a radial gradient). Nodes drift slowly even when scroll is paused, settling into their force-directed equilibrium over ~12s. 8. **The Compute Core's LEDs**. Twenty-four LEDs per rack, eight racks, blinking on a schedule computed from a deterministic hash of `(floor_index, led_index, current_tick)`. LEDs come in three states: dark, amber-on (1px glow), magenta-on (2px glow + bloom). Magenta blinks are rare -- ≤2 per second across all racks -- and represent "an event just dispatched on this rack." The visitor stands between the racks; the LED field surrounds them. 9. **CRT panels and glitch**. Three terminal panels (one per Floor II, III, V), each 320×180px, embedded in the concrete wall. Each renders live `top`-style output in VT323 green-on-black with a 2px-band scanline overlay. Every ~9 seconds, randomly chosen, one panel briefly garbles (replace half its glyphs with `▒░▓` and shift its baseline by 2px for 180ms). This is the only "imperfection" on the site; it sells the conceit. 10. **No CTAs, no pricing, no logo wall, no testimonial carousel, no stat-grid, no signup form, no chat widget, no cookie banner styled as a CTA**. The site simply ends at the bottom of Floor VI with the cartouche `END OF DESCENT / ENGINE STILL RUNNING / TURN BACK WHEN READY` in bone-white Stardos Stencil over deep concrete. No "next steps," no email capture, nothing. 11. **Cursor as flashlight cone**. Replace the default cursor with a small (24px) magenta arrow on Floors I–V. On Floor IV (Deadlock Museum) and Floor VI (Compute Core), augment the cursor with a soft 220px-radius radial halo of bone-white at 6% opacity, simulating a torch beam in a low-light room. Surfaces under the halo become slightly more legible; surfaces outside it stay in deep shadow. This rewards exploration with information. 12. **Audio-shaped silence**. The site is silent. There is no audio track, no UI sound, no autoplay. But every animation timing is choreographed *as if* a soundtrack of low fluorescent buzz, intermittent fan whir, and distant relay clicks were playing. The eye should fill in the audio. ## Uniqueness Notes **Differentiators from the other 60+ designs in this portfolio:** 1. **Architectural descent as primary navigation metaphor**. Of all 68 designs, none stage a literal descent through a six-floor concrete substation. The closest analogs (timeline-vertical at 19%, immersive-scroll at 20%) treat scroll as time or revelation; here scroll is *physical descent through an abandoned building*. Floor depth in meters is the y-axis label, and the floor-to-floor transition is a 1.5° tilt mimicking a real stairwell. 2. **Brutalist-poured-concrete aesthetic with hazard-band stenciling**. Brutalism sits at 4% in the corpus and is almost always neon-grid digital-brutalist (sharp-edged, vibrant). completengine.net is *physical-architectural* brutalism -- bush-hammered concrete, riveted steel, stenciled paint -- with a hazard-yellow band as the only patterned fill. No other site uses this register. 3. **Strict semantic palette with zero gradients on a canvas dominated by texture, not color**. While 98% of the corpus uses gradients, this site uses six strictly-meaning-bound flat colors over a procedurally-textured concrete substrate. Color carries semantics (magenta = active, copper-green = retired, hazard-yellow = caution-band only); texture carries everything else. 4. **Paper-tape, vitrines, CRT panels, and server-rack LEDs as non-overlapping motif classes**. Each floor of the descent introduces a *different* motif class with a distinct visual vocabulary -- and those classes do not bleed into each other. The Scheduler Gallery is paper tape and only paper tape. The Deadlock Museum is vitrines and only vitrines. This per-floor motif discipline is unusual. 5. **CRT garble and stencil paint-bleed as deliberate "imperfection" effects**. The site uses two carefully calibrated imperfections: stenciled signage that bleeds over its letter edges (paint physics) and CRT panels that briefly garble every ~9 seconds (hardware decay). Most sites in the corpus aim for crisp digital cleanliness; completengine.net deliberately corrupts in service of its conceit. 6. **The engine has outlived its operators -- the site is a found object, not a sales surface**. No CTA, no pricing, no testimonials, no logo wall, no email capture, no chat widget. The entire conversion model is "you, the reader, descend into an abandoned room and learn what is still running there." Understanding is the only conversion event. This narrative stance is shared with very few other sites in the corpus. 7. **Stardos Stencil + Archivo Narrow + VT323 + Crimson Pro -- four typefaces, four narrative registers, zero overlap**. Each face is bound to one register: Stencil to signage, Narrow to plaques, VT323 to live machine output, Crimson Pro to museum scholarship. The visitor reads typeface like architectural signage, knowing instantly which mode the page is currently in. This level of role-bound typographic discipline is rare. 8. **The visitor's own scroll session is the data**. The Causal Observatory's constellation is drawn from the user's actual scroll history; the Compute Core's LEDs blink off the user's scroll velocity. Two visitors see two different ceilings and two different rack patterns. This is a self-referential, per-visit artifact rather than a static showcase. **Chosen seed/style**: `brutalist neon grids agency` (per `seeds.json`), reinterpreted as *physical-architectural* brutalism rather than digital-grid brutalism. The brutalist register sits at 4% in the corpus -- significantly underused -- and the physical-architectural variant of it is, to our reading, unrepresented. **Avoided patterns (from frequency analysis):** - `corporate` (92%): refused; this is a derelict substation, not a sales brochure. - `gradient` (98%): zero gradients anywhere. Texture and flat color do all the work. - `warm` palette (97%): refused in favor of cast-concrete grey, bone-white, magenta klaxon, hazard yellow, and oxidized copper-green. - `card-grid` (95%): replaced by per-floor architectural composition. No equal-sized tiled cards exist. - `centered` hero (89%): refused; the wordmark lives stenciled on the iron door at the top of the descent and is never re-centered. - `photography` (95%): zero photographs. All imagery is SVG line-work, procedural texture, or stenciled type. - `parallax` (57%) and `scroll-triggered fade-reveal` (94% / 17%): replaced by scroll-driven *architectural descent* with depth-meter ticking and per-floor motif activation. - `stat-grid`, `pricing-block`, `testimonial-carousel`, `logo-wall`, `CTA-heavy hero`: all refused. The site has no conversion surface.