# Design Language for chloengine.com ## Aesthetics and Tone chloengine.com is a **game engine rendered as a living photosynthetic organism** -- not a traditional dev-tool site, not a corporate SaaS pitch, not a neon cyberpunk compiler. The prefix *chlor-* comes from χλωρός (khlōrós) -- the ancient Greek word meaning "pale green," "fresh," "verdant." This engine does not "run": it **grows**. It does not "render frames": it **unfurls fronds**. It does not "ship binaries": it **releases spores**. The entire visual vocabulary is drawn from the silent, slow computation of a forest floor at dawn -- the way mycelial networks route nutrients, the way liverworts tile a wet rock, the way chloroplasts migrate inside a leaf cell as cloud-light changes overhead. The tone is **grounded-earthy crossed with scholarly-intellectual** -- the voice of a botanical monograph bound in linen, not a product launch. No rocket emojis, no "blazing fast," no "next-gen." Instead: measured captions in the dialect of a 19th-century field-naturalist annotating specimens. Documentation reads like a herbarium index. API references feel like taxonomic keys. Release notes are **phenological records** ("third leaf unfurled, 04.18.2026, partial sun"). The engine's version numbers are presented as botanical binomials (*Chloe silvestris* 0.12.3 → *Chloe silvestris septentrionalis* 0.13.0). This is the anti-aesthetic of hype: a game engine that believes geological time is the only serious timescale. Emotionally the site should feel like stepping barefoot into a shaded greenhouse at 6am -- cold stone underfoot, humid air, chlorophyll smell, dew dripping inaudibly onto petri dishes on a marble slab. Cursor-triggered interactions should feel like touching moss: slow recovery, gentle depression, no bounce. The aesthetic deliberately rejects the "game engine" cliché of explosions, particle fireballs, chrome HUDs, and hexagonal glowing dashboards. It proposes instead that **a game engine is a cultivated biotope**, and the developer's job is gardening. ## Layout Motifs and Structure The structural grammar is **hexagonal-honeycomb crossed with organic-flow**, governed by a concept called **"The Thallus"** -- the flat, branching body of a liverwort. The page is not a scroll-timeline and not a card-grid; it is a single continuous thallus that branches asymmetrically across the viewport, with content nested inside irregularly-sized hexagonal cells that share edges like plant tissue under a microscope. Each hexagon is a **cell** in the literal botanical sense (the basic structural unit of an organism), not a "UI card." **Primary Structure (top to bottom, though the metaphor is "outward from meristem"):** - **The Meristem (hero):** A single large, slightly tilted hexagonal cell at the top-left of the viewport, not centered. Inside: the name **Chloe** set in a high-contrast serif, and beneath it a single line of italic Latin -- *"engine that thinks in chlorophyll."* The cell has a visible **cell wall** (a 1.5px stroke in Oxidized Copper) and a nucleus (a small filled circle of Spore Gold, ~8px, positioned at the golden ratio inside the hex). At the cell's upper-right edge, a branching plasmodesmatal thread (an SVG path) snakes outward to connect to the next cell. - **The Phyllotaxis Field (what it does):** Seven hexagonal cells arranged in a **Fibonacci spiral** -- the arrangement real sunflower florets use. Each cell holds one capability of the engine: "compiles shaders as leaves," "persists state as tubers," "routes events through fungal mesh," etc. The spiral is not decorative; cell sizes obey the Fibonacci ratios (21, 34, 55, 89, 144 px edges), and the text inside each cell is set to scale to its cell's area, so larger capabilities literally occupy more biomass. Cells are never aligned to a rectangular grid -- their offsets follow the 137.5° divergence angle of actual plant phyllotaxis. - **The Mycelial Documentation Network:** A full-viewport section where documentation topics are rendered as **nodes in a breathing mycelial graph**. Nodes pulse slowly at 0.3Hz (the respiration rate of moss). Edges are hand-drawn SVG paths (Bézier curves with slight jitter) that darken when the cursor approaches, as if nutrients were being routed toward attention. Clicking a node does not navigate away; it causes the adjacent nodes to **unfold** like a frond (CSS transform-origin at the shared edge, rotating from 0deg to full open over 900ms with ease-out-quint). Documentation reveals itself *horticulturally*. - **The Phenology Calendar (release timeline):** A horizontal strip, but rendered as a **germination-to-senescence timeline** -- each release a different phenophase. Releases are not dots on a line; they are small botanical illustrations (line-drawn SVG): a swelling bud, a primary leaf, a flowering spike, a seed head. The current release is the one with visible dew on it (tiny white SVG circles with Gaussian blur). Past releases have a faint watercolor wash of Dried-Specimen Ochre laid behind them, as if pressed in a herbarium. - **The Sporangium (download / get started):** A single hexagonal cell at the bottom-right, echoing the meristem hexagon but inverted in color (dark green on parchment rather than parchment on dark green). Inside, one small line of text: *"to germinate this engine, type the following into your terminal."* Below, a single command in a faint handwritten annotation font, with a tiny copy affordance drawn as a **hand-inked dropper pipette icon**, not a clipboard. **Spatial principles:** - **No right angles in content flow.** Cells share hexagonal edges; connecting lines are curved plasmodesmata, never rectilinear. - **Ma (間) between cells** is real negative space, filled with a very faint noise-texture of cellulose fibers (barely perceptible, < 3% opacity). - **No sticky header, no fixed nav, no hamburger.** Navigation is a single vertical strand of **leaf-node buttons** running down the far left margin, each a tiny silhouette of a different leaf shape (ovate, lanceolate, palmate, pinnate) -- hovering reveals the section name in handwritten italic. - **No CTA button in the hero.** The meristem cell is contemplative. The sporangium at the bottom is the only call-to-action, and it is phrased horticulturally, not commercially. ## Typography and Palette **Typography** (all on Google Fonts, zero exceptions): - **Display / Botanical Binomials:** **"Cormorant Infant"** (Google Fonts) -- a soft-terminal serif with calligraphic italic. Used for the word **Chloe** at clamp(4rem, 10vw, 8rem), weight 300 (Light), letter-spacing: 0.02em. The italic cut is used for every Latin phrase on the site (*"engine that thinks in chlorophyll,"* *"Chloe silvestris septentrionalis,"* *"release: phenophase 3"*), always in italic weight 400, never roman. The italic's calligraphic ductus evokes 19th-century botanical plate captions hand-lettered by the illustrator. - **Body / Field Monograph:** **"EB Garamond"** (Google Fonts) -- the digital revival of Claude Garamont's 16th-century roman. Used at 17px / 1.7 line-height for all prose, weight 400 roman for body, weight 400 italic for scientific names and inline emphasis. Small-caps (font-variant: small-caps, weight 500) for section introit phrases like "cultivation notes" or "germination requirements." The historical Garamond is deliberately chosen to evoke the typography of Linnaeus's *Species Plantarum* (1753) -- this is an engine descended from the Enlightenment, not from Silicon Valley. - **Annotation / Field-Naturalist Margin Notes:** **"Caveat"** (Google Fonts) -- a warm, ink-wet handwritten script. Used sparingly for marginalia: a single annotation drawn alongside each phyllotaxis cell in Faded Ink ink color, as if a botanist had returned to pencil in a later observation. Weight 400, size 14px, rotation ±1.5° from horizontal to feel genuinely hand-placed. Never used for primary content -- only for the whisper of human presence in the margin. - **Code / Terminal Excerpts:** **"IBM Plex Serif"** (Google Fonts) in its italic weight 400 -- **not a monospace.** This is the design's single most contrarian choice. When the site must show a shell command or a code snippet, it is rendered as **italic Plex Serif**, 14px, as if transcribed by a scribe rather than printed by a teletype. The command prompt `$` is replaced with a small fleuron (❦) glyph. Code reads like quotation from an older herbal. **Palette** (eight specified colors, all used structurally): - **Chlorophyll Deep (#1d3a2a):** The dominant engine color -- the pigment in a mature ivy leaf seen in full shade. Used for primary text on light backgrounds, for the meristem hexagon fill, for the mycelial graph edges when active. Not a pure green; it contains enough blue-black to feel grave and shaded rather than synthetic. - **Parchment Wash (#f0eadb):** The page background. Not white. The color of a page from a 1830 herbarium that has been pressed against dried specimens for 190 years. Carries a warm olive undertone that makes Chlorophyll Deep feel freshly-picked rather than printed. - **Spore Gold (#c9a046):** The chromatic focal point -- the color of dusted fern spores on the underside of a frond, or of mature birch pollen. Used for accent dots (cell nuclei), for the dropper-pipette icon, for hover-state underline-draws, for the current-release dew highlight. Never used for body text. Approximately 4% of total site surface. - **Oxidized Copper (#5a7a63):** The color of a copper botanical-label tag that has weathered three seasons on a garden bed. Used exclusively for cell walls (1.5px stroke on every hexagon) and for the leaf-shape nav silhouettes. Binds the composition visually. - **Dried-Specimen Ochre (#9c7b3e):** The watercolor wash laid behind past releases in the phenology calendar. Also used for the Latin italic phrases when they appear on the parchment background, giving them the honeyed quality of ink that has aged to sepia. - **Liverwort Teal (#3a6060):** The cool counterpoint -- the color of the thallus of *Marchantia polymorpha* when wet. Used for the mycelial graph edges in resting state, for the cellulose-fiber noise texture, and for the italic display variant when set against Chlorophyll Deep backgrounds. - **Faded Ink (#2a2520):** The color of iron-gall ink oxidized over two centuries. Used exclusively for handwritten Caveat annotations in the margins. Never pure black. Has a purplish-brown undertone. - **Petri Glass (#e8f0e8):** An almost-imperceptibly cool-tinted near-white, used only for the single dew highlight on the current release and for the innermost nucleus glow in the sporangium cell. About 0.5% of surface area -- it functions as optical relief, like a single drop of water catching sunlight in an otherwise dim conservatory. ## Imagery and Motifs **Core visual principle: the engine is a cultivated organism; all visual material is drawn from field-biology and botanical illustration traditions, never from software marketing.** - **The Primary Hex-Cell Tessellation:** Every content container on the site is a hexagon with organic imperfection -- each of its six edges has a faint 1-2px hand-drawn waver (implemented as an SVG `` with stroke-dasharray 0, stroke-width 1.5, with each vertex slightly jittered by perlin-noise at page load so no two page-loads show exactly identical cell walls). Inside each cell, the interior is either filled with Parchment Wash or tiled with a **faint 15% opacity cellulose-fiber noise texture** (a custom SVG filter using feTurbulence baseFrequency="0.85" numOctaves="2" mapped to Liverwort Teal). - **The Mycelial Network Graph:** A full-viewport interactive SVG in the documentation section. Approximately 60 nodes, each a tiny circle (4-10px radius) colored Spore Gold, connected by 120 hand-jittered Bézier edges in Liverwort Teal. The graph's layout uses a force-directed simulation (implemented in vanilla JS, ~150 LOC) but with gravitational parameters tuned to produce **asymmetric, tree-like clusters** rather than tidy symmetrical balls. Edges pulse at 0.3Hz as described above. Cursor proximity (within 120px of a node) causes that node's radius to grow by 40% over 400ms, and the three nearest-neighbor edges darken toward Chlorophyll Deep -- as if nutrients were being routed toward attention. - **Phenological Release Illustrations:** Five hand-drawn SVG botanical illustrations, each approximately 80×120px, drawn in single-weight 1.25px stroke, Chlorophyll Deep on Parchment Wash: 1. *Seed* -- an ovate seed with a radicle just emerging at the base. 2. *Cotyledons* -- the pair of primary leaves, mirror-symmetric. 3. *First true leaf* -- asymmetric, serrated. 4. *Flowering spike* -- a vertical raceme with six alternating buds. 5. *Seed head (dispersal)* -- a dandelion-clock silhouette with three loose spores drifting right. These must be actually hand-traced in an SVG editor (the design document specifies this explicitly -- no placeholder shapes, no generic "leaf icon" from an icon library). They are the signature illustrations of the engine's release history. - **The Leaf-Shape Navigation Silhouettes:** Seven small (24×24px) leaf-shape silhouettes running down the left margin as section nav. Each a different morphological type: ovate, lanceolate, cordate, palmate, pinnate, reniform, orbicular. Fill Oxidized Copper at rest, Spore Gold on hover, with a 400ms crossfade. Hover also reveals the section name in Caveat handwriting italic to the right, at rotation -2deg. - **The Dropper-Pipette (CTA affordance):** The copy-to-clipboard icon in the sporangium cell is drawn as a small glass laboratory dropper-pipette, with a single suspended droplet of Spore Gold at its tip. When clicked, the droplet **falls** (a 600ms ease-in-quad translateY animation), and a brief ripple emerges from where it lands, accompanied by a microcopy tooltip in Caveat reading *"transferred to clipboard, mind the glass."* - **The Chloroplast Cursor Companion (optional):** On non-touch devices, a tiny 6px ellipse of Chlorophyll Deep follows the cursor at a 180ms lag, rotating slowly as it trails. This is a reference to the cytoplasmic streaming of actual chloroplasts inside a plant cell -- they drift with the cytoplasm, rotating. Not a click-ring, not a crosshair. Respectfully ignored if `prefers-reduced-motion` is set. - **Cellulose-Fiber Noise Texture:** A single shared `` filter definition, referenced by all cell interiors and by the overall page background at 2% opacity. Uses feTurbulence with organic baseFrequency values so the fibers feel like the visible ribbing of actual linen paper, not digital noise. **Explicitly rejected motifs** (to preserve the aesthetic): no hexagonal circuit boards, no glowing cyberpunk nodes, no gradient meshes, no gloss highlights, no 3D-rendered game screenshots, no chrome, no neon, no drop-shadow cards, no card-lift-on-hover, no animated gradient buttons, no emoji in any copy, no rocket/lightning/spark iconography, no "Trusted by" logo walls. ## Prompts for Implementation **Full-screen narrative immersion as a walk through a conservatory.** The site must feel like a slow, contemplative walk -- not a dashboard, not a pitch, not a scroll-triggered chain of reveals. Replace scroll-triggered reveals with **ambient persistent presence**: content is already there when you arrive at it, the way a plant does not "unfold for your attention" -- it is already unfolded, and you are walking up to it. Use Intersection Observer only for the most minimal ambient state tracking (which hexagonal cell has the greatest viewport overlap is the "current cell," lightly Petri-Glass-tinted). **Animation philosophy: geological, not theatrical.** All transitions are slow (minimum 600ms, most in the 900-1400ms range) and use ease-out-quint or ease-out-quart -- never bounce, never spring, never elastic. Hovering a leaf-nav silhouette does not bounce it; it fades its fill color over 400ms. Opening a mycelial node does not pop; it unfurls via transform-origin at the shared edge, rotating open over 900ms, with a simultaneous 1.3s fade-in of its child text at 300ms delay. No animation finishes before the viewer has had time to register that it started. **Mycelial graph implementation (vanilla, no libraries):** The force-directed graph must be implemented in ~150 lines of plain JavaScript using `requestAnimationFrame`. Nodes have position vectors, connected edges apply attractive force (Hooke's law, k=0.008), all nodes apply repulsive force (inverse-square, scaled to 800), global weak gravity pulls toward center (0.0003 × distance). Simulation runs at 60fps for 3 seconds on page load, then drops to 12fps ambient idle (save CPU). Node pulse (0.3Hz) is a separate radius modulation, not part of the force simulation. Cursor attraction adds a temporary local gravity well at cursor position. **Phyllotaxis cell placement:** Compute each cell's center in polar coordinates using the golden angle (137.5077°). The nth cell's center is at angle (n × 137.5077°), radius (c × √n) for some constant c ≈ 42px. Cell edge lengths follow Fibonacci: cell 0 = 21px edge, cell 1 = 34, cell 2 = 55, cell 3 = 89, cell 4 = 144, cell 5 = 55, cell 6 = 34. This asymmetry must be preserved -- do not "tidy" it toward visual balance. Plants are not balanced; they are phyllotactically optimal. **Typography rendering:** Set all italic display text with `font-feature-settings: "liga", "dlig", "swsh"` to activate the discretionary ligatures and swash capitals in Cormorant Infant and EB Garamond. The Latin binomials should render with real italic calligraphic swashes on initial capitals. Set body prose with `text-rendering: optimizeLegibility` and `-webkit-font-smoothing: antialiased` -- the EB Garamond specimen quality matters at 17px. **Cell-wall rendering:** Every hexagonal cell must have its wall rendered as an SVG path with 6 vertices, each jittered by ±1.2px using a seeded pseudo-random function (seed = page-load-time, so a refresh changes them but within a session they are stable). Stroke 1.5px, Oxidized Copper, stroke-linejoin: round. Do not use CSS `clip-path: polygon()` -- it produces mathematically perfect hexagons, which is exactly wrong. **Handwritten margin annotations:** Each phyllotaxis cell has a Caveat annotation placed at an asymmetric offset outside the cell's edge, at rotation ±1.5° (randomized per annotation, fixed per page load). Annotations are connected to the cell they annotate via a 0.75px hand-drawn arrow (SVG path with arrowhead ~4px long, Faded Ink color). The annotations' content should read like a field-naturalist's observations: *"vigorous regrowth after pruning,"* *"prefers dappled shade,"* *"fruits reliably in the third season,"* adapted appropriately to the engine capability being annotated. **Absolutely avoid, in the implementation:** - Stat grids ("10x faster," "99.9% uptime," "500M downloads"). This engine does not boast. - CTA-heavy layouts. The sporangium is the only CTA, and it is not above the fold. - Pricing blocks. The engine's commercial model is unstated on this page; if required elsewhere, it goes on a separate sub-page. - Testimonial carousels. - Feature comparison tables. - Trust-logo walls. - Any phrase in ALL CAPS. - The words "powerful," "blazing," "lightning," "next-gen," "revolutionary," "cutting-edge." - Any use of emoji, lucide-icon clipart, or FontAwesome glyphs. - Any gradient background. Solid parchment only. - Any drop shadow below 4% opacity and 8px blur. Shadows are for specimens under museum glass, not for UI cards. - Scroll-triggered number counters. There are no numbers to brag about. **Copy voice cheat-sheet** (examples the implementer should emulate): - Instead of "Get Started" → *"germinate your first project."* - Instead of "Fast rendering" → *"chlorophyll transpires at 60fps in full sun."* - Instead of "Robust API" → *"a taxonomic key for every capability."* - Instead of "Documentation" → *"cultivation notes."* - Instead of "Release Notes" → *"phenological record."* - Instead of "Open Source" → *"seeds are freely shared, as in any good garden."* - Instead of "Download" → *"take a cutting."* ## Uniqueness Notes **Differentiators from the 60-design collection (per frequency.sh):** 1. **Game-engine-as-living-organism, not as developer-tool.** Every other engine / tech / software site in the collection presents its subject as circuitry, terminal, dashboard, or chrome machinery. chloengine.com is the only one to fully commit to **botanical-organism as literal structural metaphor** -- not a garnish, not a vibe, but the layout system (phyllotaxis), the release model (phenology), the documentation graph (mycelium), and the copy voice (field-naturalist monograph). The "engine" noun is re-rooted in its original biological sense: a generative, self-sustaining organism. 2. **Deliberate rejection of mono typography in a tech-adjacent domain.** 91% of designs in the collection use mono-typography -- it is the near-universal default for anything adjacent to code. chloengine.com uses **zero monospace fonts**. Even code snippets are rendered in italic IBM Plex Serif, as if transcribed by a scribe. This is the most unconventional typographic choice in the collection. 3. **No scroll-triggered animation.** 93% of designs use scroll-triggered reveals as their primary interaction spine. chloengine.com uses Intersection Observer only for passive state tracking, never to trigger reveals -- content is already present when encountered, because plants do not perform for your attention. This is a structural, not cosmetic, deviation from the collection norm. 4. **No card-grid, no card-lift-on-hover.** 95% of designs in the collection use card-grid as primary layout. chloengine.com uses **hexagonal-honeycomb tessellation with phyllotaxis placement**, and cells share physical edges (no gutters, no shadows, no lift-on-hover). Cells are cell-walls in the biological sense, not UI cards. 5. **Anti-hype copy voice.** While most dev-tool sites adopt an energetic / bold-confident / futuristic-cutting-edge tone, chloengine.com adopts **grounded-earthy scholarly-intellectual** (< 6% of collection). No metrics, no exclamation points, no emoji, no superlatives -- the voice of a 19th-century Linnaean monograph. 6. **Hand-drawn SVG botanical illustrations as release markers.** No other design uses real botanical illustration as its release-history iconography. The five phenophase drawings (seed → cotyledons → first leaf → flowering spike → seed head) must be hand-traced in an SVG editor, not composed from an icon library -- making the phenology calendar a genuinely hand-made artifact within the site. 7. **Code rendered as italic serif quotation.** The choice to present shell commands in italic IBM Plex Serif with a fleuron (❦) replacing the $ prompt is, to the implementer's knowledge, unique in the collection. It reframes code as scholarly citation rather than machine-readable glyph. **Chosen seed / style:** The Planned Seed is **`generative art background` fused with `botanical illustration garden` into a novel "Photosynthetic-Engine" hybrid.** Layout combines `hexagonal-honeycomb` (13%) and `organic-flow` (16%) -- both underused. Typography uses `elegant-serif` (10%), `serif-classic` (30%), `handwritten` (31%) and `serif-revival` (1%) -- deliberately omitting `mono` (91% saturated default). Aesthetic combines `botanical` (3%, near-unused) with `hand-drawn` (41%) and a trace of `generative` (31%) via the force-directed mycelial graph and jittered cell walls. Palette is `muted` (60%) in the analogous green family (`analogous`, 18%) -- explicitly avoiding `gradient` (98%) and `warm` (96%). Motifs: `nature` (20%) extended into genuinely botanical territory (botanical motifs are < 3% of the collection's specific motifs). Tone: `grounded-earthy` crossed with `scholarly-intellectual` (20%) -- deliberately sidestepping the 48%-dominant `mysterious-moody` default. **Reference to avoided patterns from frequency analysis:** - Avoided `corporate` (91%), `gradient` palette (98%), `warm` palette (96%), `card-grid` (95%), `photography` imagery (95%), `mono` typography (91%), `scroll-triggered` patterns (93%), `centered` layout (88%), `parallax` (53%), `mysterious-moody` tone (48%), `full-bleed` (51%). - Embraced the underused: `hexagonal-honeycomb` (13%), `organic-flow` (16%), `botanical` motifs (< 3%), `serif-revival` typography (1%), `analogous` palette (18%), `hand-drawn` imagery (41% but used here for real hand-drawing not marketing polish), `scholarly-intellectual` tone (20%), `path-draw-svg` patterns (35%) in a botanical rather than tech context. **Sibling differentiation:** If this design sits adjacent to other `*engine.com` or `*engine.net` sites (concengine, completengine, concurrengine, etc.), it must remain the sole "biological engine" in that cluster -- those siblings are free to remain corporate / dashboard / terminal aesthetics. chloengine is the outlier that proposes engines can be green, slow, and alive.