# Design Language for chloengine.com ## Aesthetics and Tone `chloengine.com` is the imagined homepage of a **quiet rooftop laboratory in a thousand-window megacity**, where one operator runs a single piece of unfinished software called *the chloengine* — a machine whose only product is **chlorophyll-green light**, brewed by feeding the city's noise into a slow vegetal algorithm. The domain decodes as **χλωρός (chlōros, pale-green) + engine**. The aesthetic refuses to choose between the two halves of that compound noun. It is **wabi-sabi as written by an electrician** — a contemplative, imperfect, hand-glazed surface, into which a single conductor of **dopamine-neon chartreuse** has been fired and left to glow. The page should feel as if a Kyoto tea-master and a Shenzhen neon-shop technician collaborated for thirty silent years on one webpage and walked away the moment it began to hum. The mood is **zen-contemplative**, but the *active* zen of a master who has spent the morning sweeping a courtyard and the afternoon soldering a circuit. There is no hurry. There is no hard sell. There is no hero CTA shouting "Get Started." Instead the visitor arrives at what looks like the half-burnt page of a 1970 mechanical-engineering textbook reprinted on rough kōzo paper — uneven margins, a single soft typewriter-keystroke clicking out the title — and only after sitting with it for five seconds does the chartreuse begin to bleed through the page-edges, slow as moss. The tone is **scholarly without lecture, neon without nightclub, urban without anxiety**. The voice in the running text is patient, slightly melancholic, occasionally amused — the voice of someone who has accepted that the engine will never be finished, and is therefore free to keep tending it. The governing inspirations, in order: a **Sōetsu Yanagi unknown craftsman** essay; a **circuit-board negative** photographed on Kodak Portra 400; the **moss garden at Saihō-ji** the morning after a rainstorm; a **Robert Bringhurst chapter** on the typographic page; a **single failing chartreuse fluorescent tube** humming above a Tokyo machine-shop sign at 4:17 a.m.; the **rough-glazed lip of an Iga-yaki tea bowl** under a desk lamp. The site should feel inhabited — used — by **one person, slowly, over decades**. ## Layout Motifs and Structure The page is built as a strict **f-pattern reading scaffold superimposed on an aged paper field** — the visitor's eye is led, exactly as Nielsen's heatmaps predict, **across the top, down the left rail, across again, then down**. But the f-pattern is not used here for marketing efficiency; it is used as a **calligraphic stroke sequence**, a single *kanji* drawn at full-page scale, written *once* by the entire layout. The horizontal bars and the vertical descender are the bones; everything else is breath. **The grid (12 columns over a 1280px optical max-width, with a 96px outer gutter that grows to 14vw on widescreen).** - **Top horizontal bar of the F (rows 1–3):** A single full-bleed **header strip** containing the wordmark *chloengine* in serif-revival, a 1px chartreuse rule that spans the entire top, and on the right a small **isometric icon** (a tilted 30-60-90 cube with a chartreuse face) that rotates by `0.4deg` per scroll-tick. No nav menu — the only navigation is the act of scrolling. - **Left vertical rail of the F (columns 1–3, rows 4–end):** A **persistent marginal annotation column** styled as the left margin of a hand-bound book. Dropped capitals, Roman-numeral chapter numbers (set as `serif-revival` italic), and a slow `typewriter-effect` ticker at the very bottom of the rail that re-types the line *the engine is running* once every 90 seconds — three words, ~3.6s of typing, then a 2.4s caret blink, then erase, wait, retype. - **Second horizontal bar of the F (rows 4–6, columns 4–12):** The first reading paragraph. Set as a **wide, single-column 68ch column** in EB Garamond, with the *first three words* set in chartreuse and the rest in deep ink — the visitor's eye lands on the chartreuse, then drifts right and down as Nielsen predicts. - **Long descending body of the F (rows 7–N, columns 4–9):** A vertical river of **eight stanza-paragraphs**, each preceded by an isometric icon-glyph in column 3 (left rail). The reading width *narrows* by 4ch per stanza, so the text physically funnels toward the bottom — the f-pattern's descender is *literalized* as a tapering river of prose. - **Right marginal column (columns 10–12):** **Empty by default.** It is the page's *ma* (間) — the negative space that gives the rest its weight. Once per ~250vh scroll, a single chartreuse `` margin-note appears in this column, set in italic serif-revival, ~9px, like a translator's footnote — *the kiln cools by 0.3°C per minute*, *circuit board, n., a paper that holds light still*, *this character does not exist in Unicode*. **Spatial rhythm and imperfection.** Every section is offset from the grid by **±2px to ±7px on a fixed pseudo-random seed**, hand-tuned, never algorithmic. Section dividers are **single hand-drawn ink strokes** (inline SVG paths with deliberate `stroke-dasharray` jitter and `stroke-width` taper from 1.4px → 0.6px → 1.1px) that visibly *fail* to reach the right margin by 12-40px each — the wabi-sabi rule of *intentional incompletion*. The page never returns flush to the grid. It always settles slightly off-true, like a hand-thrown bowl. **Vertical rhythm.** Baseline grid is **fixed at 8px**, but every fourth baseline is *deliberately compressed* to 7px — invisible to the eye, but the page acquires a subtle, breathing irregularity. Section spacing follows the **Fibonacci ratio in vh**: 8vh, 13vh, 21vh, 34vh, 55vh of empty paper between major sections. The longest gap (55vh) is between the seventh and eighth stanza, marked only by a single chartreuse dot, 6px, drifting in column 3. The page is **scrolled, never paginated**, but a small chartreuse progress mark — one isometric chartreuse cube, 14px — climbs the right margin as the visitor descends, indicating *which face of the kiln* is currently visible. ## Typography and Palette **Typography — three Google Fonts families, ranked by weight of voice:** - **Primary serif (display + body) — [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond)** (regular 400, medium 500, italic 400/500). This is the **serif-revival** voice — Cormorant is itself a 21st-century revival of Claude Garamont's 16th-century cuts, with extreme contrast and a high-x drama that suits chartreuse very poorly in headings (good — the slight discomfort is intentional) and very well in body running text. Used for: the wordmark *chloengine* at `clamp(3.4rem, 6.6vw, 5.6rem)` italic 500 with letter-tracking `-2.4%`, all body text at 21px / 34px line-height letter-tracking `+0.6%` regular 400, all italic margin-notes, all dropped capitals (italic 400, color chartreuse, size 4× body). - **Secondary serif (chapter numerals + small caps) — [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond)** (regular 400, italic 400, small-caps via `font-feature-settings: "smcp"`). Used **only** for Roman chapter numerals (I, II, III, IV…) in the left rail at 14px italic, and for the small-caps captions beneath each isometric icon. EB Garamond is the *quiet* serif-revival, paired against Cormorant's *theatrical* serif-revival — two voices of the same lineage, eight centuries apart. - **Mono accent (typewriter-effect only) — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)** (regular 400). Used **only** for the typewriter-effect ticker at the foot of the left rail and for the single chartreuse margin-notes. JetBrains Mono at 12px, letter-tracking `+1.6%`, with a *visible blinking caret* drawn as a 2px-wide chartreuse `▋` character. Mono usage on the page totals **less than 50 visible characters at any given moment** — the mono is a whisper, not a chorus. **Type scale (8px baseline, modular ratio 1.333 — the perfect fourth):** ``` 9px margin-notes (mono, italic small-caps) 12px typewriter ticker, captions 14px Roman chapter numerals 16px small body 21px body (default reading size) 28px stanza first-line lead-in 37px pull-quotes (italic Cormorant) clamp(3.4rem, 6.6vw, 5.6rem) wordmark ``` **Palette — seven hand-mixed values (paper, ink, chartreuse, three quiet greens, one dust).** The `--chartreuse` token is the dopamine-neon hit; everything else is wabi-sabi mineral. ``` --paper-raw #EDE6D6 /* uneven kōzo, the body background */ --paper-glaze #F5EFDF /* highlight paper, used in column-3 cards only */ --ink-deep #1B1A14 /* nearly-black, all body text — never pure #000 */ --ink-soft #45413A /* secondary text, captions */ --chartreuse #C7F23A /* the engine itself — dopamine-neon */ --chartreuse-glow #E5FB6E /* 60% lighter chartreuse, used only as glow halo */ --moss-deep #4A5837 /* the cooled green — accent rules, isometric edges */ --celadon-mist #B7C3A5 /* the kiln-vapour, used for muted secondary surfaces */ --ash-warm #847D6D /* the dust on the bench, dividers, captions */ ``` **Distribution rule (the wabi-sabi-plus-neon law).** The chartreuse must occupy **between 1.4% and 2.8% of any visible viewport pixel area** — measured. Less than 1.4% and the page looks bleached; more than 2.8% and the engine becomes a billboard. The chartreuse appears as: (1) the wordmark's first three letters *chl*, (2) the first three words of the opening paragraph, (3) the isometric cube faces (one per icon), (4) the typewriter caret, (5) the right-margin progress cube, (6) the rare margin-note, (7) the 1px top rule, and **nowhere else**. Everything else is paper, ink, moss, ash. **Paper texture.** The body's background is *not* a flat fill. It is **`--paper-raw` overlaid with a 2200×2200 SVG noise-turbulence filter** at `baseFrequency=0.85`, `numOctaves=3`, opacity `0.07`, blend-mode `multiply`. The result is a faint, uneven, hand-deckled paper surface that responds invisibly to the chartreuse — beside the neon, the paper looks even rougher. ## Imagery and Motifs **No photography. No stock. No 3D renders.** Every visual is either **inline SVG** (hand-built) or **CSS-drawn isometric geometry**. The visual vocabulary is composed of four motif families, ranked by frequency on the page: 1. **Isometric icons (the signature imagery, one per stanza, eight total).** Each stanza of the body river is preceded by a small **isometric-icon glyph** drawn at `30°/30°/90°` axis projection in pure SVG, 56×56px, single 1.4px stroke in `--ink-deep`, with **exactly one face filled in `--chartreuse`**. The icon vocabulary maps the chloengine's components: a **tilted cube** (the kiln chamber), a **stepped tower** (the cooling stack), a **slim cylinder** (the chartreuse vat), a **city block grid** (the rooftop view), a **hexagonal nut** (the bolted housing), a **tea-bowl with rising vapour** (the night break), a **fire-escape lattice** (the pilgrim's way down), and a **single pixel** (the engine's output light). Each icon has been drawn with a `0.6deg` rotational error from true axonometric — they are *almost* technically correct, never perfectly so. On hover, the chartreuse face *pulses* exactly once: opacity `0.6` → `1.0` → `0.85` over 800ms, then settles permanently brighter (the icon *remembers* the visit). 2. **City-urban silhouette (a single full-bleed motif, used once).** Beneath the eighth and final stanza, drawn as a **single horizon-line SVG** spanning `100vw` at 88px tall, depicting a **Seoul/Tokyo skyline rendered as 240 thin vertical lines** of varying heights (each line `1px` wide, `--ink-deep`, opacity gradient from `0.18` left to `0.42` right). Three of those vertical lines are `2px` wide and **chartreuse** — three lit windows in the megacity, the only signs of life. Above the skyline floats one isometric tilted-cube icon — the chloengine itself, looking down on the city it feeds. Total chartreuse pixels in this motif: ~340. Total dark pixels: ~12,000. The ratio is the entire site's manifesto. 3. **Hand-drawn ink strokes (section dividers, used as breathing punctuation).** Single SVG paths with deliberate hand-jitter — `stroke-dasharray: 0.4 0.2 0.6 0.3 0.5` — that taper from `1.4px → 0.6px → 1.1px` along their length, fail to reach the right margin by 12-40px (different gap each time, fixed seed), and end in a small chartreuse dot the size of a typewriter period. There are **exactly five** dividers on the page, no more, no fewer. 4. **The typewriter caret and the chartreuse seal.** At the foot of the page sits a single **chartreuse circle 22px in diameter**, slightly off-round (the path is 64-segmented with ±0.8px jitter) — the *engine's seal*, a vegetal hanko stamp. Inside the seal, in 8px JetBrains Mono, three Korean letters: **녹·동·력** (*nok-dong-ryeok*: green-engine-power), the only non-Latin glyphs on the page. Below the seal, in 9px italic Cormorant, a single English line: *built slowly, by one hand, in a rented room.* **Decorative motifs that do not appear (deliberate omissions).** No photography. No gradients except the soft chartreuse glow halo. No emoji. No stock illustration. No flat icons. No drop shadows. No glassmorphism. No bento boxes. No data-viz. The page contains **zero raster images**. ## Prompts for Implementation Build `chloengine.com` as **a single long page that reads like a private engineering essay written on hand-pressed paper** — eight stanzas, one operator, one running engine. The implementation is a single HTML file, one CSS file, one small ES module of vanilla JavaScript. **No framework, no build step, no analytics, no router, no third-party assets** beyond Google Fonts. Total weight target: **under 220KB**, of which less than 18KB is the inline SVG vocabulary. **Opening sequence (the first 6 seconds — the engine warming up).** 1. `0.0s` — Page loads. Background is `--paper-raw` only. Nothing else visible. 2. `0.4s` — The 1px top horizontal rule **draws itself** left-to-right via `stroke-dashoffset` over 1.6s in `--chartreuse`, then fades to `--moss-deep` at 60% opacity once complete. 3. `0.6s → 2.4s` — The wordmark *chloengine* types itself one character at a time via the `typewriter-effect` (180ms per char, monospace tick sound *not* implemented — this is silent typography). The first three letters *chl* are set in `--chartreuse`; the remaining six *oengine* are set in `--ink-deep`. 4. `2.6s` — The single tilted-cube isometric icon in the top-right **rotates into place** from `−16deg` to `0deg` over 700ms with `cubic-bezier(0.2, 0.8, 0.2, 1)` (a soft, breathing easing — never `ease-in-out`). 5. `3.0s` — The first paragraph **fade-reveals from `opacity: 0` to `1.0`** over 1.4s. The first three words are pre-set in `--chartreuse`. There is no slide, no transform — just paper accepting ink. 6. `4.4s` — The Roman numeral *I* in the left rail draws itself in italic EB Garamond. 7. `4.8s` — The typewriter ticker at the foot of the left rail begins its first cycle: typing *the engine is running*, character by character, caret blinking in `--chartreuse`. The ticker continues *forever*, on a 90-second loop, regardless of scroll. **Stanza structure (eight stanzas, each ~110-140 words).** - **Stanza I — *the kiln chamber*** — what the engine is. *We do not know what it makes. We feed it the noise of the street and it returns a single colour.* - **Stanza II — *the cooling stack*** — how it runs. *Eleven hours on, two hours rest. The rest is when it sings.* - **Stanza III — *the chartreuse vat*** — what it costs. *One drop of chlorophyll per hour of city. The vat is half-full after thirty years.* - **Stanza IV — *the rooftop grid*** — where it lives. *Seventeen floors above an alley nobody walks. The pigeons recognize the hum.* - **Stanza V — *the bolted housing*** — what holds it together. *Nothing precision-engineered. One bolt is wood. Two are brass. The rest is patience.* - **Stanza VI — *the night break*** — when it pauses. *At 3:14 a.m. the operator drinks tea. The engine waits. The city continues without us.* - **Stanza VII — *the fire-escape*** — how to leave. *We climb down the same lattice we climbed up. The chartreuse stays on the roof.* - **Stanza VIII — *the single pixel*** — what it is for. *One green light, somewhere in a window, in a city of ten million. Someone we will never meet sees it and does not know what it is. That is the engine's only purpose.* Each stanza occupies one **scroll-revealed band** triggered by `IntersectionObserver` at `threshold: 0.3`. On entry: the isometric icon in the left rail draws itself stroke-by-stroke (1.2s, `path-draw-svg` via `stroke-dashoffset`), the Roman numeral italicizes into place (300ms), and the body text **fade-reveals at `opacity: 0 → 1` over 900ms with a 60ms stagger per line**. There is no scale transform, no slide, no parallax — wabi-sabi forbids spectacle. The page reveals itself the way a kettle whistles: slowly, then all at once, then quiet again. **Animation language — the four allowed verbs only:** - `draw` (SVG `stroke-dashoffset` from `1` to `0`) — for rules, icons, dividers. - `type` (one character every 60-180ms, with a chartreuse caret) — for the wordmark and the foot ticker. - `fade` (opacity `0 → 1` over 0.9-1.6s, no transform) — for body text and stanzas. - `pulse` (opacity `0.6 → 1.0 → 0.85` over 800ms, exactly once, on hover only) — for isometric chartreuse faces. **Forbidden motion verbs:** slide, scale, rotate (except the one micro-tilt on the header cube), parallax-translate, blur, filter-shift, scroll-jack, hover-lift, magnetic, ripple, tilt-3d. The page must move the way a candle flame moves — barely. **Cursor.** The cursor is the **default arrow**. There is no custom cursor, no follower dot, no magnetic field. The wabi-sabi position is that the visitor's hardware pointer is *already perfect* and any embellishment of it is hubris. **Sound.** The page is silent. No audio, no haptic, no notification. The typewriter does not click. This is deliberate — the chloengine *hums*, but only to its operator. **The right margin behavior — `ma` made functional.** The right column (columns 10-12) is mostly empty. This emptiness is **load-bearing**. As the visitor scrolls past stanza III, V, and VII, **a single chartreuse italic margin-note appears for 6 seconds**, fades to `--ash-warm` at 30% opacity, and remains permanently visible thereafter as a faded annotation. By the bottom of the page, the right margin contains three faded ghost-notes — the visitor's reading has *left a trace*. This is the only state the page persists. It is not stored — it resets on reload. The page forgets the visitor as gracefully as it received them. **Footer.** No footer block. No nav, no social icons, no newsletter signup, no copyright string. Beneath the eighth stanza and the city skyline, only: the chartreuse seal, the single line *built slowly, by one hand, in a rented room.*, and 34vh of empty paper. The page **ends in space**. **Anti-patterns to refuse, by name:** hero CTA, pricing block, feature grid, stat counter, testimonial carousel, FAQ accordion, newsletter modal, cookie banner styled as a card, social-proof logo strip, animated gradient mesh, parallax hero, scroll-jack section pinning, sticky nav with menu items, "trusted by" row. None of these appear. The page sells nothing — it *is* something. **Responsive behavior.** Below 720px: the f-pattern collapses to a single column, the left rail becomes a slim 24px gutter (chapter numerals shift to inline preceding the stanza), the right margin becomes 16px, the isometric icons shrink to 40px, and the typewriter ticker moves to the bottom of the page as a sticky 32px-tall strip. The chartreuse-coverage law (1.4–2.8% of viewport) holds. **The closing keystroke.** When the visitor finally reaches the bottom seal, the typewriter ticker — for the only time in the whole page — types one **different** sentence: *thank you for reading the engine.* It types once, blinks for 8 seconds, then erases and resumes its eternal *the engine is running* loop. This is the page's only easter egg. It is given to anyone patient enough to scroll. ## Uniqueness Notes Three or more deliberate differentiators relative to the existing 62-design corpus, with frequency-analysis context: 1. **Wabi-sabi as the load-bearing aesthetic at 3% saturation.** The frequency report shows `wabi-sabi` at only **3%** of the corpus — and the dominant aesthetic vocabulary is overwhelmingly `hand-drawn` (82%) and `editorial` (53%), both of which lean *outwardly tasteful*. `chloengine.com` commits fully to **wabi-sabi as the headline aesthetic**, treating *intentional incompletion* (rules that fail to reach the margin, baseline grids that compress every fourth row, hand-jittered SVG strokes, ±2-7px section misalignment on a fixed seed) as a structural law rather than a surface decoration. No other design in the corpus elevates imperfection to a typographic doctrine of this rigor. 2. **The wabi-sabi-plus-dopamine-neon collision.** `dopamine-neon` is at **3%** of the corpus and `wabi-sabi` is at **3%** — but **no existing design pairs them**. The prevailing dopamine-neon entries are loud, full-saturation, candy-bright party pages. `chloengine.com` performs the inverse: a single chartreuse `#C7F23A` administered as a **prescribed 1.4–2.8% of viewport pixels**, surgically dosed against a kōzo paper field. The chartreuse becomes a contemplative object, not a marketing scream. This is the corpus's only quiet-neon design and the only one that treats neon as a *measured percentage* rather than a fill style. 3. **F-pattern used as calligraphy, not conversion.** `f-pattern` sits at **6%** of the corpus, and where it appears it is invariably used in its Nielsen-heatmap marketing register (top bar = headline, left rail = nav, body = product copy). `chloengine.com` is the only design in the corpus that **literalizes the f-pattern as a single full-page calligraphic kanji stroke** — the horizontal bars and vertical descender become the bones of an essay, the right margin becomes negative-space *ma*, and the layout sells nothing. The f-pattern is repurposed from a conversion grid into a contemplative reading frame. 4. **Isometric-icons at 1% — the corpus's rarest imagery vocabulary.** `isometric-icons` appears in only **1%** of designs. `chloengine.com` makes it the **principal imagery family**, deploying eight hand-tuned isometric glyphs (each with a `0.6deg` deliberate axonometric error — wabi-sabi axonometry) as one-per-stanza chapter heads, rather than as decorative filler. Each glyph is a component of the imagined chloengine machine; the imagery vocabulary is therefore a **mechanical schematic disguised as a meditative scroll**. No other site in the corpus uses isometric drawing as serial chapter punctuation. 5. **Serif-revival at 4% deployed against neon.** `serif-revival` is at **4%** of the corpus, and the few entries that use it pair it with palettes that *flatter* the type (warm earthy, cream-and-burgundy, classic editorial). `chloengine.com` deliberately pairs **Cormorant Garamond — a high-contrast revival of a 16th-century cut** — against `#C7F23A` chartreuse, a wavelength Cormorant was never designed to live beside. The slight typographic discomfort is *the point*: a serif from 1532 inhabiting an internet of 2026, glowing faintly green at the edges. The pairing is unique in the corpus. 6. **Zen-contemplative tone at 3%, articulated as silence.** `zen-contemplative` is at **3%**. `chloengine.com` is the only entry that enforces zen through **prescribed silence**: no audio, no custom cursor, no parallax, no slide, no scale, no scroll-jack, no sticky nav, no CTA, no footer block, no cookie banner, no modal, no carousel, no testimonial strip. The page contains *only* the four motion verbs `draw`, `type`, `fade`, `pulse`. Zen is constructed through ruthless subtraction from the standard 2026 pattern library. 7. **City-urban motif at 4% used as final coda, not hero.** `city-urban` appears in 4% of designs, almost always as a hero photograph or background mesh. `chloengine.com` reserves the city skyline for **the very last motif on the page** — a single 88px horizon line of 240 vertical lines beneath stanza VIII, with three chartreuse "lit windows" in a 12,000-pixel sea of ink. The city is not the setting of the engine; it is what the engine, finally, is *for*. **Chosen seed (from assignment):** `aesthetic: wabi-sabi, layout: f-pattern, typography: serif-revival, palette: dopamine-neon, patterns: typewriter-effect, imagery: isometric-icons, motifs: city-urban, tone: zen-contemplative`. **Avoided patterns from frequency analysis:** the corpus's most-saturated patterns — `hand-drawn` (82%), `parallax` (93%), `centered` (93%), `full-bleed` (88%), `warm` (98%), `gradient` (93%), `mono` (96%), `vintage` (90%), `photography` (95%), `stagger` (70%) — are either entirely refused (parallax, photography, gradient, vintage motifs, full-bleed hero, hand-drawn primary aesthetic) or used in **deliberately atypical register** (mono restricted to <50 visible characters; warm palette pulled toward kōzo neutrals rather than the corpus-default sunset oranges; stagger present only as a 60ms line-fade within stanzas, never as the page's signature). The page is built to read as the *negative photograph* of the corpus's most common moves.