# Design Language for concengine.net ## Aesthetics and Tone `concengine.net` is the public showroom of an imagined fictional research outfit called **The Conception Engine** — a workshop that claims, with a straight face, to **manufacture the moment-of-conception** for ideas. Not "ideation tools," not "brainstorming software." A literal *engine*, with literal *bearings* and *housing* and *intake manifolds*, whose only output is the silent nanosecond in which a new thought becomes inevitable. The site treats this absurd premise as if it were a Bauhaus product brochure published by Braun in 1962, and then pumps the brochure full of helium until every illustration of every component has **inflated into a soft, rounded, three-dimensional pillow** of monochrome rubber. The aesthetic is **inflated-3d** — the most underused aesthetic in the entire 62-design corpus at 3%, paired against a **monochrome** palette (19%) and a **playful** tone (19%) that disagrees with itself on every page. The inflated-3d vocabulary in 2025 is dominated by Spline scenes full of sherbet-coloured donuts and rainbow toothpaste; this site refuses every one of those signals. The shapes are inflated, but they are **black, white, and one single specific shade of warm grey**, never lit from above with a candy-coloured rim light. The lighting is **a single overhead studio softbox in a windowless white photographic cyclorama**, the way Apple lit the original iMac G4 specimen photographs and the way Dieter Rams lit the SK4 phonograph. The result is a **playful object catalogue where every "toy" is taken absolutely seriously**, like reading the Eames Office's specification sheet for a pillow that turns out to be load-bearing. The tone-keyword **playful** is reinterpreted not as bright colours and bouncing emoji but as **the deadpan playfulness of an engineer who is in on the joke and refuses to break character**. Every label on the site is a precise machine-shop noun (*bearing*, *gasket*, *cam-follower*, *intake-trumpet*, *flux-collar*) but every part is a soft inflated marshmallow that obviously cannot bear any load. The reader is invited to laugh, but the site itself never laughs back. This deadpan-against-cushion contrast is the entire emotional engine of the design. The mood is **museum showroom at 09:00 on a Tuesday morning, before the public has been let in**: cool, unhurried, slightly clinical, and completely confident that the absurd object on the plinth in the centre of the room is the most important manufactured object on Earth. ## Layout Motifs and Structure The structural motif is **diagonal-sections** — at 3% in the corpus, one of the rarest layout choices, and absolutely the right one for a site about an engine, because **mechanical thrust is never vertical or horizontal — it is always at an angle**. The page reads as a single long vertical scroll, but it is internally cut along a recurring **18-degree diagonal axis** that slices every section's edge against the next, the way a Bauhaus poster by Joost Schmidt cuts a circle against a rectangle, or the way a chiselled blueprint title-block sits on the lower-right corner of a draftsman's sheet. **The diagonal grid.** A single recurring axis runs from upper-left to lower-right at exactly **18 degrees below horizontal** — the same angle as the cut of a clutch-plate friction-disc — and every section boundary, every horizontal rule, every nameplate, every caption underline, every photograph border, and every interactive button edge sits on this axis or its perpendicular. The result is a page that looks rigid at first glance and **seasick on the second**, because no horizontal line is actually horizontal. **Section corpus (single vertical scroll, no router, no pagination):** 1. **Frontispiece — "The Conception Engine, Mark IV."** Full-viewport hero. Centre stage: one large inflated-3d rendering of the entire engine, rotating slowly on a vertical axis at 0.05 rotations per second. Wordmark sits on the diagonal axis in the lower-right quadrant, set in the chosen serif-revival face, optical-size 96. Beneath the engine, a single specification line reads `Manufactured at 47.376°N, 8.541°E. Standard atmospheric pressure. No assembly required.` 2. **Plate I — Exploded Diagram.** The engine breaks apart along the diagonal axis into its eleven components, each labelled with a circled numeral, each drifting outward on its own elastic-spring trajectory. Reader can drag any single component back to the assembled position; on release it elastic-snaps back to its exploded location. 3. **Plate II — The Intake Manifold.** Full-bleed plate. The intake manifold (an inflated tubular cluster shaped like a cluster of crystalline geodes that have been blown up by a bicycle pump) fills the right two-thirds. Left third: a serif column of body text describing what an "intake manifold" does in the conception of an idea. The diagonal axis cuts the column from the imagery. 4. **Plate III — The Crystalline Core.** Centre of the page: a single hexagonal-prismatic crystalline form, rendered as if it is grown from monochrome quartz and then inflated. Body text beneath, single column, 720px measure. This is the only crystalline element rendered as a *hard* surface — the contrast between the soft-inflated everything-else and this one hard-edged crystalline object is the entire visual punchline of the page. 5. **Plate IV — Flux Couplings, in Catalogue.** A four-row catalogue of inflated couplings (`coupling-7a` through `coupling-7d`), each presented on its own white plinth, each with a serif catalogue caption beneath in the manner of a 1968 Knoll furniture catalogue. 6. **Plate V — Operating Procedure.** A diagonal numbered list of seven steps for "operating the engine," each step paired with a tiny inline inflated-3d miniature. The numerals are very large (24rem) and run *behind* the text, in the warm-grey tint, so the numerals read as architectural columns the text is walking past. 7. **Plate VI — Schematic, In Section.** A flat blueprint-style line drawing of the engine's internal cross-section, set against a gradient-mesh background that is itself the only piece of full colour density on the entire page. The schematic lines are pure black; the mesh beneath is a slow gradient through five greys. 8. **Plate VII — Provenance.** A serif-revival colophon block. Three short paragraphs explaining the imagined history of the engine (designed in 1962 for Olivetti's never-built "Pensiero 1," recovered from a warehouse in Ivrea in 2019, restored to its original specification). The diagonal axis terminates here as a single hairline running off the lower-right corner of the page. 9. **Final plate — Wordmark, departing.** The wordmark **concengine.net** rendered at 18rem, bleeds off the lower-right corner of the page on the diagonal axis. A reader who scrolls past the bottom is following the wordmark out of the document. **Columnar logic on desktop ≥ 1280px.** A single 880px central measure for body text, with a 280px right-hand marginalia rail that holds the circled-numeral component labels and the caption underlines. The diagonal axis is rendered as a 1px hairline that sits behind the entire page at z-index `-1` and stretches from upper-left of the viewport to lower-right of the document, so that the recurring 18° rhythm is *visible as a single connecting thread* on every plate. **Mobile collapse (≤ 768px).** The diagonal axis rotates to **vertical with a 4-degree lean** (still off-axis, still seasick) and the marginalia rail collapses into inline footnotes set in the smaller serif optical-size. The exploded diagram is replaced by a swipeable horizontal carousel of the same eleven components. ## Typography and Palette **Typography — two families, both on Google Fonts, both used for very specific reasons.** - **Display, body, and catalogue captions — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** at weights 300, 500, and 700, italic available, optical-size handled by the family's natural display/text variants. Cormorant Garamond is a **serif-revival** face — the corpus reports serif-revival at 4%, one of the most underused typographic categories. Cormorant is a Garamond revival that was specifically drawn for *display sizes that look like the original 1620 metal type*, with the slightly nervous, slightly imperfect curves that hot-metal Garamond has and Adobe Garamond Pro has rationalised away. Setting the wordmark and every catalogue caption in Cormorant signals "**this object is older than it looks**" — which is the entire conceit of the imagined Olivetti-Mark-IV provenance. Body text at **17px / 1.65** with optical kerning enabled and old-style figures `font-feature-settings: "onum" 1` for catalogue numerals. - **Specification labels, technical callouts, and the diagonal numerals — [Space Mono](https://fonts.google.com/specimen/Space+Mono)** at weight 400 only. Space Mono is the only secondary face on the page; it is used exclusively for the things that a real engineer would have typed on an IBM Selectric — part numbers (`coupling-7a`), torque specifications (`12.4 N·m`), the latitude/longitude line under the wordmark, and the running plate-numeral counter in the top-right corner. Space Mono carries a slight **slab undertone** that makes it visually compatible with Cormorant's serif terminals, which is unusual for monospace pairings — most monos collide with serifs. Space Mono is set at **13px / 1.4** with letter-tracking `+0.04em`. The pairing of Cormorant + Space Mono is itself the type-system metaphor: **a 17th-century book setter trying to type out a 1962 Olivetti technical specification on a typewriter that only has Garamond italic for the headings**. Every label, every caption, every plate number is set in Space Mono; every sentence and every wordmark is set in Cormorant. **Palette — monochrome, with one warm grey accent.** The corpus reports `monochrome` at 19% — common, but rarely committed to in its strict sense. This site commits strictly: **black, white, and four warm-grey intermediates**. There is **no second hue** anywhere on the page, which deliberately violates the corpus convention — `warm` palettes appear in 98% of designs, `gradient` palettes in 93%. Skipping both is the loudest possible statement. - `--ink` — **#0E0E0C** — true black with a 2°-warm cast, used for body text, the schematic line drawings, and the diagonal hairline axis. - `--cyclorama` — **#FAFAF7** — the warm white of a photographic infinity-cyclorama at 5500K, used as the page background. Not pure white. Pure white would read as digital; this reads as *lit paper*. - `--vellum-1` — **#EFEDE6** — softest grey, used for plinth surfaces and the under-plate of the catalogue grid. - `--vellum-2` — **#D4D1C7** — mid-soft grey, used for inflated-3d body shadow and ambient occlusion on the inflated forms. - `--vellum-3` — **#9B978C** — mid-deep grey, the warm-grey tint of the diagonal-numeral typography that runs behind the operating-procedure list. - `--vellum-4` — **#5C5A53** — deep grey, used only for body shadow on the largest inflated form (the engine itself in the frontispiece) and for the gradient-mesh of Plate VI. - `--graphite-line` — **#1C1B17** — the only hairline-rule colour, used for the 1px diagonal axis and the 0.5px catalogue-caption underlines. The gradient-mesh of Plate VI is constructed exclusively from these seven values, never introducing a hue, and the mesh is animated at **0.02 cycles per second** so that the warm-grey field beneath the schematic appears almost stationary — like watching a slow stratus cloud drift across a very small piece of sky. ## Imagery and Motifs **Imagery is exclusively inflated-3d renderings of imaginary mechanical components, plus a single gradient-mesh field, plus inline crystalline SVG.** No photography. No icons-as-icons. No stock vector. The site renders the entire imagery vocabulary in three layers, and only three: **Layer 1 — Inflated-3d component renders (the centerpiece).** Eleven (and only eleven) inflated-3d rendered components. Each one is a soft, rounded, gently-glossy form rendered as if blown up out of a Dieter Rams product sketch using a balloon pump. These are not made in Spline live; they are pre-rendered as 2x WebP at 1600×1600 with transparent backgrounds, using a single overhead softbox at 5500K, no rim lights, no candy-rainbow tinting, soft contact shadow on `--vellum-1` plinth. The corpus reports `inflated-3d` aesthetic at 3% and `gradient-mesh` imagery at 12% — combined, this site is one of the very few in the corpus to commit to inflated-3d as its entire imagery system. The eleven components, named: 1. **Engine assembly** — the full Mark IV. A clustered tubular mass roughly the silhouette of a Brâncuși *Bird in Space* but inflated until it is also a pillow. 2. **Intake manifold** — five trumpet-bells fused at the base, each bell inflated into a soft cluster of crystalline geodes (the only inflated-3d render that incorporates the crystalline motif). 3. **Flux-collar** — a torus, but plumped to nearly a sphere; perfectly bisected on the diagonal axis. 4. **Coupling 7a, 7b, 7c, 7d** — four nearly-identical inflated couplings whose differences are visible only on close inspection (one has six lobes, one has seven, one has eight, one has nine — a Fibonacci joke for the reader who counts). 5. **Cam-follower** — a stem with a hemispherical head, like a lollipop made of soft monochrome rubber. 6. **Bearing-race** — a flattened ring with eight inflated ball-bearings sitting in its channel; each ball-bearing rolls on hover. 7. **Gasket** — the only flat element in the corpus, rendered as if it is a thin sheet of monochrome rubber stamped with eight hex-shaped holes. 8. **Output trumpet** — a single bell, scaled three times the size of the intake bells, the visual exclamation point of the page. **Layer 2 — Crystalline core (the visual punchline).** A single hard-edged crystalline form on Plate III, rendered as inline SVG with eight hexagonal facets, each facet a slightly different value of `--vellum-1` through `--vellum-3`. The facets do not animate but they catch a slow `feGaussianBlur` shimmer when the cursor passes within 200px. The corpus reports `crystalline` motif at 4%; this site uses the motif exactly once, in deliberate contrast to the soft-inflated everything-else, so the reader's eye locks onto the one place the page is sharp. **Layer 3 — Gradient-mesh schematic backdrop (Plate VI only).** A single gradient-mesh field, animated at 0.02Hz, constructed from `--vellum-1`, `--vellum-2`, `--vellum-3`, and `--vellum-4` in an asymmetric four-point mesh. Implemented as a CSS `radial-gradient()` stack with four points at non-corner positions, masked by a noise-texture filter at 0.04 opacity. The mesh is the only piece of "atmosphere" on the entire page; everywhere else, the inflated forms sit on flat `--cyclorama`. **Motif corpus, in addition to the components above:** - **The diagonal axis** — a single 1px `--graphite-line` hairline sitting behind every section at z-index `-1`, running upper-left to lower-right at 18° below horizontal. This is the unifying motif of the entire page. Every other element either sits on the axis or perpendicular to it. - **Circled numerals** — every component is labelled with a circled numeral set in Space Mono, sized 13px, set inside a 22px Cormorant-italic-stroked circle. The circles never use SVG; they are CSS `border-radius: 50%` with a 0.5px `--graphite-line` border. - **Catalogue caption underlines** — every caption is underlined with a single 0.5px `--graphite-line` rule that extends beyond the caption text by exactly the width of the catalogue's plate-number digits to the left, creating a hanging exposed length of underline that visually weighs the caption down. - **The wordmark seal** — concengine.net set in Cormorant 700, optical-size 96, with the `.net` portion rendered in Space Mono and tucked beneath the baseline of `concengine` so the TLD reads as a serial number stamped on the bottom of the brand. ## Prompts for Implementation Treat `concengine.net` as **one continuously scrolled mid-century product catalogue, rendered with deadpan precision, that takes its imaginary engine entirely seriously**. The site is a single HTML page, one CSS file, one small ES module of vanilla JavaScript. No framework. No router. No build step required. No analytics. **No CTA buttons. No pricing block. No stat-grid. No "subscribe" form. No "contact us."** The site is the catalogue. The catalogue is the engine. The engine doesn't sell anything; it just exists. **Page-load sequence — the cyclorama fills.** On load, the viewport shows pure `--cyclorama` for 200ms. Then a 1px `--graphite-line` diagonal hairline path-draws from upper-left to lower-right over 1.4s with a `cubic-bezier(0.7, 0, 0.3, 1)` easing — the path-draw is the corpus's most-used pattern at 35% but here it draws *one single line* and never draws another, deliberately spending the convention on a minimum dose. After the line finishes, the engine assembly fades up at 80ms intervals with a 6° rotational offset that elastic-snaps to upright. The wordmark fades in last, on a 220ms delay. **Scroll behaviour — the catalogue advances.** Native scroll. No scroll-jacking, no smooth-scroll polyfill. The plates are positioned with normal CSS flow; the diagonal axis stays parallaxed at half-speed behind the content (the corpus reports `parallax` at 93%, but here it is used *only on the single hairline*, not on photography, not on text, not on imagery — the rarest possible application of the most-common pattern). Each plate's components fade-and-elastic-translate into position when the plate enters the viewport at 30% threshold, with a 70ms stagger (corpus stagger 70%, used here in a small dose). **Interaction motifs — elastic and crystalline-shimmer, no others.** The corpus reports `elastic` patterns at 12%; this site uses elastic as its *only* interaction primitive. Every hover, every drag, every snap-back is governed by the same easing tuple: `tension: 280, friction: 26, mass: 1.0`. Specifically: - **Exploded-diagram drag.** On Plate II, the visitor can drag any component back toward the engine assembly; on release, the component elastic-snaps to its exploded position with a single overshoot and recovery. The corpus reports drag-back interactions in 0% of designs; this is the unique-to-the-page interaction. - **Coupling-7a-through-7d hover.** Each coupling rotates 18° on its own diagonal axis on hover, then elastic-returns to rest on mouseout. No clicks; the couplings do not lead anywhere. They are objects in a vitrine. - **Bearing-race ball-roll.** When the cursor enters the bearing-race plate, the eight inflated ball-bearings begin a slow roll around the race at 0.04 rotations per second, governed by the elastic spring tuple. The roll continues for 4 seconds after the cursor leaves, then decays to rest. - **Crystalline-shimmer.** The single crystalline core on Plate III runs an SVG `feGaussianBlur` filter with stdDeviation oscillating between 0.2 and 0.8 across a 6s cycle, but only when the cursor is within 200px of the form's bounding box. Outside that radius, the shimmer pauses on its current value and holds. **Storytelling — read the catalogue as a single continuous engineering reverie.** The page is not a sequence of "sections" with "headers" — it is one continuous text-and-image monograph in which each plate is a chapter in the engine's specification. The reader who scrolls from top to bottom should feel they have read a 1962 Olivetti technical pamphlet for a product that was never manufactured. The voice is consistently deadpan, consistently engineering-precise, consistently committed to the joke without ever winking at it. No exclamation marks. No second-person address. No "you." Every label is a part name. Every paragraph is a specification. **Diagonal-axis cut — the section transitions.** Every plate-to-plate transition is a single `clip-path: polygon()` cut along the 18° axis. As the reader scrolls into a new plate, the new plate's `--cyclorama` fill enters from below-right along the diagonal, replacing the previous plate's fill in a 220ms wipe governed by `cubic-bezier(0.65, 0, 0.35, 1)`. This is the page's signature motion: every scroll is a literal cut. **No CTAs, no pricing, no stat-grids.** The site has no commercial language whatsoever. No "Get Started." No "Pricing." No "Contact Sales." No "Sign Up." The only navigation is the scroll itself, and the only "exit" is the wordmark bleeding off the lower-right corner of the final plate. If the visitor wants to "do something" with the engine, the engine has nothing for them to do — which is the entire point. **Sound — silent.** No autoplay video, no ambient audio, no hover-sound. The catalogue is read in silence, the way a real museum catalogue is read. **Mobile experience — same logic, vertical-leaning axis, swipeable exploded diagram.** Every plate is single-column, body text 17px, captions 13px Space Mono. The diagonal axis is preserved at a 4° lean so that the off-axis seasick rhythm survives the narrow viewport. The exploded diagram on Plate II becomes a swipeable horizontal carousel of the eleven components. Every other interaction is preserved unchanged. **Frame budget.** The page weighs less than 800KB total including the eleven WebP component renders. The ES module is under 8KB minified. The CSS file is under 20KB. The page renders to first-paint in under 600ms on a 4G connection. ## Uniqueness Notes Three or more deliberate differentiators relative to the existing 62-design corpus, with frequency-analysis context: 1. **Inflated-3d as a strict monochrome system, not a sherbet-coloured Spline scene.** The frequency report shows `inflated-3d` aesthetic at only 3% of the corpus — already rare — and the prevailing convention for inflated-3d in 2025 is multi-coloured candy palettes, rainbow rim lighting, and rendered-in-Spline live scenes. This site refuses every one of those signals. The inflated forms are **black, white, and four greys, lit by a single overhead softbox**, and pre-rendered as static WebP — the rarest possible execution of an already rare aesthetic. Combining inflated-3d (3%) with monochrome palette (19%) produces a fingerprint that is not duplicated anywhere in the 62-design corpus. 2. **Diagonal-sections as a recurring 18° grid, not a one-off section break.** The corpus reports `diagonal-sections` at 3%, and the few designs that use diagonal sections deploy them as a single hero-to-second-section cut. This site commits to the diagonal as the **organising spatial principle of the entire page** — every section edge, every caption rule, every wordmark position, every transition wipe sits on or perpendicular to the same 18° axis. The diagonal is a hairline that visibly connects the top of the page to the bottom; the scroll itself is a slow traversal of one continuous angle. 3. **Serif-revival paired with mono in a strict two-family system that disagrees with itself.** The corpus reports `serif-revival` typography at 4% and `mono` typography at 96%; pairing them is not unusual, but **using only two families with no third sans serif** is. Most designs in the corpus reach for a third grotesque or humanist face for navigation and labels. This site commits to two families only, and uses the mono for things a 1962 IBM Selectric typist would have typed (part numbers, lat/long, plate numerals) and the serif for things a 1620 metal-typesetter would have set (body text, wordmark, catalogue captions). The pairing is a deliberate temporal collision built into the type-system itself. 4. **Crystalline motif used exactly once, as the visual punchline against an entire page of inflated softness.** The corpus reports `crystalline` motif at 4%. Most designs that use the crystalline motif use it pervasively (faceted backgrounds, repeated icons, geometric patterns). This site uses the crystalline form **on exactly one plate** (Plate III, the Crystalline Core) — the only hard-edged element on a page otherwise composed entirely of soft, rounded, inflated forms. The single crystalline core is the only place the page is sharp; it functions as the visual exclamation point of the entire monograph. 5. **Elastic interaction primitive used as the only interaction primitive, with no hover-lift, no tilt-3d, no card-flip, no cursor-follow.** The corpus reports `elastic` patterns at 12%. Most designs that use elastic combine it with three or four other interaction primitives. This site commits to elastic as the *only* interaction motion; every hover, drag, snap-back, and ball-roll is governed by a single shared spring tuple (tension 280, friction 26, mass 1.0). Hover-lift, tilt-3d, and cursor-follow are explicitly absent. The result is a page whose every motion has the same physical character — soft, slightly overshooting, slightly settling — which reinforces the inflated-rubber metaphor of the imagery. 6. **No commercial language. No CTA. No pricing. No stat-grid. No subscribe form. No contact form.** The corpus is heavily commercial — most designs include CTAs, pricing tiers, or conversion-funnel structures. This site has zero. The catalogue is the product; the product is the catalogue. The reader scrolls through, reads the engine specifications, watches the inflated couplings rotate on hover, and exits when the wordmark bleeds off the lower-right corner of the final plate. There is nothing to buy, nothing to schedule, nothing to download. 7. **Gradient-mesh used only on a single plate, beneath a flat-line schematic, with no hue.** The corpus reports `gradient-mesh` imagery at 12%, almost always rendered in saturated colour. This site uses gradient-mesh on exactly one plate (Plate VI), constructed from four warm-grey values with no hue introduced, and animated at 0.02Hz so the mesh appears almost stationary. The mesh sits beneath a pure-black flat-line schematic drawing — the contrast between atmospheric mesh and hard schematic line is the single colour-density moment on the page, and the rest of the page sits on flat `--cyclorama`. **Chosen seed (from assignment):** `aesthetic: inflated-3d, layout: diagonal-sections, typography: serif-revival, palette: monochrome, patterns: elastic, imagery: gradient-mesh, motifs: crystalline, tone: playful`. Every one of the eight axes is at the underused end of the frequency distribution: inflated-3d 3%, diagonal-sections 3%, serif-revival 4%, monochrome 19%, elastic 12%, gradient-mesh 12%, crystalline 4%, playful 19%. This combination produces a fingerprint that does not collide with any of the 62 existing designs in the corpus. **Avoided patterns from frequency analysis:** - `hand-drawn` aesthetic (82%) — not used; the page is pre-rendered 3D, not hand-drawn. - `editorial` aesthetic (53%) — adjacent to but distinct from the inflated-3d catalogue voice. - `centered` layout (93%) — refused; everything sits on or perpendicular to the diagonal axis, not on a vertical centre-line. - `full-bleed` layout (88%) — used only in Plate II and Plate VI as a deliberate exception, not as a default. - `warm` palette (98%) — refused; the only warmth on the page is the 2° warm cast of `--cyclorama` and the warm-grey of `--vellum-3`. There is no orange, no yellow, no terracotta. - `gradient` palette (93%) — refused; the gradient-mesh on Plate VI is constructed from greys only. - `parallax` patterns (93%) — used only on the diagonal hairline axis, never on photography or text. - `photography` imagery (95%) — refused; no photography of any kind. The page is pre-rendered 3D and inline SVG only. - `vintage` motifs (90%) — refused; the imagined provenance is mid-century technical, not vintage-decorative. - `professional` tone (43%) and `friendly` tone (41%) — refused; the deadpan-engineer playfulness sits between the two and resembles neither.