# Design Language for chloe.cx ## Aesthetics and Tone `chloe.cx` is imagined as **a sun-cracked terracotta amphora dipped in a thin film of mother-of-pearl** — an artifact of an impossible era in which an Etruscan potter's kiln and a 1970s laser-holography lab existed in the same workshop. The site is the inside of a small private museum vitrine, lit from beneath, displaying one such amphora rotated infinitely slowly on a brushed-bronze turntable. As the vessel turns, the iridescent skin laid over its baked clay catches a tungsten lamp and breaks into low, vegetal rainbows — never the laser-pink-and-cyan rainbow of a Pokémon trading card, but the rainbow of an *oil slick on damp earth*: olive, ochre, oxidized copper, dried-blood, sienna, umber, the violet of a beet skin under cellophane. The aesthetic is **holographic** — but the holography is *aged into the soil*. There is no chrome here, no glassy spectral burst, no "Y2K". The iridescence belongs to dragonfly wings dried and pressed into a 1791 botany book; to the inside of an oyster shell still wet from the tide; to the pearled lining of a Roman fish-sauce jar excavated at Pompeii. Every gloss is filtered through dust, grain, and earth. The tone is **elegant-sophisticated** — claimed by exactly one other design in the 56-design corpus (1 %). It is the tone of an antiquities catalogue published by a small university press: sentences are measured, lower-cased subtitles are typeset in italic small-caps, captions name dimensions in millimetres and centuries in roman numerals. There is no exclamation, no "!", no "Get Started", no enthusiasm. The site speaks the way a curator speaks to another curator across a vitrine: *quietly, with footnotes.* The mood is **dusk in a Tuscan storeroom**: low warm light coming sideways through a single high window, the smell of old beeswax and wet straw, the soft click of a brass turntable motor, and — when you tilt your head — a slow, oily flare across a clay surface that should not, by any reasonable physics, refract. That contradiction *is* the site. ## Layout Motifs and Structure The structural metaphor is the **vitrine and the catalogue raisonné** — a museum's permanent display case paired with the printed scholarly index that describes it. The page is built as **one continuous full-bleed scroll** (registry rate 89 %, but interpreted here as *cinema-screen* rather than *landing-page-canvas*) split into **seven plinths**. Each plinth is the height of one viewport (`100 svh`) and presents *one object* to the visitor — never two, never a grid. Plinths are not "sections"; they are *exhibits*. **The seven plinths** (in scroll order): 1. **Plinth I — Provenance.** The amphora itself, rotating on its bronze turntable, lit from the floor. Title set as a single line of serif-revival display type at 144 px, italic, all lowercase, breaking just above the vessel's lip. No subtitle. No call-to-action. A single nine-millimetre catalogue tag: `chloe.cx · ms.iv.7 · c. xvi °`. 2. **Plinth II — Stratigraphy.** A vertical cross-section of the amphora's wall, drawn in pale ink, layer by layer: glaze, slip, terracotta, grog, voids. Each layer labelled in italic small-caps with thumbnail dimensions in mm. Iridescence appears only on the topmost glaze layer. 3. **Plinth III — The Field.** The amphora's surface unrolled into a full-bleed **cylindrical-projection panorama** that spans 480 % viewport width. The visitor scrolls *horizontally* across the unrolled surface (the only horizontal break in the spine), reading the iridescent gradient-mesh as a long terrain. 4. **Plinth IV — The Apparatus.** A schematic, sci-fi-hud-style overlay (10 % motif, used here in *desaturated* register) of the imaginary holography rig that "made" the iridescence. Crosshairs, ranging brackets, beam-paths in 0.6 px stroke, all in oxidized-copper and ink. The apparatus has no labels in English; only Greek letters and dimensional callouts. 5. **Plinth V — Field Notes.** A two-column running text terrace — left column the curator's transcription, right column the original handwritten *marginalia* recreated as web type. Iridescence appears here only as a faint pearled rule between the columns. 6. **Plinth VI — Comparanda.** Three smaller plinths arranged on a single deep terrace, each holding a "comparison object": a Roman *unguentarium*, a 1972 holographic optical element, and a dragonfly wing — all rendered in identical gradient-mesh iridescence so the eye reads them as a single continuum across two millennia. 7. **Plinth VII — Colophon.** A simple imprint terrace: the curator's monogram, the catalogue's serial number in roman numerals, the date in an old-style date format (`A.D. MMXXVI · IV · MAY`), and a single hairline parallax leaf — a real olive leaf — drifting from the upper-right to the lower-left as the visitor reads the final line. **Spine.** A 0.5 px hairline of oxidized copper runs down the geometric centre of every plinth, top to bottom, *unbroken*. This is the **vitrine's axial sight-line** — the line a curator's eye follows when checking that a vase is centred on its mount. Headings sit slightly *off* the spine on alternating sides (left, right, left, right, …) by exactly 18 px, the width of a museum tag. **Parallax** is used (registry rate 92 %, very common) but in *one and only one* register: every plinth contains exactly one **slow parallax layer** moving at 0.92 of scroll speed — *the iridescent skin itself*, never the substrate. The clay does not parallax. The pearl does. This split is the central animation grammar of the site. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display (plinth titles, the curator's voice) — `Cormorant Infant`.** A serif-revival cut (the seed's typography key, claimed by 3 % of the corpus) with very tall, slightly *infantile* terminals — the dot of the `i`, the bowl of the `a`, the curl of the `g` — that read as both eighteenth-century and ceramic. Set at 144 px / italic / wght 300 for plinth titles, all lowercase, with -0.018em tracking. The italic is not decorative here; it is *the catalogue voice*, the way a museum title-card sets `Amphora, attic black-figure` in italic. - **Serif body (running prose, field notes) — `Cormorant Garamond`.** The same family, upright, wght 400, opsz set to body. Used for any block longer than three lines. Rivers and orphans tolerated; columns set rag-right; em-dashes are *real* em-dashes (`—`), never hyphens. - **Small-caps & captions — `Cormorant SC`.** All catalogue tags, dimensions, dates, and footnotes are set in `Cormorant SC`, 11 px, tracking +0.08em, oxidized-copper colour. This is the *typographic equivalent of a museum tag*. - **Numerals & dimensions — `Spectral` (oldstyle figures).** Used only when a number must be *read*, never *headlined*: dimensions, page numbers, the colophon's roman-numeral date is set in real Roman numerals (`MMXXVI`), but anything decimal is in Spectral oldstyle (`9.4 mm`, `c. xvi°`). - **Greek apparatus labels — `GFS Didot`.** Used only on Plinth IV (the holography apparatus) for Greek letters (α, λ, θ, φ). Sized at 13 px, oxidized-copper, never set inline with body type. The whole system is *a single serif voice and its dialects* — there is **no mono, no grotesk, no humanist sans anywhere on the site**. This is a deliberate refusal: the registry shows mono at 96 % and humanist at 37 %, both nearly universal, and chloe.cx claims neither. The page is set entirely in the serif family. The only non-serif glyphs are the Greek apparatus letters in Didot. **Palette — earth-tones (1 % in registry) crossed with iridescent overlay:** The base palette is six earth-tone clays. The iridescent overlay is a separate eight-stop gradient-mesh that is *multiplied* over the clay, never replacing it. Base clays (the substrate — never animate, never iridesce): - `#3A2A1E` — **kiln-blackened terracotta** (deepest text, plinth bases, the spine line on dark backgrounds) - `#7B4A2E` — **fired sienna** (primary clay body of the amphora) - `#A8794E` — **ochre slip** (the slip layer painted onto the clay before glaze) - `#C6A36F` — **dust-honey** (the page substrate, the colour of a sun-faded library wall) - `#E8DCC2` — **bone-cream** (the body-text background, the colour of vellum) - `#5C4A38` — **umber-shadow** (the cast shadow under each plinth) Iridescent overlay (the pearl — appears only on the top glaze layer of each object, multiplied at 24–38 % opacity over the clay): - `#4F5C3A` — **olive sheen** - `#6E5246` — **oxidized-copper sheen** (also: spine line, catalogue tags, Greek apparatus) - `#8A4A4E` — **dried-blood sheen** - `#B07A3E` — **amber-resin sheen** - `#5A6E72` — **storm-glaze sheen** - `#7A4A6E` — **beetroot-violet sheen** - `#9A8A4E` — **bronze-ochre sheen** - `#3F4A52` — **slate-pearl sheen** **Refraction rule.** The iridescent overlay is not a static gradient; it is a **CSS gradient-mesh** (or layered radial-gradients on browsers without true mesh) whose stop positions shift by exactly **0.7 % of viewport width** as the visitor's pointer moves. The pearl *drags*, like real iridescence dragging across a curved ceramic surface. The clay does not move. The pearl does. This is the visual signature. ## Imagery and Motifs The site has **no photographs of people, products, or environments**. The registry shows photography at 94 %, the highest single rate in the corpus; chloe.cx opts out entirely. All imagery is one of three classes: **1. Gradient-mesh "object plates" (10 % imagery key in registry — used here as the dominant medium).** Each of the seven plinths contains exactly one rendered *object plate* — a 720 × 720 px composition built from layered SVG `` and `` filters. The plates are not photographs and are not 3D-renders; they are **painterly mathematical surfaces** that read as ceramics under directional light. Each plate carries: - a **clay base layer** (one of the six earth-tone clays as a soft radial) - a **slip layer** (a slightly lighter clay at 0.6 opacity, displaced by 4 px) - a **glaze layer** (`feTurbulence` with `baseFrequency="0.013"` and `numOctaves="2"` for the soft micro-cracking) - an **iridescent layer** (the eight-stop gradient-mesh, multiplied at 28 % opacity, animated to drift with cursor) - a **rim shadow** (a 1 px oxidized-copper inner stroke at the top edge — the catch of light on the lip) The plates are silent until the visitor's pointer enters; on entry, the iridescent layer's stop positions ease toward the pointer over 480 ms with `cubic-bezier(0.22, 1, 0.36, 1)`. On exit, the pearl returns to rest over 920 ms. **2. The sci-fi-hud apparatus overlay (Plinth IV only).** A single full-bleed schematic, drawn in oxidized-copper at 0.6 px stroke, depicting the imaginary holography rig: a He-Ne laser source on the left, a beam-splitter, two mirrors (front-surface, drawn as 1.4 px hairlines), a spatial filter, a reference beam, an object beam, the amphora itself in plan view at the centre, and a holographic plate at the right. Crosshairs sit on every optical element. Ranging brackets (`├──── 142 mm ────┤`) annotate the distances in Cormorant SC. Greek letters mark the angles (`θ₁ = 38°`). The whole apparatus is **immobile** — it is the one plinth where nothing parallaxes, nothing iridesces, nothing moves. It is the *blueprint* of the magic, and blueprints do not shimmer. **3. The drifting olive leaf (Plinth VII only).** A single SVG path of an olive leaf — 28 mm long, drawn from one botanical reference (an 1843 Tuscan herbarium plate, traced by hand into 14 cubic-bezier segments). It begins at `(85% top, 8% left)` and drifts diagonally to `(98% top, 92% left)` over the entire reading time of the colophon (typically 18–24 seconds at average reading speed). Its motion is *not* parallax-linked to scroll; it is time-linked to the visitor's *dwell* on the colophon, calculated from `IntersectionObserver` ratio. The leaf rotates by 11° over its trajectory. It is the only living thing on the site. **Motif inventory (sci-fi-hud, 10 %, used in *desaturated* register).** The sci-fi-hud motif appears only on Plinth IV's apparatus, and *as decoration nowhere else*. There are no HUD frames around the plinth titles, no targeting brackets on the catalogue tags, no scan lines, no reticles, no "data feed" tickers. The HUD is *an exhibit*, not a chrome. The visitor sees the HUD vocabulary exactly once, and then it is locked back in the vitrine. **Decorative inventory (deliberately small).** - The hairline copper spine. - The 18 px tag-width offset on each plinth title. - The italic small-caps catalogue tag at the foot of each plinth. - A single drifting olive leaf, once, on Plinth VII. - The pearl. Always the pearl. Never anything else. ## Prompts for Implementation Build chloe.cx as **a museum vitrine carved into a single long scroll**. The implementation must obey four vows. **Vow 1 — One object per plinth.** Never display two objects on the same viewport. The visitor enters a plinth, looks at *one* thing, reads *one* tag, and scrolls on. There are no cards, no grids, no comparison tables, no "feature highlights", no testimonial rails, no pricing tiles, no logo walls, no stat counters, no CTA buttons. There is no "Get Started", "Learn More", "Request Demo", "Sign Up", "Subscribe", "Join the Waitlist", "Book a Call". The visitor either scrolls (and learns) or leaves (and the curator nods politely). The page sells nothing. The only interactive element on the entire site is the cursor's effect on the iridescent overlay, and one quiet horizontal gesture on Plinth III. This is **counter-programming against the registry's CTA-heavy default**: chloe.cx is a *catalogue*, not a *funnel*. **Vow 2 — The clay does not move; the pearl does.** This is the central animation grammar and must be honoured pixel-for-pixel: - The terracotta substrate of every object is `position: fixed` *within its plinth* — it scrolls with the plinth, but it does not parallax against it. Clay is heavy. - The iridescent overlay (the gradient-mesh layer) parallaxes at 0.92 of scroll speed and *also* drifts with the cursor at 0.7 % vw. Pearl is light. - The hairline copper spine moves with neither. It is the vitrine's mount, and the mount is bolted to the building. - Headings type-set in Cormorant Infant fade in over 720 ms with a 22 px upward translate and an `opsz` axis change from 96 to 144 over the same duration, *only on first viewport entry* (`IntersectionObserver`, threshold 0.4, `once: true`). They never animate again. - The drifting olive leaf on Plinth VII is the *one* element that animates by time, not by scroll. **Vow 3 — Everything is set in serifs.** There is no fallback to system sans. There is no `monospace` for code (there is no code). There is no `inter`, `helvetica`, `arial`, or `system-ui` anywhere in the stack. If `Cormorant Infant` fails to load, the fallback is `Cormorant Garamond` → `Cormorant SC` → `Spectral` → `serif`. The site is set in serifs the way a 1962 Penguin Classic is set in serifs: completely, without apology, without "modern" relief. **Vow 4 — The iridescence is earned, not applied.** Iridescence appears only: - on the top glaze layer of each object plate (multiplied at 24–38 % opacity over the clay) - on the spine line, *only* during scroll (a 1 px copper-to-bronze drift along its length) - on the catalogue tag's leftmost serif character at moment of viewport entry (a 240 ms pearl flash) - never on type, never on headings, never on backgrounds, never on borders of containers (there are no containers) The iridescence must always sit *over earth*. The default state of the page is dusty, warm, and quiet. The pearl is a *visit*, not a permanent state. **Storytelling structure.** Treat the seven plinths as a **single museum visit narrated by the curator in second-person voice** (the visitor is `you`, the curator is `we`, the amphora is `it`). The reading load is light: each plinth carries 60–180 words of body prose in Cormorant Garamond, set in a 480 px reading column for narrative plinths (II, V) and a 720 px-wide stage for object plinths (I, III, IV, VI, VII). The voice is *measured*, *footnoted*, and *unhurried* — the way an unhurried curator speaks to a single visitor on a Tuesday afternoon. There are no questions to the visitor, no second-person imperatives, no "imagine", "picture", "consider". The curator describes; the visitor decides what to feel. **Horizontal gesture (Plinth III only).** The unrolled cylindrical projection on Plinth III is the only horizontal scroll on the site. Implement it as a `position: sticky` plinth (height 100 svh) that captures vertical scroll and translates the inner panorama horizontally at a ratio of **2.2 px horizontal per 1 px vertical**, so the visitor reads the entire 480 % vw panorama over roughly 218 % of viewport-height of vertical scroll. The pearl drifts continuously across the unrolled surface during this passage. There is no scroll-snap; the visitor controls the pace with the trackpad. **No-go list (counter-programmed against registry).** The implementation must contain *zero* of the following: hero CTA, primary button, secondary button, navigation bar, footer links, social icons, share buttons, search bar, cookie banner, newsletter modal, mega menu, mobile drawer, pricing card, testimonial slider, logo carousel, FAQ accordion, hamburger icon, tooltip, dropdown, breadcrumb, "back to top" arrow, "skip to content" link, scroll progress bar, dark-mode toggle, language switcher. The site has none of these — *not because they are inaccessible, but because they belong to a different building*. A museum does not have a "Sign Up" button. Neither does chloe.cx. The only navigation is **the scroll**. The only return is **the back button**. ## Uniqueness Notes Five deliberate differentiators from the existing 56-design corpus, each justified against the frequency report: 1. **Earth-tones as a load-bearing palette.** The frequency report shows `earth-tones` at exactly **1 %** — present in zero designs as a primary palette key, only as a secondary mention. chloe.cx claims it as the *substrate of every pixel on the page*. The clay is not "warm" (98 % of the corpus) and not "gradient" (92 % of the corpus); it is *earth*. The site's six base hexes (`#3A2A1E` through `#5C4A38`) describe a single afternoon in a Tuscan ceramics storeroom and admit no neon, no chrome, no candy. 2. **Serif-revival as the *only* type voice.** The registry shows `serif-revival` at **3 %** and `mono` at **96 %**. chloe.cx pushes serif-revival up against an *absolute refusal* of mono — there is no monospace face anywhere on the site, including in catalogue numerals (which are set in Spectral oldstyle, not in JetBrains or Space Mono). Of the 56 prior designs, none combine "serif-revival as primary" with "no mono anywhere"; chloe.cx is the first. 3. **Holographic crossed with earth, not chrome.** The frequency report shows `holographic` at **5 %** — it appears, but always paired with `chrome-metallic`, `dark-neon`, or `aurora-gradient`. chloe.cx is the first to cross holographic with `earth-tones` and `gradient-mesh`. The result is a holography that smells like terracotta dust, not laser-pink — a refraction *aged into the soil*. The pearl on the amphora is the central image of the site, and that pearl is olive, copper, dried-blood, and beet — not cyan and magenta. 4. **Elegant-sophisticated as a 1 % tone, claimed without ornamentation.** The registry shows `elegant-sophisticated` at **1 %** — the rarest tone in the corpus along with `edgy-rebellious`. chloe.cx claims it without any of the ornaments usually used to signal "elegant" (no gold-on-black luxury palette, no Playfair-italic flourishes, no hairline-thin serifs over high-resolution photography). The elegance is *curatorial* — it lives in the small-caps catalogue tag, the roman-numeral date, the unhurried column rag, the absence of CTAs. It is the elegance of a 1968 Phaidon catalogue, not of a 2024 luxury fashion site. 5. **Sci-fi-hud appears once and is locked back in the vitrine.** The registry shows `sci-fi-hud` at **10 %** — and where it appears, it appears *everywhere* on those sites: HUD frames on cards, reticles on cursors, scan-lines across heroes. chloe.cx claims sci-fi-hud as a key but uses it on *exactly one of seven plinths* (Plinth IV, the holography apparatus), where it is rendered in oxidized-copper at 0.6 px stroke and never appears again. This is the first design in the corpus to treat sci-fi-hud as *an exhibit* rather than *a chrome*. 6. **The clay does not move; the pearl does.** A single one-line animation grammar that no other design in the corpus articulates. Parallax is at 92 % in the registry — universal — but every existing design uses it as *a section technique*. chloe.cx uses parallax as **a material distinction**: heavy materials (clay, copper, the spine) are scroll-locked; light materials (pearl, olive leaf) parallax. The grammar is *physical*, not stylistic. A visitor who never reads a word of the site can still feel that the substrate is heavy and the surface is light. 7. **No photographs, no people, no products, no testimonials, no CTAs.** Photography at 94 %, the single highest rate in the registry, is refused entirely. Every visual on the site is a mathematical surface (gradient-mesh + feTurbulence + radial-gradient). The site has no human face, no hand, no product shot, no environment photograph. It has *one* drifting olive leaf, traced from a single 1843 herbarium plate. This is a stricter visual ascesis than any of the 56 prior designs. **Chosen seed (per assignment):** aesthetic = **holographic**, layout = **full-bleed**, typography = **serif-revival**, palette = **earth-tones**, patterns = **parallax**, imagery = **gradient-mesh**, motifs = **sci-fi-hud**, tone = **elegant-sophisticated**. **Avoided patterns from frequency analysis:** photography (94 %), centered-only layouts (94 %), warm/gradient palettes (98/92 %), mono typography (96 %), hand-drawn aesthetic (83 %), vintage motifs (91 %), parallax-as-section-technique (92 %), CTA/pricing/stat layouts. None of these appear on chloe.cx in their default register; where one is unavoidable (e.g. parallax, full-bleed), it has been re-grammared into a fundamentally different rule.