# Design Language for concengine.com

## Aesthetics and Tone

concengine.com is imagined as **The Telegraphic Exchange of Parallel Time** — a fictional 1928 Beaux-Arts switching house where hundreds of pneumatic-tube clerks dispatch concurrent events through a brass-and-ivory routing hall. The site behaves as if you have stepped through a revolving door into the lobby of the *Société Internationale de la Simulation Concurrente*, an imaginary inter-war institution whose business is the orderly delivery of imagined futures. Where most engineering marketing sites speak in the dialect of dashboards, neon HUDs, and dark-mode cyberpunk, concengine.com speaks in the dialect of **engraved bank notes, embossed steamship letterhead, and the ornate trade cards of the Belle Époque industries** — telegraphy, pneumatic mail, mechanical loom programming, automated player pianos. Every concurrent event is treated as a piece of correspondence routed across a hand-drawn network; the engine's job is presented as a kind of dignified clerkship.

The mood is **opulent-grand, scholarly-intellectual, and slightly theatrical** — confident in the way a 1920s prospectus is confident, with the assured ornament of a stock certificate and the quiet dignity of a marble lobby. Nothing flashes. Nothing pulses. Nothing pops. Instead the page **reveals itself in measured, ornamental procession**, the way the brass arms of a paternoster lift advance one frame at a time. Even the technical content (event ordering, causal consistency, replay) is dressed in the language of ledgers, rosters, and timetables.

Inspirations: the engraved illustrations of *La Nature* magazine (1873–1905); the pneumatic-tube routing diagrams of the Paris Pneu; Cassandre's *Étoile du Nord* and *Normandie* posters; the borders on a 1925 Belgian railway bond; the gilded operating manuals of Jacquard looms; the tympanum carvings on the AT&T Long Lines Building; the Type 5 manual telephone exchanges where dozens of operators completed calls in parallel.

## Layout Motifs and Structure

The page is **a single, tall, vertical engraving** — a stock-certificate composition stretched into a scroll. It is bordered top, bottom, left, and right by an ornate **decorative cartouche frame** drawn in pure SVG, hairline-thin, with corner medallions that contain rotating filigree. The visitor never sees the page edges — only this frame, perpetually. The frame is the chassis; everything else lives within it.

**Primary structural device — the Three-Aisle Routing Hall.** Within the cartouche frame, the content is organized as if you are looking down the length of an Edwardian banking hall with **three parallel aisles**:

- **Left aisle (≈22% of inner width):** The *Roster Column*. A continuously updated, ornamentally bordered roster of named worker-clerks — "Clerk A. Bernoulli, Desk III", "Clerk Y. Lamport, Desk VII", "Clerk B. Liskov, Desk XI" — each with a small engraved portrait-frame containing their current task glyph. The roster scrolls slowly, listing one new clerk every few hundred pixels of vertical scroll.

- **Center aisle (≈56% of inner width):** The *Concourse*. This is where the long-form prose, the section headings, the diagrams, and the routing schematics live. Body copy here is set in narrow measure, justified, with hanging punctuation, the way a 1920s annual report would set its director's letter.

- **Right aisle (≈22% of inner width):** The *Pneumatic Manifest*. A vertical strip listing, in tiny engraved capitals, every event currently "in flight" through the engine — `[1928.07.04 · 14:32:07.117 · capsule no. 4471 · routed: Desk III → Desk VII]`. New entries are added at the top with a soft slide; old entries fade into a sepia ghost row before vanishing.

The three aisles are separated by **vertical hairline rules** terminated top and bottom by tiny ornamental fleurons (✦, ⚜, ❦), and they all share the same horizontal scroll position — there are no sticky elements except the outer cartouche, no hijacked scroll, no horizontal pans.

**Sectioning device — the Marquee Plate.** Each major section is introduced by an **ornamental marquee plate**: a horizontal band 100% of inner width, bordered above and below by triple-rule (thick / thin / thick) and bearing an engraved title in small caps with letter-spacing wider than the title itself, e.g. `· O R D E R   O F   E V E N T S ·`. The plate's center carries a small monogram (a circular medallion with an entwined "C·E" cipher), and its corners carry quarter-circle ornaments. These plates evoke the title-blocks of 1890s technical drawings.

**Avoided layouts:** no card grid, no bento, no centered hero with CTA, no pricing tables, no full-bleed dark hero, no testimonial carousel, no dashboard. The page reads like a folded broadside, not a SaaS landing.

## Typography and Palette

**Typography (all from Google Fonts):**

- **Display, marquee plates, monogram:** *IM Fell English* (Google Fonts) — Igino Marini's revival of the 17th-century Fell types cut for the Bishop of Oxford. It carries genuine printing-press irregularity: ink-spread on the bowls of `o` and `e`, slight rotation on the lowercase `a`, soft broken edges. Used at clamp(2.4rem, 7.5vw, 6.2rem) for the hero wordmark "concengine" (set lowercase, with a bracketed serif `g`), and at clamp(1.4rem, 3.2vw, 2.6rem) with letter-spacing 0.4em uppercased for marquee plates. The ink-spread defeats the corporate-clean feel that *Fraunces* and *Cormorant* produce; this design wants the page to look **slightly printed** rather than slightly luxurious.

- **Body / Concourse prose:** *Cormorant Garamond* (Google Fonts) at 17px / 1.62 line-height in the center aisle, justified with hyphenation enabled. The high-contrast Garamond gives the page the air of a literary annual report. First letter of each section is a 4-line **drop cap** rendered in IM Fell English, sitting in a thin square ornamental box — a holdover from illuminated technical literature.

- **Roster names, manifest entries, micro-labels:** *Cormorant SC* (Google Fonts, small-caps variant) at 12px with letter-spacing 0.18em. This gives engraved-plaque texture to all the roster and manifest text without resorting to mono.

- **Numerals and timestamps:** *Bodoni Moda* (Google Fonts) at 13px tabular-nums for all timestamps, capsule numbers, desk numbers. Bodoni's vertical stress and unbracketed serifs read as **engraved bank-note numerals**, and the contrast against the Garamond body is deliberate: numbers should look minted, not typed. Critically, **no monospace is used anywhere on the page** — a sharp departure from the 92% mono convention in the corpus.

- **Ornamental glyphs:** *UnifrakturMaguntia* (Google Fonts) is used **only** for the section dividers' single capital letter (e.g. a dropped blackletter `O` opening "Order of Events") — never for body text.

**Palette (engraved letterhead, six values):**

- `#f6efe1` — *Aged Vellum*. Page background. Warm cream with a hint of yellow, the color of an unfaded title page from a 1923 prospectus.
- `#1d1611` — *Linotype Black*. Primary ink for body copy, marquee plates, hairline rules. Not pure black — a faintly warm, very dark sepia-charcoal that prevents harsh contrast.
- `#7a3a18` — *Burnt Sienna Ink*. Secondary ink, used for drop caps, the cipher monogram, and accent rules. The color of a stock-certificate seal.
- `#a78656` — *Antique Brass*. The single metallic accent — used for the cartouche frame's hairline ornament and the central `C·E` cipher disc. Rendered as a flat color, never as a gradient or simulated metal; it must read as gilt printing, not as 3D bronze.
- `#456a5b` — *Ledger Verde*. Used very sparingly for "active" routing lines on the schematic and for the live-clerk indicator dot. The green of a 1910 ledger stripe.
- `#8c1c1c` — *Cinnabar Stamp*. Reserved for *errors and rollbacks only* — when an event is shown failing and being replayed, its row is overstamped with a thin cinnabar `RECONCILED` ribbon at 14° rotation. Used on under 0.5% of the page surface.

The palette is intentionally **muted and warm but not duotone, not gradient, not high-contrast** — also a deliberate departure from the 98% gradient / 97% warm / 47% high-contrast / 23% duotone corpus.

## Imagery and Motifs

**No photography. No 3D renders. No icons. No stock illustrations. No gradients.** Every visual element is one of: (a) typography, (b) hand-coded SVG ornament, (c) engraved-style line illustrations rendered in SVG with stippled fill, (d) procedural diagrams of the engine's routing.

**Motif #1 — The Cartouche Frame.** A perpetual SVG frame bordering the viewport. Constructed from a repeating *guilloché* pattern (the interlaced curves used on bank-note borders), generated procedurally from two phase-offset sine waves. The four corners carry circular medallions; each medallion encloses a different rotating ornament — a winged hourglass (top-left), a fasces of pneumatic tubes (top-right), an ouroboros made of two intertwined event-arrows (bottom-left), and the entwined "C·E" cipher (bottom-right). The medallions rotate **once per minute**, slow enough to be peripheral, fast enough to confirm the page is alive.

**Motif #2 — The Pneumatic Capsule.** The signature unit of imagery. Each in-flight concurrent event is depicted as a small SVG cartridge — a flat-headed cylinder with a knurled band, drawn in 3 lines, with a tiny address tag dangling from its end. Capsules travel along thin curving guide-lines (the routing schematic), advancing one capsule-width every 800ms. They are never animated by hover; their motion is governed entirely by the page's own simulation clock.

**Motif #3 — The Routing Schematic.** A central-aisle diagram, drawn in *Crelle's Journal* engraving style — hairline strokes, hatched fills, no anti-aliasing tricks. It depicts the engine's core abstraction: a switching graph with named desks (nodes drawn as small ornate shields) and routing lines (curves, not orthogonal segments). The schematic is rendered at four "scales" through the page:
1. A bird's-eye floor-plan of the entire exchange (small, top of page).
2. A close-up of a single bay (mid-page).
3. A "cutaway" of one capsule's journey across desks (lower page).
4. A worn, smudged miniature reprise at the very bottom — same drawing, but with intentional smudges and ink blots.

**Motif #4 — The Engraved Clerk Portraits.** Each named worker-thread in the Roster Column gets a 36×48px portrait drawn in pure SVG using a **stippled-engraving** technique: ~600 short SVG lines per portrait, generated from a hand-built point cloud. Portraits show 1920s clerks in stiff collars and visors, three-quarter view. They never move, never blink, never wink at the cursor. They are static engravings, dignified.

**Motif #5 — The Watermark.** A faint repeating watermark fills the page background at 6% opacity: the letters "C·E" in a circular medallion repeated on a 240px hex grid, gently rotated. Like the watermark on a bond certificate.

**Motif #6 — Filigree Bullets.** Lists use ornamental dingbats instead of bullets: ✦ for top-level, ❦ for second-level, ⁂ for tertiary. Each list item begins with a single horizontal hairline of width equal to the item's text.

## Prompts for Implementation

**The page is one tall engraved broadside, not a multi-section landing.** Build it as a single HTML document, no router, no nav. The visitor scrolls through what is essentially a printed double-broadside that has been folded out vertically. There is **no hero CTA, no pricing, no testimonials, no stat-grid, no card-grid section, no feature comparison table** — these would shatter the period feel.

**Implement the cartouche frame as a fixed-position SVG overlay** with `position: fixed; inset: 0; pointer-events: none;`. Generate the guilloché pattern in JavaScript at load by sampling two interfering sine waves and emitting `<path d="M…">` strings. Anchor the four corner medallions at the frame corners; rotate each medallion's inner ornament with a 60-second `animate transform="rotate"` loop. The guilloché itself does **not** animate.

**Bind a single simulation clock `t_exchange` to scroll position.** As the visitor scrolls, this clock advances at a constant rate of `scrollY / 4` simulated milliseconds. Drive everything from this clock:
- The Pneumatic Manifest (right aisle) populates its rows by pulling, at each scroll tick, the events whose `t_dispatch ≤ t_exchange < t_arrival` from a precomputed run of ~2,400 events stored as a static JSON array. Old rows fade to sepia ghost when `t_exchange > t_arrival + Δ`.
- Capsules along the routing schematic interpolate their position by `(t_exchange - t_dispatch) / (t_arrival - t_dispatch)`. Reverse scrolling sends capsules backward — they retract along their guide-lines, not pop.
- The Roster Column highlights each clerk's row when one of "their" capsules is in flight: a thin Ledger Verde rule appears beside their portrait. Multiple clerks may be active simultaneously; this is the entire point of a concurrent engine, and the design must show many active rules at once during dense scroll segments.

**Storytelling arc, top to bottom:**
1. **The Lobby (0–18% scroll).** The hero plate announces "concengine — Bureau Central de la Simulation Concurrente". A single capsule sits motionless on a single guide-line. The Roster lists exactly one clerk on duty. The Manifest is empty.
2. **The First Dispatch (18–32%).** The clerk stamps the capsule (a single Cinnabar `√` mark appears momentarily on it), and it advances along its guide-line. The Manifest writes its first row. A second clerk arrives in the Roster.
3. **The Bloom (32–58%).** Capsules multiply rapidly. The schematic blooms into a fan of overlapping guide-lines. The Roster fills to ten clerks. The Manifest scrolls visibly. **This is the densest visual moment of the page** — the engraving becomes nearly fractal.
4. **The Reconciliation (58–76%).** Two capsules collide on a shared guide-line — one is overstamped `RECONCILED` in cinnabar; the other reroutes via a longer path. A short prose passage (Cormorant Garamond, set in narrow measure) explains causal ordering as if from a 1929 trade journal.
5. **The Replay (76–90%).** The visitor scrolls slightly upward; the design exploits this to demonstrate that the simulation reverses cleanly. Capsules retract; manifest rows un-fade. A small ornamental note in the margin reads "*the exchange admits of perfect reversal*".
6. **The Colophon (90–100%).** A printer's colophon at the bottom: "Set in IM Fell English and Cormorant Garamond. Printed at the Bureau Central, on a virtual hand-press, in the year of grace 1928." A final tiny C·E medallion closes the page.

**Animation rules:**
- All easing is `cubic-bezier(0.45, 0.05, 0.55, 0.95)` (mechanical, not springy). **No spring physics. No elastic. No bounce. No magnetic cursor follow.** This is a clockwork page, not a toy.
- All durations are quantized to multiples of 200ms — the "tick" of the imagined clockwork.
- No element's animation is triggered by hover except (a) the brass cipher disc, which rotates 60° on hover, and (b) capsules, which on hover reveal their address tag in a small `<title>` tooltip rendered as an engraved label.
- Cursor is never replaced. No cursor-following blob. No magnetic buttons. The pointer is a pointer.

**Accessibility-of-period:** Provide a small toggle, rendered as a brass switch in the bottom-right cartouche corner, labelled `Halt the Press` — when engaged, all motion freezes, including the cartouche rotations, leaving a perfectly still engraved page. Also expose `prefers-reduced-motion` honoring this freeze automatically.

**Responsiveness:** On narrow viewports (< 720px), the three aisles collapse into a single column where the Roster becomes a horizontal frieze above each Marquee Plate, and the Manifest becomes a folded ribbon at the foot of each section. The cartouche frame remains, but its corner medallions shrink to 32px. The page must still feel like a printed object at any width.

## Uniqueness Notes

**Differentiators from other designs in this corpus:**

1. **No monospace, anywhere.** 92% of the corpus uses a mono typeface; this design uses none. The visual identity of "concurrency" is removed from the terminal/CRT cliché entirely and re-located in the Belle Époque. Numerals are set in Bodoni Moda (engraved bank-note numerals), not JetBrains Mono or IBM Plex Mono. This alone separates the page from nearly every other site in the corpus, including the sibling concengine.net and conc.quest, which both lean monospace.

2. **No gradient, no warm-orange, no card-grid, no scroll-triggered fade-reveal.** The four most overused patterns in the corpus (98% gradient, 97% warm, 95% card-grid, 94% scroll-triggered) are all explicitly avoided. The palette is flat sepia-ink. The layout is a three-aisle architectural plan. Scroll drives a simulation clock, not a reveal animation.

3. **A perpetually visible decorative cartouche frame** — a procedurally-generated guilloché bank-note border — surrounds the viewport at all times. No other site in the corpus is permanently framed; the device asserts that the visitor is always *inside the institution*, never outside it.

4. **Concurrency is dramatized as Belle Époque clerkship**, not as goroutines, not as threads, not as a cyberpunk grid, not as a dungeon, not as a typographic timetable. The metaphor is the 1928 pneumatic-tube exchange, populated by named human clerks at numbered desks. This is, to the best of my knowledge, the only design in the corpus that does engineering through the lens of inter-war institutional ornament.

5. **Engraved stippled SVG portraits** of named worker-clerks, each a hand-coded point-cloud rendered as ~600 SVG hairlines, replace the convention of stock photography and 3D renders. The 95% photography category in the imagery axis is sidestepped entirely — and replaced with a technique that would have been recognizable to a 1900 engraving studio.

6. **Period-appropriate motion vocabulary.** All easing is mechanical (`cubic-bezier(0.45, 0.05, 0.55, 0.95)`), all durations are quantized to a 200ms clockwork tick, springs and elastics and magnetics are forbidden. This deliberately excludes the corpus's 42% spring, 23% elastic, 22% cursor-follow, 16% magnetic conventions.

7. **A "Halt the Press" brass-switch toggle** in the cartouche corner provides a single, theatrical motion-control affordance that is both accessibility feature and period flavor — turning the page from a running exchange into a still printed broadside on demand.

**Chosen seed/style:** `art-deco ornate luxury` (only 4% in the AESTHETIC frequency table, and 0% within the engine-themed siblings — concengine.net leans editorial-monograph, conc.quest leans isometric-pixel-art).

**Avoided patterns from frequency analysis:** corporate aesthetic (92%), card-grid layout (95%), centered layout (89%), full-bleed (52%), photography imagery (95%), gradient palette (98%), warm palette (97% — this design uses a *vellum-and-sepia* warm, not the corpus's gradient-warm), scroll-triggered reveal (94%), parallax (57%), spring easing (42%), stagger reveals (45%), mono typography (92%), humanist sans (39%), serif-classic in its modern Cormorant-only form (30% — this design pairs Garamond with the much rarer IM Fell English revival), mysterious-moody tone (50% — this page is opulent-grand and scholarly, never moody).
<!-- DESIGN STAMP
  timestamp: 2026-04-29T22:53:48
  domain: concengine.com
  seed: seed
  aesthetic: concengine.com is imagined as **The Telegraphic Exchange of Parallel Time** — a ...
  content_hash: 87d2a440e85b
-->