# Design Language for concengine.net ## Aesthetics and Tone concengine.net is a **botanical concurrency atrium** — a **friendly**, plant-keeper's logbook for a long-running compute orchard, where every running goroutine, fiber, or task is rendered as a young sprout in a hydroponic rack. The visual concept is the imagined intersection of a 1980s greenhouse-equipment catalogue and a near-future research station: rows of slightly futuristic, **muted-palette** seedling trays glowing under low-key grow-lamps, observed through a sturdy left-hand sidebar that functions as the gardener's clipboard. The site is the operator's diary, kept in pencil on graph paper, of a permanent biological-computational installation. Where the .com sibling treats the engine as a heavy mechanical control panel, the .net edition treats the same engine as a **living orchard** — softer, slower, leafier. Concurrency is reframed as cultivation: spawning is *germination*, joining is *grafting*, deadlock is *root-bind*, panic is *blight*. The narrative voice is a friendly junior horticulturist named Wren who genuinely likes the plants and is happy you stopped by. There is no urgency, no growth-hack copy, no "scale your stack today." The language is patient, present-tense, and warm: "this morning, tray 04 sprouted three new fibers — they're already racing toward the light." Mood references: a botanical illustration plate from a Royal Horticultural Society monograph (precise lines, muted wash, latin under common name), a Braun greenhouse thermostat from 1978 (off-white plastic, condensed sans-serif labels, single mint LED), the printed garden-section index card of a cottage gardener (graph paper, pencil, hand-drawn sprig in the margin), and a very early Tamagotchi screen rendered in dot-matrix sage. The result is **botanical** with a quiet **futuristic** undercurrent — a future that arrived softly, on the soil side, and never needed to shout. ## Layout Motifs and Structure The site is structured as a **persistent left sidebar plus a calm right reading column** — a documentary, **sidebar**-led layout that frames every page as "the gardener's view of one tray." The sidebar is the constant; the right column is the entry that the gardener happens to be looking at right now. **Sidebar (fixed, 320px on desktop, full-width drawer on mobile, never overlays the reading column):** - A vertical navigation listed as plant trays. Each entry is a row with a hand-numbered tray label (`Tray 01 — Spawning`, `Tray 02 — Channels`, `Tray 03 — Selectors`, `Tray 04 — Cancellation`, `Tray 05 — Backpressure`, `Tray 06 — Telemetry`, `Tray 07 — Failure Modes`, `Tray 08 — Field Notes`). - A small **geometric-abstract** SVG glyph beside each tray label — a hexagon, a stacked-circle stem, a triangulated leaf, a six-spoke radial node — drawn in 1.25px stroke, no fill. - A live "today" block at the bottom: ISO date, current sun-angle (decorative), tray under inspection, and a tiny pulsing dot that is the only animated element on the sidebar. - The sidebar uses a slightly darker muted-green than the reading column (`#3F4A3D` background, `#E5E1D2` text), giving the whole page a quiet two-tone split. **Right column (fluid, max-width 720px, gutter 80px):** The reading column is a long vertical scroll, but it is **not** an immersive full-bleed scroll like the .com sibling. It is a deliberately-paginated, low-rhythm reading experience: each tray is its own short essay (700–1200 words of narrative), broken by **card-flip** "specimen cards" that sit inline at roughly every 250 words. A specimen card is a 280×380 rectangle with a botanical-illustration-style face (front) and a technical-spec back (e.g. front: a triangulated sprout labelled "Goroutine"; back: spawn cost, parking behavior, scheduler tier). Hovering or tapping the card flips it on its Y-axis with a 700ms cubic-bezier rotate; the flip is the site's *signature* interaction and the only one that matters. Vertical rhythm uses a **graph-paper baseline grid** of 8px, made faintly visible behind the entire reading column (`#D9D6C5` 1px lines on `#EFEBDC`, opacity 0.35). Headings always land on a graph intersection. This is an honest grid, not a decorative overlay — every line of body type sits on it. There is no hero section. There is no global navigation strip across the top. The sidebar is the navigation, the only navigation, and that is the layout's promise. ## Typography and Palette **Typefaces — Google Fonts only, three faces, no more.** - **Barlow Condensed** (weights 300, 400, 500, 600). Primary **condensed** display face. Used for tray labels in the sidebar, all headings (H1–H4) in the reading column, specimen-card species names, and any caption that needs to feel like a botanical-monograph plate label. Headings are tracked at +30 letter-spacing and rendered in `#1F2A1B` Forest Ink. Specimen species names go all-caps, weight 500, tracked at +120 — the sort of label you'd see hand-stamped on a wooden plant marker. - **Newsreader** (variable, optical-size axis used). The reading face for body copy and Wren's diary entries. Body copy is 17px, weight 400, line-height 1.55, optical-size set to its 17 stop; quotations and pull-paragraphs run at 21px optical-size 21. Newsreader is chosen specifically because its low-contrast, slightly-bookish stance pairs better with condensed display than a more neutral grotesk would — it gives the long-form passages a quiet, almanac-like patience. - **JetBrains Mono** (weight 400 only). The technical inset face. Used exclusively for: the back of specimen cards, code samples set inside graph-paper-backed `
` blocks, and the live-today block in the sidebar. Sized at 14px with 1.5 line-height. Never used for prose.

**Palette — eight muted hues, no gradients except one.**

- `#EFEBDC` — Page Linen. The primary background of the reading column. Warm off-white with a green undertone. Reads as old paper under shaded daylight.
- `#3F4A3D` — Conservatory Slate. Sidebar background. A cool, low-saturation forest green that sits halfway between graphite and moss. The single anchor color of the design.
- `#1F2A1B` — Forest Ink. Primary type color. Almost-black, but unambiguously green-tinted; never use pure `#000000`.
- `#7A8B6E` — Sage Wash. Body-copy secondary, specimen-card line-art, sidebar dividers. The "pencil-on-graph-paper" feel.
- `#C9B98A` — Field Wheat. Accent for date stamps, latin binomial labels, and the underline on hovered links.
- `#B45F4D` — Terracotta Pot. The single warm accent. Reserved for: error/blight states on cards, the pulsing "today" dot, and exactly one drop-cap per page. Never used for headings.
- `#5C7BA1` — Cold-Frame Blue. Used only for `` link visited state and for the futuristic "data-glow" ring around active sidebar entries. The color borrowed from the future side of the design.
- `#D9D6C5` — Graph-Paper Line. The 8px baseline grid on the reading column. Always behind, never in front.

The one permitted gradient is a 12% radial wash from `#C9B98A` to transparent, sitting behind specimen-card front faces only, simulating the soft pool of a grow-lamp.

## Imagery and Motifs

**All imagery is original SVG. No photography, no raster, no stock illustration, no 3D render.** This is doctrinal — the orchard exists only as a drawing.

**Geometric-abstract botanical specimens.** Every plant on the site is rendered as a triangulated, low-poly silhouette of a real species: bracken fern as a recursion of stacked equilateral triangles, monstera deliciosa as a hexagonal tile with negative-space cutouts, a tomato vine as a chain of circles connected by 2px stems, a fiddle-leaf as a single bezier sweep. Stroke 1.25px, color `#7A8B6E` Sage Wash on `#EFEBDC`. The drawings are intentionally cold and constructed — they are the **futuristic** half of the design, expressed through reduced-shape illustration rather than chrome.

**Tray glyphs in the sidebar.** Eight bespoke SVG glyphs, one per tray, each 24×24, each built from no more than seven primitives (circle, hexagon, line, triangle, arc). The glyph for "Spawning" is a single circle with three radiating short lines; "Channels" is two circles connected by a parallel pair of lines; "Cancellation" is a hexagon with one corner notched out. The glyphs read together as a coherent system, like a constellation key on the back of a star map.

**Specimen-card faces.** Front of each card carries one geometric-abstract specimen, centered, with the common name in Barlow Condensed and the latin binomial in Newsreader italic below it. Latin names are joke-half-real: *Goroutine sativa*, *Channellus duplex*, *Mutex hortensis*, *Selectus paniculata*, *Backpressura compacta*, *Panicus terminalis*. Card backs are pure JetBrains Mono technical specs against a `#3F4A3D` slate, faintly textured with 6% additive noise.

**Margin sprigs.** At the start of each tray essay, a small (60×60) hand-precise SVG sprig sits in the left margin, half-bleeding into the gutter. Unlike the geometric specimens, the sprigs are slightly rougher — a subtle nod to the cottage-gardener index card. There are eight sprigs total, one per tray.

**No icons elsewhere.** The sidebar pulse, the page rules, and the link underlines are the only non-illustrative graphical elements. There is no icon-set for "share," "menu," "search," "GitHub," or "RSS" — those affordances are typeset, not iconified.

## Prompts for Implementation

Build concengine.net as a **static, multi-tray HTML document** rendered as a single page with eight in-page tray sections, plus deep anchor links per tray. No SPA framework. No client-side router. Vanilla HTML, hand-written CSS (custom properties, no preprocessor required), and a small ES2022 script for the card-flip and the active-sidebar-pulse.

**Page shell.** `` is split into `