# Design Language for cafesweets.xyz ## Aesthetics and Tone cafesweets.xyz is **a deep-space patisserie observatory broadcasting from a colonnaded marble bridge on a derelict generation-ship**. The mental image is precise: a six-kilometer cylindrical hull is decelerating toward a binary system at 0.4c, and inside, on the highest deck, a cafe-confectionerie has been carved out of a hollowed-out classical temple — Doric columns of veined Carrara, an architrave that runs the full width of the panoramic window, a frieze of caryatids holding aloft espresso cups instead of entablatures — while outside the window, gas-giant midnight-blue weather curls past at near-relativistic speed. The pastry case is a magnetic-confinement vitrine; the croissants levitate on plasma cushions; the sugar work is laser-etched aerogel; the marble counter is the only object in frame older than the spacecraft. The site is the **public broadcast feed** from inside that observatory — not a menu, not a storefront, not a reservation widget. It is a continuous, energetic, slightly out-of-control transmission: half mission-control telemetry, half late-night radio show, half art-history lecture about the way the Parthenon's entasis would refract under gravitational lensing. **Tone is energetic** — pulse-fast, chatter-dense, the cadence of a flight director who has had three espressos and is genuinely excited about the dessert course. **The mood is not "futuristic-cutting-edge" cold-and-quiet.** It is futurism with goosebumps. The voice oscillates between (a) clipped numerical telemetry — `dT/dt = +0.0028K/s on tray 04`, `vapor-pressure drift +1.4%`, `binary-system Doppler tint #1B2F6A → #0E1B45` — and (b) breathless second-person prose: "you can feel the column humming through the marble, you can taste the carbon notes rolling off the dark side of the planet, the éclair *moves slightly* when the ship corrects its yaw." The site never settles. It is on shift, awake, transmitting. The marriage of **sci-fi (9% — underused)** with **marble-classical (6% — underused)** is the entire design conceit. Sci-fi in this registry is mostly hud-overlays, circuit motifs, sharp-angled glass, abstract-tech glyphs. Marble-classical is mostly luxury-real-estate or museum-academia. **Nobody has put them in the same room.** Here, they are not just adjacent — they are structurally fused. The Doric column *is* the data column. The fluted shaft *is* the fluid-typography progress bar. The capital's volute *is* the morph-pattern keyframe. The acanthus leaf on the architrave *is* the loading spinner. The marble veining *is* the data-stream cross-section. Every classical element is repurposed as a live, animated, telemetry-bearing surface, and every sci-fi telemetry element is rendered in the visual language of 5th-century-BCE temple architecture. ## Layout Motifs and Structure The page is **a single full-bleed proscenium** — one continuous panoramic shot, no horizontal navigation, no hamburger drawer, no hero-then-grid sequence, no card-grid, no bento, no asymmetric tile spread. The viewport is treated as **the panoramic observation window of the temple-cafe**, and the entire site exists *inside* that one frame. Scrolling does not scroll a document; scrolling **rotates the camera laterally along the colonnade**, panning past column after column. The user is on the marble bridge, looking out. The whole thing is one room. **The colonnade as scroll spine.** A row of **eleven Doric columns** runs across the full width of the page at a 1:11 aspect ratio (the page is ~11 viewport-widths wide on desktop, ~6 on mobile). Each column is a `position: sticky` SVG element approximately 110vh tall, 9vw wide on desktop (16vw mobile). As the user scrolls vertically, the columns *do not move vertically* — instead, the scene **between** the columns translates horizontally, so the visual effect is a sideways pan of the universe past a stationary classical foreground. CSS `scroll-driven animations` (`animation-timeline: scroll(root)`) drive the horizontal pan; vertical scroll input is reinterpreted via `transform: translateX(calc(var(--scroll) * -1px))` on the deep-space backdrop layer. **Eleven inter-columniations, eleven dossiers.** Between each pair of columns is one **dossier panel** — a single subject, one screen wide, one screen tall, displayed as if seen through the gap between two columns. The eleven dossiers are: `01 Origin`, `02 Beans`, `03 Roast`, `04 Extraction`, `05 Cream`, `06 Laminate`, `07 Sugar`, `08 Glaze`, `09 Plate`, `10 Service`, `11 Closing`. Each dossier is a **mixed-media composition** (see Imagery section): one chunk of veined marble photograph, one CAD-style line schematic, one passage of breathless prose, one block of live numerical telemetry, one classical caryatid silhouette, one signed graphite sketch. No two dossier panels use the same arrangement of these six ingredients — the layout *morphs* (see Patterns) as the camera pans, the way a real colonnade reveals different scenes through each gap. **No header, no footer, no nav, no CTA, no pricing, no testimonials, no email signup, no contact form, no logo strip, no stats grid, no "join our newsletter" pop-up, no cookie banner styled as part of the design.** The site has exactly four chrome elements: a tiny `[ TRANSMITTING — 04:17:22 SHIP-TIME ]` ticker fixed top-left in 11px tech-mono, a binary-system orbital diagram fixed top-right showing real-time orbit phase, a horizontal scroll-progress bar carved as an architrave frieze along the very top edge of the viewport, and a single compass rose bottom-right showing camera azimuth in degrees. That is all the chrome. Everything else is **content rendered inside the panoramic observation frame**. **Vertical structure inside each dossier panel.** Each panel uses a **9-column / 6-row sub-grid**, with classical proportions (the golden ratio is rejected — the system uses the **3:4:5 Pythagorean triad** that 5th-century temple architects actually used). The marble inset always occupies the bottom 5/6 of column 1–3 (the "stylobate" zone). The CAD schematic always lives in columns 4–6, rows 2–5 (the "metope" zone). The prose runs in columns 7–9, justified, with a 14-character ragged left edge cut to match the column flute spacing. The telemetry chip lives in row 1, columns 7–9, in micro-mono caps. The caryatid silhouette is anchored bottom-right of the panel, partially clipped by the next column. The graphite sketch floats free, rotated −3° to +5° randomly per panel. **Mobile.** The colonnade compresses to **five columns** instead of eleven, dossiers stack vertically, and the horizontal pan becomes a vertical pan — but the columns themselves remain `position: sticky` along the *left* edge, so on mobile the user is walking *through* the colonnade rather than past it. Same scene, same conceit, different camera path. ## Typography and Palette **Type stack — Google Fonts only, four faces, deliberately mixed.** - **Bricolage Grotesque** (variable axes: `wdth 75–125`, `wght 200–800`, `opsz 12–96`) — the **primary variable-fluid voice (6% of corpus, underused)**. Bricolage is a five-axis variable serif/sans hybrid by Mathieu Triay that morphs between contemporary grotesque and a soft-edged display serif as the optical-size axis travels. It is used here for **all headlines and dossier titles**, but the axes are *animated*, not static — see Patterns/morph. At rest, dossier numbers display at `wdth 110, wght 700, opsz 96, font-size: clamp(72px, 9vw, 184px)`. On column-passage hover, the same glyph fluidly travels to `wdth 80, wght 300, opsz 12` over 1.4s, transforming from a heavy display-grotesque numeral into a thin compressed inscriptional Latin numeral — *the Greek temple inscription becoming the spaceship hull-plate stencil*. This is the typographic engine of the entire design. - **EB Garamond** (regular + italic, weights 400/500/600) — the **classical inscriptional voice**. Used exclusively for *epigraphic* text — the dossier opening lines, set in small caps with `letter-spacing: 0.16em`, as if chiseled into the architrave. EB Garamond is the closest open-license stand-in for the Athenian inscriptional alphabet. Body prose on each dossier uses EB Garamond regular at 18px / 30px line-height, justified, with old-style figures (`font-feature-settings: "onum" 1`). - **JetBrains Mono** (regular + medium) — the **telemetry voice**. All numerical readouts, timestamp tickers, coordinates, temperature drift, mass-spectroscopy strings, and the [TRANSMITTING] chrome. Sized at 11px / 16px line-height, `letter-spacing: 0.04em`, `font-variant-numeric: tabular-nums`. JetBrains Mono is registry-overused (10% tech-mono) but here it is **the contrast voice** against Bricolage's morphing display and Garamond's chiseled epigraphy — the cold instrumental counterpoint to the warm humanist body. Three voices: Bricolage shouts, Garamond declaims, JetBrains whispers numbers. - **Cormorant Garamond** (light, italic) — used **only once per dossier**, for a single line of italicized prose floating somewhere on the panel — the "art-history aside." 22px italic, `letter-spacing: 0.02em`. This is the late-night radio host's voice, the curator's annotation. Cormorant's contrast and tall ascenders make it readable on top of the marble veining without any background plate. **No mono-only stack. No humanist-only stack. The four-voice ensemble is the typographic identity.** The corpus is 96% mono-dominant; this design demotes mono to 11px supporting role and elevates a variable-fluid display + a classical serif + a high-contrast italic to lead. **Palette — midnight-blue (8%) anchored, with cold marble whites and one heat accent.** Eight colors: - `#0A1228` — **deep-void midnight**, the panoramic backdrop, the deepest layer of the gas-giant atmosphere. Used as `body { background-color }`. - `#162447` — **column-shadow blue**, the recessed face of every Doric column where light does not reach. Used for type-on-blue panels. - `#1F4068` — **mid-deep blue**, the orbital-track diagrams, the schematic line drawings, the architrave frieze. - `#2E5C8A` — **plasma rim blue**, used only for the rim-lit edge of every classical element — every column flute carries a 1px stroke of #2E5C8A on its lit side. Half-life of 0.6s on hover. - `#E8EAEF` — **Carrara primary white**, the marble. The dominant warm-cool white that 99% of the marble photography is shot against. - `#C4C9D4` — **veining cool grey**, the cold streaks running through the marble. Used for body text on dark backgrounds. - `#A8AFBD` — **shadow-marble grey**, the deep veining and the shadow side of the caryatid silhouettes. - `#F4A547` — **ember gold**, the single heat accent. Used **only** for: the espresso crema in dossier 04, the laser-etch glow on aerogel sugar in dossier 07, the morphing variable-axis indicator dots, and the [TRANSMITTING] heartbeat. Never used for body text, never used for chrome borders, never as a background fill larger than 24px. Ember gold appears, total, on roughly 0.4% of the page's surface area — and it's the warmest thing in the design by an order of magnitude. Against #0A1228, the contrast is 8.7:1; against #E8EAEF marble, it's 3.2:1. **No gradient meshes. No dopamine neon. No pastel bands.** The palette is flat-fill except for one allowed use of gradient: the binary-system backdrop in the gaps between columns uses a slow vertical gradient `#0A1228 → #162447 → #1F4068`, subtly warped by a Perlin-noise SVG filter (`` baseFreq=0.008) to look like the photosphere of a gas giant under relativistic shear. ## Imagery and Motifs **Imagery system: mixed-media (3% — severely underused, almost untouched in the registry).** No single visual register dominates. Each dossier panel deliberately combines **six** distinct visual languages, every one of them rendered at a different fidelity and source-style. The combinations are the work. The six layers: 1. **Marble photography (real photographs — but only 1 macro per dossier)** — close-crop macro images of veined Carrara, Calacatta, Pentelic, and Bardiglio marble. Sourced as if from a stone-mason's reference library; cropped to ~480×320 on desktop. Each marble image is the *physical* surface the rest of the dossier sits on. Marble-texture is registry-rare (2%); here it is anchor. 2. **CAD-style ortho line schematics (vector)** — flat 1px stroke #1F4068 line drawings at orthographic projection of: a classical Doric column cross-section (dossier 01), a coffee plant root system labeled in micrometers (02), a Maillard-reaction Arrhenius curve plotted against orbital eccentricity (03), a cross-section of a portafilter modeled as a small particle-collider end-cap (04), a Chantilly cream rheometer trace overlaid on a Parthenon entasis curve (05), a butter-laminate cross-section drawn like a neutron-star crust profile (06), an aerogel sugar lattice rendered as 27,000 nodes (07), a poured-glaze pour-spread Reynolds-number diagram (08), the geometry of a 7" plate carved as a Doric capital echinus (09), a service-flow finite-state-machine (10), a transmission-shutdown power-down state diagram (11). Every schematic is annotated with hand-set dimension lines and italic labels. 3. **Caryatid silhouettes (vector, single fill #C4C9D4 at 24% opacity)** — six different caryatid postures based directly on the Erechtheion porch, each one holding aloft, instead of an entablature: a coffee cup (01), a green-bean trier (02), a thermocouple probe (03), a tamper (04), a piping bag (05), a rolling pin (06), a mold (07), a torch (08), a plate (09), a tray (10), a cleaning cloth (11). The caryatids appear at quarter-opacity behind every dossier — they are the *load-bearing iconography* of the cafe, in the literal architectural sense. 4. **Telemetry chips (CSS-only, no images)** — 11px JetBrains Mono numerical readouts in tabular-nums, animated with `counter()` increments running at varying rates per dossier. Each chip carries 4–9 numerical fields: shift-clock, drift-rate, temperature, pressure, doppler-tint, orbital-phase, etc. The numbers update on a slow tick (every 1.7s) so the page feels *alive* without being noisy. 5. **Graphite sketch overlays (raster, ~30% opacity)** — single-stroke graphite drawings, looking like they came from a chef's notebook AND a flight-engineer's notebook AND a 19th-century architect's sketchbook all at once. Subjects: a hand pouring (01), a roasting drum (03), a portafilter handle (04), a piping rosette (05), a sugar pull (07), a gloved plating hand (09). Rotated −3° to +5° randomly. They float over the marble and the schematic — mediating between the two visual systems. 6. **Inscriptional epigraphic plates** — small (180×40px) rectangles of dark-marble #162447 with EB Garamond small-caps text chiseled into them (rendered with `text-shadow: 0 1px 0 #2E5C8A, 0 -1px 0 #0A1228` to fake bevel). One per dossier. Reads things like "ON THE PROVENANCE OF THE BEAN" (02), "ON THE STATE-CHANGE OF SUGAR" (07). **Motif: marble-classical (6% — underused) fused with sci-fi (9% — underused).** The fusion is concrete and animated, not metaphorical. Every column on the page is **simultaneously** a Doric shaft *and* a vertical telemetry strip. The 20 flutes carved into each column shaft do double duty as **20 audio-spectrum bars** that pulse to a sine-wave-driven pseudo-audio signal at 0.7Hz — the column literally *sings*, in the visual sense. The volute curls of the capital order are repurposed as the morph-pattern transition curves (CSS `cubic-bezier(0.32, 0.72, 0.0, 1.0)` named `--curve-volute` in the stylesheet). The acanthus leaves on the entablature unfurl in SVG `path-draw-svg` keyframes (22% of corpus, but never against marble) when a dossier scrolls into view. The architrave frieze running along the top edge of the viewport is a continuous low-relief band of espresso cups, wheat sheaves, and small starships, rendered in 1.5px stroke at #2E5C8A — like a Panathenaic procession but the chariots are pastry trolleys and the riders are baristas. **No water-bubbles. No tropical fish. No leaf-organic. No hand-drawn primitives. No bokeh. No lens-flare.** This is a design without comfort imagery. ## Prompts for Implementation Build cafesweets.xyz as **one HTML file, one CSS file, one ES module, eleven inline SVGs** — no framework, no build step, no router, no service worker. Total uncompressed bundle target: **under 145KB** (the eleven CAD schematics consume ~38KB of the budget; the six caryatid silhouettes consume ~14KB; the marble macros consume ~52KB at WebP q72). The page renders complete on first paint with no above-the-fold layout shift. **All text is hand-authored prose — no lorem, no placeholder filler, no AI-generated stub copy.** **Reading time, end to end: 11 minutes** — eleven dossiers, ~60 seconds of attention each. The user is meant to *pan the colonnade slowly*, like walking the porch of the Erechtheion at dusk. The site rewards lingering in each inter-columniation; it does not reward skim-scrolling. **Page event timeline (first-paint to steady-state).** - **0.000s — first paint.** The viewport is the panoramic window. The eleven Doric columns are already present — they ship as inline SVG, not images. The deep-void midnight backdrop is in place. The architrave frieze along the top edge is rendered. The [TRANSMITTING — 04:17:22 SHIP-TIME] ticker is live and counting at the actual real-world second. The first dossier panel `01 Origin` is fully readable inside the leftmost inter-columniation. **No splash, no loader, no curtain, no preloader spinner.** The page is awake on first byte. - **0.30s — column rim-light boots.** The plasma-rim #2E5C8A 1px stroke fades in along the lit edge of every column over 0.30s, staggered by 28ms per column from left to right. This is the design's only "intro animation." It is over in 0.6s total. - **0.80s — telemetry begins.** All eleven dossier-chips begin their `counter()` ticks. JetBrains Mono numerals start drifting on a 1.7s cadence. The orbital-phase indicator top-right begins its 47-second-per-orbit revolution. - **1.20s — caryatid breath-cycle.** The six caryatid silhouettes begin a slow, almost imperceptible 14-second sine-wave breathing scale (1.000 → 1.006 → 1.000) as if alive under their stone load. Linear-interpolated, GPU-accelerated `transform: scale()`. - **steady state.** The page is now in transmission. It will animate forever in this state until the user scrolls. **Scroll choreography.** The single most important interaction: vertical scroll input is consumed by `animation-timeline: scroll(root)` on the deep-space backdrop layer, and rerouted into `transform: translateX(calc(var(--page-scroll) * -1px))` on the **non-column** content. The eleven columns themselves are `position: sticky; left: calc( * 9vw)` and remain pinned in place during pan. As the camera pans laterally, the **next dossier** rises from behind a column, fully formed, and the previous one slides off behind the column to the left. There is no fade-in stagger on dossier reveal — the whole dossier is already in DOM, already rendered, simply translated into view. Scroll feels *cinematic and weighty*; the marble has mass. **Morph as the signature pattern (11% of corpus, underused).** The Bricolage Grotesque variable-fluid axis morph is the design's primary animated voice. **Every dossier number** (01 through 11) executes a 1.4s axis-morph on first scroll-into-view, animating CSS variables `--wdth`, `--wght`, `--opsz` along a `cubic-bezier(0.32, 0.72, 0.0, 1.0)` curve. The numerals visibly *grow flesh and shed it* — they thicken and broaden into Doric heaviness, then thin and elongate into rocket-stencil compression, then settle. The morph is set to a JS `IntersectionObserver` threshold of 0.4. **No magnetic cursor-follow, no hover-lift on cards, no spring-physics on click, no parallax-stagger on body images** — this design rejects the four most-overused interaction patterns in the corpus (parallax 94%, stagger 76%, spring 75%, magnetic 62%) in favor of a single, stately, perfectly-tuned variable-axis morph that is the page's only "wow" moment, deployed eleven times. **Marble macro reveal (mixed-media interaction).** When a dossier enters viewport, its marble macro photograph executes a 0.8s `clip-path` reveal — `polygon(0 50%, 0 50%, 100% 50%, 100% 50%)` → `polygon(0 0, 0 100%, 100% 100%, 100% 0)` — the slab "splits open" horizontally from the centerline as if quarried in real time. Linear easing, no bounce. **Acanthus leaf unfurl.** Each dossier's CAD schematic is bordered, in two corners, by an SVG acanthus leaf rendered in 1px stroke at #2E5C8A. On dossier-into-view, the acanthus draws itself with `path-draw-svg` (22% corpus — but never on marble) over 1.6s, leaf by leaf. The leaf curl uses `pathLength` interpolation rather than `stroke-dashoffset` — slightly more precise on long curved paths. **Column-flute audio bars.** The 20 flutes per column are each a thin SVG rect with `transform: scaleY()` driven by a CSS-variable-bound sine wave (`@property --t: { … }; animation: pulse 0.7s linear infinite alternate;`). The amplitude is *tiny* — flutes range from `scaleY(0.997)` to `scaleY(1.003)`. The user perceives this not as motion but as **the columns being subtly alive**. No sound is played. There is no audio on this site. **Compass rose.** Bottom-right of viewport, fixed: a small SVG compass rose (45×45px) showing camera azimuth in degrees. Updates as the user pans. Reads `AZ 000°` at first column, `AZ 360°` at last. This is the only chrome that responds to scroll position in a *measured* way — a small, classical maritime instrument grounding the spaceship in older epochs. **Cursor.** No cursor-follow gimmick. The cursor is the system default, except when hovering inside the marble inset of any dossier — at which point it becomes a 22px `crosshair` styled with a 1px ember-gold #F4A547 stroke (a tiny laser-engraving reticle, suggesting the user can feel the surface). This is the only cursor mod on the entire site. **No CTA blocks. No pricing. No "order now." No newsletter signup. No reservation widget. No social-icons strip. No contact form. No stat-grid (`12+ years • 800+ pastries • 42 countries`). No testimonials. No press-logos cluster. No instagram embed. No video hero.** This is a transmission, not a storefront. **Closing dossier (11 Closing).** The final inter-columniation is left intentionally near-empty: a single line of EB Garamond italic, centered at 24px, reading: *"the colonnade does not end. it loops. you are now back at 01."* Followed by a [LOOP — RESUMING] telemetry chip. The page does not technically loop — but the user is invited to. This is the only piece of "footer" the site has. **Mobile (<= 720px).** The eleven-column horizontal pan reduces to **a five-column vertical walk-through**: the user descends through the colonnade, columns stay sticky to the left edge, dossiers stack down. The marble macros become 100vw wide. The telemetry chips shrink to 10px. The Bricolage axis morph remains. The compass rose moves to top-right and reads as a vertical altitude indicator instead. ## Uniqueness Notes This design's deliberate departures from the 100 designs already in the registry, and from the seed's defaults: 1. **Sci-fi + marble-classical fusion is unprecedented in the corpus.** Sci-fi appears in 9% of designs (always paired with circuit, abstract-tech, sharp-angles, hud-overlays — never with marble). Marble-classical appears in 6% of designs (always paired with luxury, real-estate, museum, light-academia — never with sci-fi). **No design in the registry combines them.** This design fuses them at the structural level: the column *is* the data column, the volute *is* the morph curve, the architrave frieze *is* the scroll progress bar. The pairing is the design. 2. **Mixed-media imagery deployed at full intensity.** Mixed-media imagery is at 3% of the corpus — almost untouched. Most uses are casual: a stock photo plus an illustrated icon. This design explicitly stacks **six** distinct visual languages per panel (marble macro photography, CAD ortho-line schematics, caryatid vector silhouettes, CSS-rendered telemetry chips, graphite sketch overlays, inscriptional epigraphic plates), and the six languages are rendered at deliberately different fidelities. The site's identity is the *combination*, not any single layer. 3. **Variable-fluid typography as the only signature animation.** Variable-fluid typography sits at 6% of the corpus, almost always used as a passive setting choice. Here, the Bricolage Grotesque five-axis morph is *the* page-wide interactive identity, replacing the four most-overused interaction patterns (parallax 94%, stagger 76%, spring 75%, magnetic 62%) entirely. The site has zero parallax, zero stagger, zero spring physics, and zero cursor-follow. It earns its motion budget through a single, stately, classically-curved axis morph deployed eleven times. 4. **Energetic tone built without dopamine, neon, or gradient-mesh.** Energetic tone is 15% of corpus — usually executed via dopamine-neon palettes, candy-bright hues, magnetic interactions, and gradient meshes. This design generates energy from *cadence and density* alone: the chatter-fast telemetry counters, the 20-flute pseudo-audio breath in every column, the live shift-clock, the 11-minute panoramic pan. The palette is midnight-blue, marble-white, and a single ember-gold accent — visually cool, narratively hot. 5. **Full-bleed reinvented as a single panoramic shot, not stacked sections.** Full-bleed is 89% of corpus — but in 89% of those uses it means a series of stacked full-width sections. Here, full-bleed means *one* continuous frame, eleven viewport-widths long, scrolled laterally by reinterpreting vertical scroll input. The user is in *one* place — the temple-cafe observatory — for the entire site. There are no "sections" in the conventional sense. 6. **Midnight-blue palette without any cyberpunk vocabulary.** Midnight-blue palette (8% corpus) is almost always paired with cyberpunk, dark-mode-neon, or fintech-trust. Here midnight-blue is the *atmosphere of a gas giant under relativistic shear* — paired with classical Carrara marble, EB Garamond inscriptional caps, and an ember-gold accent borrowed from espresso crema. No glitch, no scanlines, no terminal-green, no chrome-magenta. Midnight-blue used as **the deep void framing a Doric porch.** 7. **Morph pattern (11% corpus) deployed in classical-architectural register.** Morph in the registry usually drives blob-shapes, organic-blob backgrounds, or seapunk fluid forms. Here morph is rigorously *typographic* and *architectural*: variable-axis interpolation along Bricolage's `wdth × wght × opsz`, with the easing curve derived from the volute spiral of an Ionic capital (`cubic-bezier(0.32, 0.72, 0.0, 1.0)`, named `--curve-volute`). Morph used as classical proportion theory, not as fluid blob. 8. **Eleven dossiers, not twelve, not ten.** The corpus is full of 4-step, 6-step, 12-step layouts. Eleven is deliberate: it is the count of the canonical ten Erechtheion caryatids plus one for the missing one (the Elgin caryatid in the British Museum). This is not visible to the casual reader but it is structurally honest. 9. **Frequency analysis governed every choice.** From the registry: AVOID hand-drawn (95%), photography (98%), gradient (96%), warm (95%), mono (96%), parallax (94%), stagger (76%), spring (75%), cursor-follow (73%), magnetic (62%), card-grid (72%). PREFER mixed-media (3%), marble-classical (6%), sci-fi (9%), midnight-blue (8%), variable-fluid (6%), morph (11%), energetic (15%). Every PREFER is centered; every AVOID is structurally rejected, not just diminished. 10. **Chosen seed:** *aesthetic: sci-fi, layout: full-bleed, typography: variable-fluid, palette: midnight-blue, patterns: morph, imagery: mixed-media, motifs: marble-classical, tone: energetic.*