# Design Language for scientific.quest ## Aesthetics and Tone scientific.quest is **a working cyanotype field-laboratory rendered as a living orrery** — the site behaves as if you have walked into the drawing-room of a 19th-century natural philosopher who has, against all chronological sense, wired her brass apparatus to a modern compute cluster. The whole page is a **single continuous blueprint** — Prussian-blue paper, white wash-out lines, the chemical halo of a contact print left too long in the sun — except that the diagrams on that blueprint **are not drawings; they are running simulations.** A reaction-diffusion field stains the margin. A three-body gravitational dance traces and retraces its figure-eight in the header. A cellular automaton ticks quietly in the page footer like a clock that is also a proof. The tone is **scholarly-intellectual** without being dusty — it has the patience of a long experiment and the quiet thrill of a result coming in. There is no hype, no "revolutionary," no "game-changing." The voice is that of a careful lab notebook: hypotheses stated plainly, observations dated, errors crossed out but left legible. The mood is the particular hush of a planetarium thirty seconds before the lights go down, crossed with the smell of fixer in a darkroom. Inspiration: Anna Atkins' *Photographs of British Algae* (the first photographically illustrated book, all cyanotype), the Antikythera mechanism, Tycho Brahe's printed star tables, ALife conference proceedings, and the plotter-drawn covers of mid-century Dover science reprints. **The science is not decoration here — the science *is* the website.** Every ornament is a system that actually computes. ## Layout Motifs and Structure The layout is a deliberate **broken-grid** (12% in corpus) overlaid on a faint **engineering blueprint rule** — a 32px square grid drawn in 6%-opacity white, always visible behind everything, like the gridded paper a real lab notebook is printed on. Content blocks do **not** snap to that grid neatly; they are pinned at odd coordinates and slightly rotated (−1.5° to +2°), as if each were a specimen card pasted into an album by hand. This is **not** a card-grid, not a bento-box, not a dashboard, not centered-column. Vertical structure: **seven "plates"** (the word a cyanotype book uses for its pages), each full-bleed, each numbered in the lower-left corner with a hand-stamped `PLATE I` through `PLATE VII` in small caps. No global nav bar — instead a thin **left-margin "binding strip"** 56px wide, holding the seven plate numerals as a vertical index; the active plate's numeral fills solid white, the rest are hairline outlines. Scrolling is the page-turn. Each plate has a **left two-thirds "field"** (where the live simulation lives, bleeding to the edges) and a **right one-third "annotation gutter"** — a column of typeset notes, dated entries, and small inset diagrams, set ragged-right like marginalia. The gutter narrows and the field widens as you descend, so Plate VII is almost entirely simulation with a single sentence of annotation floating in it. Decorative **brass dividers** — thin double rules with a small engraved-circle node at the midpoint — separate annotation entries. Whitespace is generous in the gutter, dense and busy in the field: the page is a conversation between a quiet observer (the text) and a restless phenomenon (the simulation). ## Typography and Palette **Fonts — Google Fonts only, three voices:** - **Headlines & plate titles — *Spectral* (weights 400 / 500 / 700, plus 400 italic).** A serif-revival face with crisp, slightly mechanical bracketed serifs — it reads like the type in a well-set scientific monograph. Plate titles at `clamp(40px, 6vw, 84px)`, weight 500, letter-spacing −0.01em, used in white on the blue field. Spectral Italic carries every Latin term, every variable name in prose, every "cf." and "ibid." — the marginalia voice. - **Body & annotation gutter — *Newsreader* (weights 400 / 500, 400 italic, optical size enabled).** A literary serif with a warm reading rhythm at 17–19px, `line-height: 1.65`, measure capped at 62ch. Dated lab-notebook entries are set in Newsreader with a small-caps date stamp leading each one. - **Data, axis labels, equations, plate numerals, captions — *Spline Sans Mono* (weights 400 / 500).** A humanist monospace, used at 11–13px with `letter-spacing: 0.06em` and small-caps-style uppercasing for axis ticks, coordinate readouts, the binding-strip numerals, and the live parameter panel under each simulation (e.g. `f = 0.0367 k = 0.0649 step 04193`). It is the instrument typeface. **Palette — a duotone cyanotype, pushed:** - `#0A2342` — **Prussian Deep**, the darkest blue, page background and the "exposed" areas of the print. - `#16456B` — **Cyanotype Field**, the mid blue of a properly developed print; large panels and the simulation substrate. - `#2E6F95` — **Wash Blue**, lighter blue for secondary fills, the engineering rule when it needs to read stronger. - `#EAF3F7` — **Paper White**, the wash-out line color and primary type — never pure #FFF; it is the color of the paper showing through where the chemistry was blocked. - `#C9DCE5` — **Faded Line**, secondary type and inactive UI, a paper-white dimmed by residual blue tone. - `#D4A24E` — **Brass**, the *only* warm color: dividers, the engraved-circle nodes, the active-state accent, the seam where a "page" curls. Used at well under 5% of pixel area — it is the glint of an instrument, not a theme color. - `#8FE3C9` — **Reagent Mint**, reserved exclusively for *live* simulation output (the leading edge of a diffusion front, the trail of an orbiting body) so that "alive and computing" reads instantly distinct from "drawn and static." Also under 5% area. The page is roughly 70% blues, 22% paper-white type, ~4% brass, ~4% reagent mint. ## Imagery and Motifs **No stock photography. No gradient meshes. No hand-drawn cottagecore.** Every visual is one of three things: (1) a **live procedural simulation** rendered to canvas, (2) a **cyanotype-styled SVG diagram**, or (3) **plotter-line ornament**. - **The orrery (Plate I).** A real three-body / restricted N-body integrator drawn as thin white orbital traces with brass body-discs, ticking continuously, its trail slowly fading like an over-exposed photograph. Parameters shown live in Spline Sans Mono beneath it. - **Reaction–diffusion stain (Plates II–IV).** A Gray–Scott model running in a fragment shader (or 2D-canvas fallback), masked into the left field, output mapped to the paper-white→reagent-mint ramp on the blue ground — it genuinely looks like a chemical bloom spreading across blueprint paper. It seeds new spots near the cursor. - **Cellular automaton footer.** A one-line elementary CA (rule 30 / rule 110, switchable) drawing downward, time as the vertical axis — a quiet ticking texture along the very bottom of every plate. - **Cyanotype "specimens."** SVG line-art of algae fronds, fern silhouettes, crystal lattices, and a Voronoi cell-tessellation, drawn in white hairlines as if contact-printed — used as inset diagrams in the annotation gutter, each captioned with a fake-Latin binomial and a date. - **Engraved nodes & brass dividers.** Thin double-rule separators with a small filled brass circle (with a faint cross-hair) at the midpoint — a recurring punctuation mark, echoing dial graduations. - **Margin scribbles.** Occasional white "handwritten" SVG-path annotations — an arrow, a circled region, a `?`, a small "× redo" struck through — rendered with `stroke-dasharray` so they draw themselves in (`path-draw-svg`, 46% — used here as field-notebook marginalia, not as a logo flourish). ## Prompts for Implementation Build scientific.quest as **one static HTML document** — single `
`, seven `
`, one CSS file, one ES-module of JavaScript that owns the simulations. **No SPA framework, no router. No pricing block, no testimonials, no logo cloud, no stat-grid, no "trusted by," no email-capture, no FAQ accordion, no cookie modal, no CTA above any fold — there is no fold; this is a notebook you turn.** The only interactive controls are: the plate index in the binding strip (jump-scroll), and per-simulation tiny mono-type toggles ("rule 30 / rule 110", "pause", "reseed") set inline like switches on lab equipment. **Storytelling spine.** Plate I: *The Question* — the orrery turning, a single line of Spectral asking what it means to search a space you cannot see all at once. Plates II–VI each take one "instrument" (diffusion, automata, Voronoi growth, a random-walk plotter, a Fourier epicycle drawing) and let it run while the annotation gutter narrates an observation, dated, in lab-notebook prose — hypothesis, what was tried, what surprised. Plate VII: *The Result Is Provisional* — almost pure simulation, the gutter reduced to one floating sentence; the page literally never "ends," the cellular automaton keeps ticking past the last line of text. **Motion.** Everything that moves should move because a *system* is updating, not because a tween fired. The simulations run on `requestAnimationFrame` with a fixed timestep accumulator; respect `prefers-reduced-motion` by rendering each simulation to a single representative frozen frame and showing its final-state parameters. Scroll behavior: each plate fades up its annotation entries in sequence (`fade-reveal`, gentle, ~280ms, no bounce); the active binding-strip numeral fills with a 200ms brass wash. Cursor over the diffusion field perturbs it (`ripple` — but a *physical* ripple, the actual Laplacian getting a kick, not a CSS animation). No parallax-of-decorative-layers; the only depth is the faint engineering grid sitting behind content. SVG marginalia draw themselves in with `stroke-dashoffset` when their plate enters view. **Texture & detail.** Apply a faint paper grain via a tiled SVG `feTurbulence` overlay at ~5% opacity, plus a very slight blue vignette at the edges (the contact-print halo). The 32px engineering rule is a CSS repeating-linear-gradient pair at 6% white. Every plate numeral is letter-pressed-looking: a 1px inset dark-blue text-shadow. Brass elements get a one-pixel lighter top edge to read as metal. Dates in annotations should be plausible and consistent (a campaign across, say, March–September of an unspecified year). Latin binomials under specimens should be invented but grammatical-sounding. ## Uniqueness Notes Differentiators, each checked against the corpus revealed by the frequency analysis: 1. **The ornamentation is genuinely computational.** Generative-art imagery sits at 10% and is almost always used as a passive decorative *background* layer; here the reaction-diffusion field, the N-body orrery, the elementary cellular automaton, and the Fourier-epicycle plotter are the *content* of the plates and run live with exposed parameters. No other registry site makes "the decoration is a working simulation you can perturb" the organizing thesis. 2. **A true two-color cyanotype substrate, not a "warm gradient."** Warm palettes are at 98% and gradients at 94% across the corpus; this design is a hard duotone of Prussian blues (`#0A2342` / `#16456B` / `#2E6F95`) with paper-white line-work and *two* tiny accents (brass `#D4A24E`, reagent-mint `#8FE3C9`) — the mint reserved semantically for live computation only. Cyanotype-as-substrate, anchored to Anna Atkins and contact printing, appears nowhere in the registry. 3. **"Plates + binding strip + annotation gutter," not card-grid / bento / dashboard.** Card-grid (92%), full-bleed-centered (81%), and dashboard (34%) dominate; this is a broken-grid (12%) of slightly-rotated specimen blocks bound by a 56px vertical numeral index, with a ragged-right marginalia gutter — the structure of a printed scientific monograph, not a SaaS landing page. 4. **No conversion surface whatsoever.** Per the SDESIGN bias toward full-screen narrative: zero CTAs, zero pricing, zero stat-grids, zero testimonials — the page is a notebook that "never ends" because its cellular automaton keeps ticking. 5. **Typography is monograph-grade, not mono-default.** Mono is at 94% in the corpus as the default everything-face; here Spline Sans Mono is confined to *instrument readouts* only, while Spectral (serif-revival, 16%) and Newsreader carry headlines and reading text — the proportions of a real science book. Chosen seed / style: **generative art background** — explicitly inverted from "passive backdrop" into "the simulations are the subject." Vocabulary axes: *aesthetic*: generative + (light) editorial; *layout*: broken-grid; *typography*: serif-revival + tech-mono; *palette*: duotone + high-contrast; *imagery*: generative-art + line-illustration; *motifs*: grid-lines + crystalline; *tone*: scholarly-intellectual. Avoided patterns from the frequency analysis: hand-drawn (94%), glassmorphism (83%), warm palette (98%), gradient (94%), card-grid (92%), photography (98%), cursor-follow-as-gimmick (89%), parallax-of-decorative-layers (90%), typewriter-effect, counter-animate stat reveals.