# Design Language for concengine.net ## Aesthetics and Tone concengine.net is conceived as **a surreal dream-cabinet of concurrent events** -- a Concurrent Event Simulation Engine reimagined not as a piece of infrastructure but as a **somnambulist's laboratory** where many possible "nows" coexist, contradict, and quietly reconcile while the visitor watches. The engine does not "process events"; it **dreams them in parallel**, then files the dreams into chronological drawers when it wakes. The site is the engine's open dream journal, mid-page, ink still drying. The visual register is **surreal-editorial dreamscape** -- an oneiric collage tradition descended from Max Ernst's frottage plates, Leonora Carrington's ink miniatures, the marbled endpapers of 1830s natural-philosophy treatises, the doubled-exposure photogrammes of the Bauhaus light-lab, and the floor-plan reveries of Aldo Rossi. Crucially this is **not** the cyber-surreal of vaporwave or seapunk; there are no chrome dolphins, no Roman busts, no checkerboard floors. The surreal is **library-quiet**: melting timetables, doors that open into different rooms depending on when you read them, marginalia that slowly write themselves while you look away, parallel hand-drawn clocks whose hands disagree by a few seconds and never settle the matter. The mood is **dreamy-ethereal crossed with scholarly-intellectual**. The voice on the page is the patient, slightly amused voice of an archivist who has spent too long among contradictory documents and has stopped being surprised by them. Sentences begin in one tense and end in another. A footnote refers to a footnote that has not been written yet. A diagram of an event lists three causes, two of which are themselves the diagram. The engine is described in the language of someone explaining a recurring dream to a polite but skeptical librarian. There is **no neon, no glassmorphism, no gradient hero, no dashboard chrome, no terminal-green, no SaaS pitch**. The page does not feel like software; it feels like the loose contents of a wooden cabinet found in a closed wing of a small university library, where someone has been quietly studying time for forty years. ## Layout Motifs and Structure The governing structural metaphor is **the dream-cabinet** -- a wall of shallow drawers, each drawer a "moment," each moment containing several mutually inconsistent witnesses. The visitor opens drawers by scrolling; opened drawers stay open; the wall, examined from the side, becomes a strange parallax stack of overlapping translucent vellums. **Primary spatial spine: the Vellum Stack.** The page is composed of **layered translucent leaves** (semantic `
` elements, each visually a 78% opaque cream sheet with a 1px ink rule on the bottom edge) that overlap by 32-80px at their seams. Each leaf is a **concurrent moment** in the engine's dream. Leaves are rotated by tiny random amounts (-1.4deg to +1.6deg, deterministic per leaf id), so the stack reads as hand-laid sheets on a wide library table rather than as digital cards. There is no card-grid. The leaves are wider than the viewport and bleed off at the edges, the way a folio sheet would on a small desk. **Asymmetric, spacious composition with deliberate ma negative space.** Each leaf reserves 38-52% of its area as breathing void -- pale paper, untouched. Content is placed in **off-center clusters**, never centered, never in a grid. A paragraph might sit in the upper-third-left of a leaf, with its associated diagram drawn into the lower-right-far margin, joined by a single hand-drawn arc rule. The visual rhythm comes from the relationship between cluster and emptiness, not from grid alignment. **The Doubled-Page motif.** At three points in the document, a leaf is **doubled** -- the same leaf appears twice in the stack, vertically separated by ~280px, each instance showing a slightly different version of the same text (different wording, different timestamp, different conclusion). The two leaves are connected by a thin silver thread (a 1px stroke-dasharray SVG path with a slight breathing animation). This is the visual representation of a **race condition**: the same moment, witnessed twice, never quite reconciling. The visitor reads both and is told, in marginalia, "either is true; both are filed; the engine does not insist." **The Drawer Index running down the left.** Pinned to the left side of the viewport (40px from the page edge, vertically centered), a slim **drawer index** lists 14 short labels in a small italic serif: *the bell·the wager·the missed train·the rewritten letter·the parallel kettles·the borrowed name·the equinoctial lamp·the disagreeing clocks·the witness who arrived first·...* Each label corresponds to a leaf. As the visitor scrolls past a leaf, its label in the drawer index becomes underlined with a hand-drawn pen stroke that draws itself in 320ms. Once underlined, it stays underlined. The index becomes a **completed reading-trace** -- a pen-and-ink mark of which dreams have been admitted to memory. The index is not navigation; clicking does nothing. It is a record. **The Clockface Verge -- the closing apparatus.** The document ends not in a footer but in a **clockface verge**: a single full-bleed leaf showing fourteen small hand-drawn pocket-watch faces arranged in a loose constellation, each watch reading a different time, each one labeled with a leaf-name. Beneath the constellation, in faint mono, a single line: *"The engine is asleep. The clocks disagree. This is not a problem."* That is the entire footer. No nav, no signup, no copyright row. **Horizontal flow only inside one leaf.** Exactly one leaf -- *the parallel kettles* -- breaks vertical flow into a **horizontal scroll-tied panorama**: a 320vw-wide hand-drawn image of a long kitchen shelf with seven kettles, each kettle whistling at a different moment, captions surfacing as the visitor scrolls horizontally. The horizontal scroll is bound to vertical wheel/scroll input via JavaScript so the visitor never has to grasp horizontally. This single horizontal panel is the only horizontal motion on the page. **Non-rectangular content shapes.** Content blocks within leaves are not rectangles. They are **subtly irregular polygons** with 5-7 vertices, each vertex jittered by 2-5px from a base rectangle, drawn as hand-ruled SVG outlines with a faint deckled edge. This is rare on the page (perhaps four or five blocks total); most content is flush with the leaf itself. Where it appears, it marks **a fragmentary witness statement** -- a paragraph that the engine could not place in its index with full confidence. ## Typography and Palette **Typography (all Google Fonts, no exceptions):** - **Display / Section titles and the wordmark**: **"Fraunces"** at weight 300 with optical-size set to maximum, italic. The italic optical-display cut at large sizes has fragile, almost trembling serifs that suit the dream tone. Wordmark `concengine` (lowercase, deliberately) at clamp(3.6rem, 9vw, 7.2rem), letter-spacing -0.015em, with a single one-time glyph swap on load (the second `n` rotates in from a slight tilt, settling 12 frames late, as if it did not quite arrive on the same train as the others). - **Running body text**: **"Cormorant Garamond"** at weight 400, occasional italic 400. This is a soft, slightly old-fashioned serif with calligraphic tension, suited to oneiric prose. Body size clamp(1.05rem, 1.08vw, 1.18rem), line-height 1.78, max measure 58ch. Long passages of running text feel like a Cormorant-set 19th-century essay. - **Marginalia, leaf labels, drawer index**: **"Caveat"** at weight 400 -- a Google-Fonts handwritten face with a calm, rounded ductus that resembles careful library-catalog hand. Used at 11.5px-14px for marginalia, 13px italic for the drawer index, and 10.5px for in-diagram annotations. Caveat's casual hand contrasts with the formal Cormorant body, exactly the way a librarian's pencil note differs from the printed page she's annotating. - **Mono for timestamps and event identifiers**: **"DM Mono"** at weight 400. A softer mono than JetBrains/IBM Plex, with rounded terminals that suit the dream tone. Used at 10.5px with letter-spacing 0.04em for `t=03:14:07.022` strings and `event #00481` markers. Mono is used **sparingly** -- the engine's mechanical voice peeking through the dream just enough to remind you it is, in fact, a machine. - **Italic display lyric**: **"Italiana"** at weight 400, an extreme-contrast didone italic display. Used **only** for the seven lyric phrases that appear as full-leaf interjections (e.g. *"every concurrent moment is a small disagreement that the engine has decided not to resolve"*). Set at clamp(2.4rem, 4.6vw, 3.8rem) with letter-spacing 0.005em. Appears no more than seven times in the entire document. **Palette:** The palette is intentionally **muted, dream-warm, candlelit** -- a deliberate departure from the corpus's overwhelming gradient (98%) tendencies. The whole page is grounded in vellum and ink, with three sparingly-applied accent inks each carrying a specific domain meaning. - `#f0e6d2` **Vellum Cream** -- the page substrate. Warm, slightly buttery, the color of a 1920s ledger sheet held up to lamplight. Not pure white. Each leaf is rendered at 78% over a slightly darker shadow plane to accentuate the layered-leaf depth. - `#e6d8b8` **Aged Vellum** -- a deeper warm cream used for shadow planes between leaves and for the verso of the doubled-page motif (the "second" leaf in a race-condition pair sits on this slightly darker substrate so the eye instinctively reads it as a copy). - `#1d1a22` **Ink Indigo** -- the primary foreground. A near-black with a faint blue-violet undertone, the color of fountain-pen ink slightly thinned with water. Used for body text, rules, hand-drawn diagrams, the wordmark. - `#7a6f5b` **Sepia Marginalia** -- a warm gray-brown for marginalia in Caveat and for de-emphasized timestamps. The reader instinctively reads it as "older" or "secondary," like a previous owner's pencil notes. - `#3d5a4f` **Verdigris Witness** -- a dark, muted blue-green appearing only on **events that have multiple witnesses** -- i.e. the same logical event recorded by more than one actor. Verdigris is the color of slow oxidation; the engine treats multi-witnessed events as having stood the test of more than one observer. Used on perhaps fifteen tokens in the entire document. - `#a83a2f` **Vermilion Disagreement** -- a restrained iron-oxide red applied **only** at the three doubled-page seams, where the silver thread between the two leaves is rendered in vermilion. Disagreement is precious and sparing. Three uses in the whole page. - `#c9982e` **Saffron Reordered** -- a soft mustard ochre marking events the engine has filed out of wall-clock order to satisfy causal consistency. Appears on roughly a dozen timestamps total. Each saffron timestamp is accompanied by a tiny Caveat marginal note explaining what was reordered and why. Color is **a learned semantic channel**, not decoration. By the third leaf the visitor has tacitly learned: ink for prose, sepia for marginal commentary, verdigris for "more than one witness saw this," vermilion for "two versions of this exist and we have not chosen," saffron for "we have rearranged this on your behalf." The page teaches its color language by example. ## Imagery and Motifs **No photography. No 3D renders. No stock icons. No marketing iconography.** Every visual element is one of: typography, hand-drawn-style SVG line art, a watercolor-stain SVG filter, or a procedurally-generated event glyph. **Core Visual Motifs:** - **The Hand-Drawn Pocket Watch.** A signature motif. Each leaf carries a tiny (28-44px) inline SVG pocket watch in its upper-right corner, drawn with a slightly wavering 1.25px stroke and faint hatched shading. Each watch shows a different time. The hands are static -- they never tick -- but on cursor-hover the second hand drifts forward by 4-7 seconds and then drifts back. The watches **disagree with each other** by design; comparing two watches from two leaves yields a different elapsed-time than the timestamps in the prose claim. This contradiction is the central charm. - **Marbled Endpaper Plates.** At the threshold between every fourth leaf and the next, a **full-bleed marbled-paper band** (height 88px) appears as a SVG `` + `` filter rendered into a path, recolored into Vellum Cream / Ink Indigo / Sepia Marginalia. The marbling is procedurally generated per visit with a deterministic seed printed in 9px DM Mono in the band's lower-right corner: `marble seed: 0x4e7c1a`. Each band is a moment of pure visual rest -- a turning of the leaf. - **Doors in the Margins.** At seven points in the document, a small (60-80px tall) hand-drawn-style SVG illustration of an **arched library door** appears in the right margin. Each door has a different number of panels and a different keyhole. On hover, the door **opens a few degrees** revealing a tiny vignette beyond -- a single line of italic Cormorant Garamond hovering against blank Vellum Cream, e.g. *"in this branch the kettle never whistled"*, *"in this branch the train arrived first"*, *"in this branch you closed this tab,"*. Each door corresponds to a **branch the engine considered but did not commit to**. There are seven, no more. - **Witness Constellations.** A diagram-motif that recurs three times: a sparse arrangement of named-actor labels (e.g. *Alma · Beren · Cyril · Damaris*) with thin hand-drawn arcs joining the actors who witnessed the same event. Some events have one witness, some have four. The constellations are drawn with an irregular freehand quality, not a precise ruled grid. Verdigris-Witness ink picks out the multi-witness arcs. - **Watercolor Stain Halos.** Beneath the seven Italiana lyric phrases, a soft watercolor-stain halo (a procedurally-blurred SVG path with low-opacity Vellum / Sepia colorings, generated with `` + `` + ``) bleeds outward from the text by 60-120px. The stain is irregular, reminiscent of a wet pen accidentally laid against the page. Each lyric leaf has a different stain. - **Lamport Clock Ladders, Hand-Drawn.** Three procedurally-drawn ladders show how a logical clock advances when messages arrive out of wall-clock order. Unlike the ruler-drawn ladders typical of CS textbooks, these are **drawn with deliberate hand-tremor**: the rules are 1.25px paths with up to 1.4px sinusoidal jitter, the numerals are set in DM Mono but skewed by a 1.5deg deterministic random rotation each. The result is a CS diagram that has been transcribed into a librarian's commonplace book. - **Inline Event Glyphs.** A small typographic vocabulary of five primitives -- `·` (read), `○` (acknowledge), `■` (write), `▲` (divergence), `◇` (merge) -- inlined throughout body prose where the text references a specific event. Each glyph is colored by class according to the palette's semantic rules (verdigris for multi-witnessed, saffron for reordered, etc.). The vocabulary is small enough that the visitor learns it implicitly by the third leaf. - **No marketing icons. No check-mark bullets. No "feature" word.** No three-up grids. No logos. No screenshots of an IDE. No cartoon character. No abstract gradient blobs. None. ## Prompts for Implementation **Single continuous narrative document, not a multi-page site.** Implement the entire experience as one long scroll, with `scroll-behavior: smooth`. Treat it as a printed dream-journal that happens to animate gently. There is no router, no nav menu, no search, no language switcher. **The Stack of Leaves -- structure and depth.** Each leaf is a `
` element with: a fixed max-width (clamp(720px, 78vw, 1080px)), a deterministic per-leaf rotation, a 78% opaque Vellum Cream background, a 1px Ink Indigo bottom rule, and a soft drop-shadow (0 6px 18px rgba(29,26,34,0.07)) so the eye reads the layered stack. Adjacent leaves overlap by 32-80px via negative `margin-top`. Z-index increases monotonically with leaf order so later leaves sit above earlier leaves at the seam. **Marginalia self-write.** Marginalia (Caveat-set short notes appearing in the right margin of body paragraphs) **render as if being written by an unseen hand** the first time the visitor scrolls past them. Use a path-draw-svg approach: each marginal note is rendered as a single SVG path that traces the outline of the text characters, with stroke-dasharray animated from the path length to zero over 1.6-2.4s, scrubbed by Intersection Observer. Once written, marginalia stay written -- if the visitor scrolls away and back, the notes are already there. **Each marginal note writes itself exactly once per visit.** **Doubled-page race-condition reveal.** When a doubled-page leaf enters the viewport, the second copy of the leaf renders **slightly delayed** (by 280ms) and **slightly transparent** (90% opacity), with the silver-vermilion thread between the two leaves drawing itself with `path-draw-svg` and a gentle breathing animation (1px stroke-width oscillating 0.9-1.4px on a 4.2s cycle). The visitor instinctively reads the second leaf as a "copy" of the first; the engine treats neither as canonical. **Doors that open in the margin.** Each marginal door is interactive: on hover (and on tap on touch devices), the door's right panel rotates open by 14deg around its left hinge using `transform: rotateY(14deg)` and an easing of `cubic-bezier(0.6, 0.0, 0.2, 1)` over 380ms, revealing a small italic Cormorant Garamond phrase that fades in over 180ms. On unhover, the door closes; the phrase fades out. The phrase is NOT a tooltip; it is a small painted vignette inside the door frame. **The Drawer Index pen-stroke trace.** As the visitor scrolls past each leaf, the corresponding drawer-index label gets underlined by a **hand-drawn pen stroke**. Implement as an SVG path beneath each label, length-zero at first, length-full when triggered, with a 320ms `path-draw-svg` animation using `cubic-bezier(0.4, 0.0, 0.2, 1)` -- mechanical-ish but not snappy. The stroke has a subtle 1.2-1.6px jitter encoded into the path data so each stroke is visually unique. Once drawn, never undrawn -- the index is a permanent reading record for the visit. **Watch hover drift.** Each pocket-watch SVG has its second-hand on its own SVG `` element. On hover, the second-hand rotates forward by a deterministic-per-watch random amount between 24deg-44deg over 600ms (corresponding to "drifted forward 4-7 seconds"), then on unhover drifts back to its rest position over 1100ms. The minute and hour hands never move. There is no audible tick. This is the engine briefly showing you that it does have a clock; it just chooses not to use it. **Marbled endpaper bands.** Implement the marbled bands as an `` filter chain: `` feeding `` that maps the turbulence into the Vellum / Ink / Sepia palette. The filter should be **rendered once per visit** at page load and cached. Do not animate the marbling. It is a still surface. **Watercolor stain halos behind lyric phrases.** Implement as an `` with a soft-blurred path, opacity 0.38, with a subtle `` against a `` to produce an irregular wet-edge. The halo is **static**, but on first scroll-into-view, its opacity fades from 0 to 0.38 over 1.4s, mimicking ink soaking through paper. **Reduced-motion fallback.** For `prefers-reduced-motion: reduce`, all animations resolve instantly to their final state on first paint. Marginalia render written. Doors are closed. Watch hands are still. The Italiana lyrics are present without halo fade. The doubled-page race condition is rendered as both leaves visible immediately. The page becomes a static printed dream-journal, which is a valid reading of this design. **The Replay Whisper (a hidden interaction).** Pressing `R` triggers **the replay whisper**: nothing scrolls, nothing rewinds. Instead, all marginalia on the currently-visible leaves **rewrite themselves** in slow motion, the saffron-ochre reordered timestamps **shift by ~3px** to suggest re-ordering, and the verdigris witness arcs in any visible witness-constellation **redraw themselves** with their stroke-dasharray animation. The act takes 2.6s. The visitor watches a piece of the dream re-dream itself, in place. Pressing `R` again interrupts. This is the site's most theatrical hidden moment. **Cursor as candle.** The cursor is accompanied by a faint **warm halo** -- a 280px-radius radial gradient in Vellum Cream over Ink Indigo at 6% opacity, attached via a `pointer-events: none` overlay following the mouse. On touch devices, the halo is absent. The metaphor: the visitor is reading by candlelight. Within the halo's radius, the page is very slightly more saturated; outside it, slightly desaturated. This is achieved with a mask + filter, not by altering text color. Disabled by `prefers-reduced-motion`. **No CTA panels, no pricing, no stat grids, no testimonial blocks, no logo wall, no "trusted by," no feature grid, no three-up card-grid, no signup form, no newsletter, no nav menu.** Marketing vocabulary is wholly refused. If the page must convey information, it conveys it as prose with marginalia, as hand-drawn diagrams, or as one of the seven Italiana lyric leaves. **Implementation primitives to prefer:** semantic HTML5 (`
`, `
`, `