# Design Language for senggack.org ## Aesthetics and Tone senggack.org is **a nocturnal greenhouse in the year 2087** — the last living botanical archive on a post-urban planet, where phosphorescent vines climb rusted neon signage and hand-pressed herbarium specimens pulse with bioluminescent ink. The site feels like walking through a Victorian conservatory that has been sealed for a century, colonized by the future, and reopened at midnight under UV light. Every leaf glows. Every label is a transmission. The aesthetic is **dark-mode pastoral-romantic** — not the clean darkness of a dashboard or the predatory darkness of crypto, but the profound, warm-dark of a forest floor at 2 AM, stained by the leak of neon from a distant city. This is a site that smells of wet soil and ozone simultaneously. The mood is melancholic tenderness shot through with electric urgency — like a handwritten love letter left inside a circuit board, discovered decades later. **Visual inspiration:** Botanical illustration plates from Joseph Banks's *Florilegium* redrawn in bioluminescent ink on carbon-black vellum; the hothouse glass ceiling of the Palm House at Kew Gardens seen from inside at night, with neon signs visible through the condensation; Alphonse Mucha's decorative borders rendered as fiber-optic tracery. The tone is **pastoral-romantic** — language of longing, tenderness, botanical naming, and the beauty of fragile living things — but delivered through a futurist visual language that treats the pastoral as sacred precisely because it is endangered. This is not nostalgia. This is grief and wonder held together. ## Layout Motifs and Structure The page structure is a **horizontal-scroll panorama** — a single continuous botanical survey that unrolls leftward like an impossibly long specimen drawer being pulled open. The visitor moves through the site not by clicking "next" but by scrolling horizontally through **seven survey panels**, each as wide as the viewport, each containing a distinct botanical specimen or collection with its field notes. **Panel architecture:** - Panel 0 — **VESTIBULE** — full-viewport dark entry: site name vertically stacked in retro-display type, a single glowing fern frond rendered in neon-green botanical illustration style, drifting upward in a slow fade-reveal loop. No navigation chrome. Just the specimen and its name. - Panel 1 — **ROOT SYSTEMS** — underground view, dark earth tones lit by neon root-glow. Primary manifesto text in retro-display oblique. Botanical Latin taxonomic labels in monospace. - Panel 2 — **STEM ARCHITECTURES** — botanical cross-sections of stems at cellular level, colored as if lit by blacklight: magenta, cyan, acid-green on near-black. This is the "what we build" panel. - Panel 3 — **FLOWERING BODIES** — the most visually lush panel. Full-bleed botanical illustration of a bloom, neon-saturated petals. The "who we are" panel — long-form poetic text beside the specimen. - Panel 4 — **SEED DISPERSAL** — kinetic panel. Seeds drift horizontally across the panel as the user scrolls, riding the horizontal momentum. "What we scatter" — projects, works, ideas. - Panel 5 — **DORMANCY** — deliberately sparse. Near-empty dark panel with a single dried specimen, pressed flat, almost monochrome. Resting phase. Archive. Past work. - Panel 6 — **GERMINATION** — the contact / invitation panel. A seedling unfurling from darkness. Minimal, warm. One email address, one glowing CTA tendril. **Navigation:** A horizontal progress bar at the bottom of the viewport, designed as a **specimen ruler** (fine tick marks, millimeter scale printed in retro type) that shows position within the total scroll. No hamburger menu. No back-to-top button. Navigation is entirely via horizontal scroll or drag. **Vertical rhythm within panels:** Each panel is internally centered with generous vertical breathing room — nothing is crowded. Text blocks float at botanical-label distances from illustrations: close enough to annotate, far enough to be distinct. Grid is 12-column within each panel with 2-column gutters, but content never fills more than 8 columns. ## Typography and Palette **Typography:** - **Primary display (panel titles, specimen names):** `Playfair Display` (Google Fonts, variable) — used at extreme sizes (clamp(4rem, 10vw, 9rem)) in italic weight, lettertracked to +0.02em. This is the "retro-display" anchor: a high-contrast serif that reads as Victorian botanical plate typography but scales beautifully into dark backgrounds. Drop shadows in `#00ff9f` at 0px blur, 2px offset — creating a neon-register-shift duotone shadow effect. - **Secondary labels (taxonomic names, field notes):** `Space Mono` (Google Fonts) — monospaced, uppercase tracking at +0.15em. Size 11px–13px. Used for all metadata: genus, species, collection date, GPS coordinates rendered as field data. - **Body text (prose, manifestos):** `Cormorant Garamond` (Google Fonts) — a refined old-style serif, set at 18px/1.75 line-height, in a warm off-white `#f0e8d5`. This contrast between the cool neon and warm prose color is essential. - **Accent / UI labels:** `Bebas Neue` (Google Fonts) — used sparingly for category tags and the specimen ruler tick labels only. **Color Palette (dark-neon):** - `#050a06` — **void-black** (base background, almost no blue, almost pure dark): the carbon paper ground - `#0a1a0d` — **deep-grove**: secondary dark surface, panels use this for depth layering - `#00ff9f` — **phosphor-green**: primary neon accent, glow color for botanical illustration outlines - `#b8ff00` — **acid-chartreuse**: secondary neon, petal highlights, hover states - `#ff00c8` — **biopunk-magenta**: tertiary neon, used on flowering panel and seed dispersal - `#00c8ff` — **ultraviolet-cyan**: used for cross-section cell-wall illustrations - `#f0e8d5` — **vellum-warm**: body text color, echoes aged herbarium paper - `#7aff9f` — **glow-mist**: softer phosphor, used for fade-reveal states before full glow activates - `#1a2e1d` — **conservatory-dark**: hover background on interactive elements **Color logic:** The dark palette uses `#050a06` as absolute ground. Neon colors appear ONLY on botanical illustration elements, glow effects, and key interactive states — never as text color on body copy. Text is always `#f0e8d5` on dark ground. Neon colors are used as `box-shadow` halos, SVG stroke colors, and CSS `filter: drop-shadow()` glows. ## Imagery and Motifs **Imagery vocabulary:** All primary imagery is **botanical illustration in the style of 18th-century copperplate engraving, colorized with neon-bioluminescent ink** — rendered as SVG line art with carefully placed neon `stroke` colors and `filter: drop-shadow` halos. No photography. No stock. Each specimen illustration has: 1. A fine-line black engraving layer (SVG `stroke` at 0.5px, `#1a2e1d`) 2. A neon color fill layer (`fill` with low opacity, e.g., `fill: #00ff9f; fill-opacity: 0.15`) 3. A glow halo layer (`filter: drop-shadow(0 0 8px #00ff9f)` on key strokes) 4. Taxonomic plate label in `Space Mono`, positioned as in a real herbarium plate **Recurring motifs:** - **The Specimen Label** — a rectangular tag, typeset in `Space Mono`, with genus name, collection latitude/longitude, and a six-digit hash that reads like a botanical specimen accession number but is actually a color code. These labels appear as HTML `
` elements styled to look like tied-on paper tags. - **The Neon Tendril** — a thin SVG line, animated via `stroke-dashoffset` to draw itself across the screen horizontally, connecting panel elements. This is the primary connective motif: vines drawn in neon, scrolling with the page but slightly slower (subtle parallax). - **The Pressed Plant Shadow** — silhouette ghosts of botanical forms behind content text blocks, rendered in `#0a1a0d` (1 step above void-black), creating a barely-visible botanical wallpaper texture. These are NOT decorative backgrounds but structural: they define where content blocks float. - **Futuristic classification tags** — pill-shaped tags alongside each specimen that use Bebas Neue to display invented post-scientific classification: `GENUS: LUMINOS`, `PHYLUM: SYNTHETIC-ORGANIC`, `EXTINCTION RISK: LOW / ACCELERATING`. These are the "futuristic" motif carrier — the dark humor of a world that has scientifically categorized its own botanical loss. - **The Scroll Ruler** — the horizontal progress indicator is styled as a botanical field-survey measuring tape: millimeter gradations, printed in `Space Mono` 9px, glowing `#7aff9f`, with major divisions labeled `ROOT`, `STEM`, `FLOWER`, `SEED`, `DORMANT`, `GERMINATE`. **Animation approach:** - Botanical illustration strokes use SVG `stroke-dasharray` / `stroke-dashoffset` animations triggered by horizontal scroll position — specimens draw themselves as the user scrolls into view (fade-reveal variant: the stroke-draw reveals the illustration from void into full neon glow). - The fade-reveal pattern governs all text: panels enter from `opacity: 0; filter: blur(8px)` to `opacity: 1; filter: blur(0)` over 800ms, triggered when the panel center enters viewport. NO parallax scrolling on background layers — the horizontal-scroll mechanic is the sole movement grammar. - Neon glows pulse with a slow sinusoidal `animation: pulse-glow 4s ease-in-out infinite` — amplitude 20% brightness variation — suggesting bioluminescence rather than electrical flicker. ## Prompts for Implementation Build senggack.org as a **single horizontal-scroll botanical survey** — one long `
` element laid out with `display: flex; flex-direction: row; width: max-content` wrapped in a viewport-constrained `` with `overflow-x: scroll; overflow-y: hidden`. JavaScript translates vertical scroll wheel events into horizontal scroll for trackpad/mouse compatibility via `wheel` event listener with `preventDefault()`. **Panel markup pattern:** Each of the 7 panels is a `
` with `width: 100vw; height: 100vh; flex-shrink: 0; position: relative`. Panels contain: 1. A `
` with inline SVG botanical illustration 2. A `
` with prose content in Cormorant Garamond 3. A `
` with Space Mono metadata 4. A `
    ` with Bebas Neue classification pills **Horizontal scroll implementation:** ```javascript document.querySelector('body').addEventListener('wheel', (e) => { e.preventDefault(); document.querySelector('main').scrollLeft += e.deltaY * 1.2; }, { passive: false }); ``` The scroll ruler updates its position via `IntersectionObserver` on each panel with `threshold: [0, 0.25, 0.5, 0.75, 1]`. **SVG illustration technique:** Each botanical specimen is hand-crafted inline SVG, approximately 400–800 paths, using `stroke` not `fill` as the primary mark. The SVG viewBox is `0 0 500 700` (portrait herbarium proportions). Key technique: - Base engraving layer: all paths `stroke="#1a2e1d" stroke-width="0.5" fill="none"` - Neon overlay layer: key outlines duplicated, `stroke="#00ff9f" stroke-width="0.8" fill="none" filter="url(#neon-glow)" opacity="0.7"` - CSS animation on neon layer: `stroke-dasharray: var(--path-length); stroke-dashoffset: var(--path-length)` animating to `0` via `IntersectionObserver` + CSS custom property transitions **Fade-reveal implementation:** ```css .panel .content { opacity: 0; filter: blur(8px); transform: translateY(12px); transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), filter 800ms ease, transform 800ms ease; } .panel.in-view .content { opacity: 1; filter: blur(0); transform: translateY(0); } ``` `IntersectionObserver` adds `.in-view` when `intersectionRatio > 0.3`. **DO NOT implement:** navigation menus, hamburger drawers, hero CTAs, pricing sections, testimonial grids, FAQ accordions, "about us" cards, social media icon rows, cookie banners, loading spinners (except the tendril-draw animation). The site is pure narrative immersion — a single uninterrupted botanical survey. **Font loading:** ```html ``` **Atmosphere details that must exist:** - A `background-image: radial-gradient(ellipse at 30% 50%, #0a1a0d 0%, #050a06 70%)` on `` — the greenhouse depth-of-field darkness. - The void-black `#050a06` must be the absolute darkest element — never pure `#000000` (which reads as dead, not deep). - Every neon color must appear ONLY with a `filter: drop-shadow` or `box-shadow` glow — raw neon without glow looks like web design from 2002, not bioluminescence. - The `vellum-warm #f0e8d5` for body text must contrast ONLY against dark surfaces — it should never appear on any light or bright background. ## Uniqueness Notes 1. **Horizontal-scroll as botanical survey drawer — corpus first.** Horizontal-scroll is used by only 2% of the 465-design corpus, making it one of the rarest layout patterns. But senggack.org doesn't use it as a "cool mechanic" — it uses it as a structural metaphor: the specimen drawer being pulled open. This motivation distinguishes it from any other horizontal-scroll design in the registry. 2. **Dark-neon palette with pastoral-romantic tone — unprecedented combination.** The frequency report shows dark-neon appears in 3% of designs, and pastoral-romantic tone in 5%, but they have never been combined — dark-neon is universally associated with cyberpunk/crypto (hard, aggressive) while pastoral-romantic is used with warm/muted palettes. senggack.org treats the neon as bioluminescence rather than electricity, making the pastoral-romantic tone coherent in a dark-neon context. This recontextualization of a visual trope is the site's central creative act. 3. **Botanical illustration as SVG line-art with neon colorization — not photography, not generative.** The frequency report shows botanical-illustration at 3% and neon-glow at 3%, but these two categories appear in separate designs. senggack.org fuses them: 18th-century copperplate engraving technique rendered with neon ink on carbon ground. This is neither the typical "nature photography with botanical overlay" approach nor the typical "neon on black" approach — it is a historically-grounded illustration vocabulary translated into bioluminescent color. 4. **Retro-display typography (Playfair Display italic at extreme scale) against void-black.** Retro-display typography appears in only 3% of the corpus, and within that group it is typically used with warm backgrounds (cream, sepia, aged paper). senggack.org inverts this: Victorian-proportion high-contrast serif at display scale on near-black, with neon drop shadows creating a register-shift ghost effect. The typography reads simultaneously as 1887 botanical atlas and 2087 biopunk archive — the collision is the concept. 5. **Futuristic classification as dark ecological commentary.** The "futuristic" motif appears at 8% in the corpus, but consistently as aesthetic futurism (tech, sci-fi, HUD overlays). senggack.org uses futurist language — invented post-Linnaean taxonomy, extinction risk ratings, specimen accession hashes — as a pastoral-romantic gesture: the act of naming and cataloguing living things as an expression of love for them, amplified by the implicit context that they may not survive. This is ecological grief rendered as design language, not sci-fi escapism. [seed: aesthetic: dark-mode, layout: horizontal-scroll, typography: retro-display, palette: dark-neon, patterns: fade-reveal, imagery: botanical-illustration, motifs: futuristic, tone: pastoral-romantic] [avoided: hand-drawn (57%), editorial (52%), warm palette (88%), gradient palette (76%), parallax (75%), mono typography (74%), centered layout (84%), full-bleed layout (63%)]