# Design Language for scientific.quest ## Aesthetics and Tone scientific.quest is a **hand-illustrated natural history compendium** — imagine a Victorian field naturalist's sketchbook merged with a 1960s Scientific American spread, then soaked in jewel-ink and lit by a museum reading lamp. The site feels like turning brittle pages of an 1890s folio: pen-and-wash illustrations bleed at the margins, copper-engraved headings shimmer under the lamp, and the paper itself is a deep lapis with ink-stained sienna folios. Every surface carries the gentle imprecision of a hand — slightly uneven line weights, ink pools at curve intersections, the warmth of a nib that paused. The tone is **friendly-scholarly**: not precious or intimidating, but genuinely delighted by curiosity. The site speaks the way a favorite professor does — with wit, specificity, and the assumption that the reader is already intrigued. No evangelism, no hard sell. The voice is the institution; the design is the lobby. **Mood references:** Smithsonian annual report (1908), Ernst Haeckel Kunstformen der Natur plates, hand-lettered periodic table posters, Edward Tufte's "Envisioning Information" chapter headers. **Primary palette philosophy:** Jewel-tones as ink, not paint. Deep sapphire (#0F2D5E), emerald (#0D4A2F), ruby (#7C1A2E), amethyst (#3D1A5E), topaz (#C87B1A), and parchment-aged white (#F4EFE4) for text grounds. Background is deep midnight-lapis (#0B1829), not black — ink-saturated but luminous. ## Layout Motifs and Structure The page is a **magazine spread in a single viewport** — not a scroll but a reading session. Each "issue" of the page unfolds as a two-page folio spread, with a gutter line running vertically at 50vw and content arranged in asymmetric columns across it. The left column (38vw) carries the dominant illustration or skeleton-loading reveal; the right column (54vw) holds the typographic content in a 3-column magazine subgrid. **Spatial grammar:** - The spine/gutter is a 4px rule in emerald (#0D4A2F) with a 1px sapphire shadow, mimicking a bound book's hinge - Left column: a single large illustration panel, edge-to-gutter, with a subtle ink-bleed shadow that crosses the gutter rule (z-index layering creates depth) - Right column: 3 sub-columns at 16px gutter — leftmost for section labels rotated 90°, center for body text at 17px/28px, rightmost for margin annotations in smaller type - Folio numbers appear at the bottom outer edges (left: bottom-left, right: bottom-right) in topaz (#C87B1A), monospace - A thin horizontal rule 14px from the top forms the "running header" band — containing the section name left-aligned and issue number right-aligned **Layered depth system:** - Layer 0 (bg): midnight-lapis field (#0B1829) - Layer 1 (paper): linen-textured parchment cards (#F4EFE4) with 2px sapphire border-radius: 0 (sharp corners — paper, not cards) - Layer 2 (ink): sapphire illustration overlays, SVG line art at 1.6px stroke - Layer 3 (float): margin annotations on translucent amethyst panels (#3D1A5E at 85% opacity), dropping a subtle box-shadow (0 4px 20px rgba(15,45,94,0.4)) to lift off the page - Layer 4 (top): the gutter-crossing illustration shadow — a 40px wide gradient that bleeds from the left panel across the gutter rule, unifying the two halves No centered layouts. No hero sections. No full-bleed photography. The spread opens cold with content — no splash screen, no loader overlay. ## Typography and Palette **Display & headlines — `Playfair Display`** (Google Fonts, variable, wght 400–900, italic available). Set the primary folio title at 72px / 900 weight in topaz (#C87B1A) on the parchment ground, with +0.02em letter spacing. Subheads at 32px / 700. The italic variant is used exclusively for Latin taxonomy names and scientific nomenclature — visually signals authority without shouting. **Section labels (rotated) — `Libre Baskerville`** (Google Fonts, 400 italic). Rotated 90° counter-clockwise, placed in the leftmost sub-column, 13px, emerald (#0D4A2F). These are the magazine's "department" labels — NATURAL HISTORY, CHEMISTRY, PHYSICS — spaced with +0.18em tracking. **Body text — `Lora`** (Google Fonts, variable, 400/500). 17px / 28px line height, color #1A0F07 (near-black ink on parchment). Lora's brushed serifs echo the hand-drawn illustration style without mimicking it — it is "made by a person" without being "made by a student." Paragraphs use `text-indent: 1.5em` with no top margin between consecutive paragraphs, like a printed magazine. **Margin annotations — `Space Mono`** (Google Fonts, 400). 11px, amethyst (#6B3FA0 — slightly lighter than the panel background), used for asides, figure captions, and cross-references. Gives the impression of pencil notes in the margin. **Folio numbers / metadata — `Space Mono`** (Google Fonts, 400). 12px, topaz (#C87B1A). **Color palette (full hex):** - Midnight lapis (background): `#0B1829` - Deep sapphire (primary ink): `#0F2D5E` - Bright sapphire (accent/links): `#1A5FA8` - Emerald ink: `#0D4A2F` - Bright emerald (hover): `#158C52` - Ruby ink: `#7C1A2E` - Bright ruby (highlight): `#C4294A` - Amethyst ink: `#3D1A5E` - Bright amethyst (annotation panels): `#6B3FA0` - Topaz (headlines/folios): `#C87B1A` - Gold topaz (hover): `#E8A030` - Parchment (text ground): `#F4EFE4` - Near-black ink (body text): `#1A0F07` - Pale parchment (ghost/skeleton): `#D8D0C0` ## Imagery and Motifs **No photography.** The registry shows photography in the majority of designs — scientific.quest opts out completely. Every visual is a hand-drawn SVG illustration in the style of 19th-century natural history plate engraving: - **Line weight:** 1.6px primary contour, 0.8px interior hatching, 0.4px fine detail. All strokes use `stroke-linecap: round` and `stroke-linejoin: round` — the pen never lifts without a curve. - **Hatching direction:** 30° diagonal for shadow fills, 120° counter-diagonal for cross-hatching. Never horizontal or vertical — always angled. - **Fill style:** SVG `` elements create hatching fills — no solid fills except for ink-wash blobs (sapphire or emerald at 12–18% opacity as a watercolor ground beneath the linework). - **Color accent:** One jewel-tone wash per illustration. A botanical cross-section gets emerald wash; an atom diagram gets sapphire; a geological stratum gets ruby. The linework stays black (`#1A0F07`); only the wash changes. - **Subject matter:** Scientific instruments (astrolabes, microscopes, calibration weights), botanical specimens with labeled parts, anatomical cross-sections, crystallography lattice diagrams, orbital mechanics diagrams. Always objects — never people. **Layered-depth decorative motifs:** - Running corner marks: fine `+` or `×` registration marks in the corners of illustration panels — 8px, 0.8px stroke, topaz - Gutter bleed: the left illustration's ink-wash shadow crosses the gutter rule onto the right column by 40px, creating a visual link between the two "pages" - Folio rules: horizontal rules across the full spread width at 1px, emerald, with 12px top/bottom margins — dividing the spread into horizontal bands that echo printing registration - Scientific notation superscripts: key measurements and dates appear as typeset superscript/subscript pairs in Lora italic, topaz color — purely decorative notation **Skeleton loading states** (the defining interaction pattern): - When content loads, the illustration panel and text columns show skeleton states that look like **undeveloped photographic plates** — dark ground with a slightly lighter linen-texture rectangle where content will appear. The skeleton pulsates with a breathing shimmer that moves from left to right (not the usual bidirectional flash), as if developer fluid is washing across a darkroom print. - Shimmer color: from `#0F1E2E` to `#1A3352` — same family as the midnight lapis, not white — so the skeleton states feel native to the dark-paper aesthetic rather than intrusive. - Illustration skeletons match the approximate aspect ratio of the finished illustration (portrait for specimens, landscape for diagrams). They have the same corner treatment as the live illustrations (sharp corners, emerald border). - Text column skeletons show staggered lines of varying width (90%, 100%, 70%, 95%, 60%) to suggest paragraph cadence — the rhythm of the text is implied before the words arrive. - Skeleton states resolve via a CSS clip-path reveal: a horizontal wipe from left to right, 600ms, `cubic-bezier(0.25, 0.46, 0.45, 0.94)` — the "developer wash" animation. ## Prompts for Implementation Build scientific.quest as a **folio magazine reader** — a single-page application where the primary metaphor is a bound journal opening to a spread. The visitor does not scroll; they turn pages. Each "issue" is a two-page spread that advances with a left-edge page-curl or right-edge advance control (keyboard arrow / swipe / click). **Implementation architecture — 3 spread types:** **Spread Type A — The Feature Spread:** Left panel: A large hand-drawn SVG illustration (viewport height × 0.78, positioned at the top of the left column, with bottom margin showing folio rule). The illustration loads via skeleton-loading with the developer-wash reveal. Right panel: Playfair Display title at 72px, a 3-column subgrid with Lora body at 17px, and Space Mono margin annotations in the rightmost column. The gutter-crossing ink-shadow from the left panel gives the spread its visual unity. **Spread Type B — The Index Spread:** Both columns carry a 2×3 grid of smaller illustration thumbnails (each ~240×180px), each loading as a skeleton until revealed. Clicking any thumbnail advances to a Feature Spread. This is the only place where a grid layout appears — and even here, the grid cells are offset in alternating rows by 12px vertically to avoid rigid alignment. **Spread Type C — The Notation Spread:** Left column contains dense typographic content — a glossary, a timeline of discoveries, or a taxonomy tree rendered in indented Lora. Right column has a single large diagram with callout annotations. No illustrations on this spread type — pure typography and data. **CSS architecture:** ``` .spread { display: grid; grid-template-columns: 38vw 4px 54vw; height: 100vh; overflow: hidden; } .spine { background: linear-gradient(90deg, #0D4A2F, #0F2D5E); width: 4px; } .left-panel, .right-panel { overflow: hidden; position: relative; } .right-panel { display: grid; grid-template-columns: 3rem 1fr 14rem; gap: 16px; padding: 40px 32px; } ``` **Skeleton-loading implementation:** ```css .skeleton { background: #0F1E2E; position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, #1A3352 48%, transparent 100%); animation: developerWash 1800ms ease-in-out infinite; } @keyframes developerWash { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } .skeleton.revealed { animation: none; } .skeleton.revealed::after { content: none; } .reveal-clip { clip-path: inset(0 100% 0 0); animation: clipReveal 600ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; } @keyframes clipReveal { to { clip-path: inset(0 0% 0 0); } } ``` **Page-turn navigation:** - Left arrow key / swipe right: reveals previous spread with a 3D perspective rotate on the Y-axis (like turning a page back) — `perspective: 1200px; transform: rotateY(-180deg)` transitioning to `rotateY(0)` - Right arrow key / swipe left: advances to next spread with forward page turn - The page-turn does NOT use parallax, stagger, or spring animations — these are overused in the registry. The transition is purely rotational, 400ms, `cubic-bezier(0.4, 0, 0.2, 1)`. **Forbidden implementation patterns:** - No CTA blocks ("Get Started", "Sign Up Now") - No pricing tables or feature comparison grids - No stat counters or achievement badges - No hero banners with gradient overlays - No parallax scrolling (overused at 75% in registry) - No stagger animations on list items (overused at 50%) **Micro-interactions:** - Hovering a folio illustration: the emerald border gains a 1px outer glow in bright emerald (#158C52), and the illustration's ink-wash layer brightens by 15% opacity (CSS filter: brightness(1.15) on the wash layer only) - Hovering a margin annotation: the amethyst panel slides 3px to the right (transform: translateX(3px), 150ms ease-out) — as if a bookmark is being pulled - Clicking any jewel-tone accent color element produces a single ink-drop ripple: a circular element grows from 0 to 80px diameter at 12% opacity over 400ms, then fades — one occurrence only, no looping ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = hand-drawn, layout = magazine-spread, typography = retro-display, palette = jewel-tones, patterns = skeleton-loading, imagery = minimal, motifs = layered-depth, tone = friendly. **Differentiators from the existing registry:** 1. **Skeleton-loading as darkroom development** — No other design in the registry uses skeleton states as a thematic metaphor. Here the skeleton shimmer directionally mimics photographic developer washing across a print, moving left-to-right on a dark substrate (not the typical bidirectional white flash). This makes the loading state itself a storytelling moment rather than a UI delay indicator. 2. **The non-scroll page-turn as primary navigation** — The magazine-spread layout is at only 3% usage in the registry, and no other design in the registry combines it with a page-turn (3D rotateY) as the exclusive navigation mechanism. The site has no scrollbar. The visitor turns pages of an actual virtual journal. 3. **Jewel-tones as ink, not surface color** — The registry's palette category shows 88% "warm" and 76% "gradient" usage. scientific.quest inverts this: the background is deep and dark (midnight lapis #0B1829), and the jewel-tones appear as ink and watercolor washes on the illustrations — not as background fills or gradient overlays. This is the only dark-background jewel-tone design in the registry. 4. **Hand-drawn aesthetic at zero photography** — While hand-drawn aesthetic is at 56% registry usage (most common), those designs typically mix illustration with photography. scientific.quest uses SVG linework exclusively — every image is a constructed illustration with 19th-century natural history plate conventions (1.6px contour, 0.8px hatching, watercolor wash fills), making it the only design in the registry that treats its illustrations as primary scholarly artifacts rather than decorative accompaniments. 5. **Rotated section labels as wayfinding** — The use of 90°-rotated department labels in the left sub-column (NATURAL HISTORY, CHEMISTRY, PHYSICS) mimics the tab/thumb-index system of a reference volume. No other design in the registry uses rotated typographic labels as the primary navigation taxonomy — most rely on horizontal top nav bars.