# Design Language for ncbd.dev ## Aesthetics and Tone ncbd.dev channels the visual logic of a 1930s botanical survey journal that has been submerged in sepia-toned bathwater and left to dry on a sun-warmed windowsill -- except the pressed flowers between its pages have begun to bloom again, releasing tiny translucent bubbles that carry fragments of type and diagram within them. The aesthetic is **surreal** filtered through institutional professionalism: imagine Ernst Haeckel's "Art Forms in Nature" lithographs reimagined as an interactive developer portfolio, where every organism diagram has been replaced by a software architecture concept, and the meticulous Victorian labeling has been rendered in crisp Futura letterforms that float in amber-tinted liquid suspension. The tone is **professional** but quietly uncanny -- the kind of professionalism found in a well-organized research laboratory where the specimens have started rearranging themselves overnight. There is no whimsy, no playfulness; the surrealism is delivered with the deadpan precision of a technical manual whose illustrations have developed sentience. Every element communicates competence and clarity, but the visual substrate beneath that clarity is alive, botanical, wet, and dreaming. The inspiration draws from three sources: (1) the hand-tinted photographic plates of Karl Blossfeldt's plant close-ups, with their alien geometries of tendrils and seed pods; (2) the amber-preserved specimens in natural history museums, where organisms float in perpetual golden suspension; and (3) the clean, authoritative typographic systems of mid-century Swiss pharmaceutical packaging, where Futura and its geometric siblings communicated medical precision on cream-colored card stock. ## Layout Motifs and Structure The layout follows a strict **single-column** vertical flow -- a deliberate rejection of the multi-column grid systems that dominate 99% of existing designs. The single column is not centered in the viewport; instead, it is offset approximately 8% to the left of center (achieved via `margin-left: clamp(4rem, 8vw, 12rem); margin-right: clamp(6rem, 14vw, 20rem);`), creating an asymmetric reading channel that evokes the text block placement in a well-typeset book where the inner margin is narrower than the outer. The generous right margin serves as a "specimen margin" -- a lateral zone where floating botanical SVG illustrations and bubble animations drift slowly, never overlapping the text column but providing a constant peripheral visual presence. **The Herbarium Scroll:** The page is structured as a single continuous scroll divided into "plates" -- sections that correspond to herbarium specimen sheets. Each plate occupies approximately 90vh and is separated from the next by a horizontal rule rendered as a thin botanical vine illustration (SVG path animation that draws itself as the user scrolls to it). The vine separators are 1px strokes in `#8B6914` (Aged Gold) that extend from the left edge of the text column to approximately 60% of the viewport width, terminating in a small stylized seed-pod glyph. **Plate Structure:** Each plate contains: (1) a plate number in small-caps Futura at the top-left corner, styled as "Plate I", "Plate II", etc., in Roman numerals using `#A0845C` (Warm Umber); (2) a primary content block of text and/or code; (3) one or more "specimen illustrations" -- SVG botanical motifs positioned in the right margin zone; and (4) a cluster of 3-7 floating translucent bubbles (CSS-animated circles with `backdrop-filter: blur(2px)` and subtle `radial-gradient` fills) that drift upward at varying speeds. **No Navigation Bar:** There is no fixed header or navigation. Instead, the plate numbers in the left margin function as implicit wayfinding. A single small "herbarium index" icon (a pressed leaf glyph rendered in `#C4A060`) is fixed to the bottom-right corner of the viewport; clicking it triggers a morph animation where the leaf icon expands into a full-viewport overlay listing all plate titles, then contracts back when a selection is made. ## Typography and Palette **Typography:** - **Display / Plate Titles:** "Jost" (Google Fonts) -- a geometric sans-serif directly inspired by the 1920s Futura lineage, with optically precise circles, consistent stroke widths, and the distinctively high crossbar on the lowercase "e" that signals Bauhaus-era rationalism. Used at weights 300 (Light) and 500 (Medium) for plate titles at sizes from `clamp(2.5rem, 5vw, 5rem)`. The Light weight at large scale creates forms that feel etched rather than printed -- letterforms with the precision of an engraving tool on copper plate. Letter-spacing: `0.04em` for titles, `0.08em` for small-caps plate numbers. - **Body Text:** "Libre Baskerville" (Google Fonts) -- a web-optimized revival of the classic Baskerville typeface, chosen for its high readability at body sizes and its historical association with scholarly and scientific publishing. The transitional serif structure (sharp, refined serifs with moderate stroke contrast) bridges the gap between the geometric modernity of Jost and the antiquarian botanical theme. Set at 18px / 1.72 line-height in `#3E2F1C` (Deep Walnut) on the sepia background. Paragraph text uses justified alignment with `hyphens: auto` for the book-like column texture. - **Code / Technical Specimens:** "IBM Plex Mono" (Google Fonts) -- a humanist monospace with subtle ink traps and open apertures that distinguish it from the standard developer monospaces. Used at 15px with a muted `#5C4A2E` (Faded Bark) color and a left border of 2px solid `#C4A06040` (translucent gold). Code blocks have a background of `#F5EDE0` (Parchment Light) and `border-radius: 0` for a sharp, specimen-card appearance. **Palette:** The palette is built on the **sepia-nostalgic** foundation -- the chromatic world of aged photographic prints, pressed-flower albums, and amber-preserved specimens. | Swatch | Hex | Name | Usage | |--------|-----|------|-------| | Primary Background | `#EDE3D0` | Aged Vellum | Page background, the base "paper" tone | | Deep Text | `#3E2F1C` | Deep Walnut | Body text, primary headings | | Accent Gold | `#8B6914` | Aged Gold | Vine separators, interactive elements, links | | Warm Umber | `#A0845C` | Warm Umber | Plate numbers, secondary labels, metadata | | Parchment Light | `#F5EDE0` | Parchment Light | Code blocks, highlighted zones, card fills | | Botanical Green | `#4A6741` | Pressed Fern | Botanical illustration strokes, leaf motifs | | Bubble Tint | `#D4C8A820` | Amber Translucent | Bubble fill (20% opacity), glassy overlays | | Shadow Depth | `#2A1E0F` | Darkened Sepia | Deep shadows, overlay backgrounds, index menu | The palette deliberately avoids pure whites and pure blacks. The lightest value is `#F5EDE0` and the darkest is `#2A1E0F`, maintaining the feeling that everything exists within an amber-tinted medium. Gradient usage is minimal: only the bubbles use radial gradients (from `#D4C8A830` at center to `#D4C8A805` at edge), and the herbarium index overlay uses a linear gradient from `#2A1E0FE6` to `#2A1E0FCC`. ## Imagery and Motifs **Water Bubbles as Primary Visual Element:** The defining imagery of ncbd.dev is **water-bubbles** -- translucent, slowly ascending spherical forms that populate the right margin zone and occasionally drift across the text column. These are not decorative clip-art; they are CSS/SVG constructs that simulate the visual physics of air bubbles rising through a column of amber liquid: 1. **Bubble Construction:** Each bubble is a `
` with `border-radius: 50%`, a `radial-gradient` that places a bright highlight at the 30%/30% position (simulating light refraction), a 1px border of `#C4A06025` (near-invisible golden edge), and `backdrop-filter: blur(1.5px)` that distorts content behind it. Sizes range from 12px to 80px diameter. 2. **Bubble Physics:** Bubbles drift upward using CSS `@keyframes` with slightly randomized durations (8s-20s) and horizontal oscillation via `translateX` using a sine-curve approximation (`cubic-bezier` timing). When a bubble exits the viewport top, it is recycled to a random position below the viewport bottom. No JavaScript physics engine is needed; pure CSS animation with `animation-delay` staggering creates sufficient variety. 3. **Bubble Interaction:** On hover, a bubble pauses its ascent animation and scales to 1.3x over 0.4s with a `morph`-style easing (`cubic-bezier(0.34, 1.56, 0.64, 1)`). The backdrop blur intensifies to 3px, creating a momentary magnifying-glass effect over whatever content lies beneath. 4. **Bubble Density:** Approximately 15-25 bubbles are present in the viewport at any time. They are generated by a lightweight JS function that creates bubble elements and appends them to a fixed-position container. Density increases subtly as the user scrolls deeper (1 additional bubble per 500vh of scroll depth, capped at 40). **Floral-Botanical Motifs:** Botanical illustrations serve as the **motif** system, appearing as SVG line drawings in the specimen margin: 1. **Specimen Illustrations:** Each "plate" section features a unique botanical SVG illustration positioned in the right margin -- rendered as single-stroke line drawings in `#4A6741` (Pressed Fern) with `stroke-width: 1.2` and `fill: none`. These are stylized depictions of real botanical forms: unfurling fiddlehead ferns, cross-sections of seed pods, branching root systems, spiraling phyllotaxis patterns, and opening flower buds. Each illustration is between 120px and 200px in its largest dimension. 2. **Path-Draw Animation:** Botanical SVGs use `stroke-dasharray` and `stroke-dashoffset` animation triggered by scroll position. As a plate enters the viewport, its botanical illustration draws itself over 1.5 seconds, beginning from the root/stem and progressing outward to leaves and petals. The drawing animation uses a `morph` easing curve that starts slow, accelerates through the middle strokes, and decelerates at the terminal flourishes. 3. **Pressed-Flower Texture:** Behind each botanical SVG, a faint watermark version of the same illustration is rendered at 200% scale and 4% opacity in `#A0845C` (Warm Umber), creating the ghost-impression effect of a flower that has been pressed between pages and left a stain. This watermark is static and does not animate. 4. **Vine Separators:** Between plates, horizontal separator lines are animated SVG paths that depict a twisting vine with small leaves. These draw themselves left-to-right as the separator scrolls into view, taking 2 seconds to complete. The vine line is 1px `#8B6914` with leaves rendered as tiny filled paths in `#4A674120` (translucent Pressed Fern). ## Prompts for Implementation **Full-Screen Narrative Herbarium Experience:** The site opens to a full-viewport "title plate" styled as the cover of a Victorian botanical survey. The background is `#EDE3D0` (Aged Vellum). After a 0.3-second pause (for font loading via `document.fonts.ready`), the domain name "ncbd.dev" fades in at the vertical center using Jost Light at `clamp(4rem, 8vw, 9rem)`, colored `#3E2F1C`, with letter-spacing `0.06em`. The text does not simply appear -- it morphs into existence: each letter begins as a small botanical seed-shape (a simple SVG ellipse) that expands and transforms into the letterform over 1.2 seconds using CSS `clip-path` morph animations with staggered delays of 80ms per character. This is the primary **morph** pattern implementation. Simultaneously, the first cluster of bubbles begins rising from the bottom of the viewport. They start small (8-15px) and sparse (5-6 bubbles), establishing the liquid-medium metaphor before any content is read. Below the title, a subtitle line appears after the morph animation completes: a thin horizontal vine SVG draws itself across 40% of the viewport width, and beneath it, "A Development Herbarium" (or appropriate tagline) fades in using Libre Baskerville italic at 1.1rem in `#A0845C`. **Scrolling Behavior:** Scrolling is smooth (`scroll-behavior: smooth` on `html`) but not hijacked -- the user controls their own scroll velocity. As the user scrolls past the title plate, the title text and subtitle fade to 0 opacity over 200px of scroll distance using an Intersection Observer with `threshold` array. The first content plate begins at approximately 100vh. Each plate transition works as follows: 1. The vine separator enters the viewport and draws itself (2s, morph easing) 2. The plate number appears (fade-in, 0.3s delay after vine completes) 3. The text content fades in from `translateY(30px)` and `opacity: 0` to its final position (0.6s, morph easing) 4. The botanical SVG in the margin begins its path-draw animation (1.5s, triggered 0.2s after text begins its fade) 5. New bubbles spawn at the bottom of the plate area and begin their ascent **Morph Animation Specifications:** All morph animations use a custom cubic-bezier: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` -- a curve that begins with gentle acceleration and ends with a long, soft deceleration, creating movement that feels organic and fluid, like a plant stem unfurling. This same easing is applied to: - Letter morph animations on the title plate - Plate content entrance transitions - Botanical SVG draw animations - Herbarium index expand/collapse - Bubble hover scale-up **The Herbarium Index Overlay:** Triggered by the pressed-leaf icon in the bottom-right corner, the index overlay morphs open from the icon's position: the icon's leaf shape scales and transforms into a full-viewport rectangle over 0.5s. The overlay background is `#2A1E0FE6` (near-opaque Darkened Sepia). Plate titles are listed in Jost Medium at 1.4rem, colored `#EDE3D0`, with Libre Baskerville italic descriptions beneath each at 0.9rem in `#A0845C`. Hovering a plate title causes a subtle botanical watermark to appear behind it at 8% opacity. Clicking a title triggers a smooth scroll to that plate and morphs the overlay closed. **Responsive Behavior:** On viewports below 768px, the specimen margin collapses: botanical illustrations move inline between text blocks (scaled to 60% of their desktop size), and the bubble container shifts to cover the full viewport width at reduced density (10-15 bubbles). The text column expands to use standard mobile margins (`padding: 0 1.5rem`). Plate numbers move from the left margin to above the plate content. The single-column layout naturally adapts without breakpoint complexity. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, newsletter signup forms, cookie banners, chatbot widgets. This is a contemplative specimen collection, not a conversion funnel. **Technical Notes:** - Bubble generation: A single `requestAnimationFrame`-free approach using CSS animations with randomized `animation-duration` and `animation-delay` set via inline styles at creation time - SVG path animations: Use `getTotalLength()` on load to set `stroke-dasharray`, then animate `stroke-dashoffset` to 0 - Intersection Observer for all scroll-triggered behaviors: single observer instance with multiple entries, using `rootMargin: '0px 0px -15% 0px'` to trigger slightly before elements reach the viewport center - No external animation libraries; all motion is CSS transitions, CSS keyframes, or minimal vanilla JS ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Herbarium Plate Structure (unique):** No other design organizes content as numbered "plates" in the tradition of natural history publications. While 25% of designs use single-column layouts, none treat each section as a catalogued specimen sheet with Roman numeral plate numbers, vine separators, and margin-zone botanical illustrations. This structure creates a fundamentally different reading rhythm -- scholarly and sequential rather than scannable and modular. 2. **Water-Bubble Ambient Layer (2% imagery frequency):** The persistent floating-bubble system creates an environmental layer that no other design implements. While some designs use parallax or particle effects, the bubble system specifically simulates liquid suspension -- the feeling that the entire page exists underwater in amber fluid. The bubbles interact with `backdrop-filter` to distort content behind them, creating genuine visual depth rather than decorative overlay. This is a physically-modeled ambient system, not a cosmetic particle effect. 3. **Botanical SVG Path-Draw in Specimen Margin (2% motif frequency):** The combination of floral-botanical motifs rendered as single-stroke SVG line drawings with scroll-triggered path-draw animations, positioned in a dedicated margin zone rather than as background elements, is entirely unique. Other designs may use botanical themes or SVG animations, but none create a persistent "illustration margin" that accompanies the text column like the plates in a scientific reference book. 4. **Seed-to-Letter Morph Title Animation:** The opening animation where each letter of "ncbd.dev" begins as a botanical seed shape and morphs into a letterform via `clip-path` animation is a bespoke interaction found in no other design. It literalizes the herbarium metaphor at the typographic level -- letters as organisms growing from seeds. 5. **Left-Offset Single Column with Asymmetric Margins:** While single-column layouts exist elsewhere, the deliberate left-offset positioning (8% off-center) that creates a "gutter" and "fore-edge" margin system borrowed from book typography is a spatial decision no other design makes. The right margin is not wasted space but an active illustration zone. **Chosen Seed:** `aesthetic: surreal, layout: single-column, typography: futura-geometric, palette: sepia-nostalgic, patterns: morph, imagery: water-bubbles, motifs: floral-botanical, tone: professional` **Avoided Overused Patterns:** - Avoided `playful` aesthetic (95% frequency) -- used `surreal` instead (2%) - Avoided `centered` layout (99% frequency) -- used `single-column` with left-offset (25%) - Avoided `mono` typography (99% frequency) -- used `futura-geometric` (3%) as primary display face - Avoided `warm` palette as primary descriptor (100% frequency) -- used `sepia-nostalgic` (6%) as a specific warm-adjacent but distinct palette identity - Avoided `scroll-triggered` as primary pattern identity (97% frequency) -- used `morph` (12%) as the defining animation paradigm, though scroll-triggering is used as a mechanism - Avoided `minimal` imagery (94% frequency) -- used `water-bubbles` (2%) as a specific, non-minimal imagery strategy - Avoided `vintage` motifs (85% frequency) -- used `floral-botanical` (2%) which shares some DNA with vintage but is a distinct decorative vocabulary - Avoided `friendly` tone (98% frequency) -- used `professional` (11%) as the tonal register