# Design Language for sarampass.com ## Aesthetics and Tone sarampass.com inhabits the visual world of a field biologist's command-line interface, deep in a research station nestled within a cloud forest at midnight. Imagine a terminal session running on a ruggedized laptop, its phosphor-green text reflected in the condensation on a rain-streaked window, while bioluminescent organisms pulse softly in the mist outside. The aesthetic is **terminal** -- but not the sterile terminal of a developer's IDE. This is the terminal of someone cataloging unknown species in the dark, where each command typed reveals another layer of an ecosystem that refuses to be fully understood. The mood is **mysterious-moody**: a persistent sense of discovery tinged with unease, as if the data streaming across the screen is alive and watching back. There is beauty here, but it is the beauty of deep ocean vents and glowing fungi -- alien, captivating, and slightly unsettling. The screen is both window and mirror; the interface is both tool and organism. Every interaction carries the weight of something vast and half-glimpsed, like sonar pings returning from an unmapped abyss. The domain name itself -- "sarampass" -- evokes a mountain pass, a threshold between known and unknown terrain. The design leans into this liminality: the site exists at the border between digital precision and organic chaos, between the structured logic of command-line output and the formless proliferation of natural systems. ## Layout Motifs and Structure The layout follows a **dashboard** architecture -- but reimagined as a field research monitoring station rather than a corporate analytics panel. The screen is divided into discrete panels that function like instrument readouts in a biological observatory: a primary content viewport occupying roughly 60% of the screen (left-center), flanked by narrower auxiliary panels (20% right sidebar, 20% bottom strip) that display secondary data streams. **Structural Principles:** - **Primary Viewport (60%):** A tall, scrollable content area framed by a thin 1px border of #2a6e4f (muted forest green). This panel contains the main narrative content, rendered as sequential "log entries" -- blocks of text that appear to have been appended to a running output stream. Each entry is separated by a timestamp-like divider (a line of dashes with a date-formatted string in muted #5a8a6f). - **Auxiliary Right Panel (20%):** A fixed sidebar displaying a continuous stream of "environmental readings" -- CSS-animated text blocks that slowly scroll upward, simulating live telemetry. These readings are decorative: generated phrases like "humidity: 94.7%", "canopy_density: opaque", "specimen_count: unknown" rendered in monospace at 0.75rem. The sidebar has a background of #0d1f17, slightly darker than the main viewport. - **Bottom Strip (20% height):** A horizontal panel spanning the full width, containing a CSS-generated visualization of "terrain data" -- a series of SVG polylines that undulate slowly, resembling a topographic cross-section or an ECG readout of the forest floor. The lines are rendered in varying opacities of #3bff9a (bioluminescent green). - **No traditional navigation.** Instead, a minimal command-prompt-style input area sits at the very top of the screen: a blinking cursor after a `>` character, purely decorative but establishing the terminal metaphor immediately. Content sections are accessed by scrolling the primary viewport, with the auxiliary panels remaining fixed. - **Panel gaps** of 2px filled with #0a0a0f (near-black) create the impression of screen bezels separating instrument readouts. ## Typography and Palette **Typography:** - **Display / Headlines:** "Righteous" (Google Fonts) -- a bold, slightly rounded display typeface with a retro-futuristic quality that contrasts beautifully against the terminal aesthetic. Used at 2.5rem-4.5rem for section headers and primary titles. Weight: 400 (Regular, the only weight available). Letter-spacing: +0.04em. Text-transform: uppercase. Color: #3bff9a (bioluminescent green) with a subtle CSS text-shadow: 0 0 8px rgba(59,255,154,0.3) to create a phosphor glow effect. - **Body / Narrative Text:** "IBM Plex Mono" (Google Fonts) -- the definitive monospace typeface for terminal interfaces, carrying the authority of mainframe computing while remaining highly legible at body sizes. Used at 0.95rem-1.1rem for all paragraph content. Weight: 300 (Light) for body text, 500 (Medium) for emphasis. Line-height: 1.7 (generous for readability against dark backgrounds). Color: #b8d4c8 (pale sage) for primary body text, #5a8a6f (muted green) for secondary/metadata text. - **Accent / Labels:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with monospaced DNA, bridging the gap between the terminal mono and the display type. Used at 0.7rem-0.85rem for panel labels, timestamps, and UI chrome. Weight: 400 (Regular). Letter-spacing: +0.08em. Text-transform: uppercase. Color: #4a7a5f (forest mid-tone). **Palette (Analogous Green-Teal-Emerald):** The palette is strictly **analogous**, moving through the green-teal spectrum with no warm accent colors. This creates a monolithic, immersive atmosphere -- like being submerged in a single wavelength of light. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (deep) | Near-black forest | #0a0f0d | The void behind the terminal | | Background (panel) | Dark moss | #0d1f17 | Auxiliary panel backgrounds | | Background (active) | Deep evergreen | #132e22 | Hover states, active panels | | Border / Divider | Muted forest | #2a6e4f | Panel borders, separators | | Text (secondary) | Sage shadow | #4a7a5f | Labels, metadata, timestamps | | Text (body) | Pale sage | #b8d4c8 | Primary reading text | | Text (primary) | Mint cream | #e0f5ec | High-emphasis headings | | Accent (glow) | Bioluminescent | #3bff9a | Display headlines, cursor, key elements | | Accent (deep) | Teal undertow | #1a8a7a | Links, interactive elements | | Accent (mist) | Spectral cyan | #2ee8c4 | Bubble highlights, hover states | ## Imagery and Motifs **Nature-Elements Rendered as Data:** The imagery vocabulary is **nature-elements** -- but every natural form is translated through the lens of terminal output and scientific instrumentation. Nature is never presented as photography or illustration; it is always mediated through the screen, as if observed through instruments rather than eyes. 1. **Bioluminescent Bubble System (Primary Motif):** The **bubble-playful** motif manifests as a field of softly glowing circles that drift across the background of the primary viewport. These are not cartoon bubbles -- they are rendered as translucent CSS circles (border-radius: 50%) with radial gradients from #3bff9a at 10% opacity to transparent, varying in diameter from 4px to 60px. They drift upward at randomized speeds (CSS animation: translateY with durations between 12s and 40s), simulating bioluminescent plankton ascending through a water column. Each bubble carries a faint blur (filter: blur(1px-3px)) and occasionally "pulses" -- a brief opacity spike from 0.1 to 0.4 and back over 2 seconds. There should be 30-50 bubbles active at any time, layered behind the text content with pointer-events: none. 2. **Topographic Contour Lines:** SVG-generated contour lines (stroke: #2a6e4f, stroke-width: 0.5px, fill: none) trace across section backgrounds, suggesting terrain maps of the mountain pass. These are static but use `feTurbulence` SVG filters to generate organic, non-repeating curves. Each section uses a different turbulence seed to create varied "terrain." 3. **Cursor-Follow Organism:** The **cursor-follow** pattern creates a small bioluminescent "organism" that trails the user's mouse cursor. This is a 12px circle of #2ee8c4 at 60% opacity with a 20px blur, connected to the cursor by a fading trail of 6 progressively smaller and more transparent circles (creating a tadpole-like silhouette). The organism follows the cursor with a spring-physics delay (200ms lag), giving it a living, autonomous quality rather than a mechanical attachment. 4. **Root Network Lines:** Thin SVG lines (#1a8a7a at 15% opacity) connect the bubbles to each other when they drift within 100px proximity, creating a mycelium-like network that forms and dissolves as the bubbles move. This references mycorrhizal networks -- the "wood wide web" -- and reinforces the theme of hidden biological infrastructure. 5. **Terminal Scanlines:** A subtle CSS overlay across the entire viewport: a repeating linear-gradient of transparent and rgba(0,0,0,0.03) at 2px intervals, creating the faint horizontal scanline effect of a CRT monitor without being obtrusive. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a completely black screen (#0a0f0d). After a 1-second pause, a blinking cursor appears at the top-left: a small #3bff9a rectangle (8px x 16px) pulsing at 1Hz. Then, text begins to "type" itself across the screen in IBM Plex Mono at 1.1rem -- a simulated boot sequence: ``` > initializing sarampass field station... > loading atmospheric data... [OK] > connecting to canopy sensor array... [OK] > specimen database: 4,217 entries (34 unclassified) > WARNING: anomalous readings in sector 7 > entering observation mode... ``` Each line appears with a typewriter effect (40ms per character), with the `[OK]` confirmations appearing after a brief 300ms delay. The `WARNING` line renders in #2ee8c4 instead of the default #b8d4c8. After the boot sequence completes (approximately 6 seconds), the terminal text fades to 30% opacity and slides upward as the full dashboard layout assembles itself -- panels drawing their borders from the edges inward (a CSS border-animation over 800ms, staggered by 150ms per panel). **Scroll Behavior in Primary Viewport:** As the user scrolls the primary viewport, content appears in discrete "log entries" -- each entry fades in from 0% opacity and translates 20px upward into its final position (duration: 600ms, easing: cubic-bezier(0.16, 1, 0.3, 1)). Between entries, timestamp dividers slide in from the left edge. The auxiliary panels remain fixed, but the telemetry sidebar accelerates its scroll speed slightly when the user is actively scrolling the main content, creating a subtle sympathetic motion. **Bubble Interaction:** When the cursor-follow organism passes near a bioluminescent bubble, the bubble brightens momentarily (opacity increases to 0.5) and emits a brief radial pulse -- a concentric ring of #3bff9a that expands from the bubble's center to 3x its diameter over 400ms before fading. If the user's cursor hovers in one area for more than 2 seconds, nearby bubbles begin drifting toward the cursor position, clustering around it like moths around a light, before slowly dispersing when the cursor moves again. **Content Structure:** Content is presented as field research logs. Each section has a header formatted as a terminal command: `> observe --sector [name]` rendered in Righteous at 2.5rem, followed by the "output" in IBM Plex Mono. This framing transforms ordinary content into the output of a mysterious research operation, maintaining the narrative conceit throughout. **Key Implementation Notes:** - All animations should use `will-change: transform, opacity` for GPU acceleration - The bubble system should use requestAnimationFrame for smooth 60fps rendering - Cursor-follow uses spring physics: `x += (targetX - x) * 0.08` per frame - The root network lines recalculate connections every 500ms, not every frame - Total page weight target: under 100KB excluding fonts (no images, all CSS/SVG/JS generated) - AVOID: pricing blocks, CTA buttons, testimonial carousels, stat-grid counters, hero images ## Uniqueness Notes **Differentiators from other designs:** 1. **Terminal-as-Biome Interface:** While terminal aesthetic appears in 25% of designs, it is universally paired with tech/developer themes. This design uniquely fuses terminal with a biological field-research narrative, where the command line becomes an instrument for observing nature rather than writing code. The terminal is not the subject -- it is the lens through which an organic, mysterious world is observed. 2. **Living Cursor-Follow Organism:** The cursor-follow pattern (4% frequency) is typically implemented as a simple trailing dot or glow. Here, it manifests as a bioluminescent creature with spring-physics movement and a tadpole-like morphology that interacts with the bubble ecosystem -- brightening nearby bubbles, attracting idle clusters. This transforms a standard interaction pattern into a narrative element: the user's cursor becomes a living thing within the ecosystem. 3. **Analogous Green-Only Palette:** The strictly analogous palette (3% frequency) is extremely rare and here is used to radical effect -- the entire site exists within a single hue family (green-teal-emerald), creating a monochromatic immersion that feels like viewing the world through night-vision equipment or the green phosphor of an old CRT. No warm colors, no contrast hue for accents. This chromatic restriction is a feature, not a limitation, creating an atmosphere no multi-hue palette can achieve. 4. **Mycorrhizal Network Visualization:** The dynamic SVG lines connecting drifting bubbles based on proximity -- forming and dissolving a visible network -- is an imagery concept that appears in no other design. It references real biological infrastructure (fungal root networks) and creates an ever-changing generative artwork that is different on every visit and every moment. 5. **Dashboard as Research Station:** Dashboard layouts (16% frequency) are always corporate/analytics. This design repurposes the dashboard as a biological monitoring station, with telemetry sidebars showing poetic pseudo-data and topographic readouts replacing bar charts. The familiar dashboard structure becomes uncanny and evocative rather than utilitarian. **Chosen Seed:** aesthetic: terminal, layout: dashboard, typography: display-bold, palette: analogous, patterns: cursor-follow, imagery: nature-elements, motifs: bubble-playful, tone: mysterious-moody **Avoided Overused Patterns:** playful aesthetic (96%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (97%), minimal imagery (95%), vintage motifs (88%), friendly tone (99%). This design deliberately avoids all top-frequency categories in favor of underused alternatives.