# Design Language for concengine.com ## Aesthetics and Tone concengine.com is a **neomorphic concurrency console** dressed in **retro-futuristic** brass-and-amber tones, narrated in a **raw-authentic**, almost confessional voice. The domain reads as "conc-engine" — concurrency engine — and the entire site frames itself as the operator's panel of a fictional, half-mechanical parallel-execution machine that was patented in 1974 by an East-German cybernetics cooperative, lost to history, and recently dragged out of a damp warehouse and re-skinned for the web by someone who refuses to lie about how messy the recovery has been. The mood is **soft-pressure haptic** crossed with **tarnished optimism**. Every surface looks like beige Bakelite that has been pressed from the inside — buttons rise out of the panel rather than sitting on it, dials are recessed wells, sliders ride in carved channels. The shadows are not the cheap dual-shadow neomorphism of 2019 dribbble shots; they are deeper, warmer, more analog. Highlights are the color of a 60-watt incandescent bulb at 80% dim. Shadows carry the warmth of old paper soaked in tobacco smoke. There is no glassmorphism here, no frost, no neon. Everything is matte. Everything has the weight of a Soviet calculator. The tone of the writing matches: **raw-authentic** means the operator-narrator admits when the machine glitches, when a thread starves, when a deadlock had to be force-killed at 3am. Microcopy reads like maintenance-log entries — "scheduler woke channel 7 after 4.2s, root cause unverified, accepting it for now." There are no marketing claims. There are no testimonials. There is no pricing block, no CTA cluster, no stat grid bragging about "10x faster." The page does not sell. The page **confesses** how a concurrency engine actually behaves under load, and trusts that the kind of engineer who would buy one will recognize honesty when they see it. The closest analog reference points: the panel of an EMS Synthi 100, the typography of vintage IBM service manuals, the color sense of a tobacco-stained Marantz 2270 receiver, the quiet confidence of a Penguin Classics paperback printed in 1971. Together: a machine that runs threads, photographed under a desk lamp, captioned by someone who is too tired to lie. ## Layout Motifs and Structure The site is built as a single, vertical, **immersive-scroll** narrative — one long control panel that the user travels down, section by section, as if pulling open the panels of a tall server cabinet from the top to the bottom. There are no horizontal jumps, no carousels, no tabs. The page is one document, scrolled. **Eight panels, vertically stacked, each filling 100vh.** Each panel is a "module" of the fictional machine, and each module reveals itself through **slide-reveal** as the user scrolls into its viewport — the panel slides in from the side opposite to the previous one, alternating left-right-left-right down the page, so the eye is led in a slow zigzag rather than dropped straight down. The slide is slow (1.4s, ease-out), and the panel arrives slightly tilted (3deg) before settling flat, the way a heavy drawer rocks on its rails before coming to rest. **The panels in order:** 1. **Identification Plate** — domain name engraved in serif, serial number, year of manufacture, country of origin (fictional: "Cooperative Berlin–Halle, 1974"), narrator's first paragraph. 2. **Channel Map** — a top-down diagram of the engine's eight concurrency channels, each a recessed neomorphic well with an amber LED-style indicator that pulses at the channel's reported throughput (slow for idle, fast for active). 3. **Throughput Dial Cluster** — three large recessed dials showing latency, throughput, and contention. The needles drift idly when the user is reading; on hover, they snap to a target value with a small spring overshoot. 4. **Scheduler Confessional** — a long-form passage of body text in elegant serif, the narrator describing one specific bug, one specific deadlock, one specific 3am fix. No images. Only text and shadow. 5. **Geometric Schematic** — a vector schematic drawing of the engine's internals, rendered in flat geometric shapes (circles, hexagons, isoceles triangles, no gradients), labeled with serif callouts. 6. **Memory Crate** — a grid of nine recessed wells, each containing a single piece of "evidence" (a photograph caption, a code fragment, a log line, an oscilloscope trace). 7. **Open Issues** — a vertical list of bugs the narrator hasn't yet fixed, presented as honest typed lines with strikethrough where they've been resolved and ink-blot annotations where they haven't. 8. **Footer Plate** — a single line of serif text giving the narrator's first name and a postal address that may or may not exist. **Spatial system.** The grid is a 12-column grid with a generous 96px gutter on screens above 1280px, but the grid is mostly used as a *constraint*, not a visible structure — content sits in 8 of the 12 columns, leaving 2 columns of breathing room on each side. The vertical rhythm is 24px-baselined and every element snaps to it, so the page feels typeset, not assembled. **Negative space is the dominant motif.** Each panel is at least 40% empty. **Depth language.** Three z-planes only: - **z=0** — the panel surface itself, the Bakelite background. - **z=+1** — raised neomorphic elements (buttons, plate edges, the engraved serial number). - **z=-1** — recessed neomorphic elements (dial wells, channel indicators, evidence wells, type itself when used as inset engraving). No floating cards, no parallax layers, no modal overlays. Everything that exists, exists at one of these three depths, and the rest of the page acknowledges it. ## Typography and Palette **Typefaces — Google Fonts only.** - **Cormorant Garamond** (variable, weights 300–700, italic available). The primary **elegant-serif** face. Used for all headings, all long-form body passages in the Scheduler Confessional, and for engraved labels on the engine's panels. Headings use weight 500, italic where the narrator is being personal. Body copy is 17px Cormorant Garamond at weight 400, line-height 1.65, slightly looser than typical to give the prose the airiness of a 1970s trade paperback. The italic is heavily used — about 15% of body text — because the narrator is a confessing voice, and the italic carries that intonation. - **JetBrains Mono** (weights 400, 500, 700). Used exclusively for log-line entries, code fragments, channel identifiers, and serial numbers. JetBrains Mono is the only sans/mono in the system; everything else is serif. Mono is used at 14px for log lines, 12px for serial numbers, and 18px for code fragments in the Scheduler Confessional. - **Cormorant SC** (small caps, weights 400, 500). Used only for engraved plate labels on the panels — "CHANNEL 03," "LATENCY," "OPEN ISSUES." Always tracked +60 letterspacing, always rendered as inset (recessed) neomorphic engraving. No third typeface. No display face. No handwriting. The serif is the voice; the mono is the machinery. **Palette — eight colors, no gradients, no transparency stacks.** This is a **retro-futuristic** palette, but warm-leaning rather than the chrome-and-magenta retro-futurism of vaporwave. Imagine a 1970s East-German lab repainted by a careful restorer in 2026. - `#D7C9A7` — **Bakelite Cream** — the primary panel surface. Every neomorphic shadow is calculated against this base. Warm, slightly yellowed, never pure cream. - `#C2B391` — **Tobacco Linen** — secondary surface, used for the inside of recessed wells. Slightly darker than Bakelite Cream so wells read as wells. - `#8A6E3F` — **Aged Brass** — accent color for the engraved serif headings, the dial bezels, and the borders of evidence wells. A burnished, slightly green-shifted brass, not the orange brass of cheap fixtures. - `#3B2E1E` — **Tobacco Ink** — the primary body-text color. Not black. Tobacco-tinted, the color of fountain-pen ink that has been on paper for fifty years. - `#1A1410` — **Smoke Ink** — used only for the very deepest recessed shadows and for the strikethrough lines on resolved Open Issues. Effectively the darkest color in the palette. - `#E8B547` — **Filament Amber** — the LED accent. Used exclusively for the channel-status indicators, the active state of the throughput dials, and one-character emphasis in Cormorant italic ("the scheduler *woke*"). Never used for backgrounds, never used for fills — only for points of light. - `#7A2A1F` — **Oxide Red** — used only for unresolved Open Issues, for error log lines, and for the small cinnabar dot that marks the narrator's signature on the Footer Plate. Sparingly. One or two appearances per panel maximum. - `#5B6E5A` — **Verdigris** — used only for the geometric schematic in panel 5 and for one small motif: a hairline border around photographs. The faintest hint of green that prevents the palette from being purely brown-amber. **Shadow recipe — the neomorphic core.** The site stands or falls on this. Every raised element uses two shadows: - highlight: `-8px -8px 18px rgba(255, 245, 220, 0.55)` (warm, top-left, large blur) - shadow: `10px 12px 28px rgba(40, 28, 16, 0.32)` (dark, bottom-right, larger blur) Every recessed element inverts these and applies them as inset: - inset highlight: `inset -8px -8px 18px rgba(255, 245, 220, 0.40)` (top-left) - inset shadow: `inset 10px 12px 26px rgba(40, 28, 16, 0.42)` (bottom-right) These offsets are larger than typical neomorphism (2–4px shadows are standard) because the surface is meant to feel **deep** and **confessional**, not weightless. The light source is fixed: top-left, slightly warm. It never moves. Nothing wobbles. ## Imagery and Motifs **Vector art is the only imagery used on this site.** No photography, no 3D renders, no hand-drawn illustration, no icons from a stock library. Everything graphical is built from geometric shapes — circles, hexagons, equilateral and isoceles triangles, straight lines, and the occasional bezier arc — assembled in SVG and rendered crisp. This commitment to **vector-art** and **geometric-shapes** is doctrinal: the engine is an abstraction, and abstractions deserve abstract drawings. **The schematic system.** Panel 5 (Geometric Schematic) is the design's centerpiece. It is a single large SVG, roughly 800×1100, depicting the fictional engine's internals as a top-down architectural drawing. It uses: - thin-stroke lines (1.5px, `#3B2E1E` Tobacco Ink) for structural outlines, - filled geometric shapes (circles 24–96px, hexagons 48–80px across the flats, triangles always isoceles with a 3:4 base-to-height ratio) in `#C2B391` Tobacco Linen and `#8A6E3F` Aged Brass, - callout labels in Cormorant SC small caps with a single 1px lead-line in `#5B6E5A` Verdigris from the label to the labeled element, - no shading, no gradient fills, no drop shadows on the SVG itself (the schematic is conceptually "flat paper" sitting at z=0 on the panel; the panel underneath has the neomorphic shadows). **Channel indicator iconography.** Each of the eight channels in panel 2 is a recessed circular well with a 12px filled circle in `#E8B547` Filament Amber at its center. The amber circle pulses (opacity 0.6 → 1.0 over 1.2s, then back over 1.2s) at a rate that visually encodes the channel's current activity. Idle channels pulse slowly (3.6s cycle), saturated channels pulse fast (0.4s cycle). The pulse is the only light source on the site, and it is the closest thing to "neon" that the design permits. **Dial faces.** The three large dials in panel 3 are vector-drawn: a recessed circular well, an inner ring of tick marks (16 ticks, every 22.5deg), a needle in `#3B2E1E` Tobacco Ink with a subtle taper from base to tip. The dial-face label is in Cormorant SC small caps. The needles are independently animated; on idle they drift +/- 5deg from their resting value with a slow Brownian-style sine. On hover, they spring to a target value (overshoot 8%, settle in 480ms). **Decorative motifs.** Three motifs appear, repeatedly, throughout the site: - **The hexagon** — used as the housing shape for eight of the nine evidence wells in panel 6 (the ninth is a circle, deliberately broken). Hexagons because the engine, in the fiction, was originally designed with a hex-bus topology. - **The isoceles triangle** — used as the resting indicator on the dial bezels (a small filled triangle pointing inward at the 12-o'clock tick). - **The hairline arc** — used as a decorative element in the spaces between panels, drawn in 1px `#5B6E5A` Verdigris, always as a 90deg arc, always with a radius of 240px, always entering from the top-right corner of the panel below. There are no photographs of people. There are no logos of fake companies. There are no testimonials. The only "human" element is the narrator's voice in the Scheduler Confessional and the small `#7A2A1F` Oxide Red signature dot on the Footer Plate. ## Prompts for Implementation Build concengine.com as a **single, scroll-only, eight-panel HTML document**. No SPA, no router, no second page. The user enters at the top, reads down, and exits at the bottom. Internal anchor links are permitted but discouraged — the site is a *narrative*, not an *index*. **Page shell.** A single `
` containing eight `
` elements, each `min-height: 100vh`, separated by 96px of `#D7C9A7` Bakelite Cream gutter. The body background is also `#D7C9A7`. There is no header, no footer beyond panel 8, no nav, no hamburger, no logo bar. **Slide-reveal animation.** Each panel begins offscreen-translated (translateX of +120px on odd panels, -120px on even panels) and rotated 3deg, with opacity 0. As the panel's top edge reaches 60% of viewport height, an IntersectionObserver triggers the reveal: translate to 0, rotate to 0, opacity to 1, over 1.4s with `cubic-bezier(0.22, 0.61, 0.36, 1)`. The rotation settles last; do not collapse all three transforms into one timing curve, the rocking-into-place quality depends on the rotation finishing 200ms after the translation. **Neomorphism — get it right.** The single most failure-prone aspect of this design is the shadows. Implement them once, in CSS custom properties, and reuse: ``` --shadow-raised: -8px -8px 18px rgba(255, 245, 220, 0.55), 10px 12px 28px rgba(40, 28, 16, 0.32); --shadow-recessed: inset -8px -8px 18px rgba(255, 245, 220, 0.40), inset 10px 12px 26px rgba(40, 28, 16, 0.42); ``` Apply `--shadow-raised` to: dial bezels, panel-edge mouldings, the Identification Plate, the engraved serial number housing, the Footer Plate. Apply `--shadow-recessed` to: dial wells, channel-indicator wells, evidence wells, all engraved Cormorant SC labels (use `text-shadow` with the same recipe at smaller scale). Do not mix raised and recessed elements without at least 24px of breathing space between them; their shadows interfere visually. **Engraved type.** For Cormorant SC small-cap labels that are meant to read as inset engravings, use this `text-shadow`: ``` text-shadow: -1px -1px 1px rgba(255, 245, 220, 0.7), 1px 1px 1px rgba(40, 28, 16, 0.5); ``` combined with a `color` very close to the panel surface (`#C2B391` Tobacco Linen on a `#D7C9A7` Bakelite Cream panel, for example). The type should be barely-readable — squinting is part of the aesthetic. **Dial animation.** Use `requestAnimationFrame` to drive the idle Brownian-style needle drift. Maintain a target value per dial and interpolate the displayed angle toward `target + (sin(t * f) * 5deg)` where `f` is a small per-dial frequency. On hover, suspend the drift, transition the needle to a "ground truth" value with a spring (overshoot 8%, settle in 480ms), and resume drift on hover-out. Three dials maximum; do not multiply this animation across the site. **Scroll narrative pacing.** The Scheduler Confessional (panel 4) is the longest panel, roughly 800–1200 words of prose in Cormorant Garamond. Set its `min-height` to `auto` (it can exceed 100vh), and let the slide-reveal trigger only once on entry, not on re-scroll. The user is meant to settle into this panel and read; do not attach scroll-linked animations inside it. **Storytelling, not selling.** The voice throughout the page is first-person, past-tense, and unfailingly honest. Sample microcopy lines, to set tone: - (Identification Plate): *"This page is the operator's panel for an engine that might not exist. I built it from notes I found in a folder marked 'East-Halle, 1974' and from things I had to invent because the notes were burned at the corners. I do not know how much of what follows is true."* - (Channel Map caption): *"Channel 7 has a soft fault. It works, but it works in a way I do not understand. I am leaving it on."* - (Open Issue, unresolved): *"The contention dial reads negative when the page loads on Tuesday afternoons. I have not figured out why. — narrator, 2026-04-19"* - (Footer Plate): *"Written in Halle, mostly. — H."* Avoid: pricing pages, testimonials, "trusted by" logo strips, feature comparison tables, stat grids ("99.9% uptime"), CTA buttons larger than body type, signup modals, cookie banners styled as sales prompts, social proof, awards. None of these belong in a confessional. **Permitted interactions.** - Hover on dial → spring snap. - Hover on channel indicator → tooltip in JetBrains Mono showing the channel's serial id. - Click on an Open Issue → strikethrough animates across with a draw-stroke effect (1.2s), and the issue's `data-resolved` attribute flips. (Pure visual — no backend.) - Scroll → slide-reveal. That is the entire interaction surface. There are no forms, no inputs, no buttons that submit anything, no auth. The page is a panel; you read it. **Never:** add a hero image, add a video background, add a parallax layer behind any panel, add glassmorphism to any element, add a gradient anywhere on the page, animate the cursor, attach magnetic hover to anything, stagger-animate a list of cards on scroll. These are the patterns this site is **defined against**. ## Uniqueness Notes This design's differentiators — each a deliberate departure from the rest of the CMassC catalog and from default web aesthetics: 1. **Neomorphism done warm and deep, not pale and shallow.** The standard 2019-era neomorphism uses pale lavender/grey with 4–6px shadows and reads as weightless. concengine.com pushes the shadow offsets to 8–12px, warms the highlight toward incandescent yellow (`rgba(255, 245, 220, 0.55)`), and tints the shadow toward warm brown. The result reads as **Bakelite under a desk lamp**, not as a phone-app login screen. The frequency analysis shows neomorphism at 2% of designs; this is a deliberate, warm-leaning take on a very-rare aesthetic. 2. **Retro-futurism without the chrome-and-magenta cliché.** The retro-futuristic palette in seeds.json is most often interpreted as vaporwave (chrome, magenta, cyan). This design rejects that entirely and reaches for an Eastern-Bloc 1970s alternative-futurism: tobacco, brass, amber, oxide red, verdigris. Retro-futuristic appears in 5% of designs; chrome-magenta is overrepresented within that 5%. This take is unique within the catalog. 3. **Elegant serif used for body confessional, not heading luxury.** Most elegant-serif designs deploy the serif as a luxury heading face and put body in sans. concengine.com inverts this: Cormorant Garamond is the *body voice*, used for 800+ words of prose in panel 4, with mono used for log fragments. The serif carries narrative, not branding. 4. **Slide-reveal as the only entrance animation, with rocking-rotation.** Slide-reveal appears in only 4% of designs, and where it does appear it is usually a simple translate. This design's slide-reveal arrives **tilted** and rocks into place, with the rotation finishing 200ms after the translation. Nothing else on the site animates on entry — no fade-reveal, no stagger, no spring-bounce. One animation, used eight times. 5. **Vector-art and geometric-shapes as the entire imagery system.** No photography (a 98% pattern explicitly avoided), no hand-drawn (95% avoided), no 3d-render. Every visual is SVG composed of circles, hexagons, isoceles triangles, and hairline arcs. The schematic in panel 5 is the centerpiece. This is a deliberate move away from the photography-saturated default of the catalog. 6. **Raw-authentic narrative voice.** Raw-authentic appears in 2% of designs. The narrator on this site admits when the engine glitches, when channel 7 has a soft fault, when an issue remains unresolved. There is no marketing language anywhere on the page. The frequency report's most-used tones (pastoral-romantic 25%, warm-inviting 22%) are explicitly avoided — this voice is a confession, not a welcome. 7. **Immersive-scroll without parallax, without horizontal scroll, without sticky elements.** Immersive-scroll appears in 8% of designs, and most implementations rely on parallax layers, sticky headers, or pinned sections. concengine.com's immersive-scroll is purely vertical, panel-by-panel, with no sticky anything and no parallax layer. The scroll is a *reading*, not a *cinematic*. 8. **No CTAs, no pricing, no stats, no testimonials, no social proof.** The frequency report rewards designs that bias against CTA-heavy layouts; this design takes that bias to its logical end. There is not one button on the entire site that does anything except toggle a strikethrough on an Open Issue. There is no contact form. There is no signup. There is no purchase path. The page exists to be read, and that is the whole specification. 9. **Tobacco Ink instead of black, Filament Amber instead of accent-blue, Verdigris instead of accent-green.** No element on the site uses pure black (`#000`), pure white (`#FFF`), or any of the default Tailwind/Bootstrap accent colors. Every color in the palette was tuned against `#D7C9A7` Bakelite Cream. This palette discipline is rare in catalogs at this scale. **Chosen seed (from assignment):** *aesthetic: neomorphism, layout: immersive-scroll, typography: elegant-serif, palette: retro-futuristic, patterns: slide-reveal, imagery: vector-art, motifs: geometric-shapes, tone: raw-authentic.* **Patterns avoided per frequency analysis:** photography (98%), gradient (96%), mono-as-primary (95%), hand-drawn (95%), parallax (94%), full-bleed (90%), centered (82%), card-grid (75%), cursor-follow (75%), spring-default (75%), magnetic (65%), warm-default-pastel (95% of warm palettes lean pastel; this one leans tobacco), pastoral-romantic tone (25%), warm-inviting tone (22%). Every one of these is explicitly absent from concengine.com.