# Design Language for chloe.cx ## Aesthetics and Tone chloe.cx is **a single Victorian conservatory at sunset, photographed through frosted Crown glass and then redrawn by a generative algorithm that has decided the most beautiful thing about the room is the air between the ferns**. The domain is the personal lattice of someone called Chloe — initial, monogram, signature — and the site treats that name the way a 19th-century botanical engraver would treat a discovered orchid: catalogued in a single immense plate, surrounded by an enormous margin of ivory paper, and lit from a low western window so that one corner of the page glows the colour of a peeled persimmon while the opposite corner stays the cool blue-grey of a snuffed taper. The aesthetic is **victorian-ornate** but pulled almost entirely off-screen. Most ornate Victorian designs on the public web make the mistake of crowding every pixel with curlicue, gilt, and brocade until the page reads as a souvenir tea-towel; this one does the opposite — it commits 78% of every viewport to **ma**, the Japanese concept of charged negative space, and lets a single fully-rendered Victorian cartouche or floral cul-de-lampe occupy the remaining 22%, glowing in sunset-warm like a fire seen at the end of a long, cool corridor. The pairing is intentional: Victorian decoration was originally designed to be *read in firelight*, slowly, with a magnifier; ma forces the visitor to slow their breathing before the ornament is allowed to bloom. The tone is **minimal** — an underused 0% slot in the registry that nearly every other Victorian-themed site rejects in favour of "opulent-grand". Here, minimal does not mean spartan; it means **a single voice, never raised**. The copy is short. The page does not announce itself. A capital C, a capital X, a watermark of a fern leaf in 7% opacity, a scent of bergamot that the visitor must imagine. Inspirations stack quietly: William Morris's *Acanthus* wallpaper drawings of 1875, but only the pencil tracings before the colour was added; Anna Atkins's 1843 cyanotype *Algæ* book pages, which are 95% blue paper and 5% silvered seaweed; Owen Jones's *Grammar of Ornament* plates printed on uncut royal-folio sheets where the ornament floats in a moat of cream; the long sunset shots in Terrence Malick's *The New World* held until the gold turns to peach turns to bruise; and the moment in a *kintsugi* repair when the gold lacquer has been laid into the crack but not yet polished — still rough, still readable as a wound, already beautiful. The visitor should end the scroll in the same posture as someone closing an antique seed-catalogue: the room a little quieter, the fingers a little dustier, the eye trained for a moment on a single yellow flower in a corner of the garden. ## Layout Motifs and Structure The page is built around the principle of **the one bloom in the empty room**. There is a 12-column grid, but only 2 to 4 columns are ever filled in any given fold; the remaining 8 to 10 are deliberate **ma** — printed paper-coloured emptiness that is not "wasted" because the eye uses it to breathe. A faint warm vignette in the corners suggests that the page has been printed on creamy laid stock and exposed to a low western light source from the right. **Vertical structure** moves through six "plates", each occupying a full 100vh viewport, separated by transitions of pure ivory ma where the only inhabitant is a single 8pt fleuron centred horizontally: 1. **Plate I — The Monogram**: Bottom-right of the viewport (not centre, not top), a single ornate Victorian cartouche bearing the letters *C ⨯* in **commissioner-versatile** italic, hand-drawn-style flourishes extending into the ma above and to the left. The cartouche occupies roughly 280px square in a 1920×1080 viewport — defiantly small. The remaining 88% is sunset-warm cream with a 14% opacity generative fern frond drifting from upper-left, drawn live in WebGL using a Lindenmayer-system L-system seeded from the current minute of day. 2. **Plate II — The Glass-House Index**: A list of six lowercase nouns ("conservatory", "cipher", "correspondence", "catalogue", "cordial", "cinder"), each set on its own vertical guideline at 18%, 28%, 41%, 55%, 70%, 86% of the viewport width, each at a slightly different baseline so the row reads like a row of fenceposts in a misty meadow. A magnetic hover lifts the noun by 6px and unfurls a tilt-3d Victorian cul-de-lampe directly beneath it, like an iron grate revealing a flower. 3. **Plate III — The Pressed Specimen**: Three-quarters of the viewport is empty cream paper. In the lower-right quadrant a single floral-botanical plate is drawn live in SVG — a generative *Pelargonium triste* (the night-scented geranium) whose 27 leaves are placed by Poisson-disk sampling and re-seeded on every page-load. A sunset-warm gradient (peach → terracotta → muted plum) is masked through the leaves so they appear back-lit by a setting sun behind frosted glass. A pencilled caption in italic mono-spaced serif reads, in 11pt, "drawn at 18:42 on the day of your visit". 4. **Plate IV — The Cartulary**: A two-column letter (left column = handwritten Cormorant italic at 22pt, right column = Commissioner regular at 14pt prose). The two columns are vertically misaligned by 19px so the eye reads them as call-and-response. Tilt-3d on scroll: the entire spread tilts away from the cursor by up to 4°, as if the visitor were tipping an open book toward a window. 5. **Plate V — The Threshold of Ferns**: A horizontal scroll within a vertical scroll — the vertical scroll halts, the visitor scrolls sideways through 320vw of pure cream ma punctuated by twelve different generative ferns, each rendered with a different L-system rule set, at 12%, 19%, 27%, 38%, 51%, 63%, 74%, 81%, 88%, 92%, 95%, 99% along the strip. The right edge resolves into a small Victorian iron gate-handle, drawn in fine line, that the visitor "turns" by clicking — releasing the next vertical plate. 6. **Plate VI — The Sunset Footer**: A single horizontal hairline at 1px, sunset-warm, with the monogram once again at the right end. Below the hairline, in 9pt small caps with letter-spacing 0.18em: "chloe.cx — a private conservatory — last tended on [today's date]". No links, no nav, no socials. The visitor leaves the way they entered: through a cool wash of ivory. **Spatial relationships**: every text block is set inside a *cartouche of breath* — at minimum 1.5× the block's height above and below it must remain ma. There is no "card grid" anywhere on the page. There is no "hero". There is no "CTA". Plates are separated by named transitions ("the corridor", "the hallway", "the garden door") that are themselves blank cream space with a single fleuron at 8pt and a 1.5s pause built into the scroll-snap. Navigation is intentionally vestigial: a single ⨯ in the lower-right of every plate that, when clicked, returns the visitor to Plate I — the way a bookmark returns you to the frontispiece. ## Typography and Palette **Typography**: - **Display / monogram**: *Commissioner* (variable, weights 200–800, italic axis). Commissioner is the chosen seed — it sits between humanist warmth and Victorian formal elegance, has a true italic, and a wide grade axis that lets the monogram modulate in weight subtly across the day. Used at 96pt for the monogram, 22pt for plate titles. Tracking +0.04em, optical size axis pinned to 96 for the headline cartouche. - **Body prose**: *Cormorant Garamond* (italic, 18pt for the handwritten left column; regular, 16pt for short captions). Cormorant is a contemporary Garamond revival with the high-contrast strokes of late-Victorian metal type and an italic that genuinely sings. - **Mono / metadata**: *IBM Plex Mono* (300 weight, 11pt) — used only for the dated capture-time captions ("drawn at 18:42…") and footer micro-copy. It is the one moment of cool industry in an otherwise warm hand. - **Botanical labels**: *Old Standard TT* italic, 11pt, used for the Latin binomial of each generated specimen (e.g. *Pelargonium triste*) — a typeface explicitly designed to mimic 19th-century scholarly typesetting. - All fonts are **Google Fonts**. No invented faces. No icon fonts. **Palette** (sunset-warm, registry frequency 1% — strongly preferred): - `--ivory-conservatory: #F6EBD8` — the warm cream of a south-facing reading-room wall an hour before sunset; default page background. - `--persimmon-low-sun: #E89B6C` — the colour of a peeled persimmon held against the western window; primary ornament accent and gradient anchor. - `--terracotta-tile: #C46B4A` — the floor of the conservatory, used for hover states and the deeper end of fern gradients. - `--bruised-plum: #6B3A4A` — the long shadow under a cast-iron plant stand at 19:02, used only for body text and the deepest interior of pressed specimens. - `--snuffed-taper: #A89B8A` — the cool blue-grey of the corner the sun has already left, used for fleurons, hairlines, and the *ma* vignette. - `--bergamot-skin: #E2C68A` — a warm gilded yellow for the watermark of the monogram and 1px hairlines. - `--midnight-conservatory: #2A2532` — the deepest tone, reserved for the rare moment a single full-bleed silhouette is shown (Plate V's iron gate-handle); never used for body text, only for engraved silhouette art. The palette is intentionally **analogous-warm with one cool accent** (snuffed-taper); the cool accent exists only to make the warmth feel like dusk rather than noon. There is **no pure white** anywhere on the site — the lightest tone is `#F6EBD8`, a 7% step warmer than #FFFFFF, which makes the entire page read as paper rather than screen. There is also **no pure black** — the darkest tone is `#2A2532`, which keeps the deepest shadows feeling like indigo dust rather than ink-blot. ## Imagery and Motifs The site is **almost entirely line-drawn and generated, never photographic**. There are no stock images, no photographs of people, no UI screenshots, no product shots. The image vocabulary is: - **Generative-art ferns and fronds**: drawn live with WebGL or SVG using L-system grammars (Lindenmayer systems) with 4–7 axioms, redrawn on every page-load with a fresh seed derived from the current timestamp. Each frond is rendered in a sunset-warm gradient mask so the same plant can be backlit-orange in Plate I and shadow-plum in Plate IV. The L-systems are deliberately *botanically* tuned — *Adiantum*, *Pteridium*, *Asplenium*, *Polypodium* — not mathematical squiggles. - **Floral-botanical cartouches and cul-de-lampes**: hand-drawn SVG ornaments in the manner of 1880s John Leighton designs and the closing flourishes of Victorian publisher Bickers & Son. Each ornament is a single SVG path of approximately 600–1200 nodes, drawn slowly at hover via path-draw-svg animation (≈ 1.4s, ease-out-cubic), so the ornament *unfurls* under the cursor like a fern shoot opening. - **A single pressed specimen per page-visit**: in Plate III, a generative *Pelargonium triste* (or, on alternate visits, *Mimulus moschatus*, *Reseda odorata*, *Matthiola longipetala* — all real Victorian night-scented species) is composed in code and gently rotated 0.3° on scroll via a tilt-3d transform tied to mouse Y. - **The monogram cartouche**: an oval of guilloché (the engraved spirograph banding seen on banknote borders), hand-drawn in SVG, with the letters *C ⨯* engraved through the centre. The guilloché lines are 0.4px stroke, sunset-warm, at 32% opacity — visible only after 1.2 seconds of stillness. - **Fleurons**: tiny printer's-flower glyphs drawn in SVG (a heart-shaped *aldine leaf*, a triple-comma flourish, a *manicule* pointing right) used as silent transitions between plates. Each fleuron is no larger than 8pt and sits centred horizontally in a sea of ma. - **A ghost-watermark fern**: in the upper-left of every plate at 7% opacity, slowly drifting (12s loop, sinusoidal) — the conservatory plant whose shadow is always with the visitor regardless of which room they are in. **Motifs (floral-botanical, registry 3%, preferred)**: night-scented species only. Geraniums, stocks, mignonette, jasmine, evening primrose. These are the flowers that close in daylight and open at sunset — they are the visual analogue of a personal site that does not perform during the day. Recurring decorative motifs include: the *cul-de-lampe* (the ornamental tail-piece at the end of a chapter), the *fleuron*, the *ampersand-as-flourish* (Cormorant's italic & is treated as a small piece of typography-ornament and given its own breathing room whenever it appears), and the *guilloché oval* (used only around the monogram). ## Prompts for Implementation Implementation should treat this site as **a six-plate book of pressed flowers**, not a webpage. Build it with HTML, vanilla CSS (custom properties for the palette tokens, container queries for the plate system), and small JavaScript modules — no framework, no router, no design-system. The whole site should weigh under 240KB compressed including fonts; the SVG ornaments are the largest single payload and they are the point. **Animation philosophy**: every motion is a *botanical* motion — slow, asymmetric, and ease-out. No spring physics, no bouncy magnetic snap, no parallax shimmer. The signature interaction is **path-draw-svg with a duration of 1.4–1.8s and a custom cubic-bezier(0.16, 0.84, 0.24, 1.0)** that mimics an unfurling fiddlehead. Tilt-3d (registry 16%, the chosen pattern) is used sparingly: only Plate IV (the cartulary) and Plate III (the pressed specimen) tilt with mouse position, and the maximum tilt is 4° in any axis. Cursor-follow effects are explicitly avoided — the cursor is a fly in the conservatory, not a sun. **Storytelling beats**: 1. The visitor enters into Plate I and finds the page **almost empty** — a wash of cream, a small monogram in the lower-right, a watermark fern in the upper-left. They wait. They scroll. 2. The transitions between plates are **silent corridors** — a single fleuron, two seconds of nothing, then the next plate fades up from cream rather than sliding in. Use scroll-snap with a 1.4s eased reveal. Each plate has a barely-audible *creak* sound effect (a wooden conservatory door) only if `prefers-reduced-motion: no-preference` and only after a user gesture; default is silent. 3. Plate V (the horizontal corridor) is the surprise — the vertical scroll stops, the visitor must scroll sideways, and twelve generated ferns drift past at unequal intervals. Time spent here is unmetered. There is no count, no progress bar, no nav dot. 4. The "click" to advance from Plate V (turning the iron gate-handle) is the **single explicit interaction** in the entire site. Everything else is scroll, hover, and breath. **Generative-art guidance**: implement L-systems in vanilla JS (no library needed; ~80 lines of code). Each fern is described by 5–7 production rules. Seed the random generator with `Math.floor(Date.now() / 60000)` so the ferns redraw once per minute — patient visitors are rewarded with new flora. Render to inline SVG, not canvas, so the strokes can be styled with CSS and animated with `stroke-dasharray`. **Full-screen narrative**: each plate is a **100vh, scroll-snapped chapter**. There is no "above the fold" because there is no fold — there is only the conservatory, one room at a time. Emphasise *narrative time*: a slow visitor will see more flora than a fast one, but no plate auto-advances. The site rewards patience the way a botanical garden does. **Explicitly AVOID**: - CTA buttons, "Book a call", "Get in touch" widgets, mailing-list capture, social-share buttons. - Pricing blocks, plan grids, three-column feature cards. - Stat-grids ("12k visitors / 3 awards / 47 plants"). - Hover gradients that pulse, glow, or shimmer. - Cursor-follow blobs, magnetic buttons, ripple effects on click. - Photographic stock imagery of any kind. The ferns must be *generated*; a photograph would betray the conceit. - Modal popups, cookie banners that float over content (use a single fleuron-marked footer line instead). - Glassmorphism, neumorphism, gradient mesh backgrounds. The page is **paper**, not glass. **Do include**: - A single 14% opacity ghost-fern that drifts behind every plate. - Letter-spaced small caps for all metadata (footer, captions, dates). - A *Linnaeus-style* italic Latin caption beneath every generated specimen, hand-set in Old Standard TT. - The Plate II noun-list that subtly reflows on viewport resize so the six words always sit on their original percentage guides — never centred, never left-aligned, always at 18/28/41/55/70/86%. - A keyboard-only mode where pressing the spacebar advances one plate at the same 1.4s eased pace as scroll-snap, for visitors who read with their hands rather than their wrist. ## Uniqueness Notes This design is intentionally constructed to occupy a vacant intersection in the registry's frequency map. Three or more concrete differentiators from the existing 120 designs: 1. **Victorian-ornate at 4% combined with minimal tone at 0% and ma-negative-space at 7%** — the registry's existing victorian-ornate sites all skew toward "opulent-grand" or "scholarly-intellectual" tones with dense layouts; this is the only site where Victorian decoration is held in 78% empty cream space and treated as a single bloom rather than a wallpaper. The opposite of every previous Victorian site in the corpus. 2. **Sunset-warm palette at 1% (extreme rarity)** — almost every "warm" site in the corpus collapses into terracotta-warm (5%) or burnt-orange (2%). This site uses a deliberately specific *peeled-persimmon-at-18:42* palette with `#E89B6C` as the anchor and a single cool snuffed-taper grey accent that no other site in the corpus pairs with Victorian botanical motifs. 3. **Generative-art imagery (6%) used for live L-system botanical specimens, not abstract noise** — most "generative-art" sites in the corpus produce mathematical squiggles, particle fields, or noise textures. This site uses generative algorithms to draw *real Victorian night-scented species* (Pelargonium triste, Mimulus moschatus, Reseda odorata) with botanically-tuned grammar rules, and ties the random seed to clock-minute so the page is a slowly-changing herbarium. 4. **Floral-botanical motifs (3%) tuned exclusively to night-scented Victorian species** — every other floral-botanical site in the corpus uses generic florals or roses; this is the only one committed to the specific subset of plants that *open at dusk*, which both reinforces the sunset-warm palette and gives the personal-site framing a private-after-hours quality. 5. **Tilt-3d (16%) used only on two plates and capped at 4°** — most tilt-3d sites in the corpus use it as a global hover effect on every card; here it is reserved for two specific narrative moments (the cartulary spread and the pressed specimen) and treated as the gentle tipping of a book toward a window, not a card-flip gimmick. 6. **Six-plate scroll-snap "book" structure with horizontal scroll embedded inside vertical scroll on Plate V** — this is the only site in the corpus that nests a horizontal-scroll corridor inside a vertical-scroll book, and it is the single explicit-click interaction in the whole experience (the iron gate-handle). 7. **Commissioner-versatile (4%) paired with Cormorant Garamond italic and Old Standard TT** for botanical labels — a typographic stack that no other site in the corpus uses; specifically engineered to feel like a 19th-century scholarly herbarium printed on a contemporary variable-font web stack. 8. **Zero CTAs, zero stats, zero pricing, zero social buttons, zero photography** — the site is a personal monogram, not a marketing surface, and the implementation must refuse the conventional patterns the corpus's earlier sites accumulate. **Chosen seed** (from assignment): aesthetic: **victorian-ornate**, layout: **ma-negative-space**, typography: **commissioner-versatile**, palette: **sunset-warm**, patterns: **tilt-3d**, imagery: **generative-art**, motifs: **floral-botanical**, tone: **minimal**. **Frequency analysis informed avoidance**: deliberately AVOIDED hand-drawn aesthetic (95% — most overused), photography imagery (98% — most overused), full-bleed layout (90%), parallax pattern (94%), gradient palette (96%), warm palette (95% — the more specific sunset-warm at 1% was preferred instead), mono typography as primary (95% — used only for one metadata line), and pastoral-romantic tone (25%) and warm-inviting tone (22%) — both common pairings with Victorian decoration that would have collapsed the design back into the corpus average. Preferred underused slots: minimal tone (0%), sunset-warm palette (1%), floral-botanical motifs (3%), commissioner-versatile typography (4%), victorian-ornate aesthetic (4%), generative-art imagery (6%), ma-negative-space layout (7%).