# Design Language for prototype.st ## Aesthetics and Tone prototype.st inhabits the visual world of an unreleased 1972 Braun product catalog that was redesigned by a contemporary tropical biologist -- evolved-minimal at its core, meaning every element earns its place through functional clarity, but the surfaces themselves are alive with the delicate tension between industrial precision and organic unpredictability. The aesthetic draws from Dieter Rams' ten principles filtered through the lens of Ernst Haeckel's "Kunstformen der Natur" engravings: systematic, grid-bound, authoritative in its assertions, yet populated by impossibly detailed botanical and aquatic illustrations that spill across the rigid framework like nature reclaiming architecture. The tone is **authoritative** without being cold. It speaks with the quiet confidence of a reference volume -- the kind of book you consult, not browse. There is no pleading for attention, no exclamation marks, no urgency. Sentences are declarative. Information is presented as settled fact. The authority comes not from loudness but from the evident care in every typographic detail, every precisely placed illustration, every considered color relationship. Think of the voice as a senior curator at a natural history museum: deeply knowledgeable, unhurried, and slightly formal, but genuinely passionate about the subject once engaged. The mood oscillates between the sterile beauty of a Swiss watchmaker's workbench and the humid abundance of a greenhouse in late summer. Whitespace is not empty -- it is the silence between authoritative statements. And into that silence swim tropical fish, rendered in meticulous botanical-illustration style, their scales catching honeyed light. ## Layout Motifs and Structure The layout is built on a **horizontal-scroll** paradigm -- the entire site unfolds laterally like a panoramic scientific illustration or an unrolled Japanese emakimono scroll. The viewport acts as a window that pans across a vast horizontal canvas, with content organized into discrete "plates" (a term borrowed from scientific illustration publishing) arranged side by side. **Primary Horizontal Framework:** - The total horizontal canvas spans approximately 8-12 viewport widths, divided into named plates: PLATE I through PLATE VIII - Each plate occupies exactly 100vw width and 100vh height, creating a sequence of full-screen compositions - Navigation between plates uses CSS `scroll-snap-type: x mandatory` with `scroll-snap-align: start` on each plate - A thin horizontal progress indicator (2px, #B8956A) runs along the bottom of the viewport, scaling its width via `transform: scaleX()` driven by `scrollLeft / scrollWidth` **Plate Composition System:** - Each plate follows a **12-column horizontal subgrid** (using `display: grid; grid-template-columns: repeat(12, 1fr)`) with 24px column gaps - Content within plates is vertically centered using `align-items: center` but horizontally distributed asymmetrically -- text blocks anchor to columns 2-5 while illustrations float in columns 7-11, creating a consistent but not monotonous rhythm - Between plates, 80px-wide vertical divider zones contain delicate line-drawn tropical fish silhouettes (SVG, stroke only, #C9A96E at 0.3 opacity) that serve as visual chapter markers - Plate transitions use a subtle parallax offset: background illustration layers translate at 0.7x the scroll speed while foreground text moves at 1x, creating gentle depth **Vertical Exceptions:** - PLATE I (the entry plate) uses a single centered vertical stack: domain name, a single authoritative tagline, and a horizontal arrow indicator suggesting the scroll direction - PLATE VIII (the final plate) breaks the grid entirely, presenting a single large botanical illustration that bleeds to all edges with the domain name repeated in small caps at the bottom-right corner **No traditional navigation.** Instead, a minimal row of Roman numeral plate indicators (I through VIII) sits fixed at the top-right corner, each numeral clickable, with the current plate numeral rendered in #B8956A and others in #D4C5A9 at 0.5 opacity. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- used exclusively in small-caps (`font-variant: small-caps`) at weights 700 and 900. This retro-display approach gives headlines the authority of engraved brass plates on museum specimens. Sizes range from 2.5rem to 5rem using `clamp(2rem, 3vw + 1rem, 5rem)`. Letter-spacing: +0.15em. Line-height: 1.1. All headlines are set in `#3D3225` (Mahogany Bark). The retro-display character comes from Playfair's high-contrast thick-thin strokes, which evoke copperplate engraving and 18th-century scientific title pages. - **Subheadings / Labels:** "Anybody" (Google Fonts) -- a variable-width sans-serif used at its most condensed setting (`font-stretch: 75%`), weight 500, sizes 1rem-1.5rem. Set in uppercase with +0.25em letter-spacing, it serves as the systematic labeling voice -- the text you would find on a specimen drawer. Color: #8B7D6B (Driftwood). - **Body Text:** "Lora" (Google Fonts) -- an elegant serif with brushed curves that bridges the gap between clinical precision and organic warmth. Weight 400 for body, 600 for emphasis. Size: 1.125rem. Line-height: 1.75. Color: #4A3F31 (Deep Umber). Paragraph max-width: 38ch to enforce a reading-optimized measure within the horizontal layout. - **Captions / Annotations:** "IBM Plex Mono" (Google Fonts) -- weight 400, size 0.8rem, color #A0926F (Tarnished Brass). Used for illustration labels, plate numbers, and taxonomic-style annotations beneath fish and botanical illustrations. Letter-spacing: +0.05em. **Palette:** The palette is **honeyed-neutral** -- built from the warm amber-gold spectrum of aged paper, honey, brass instruments, and sunlit sandstone. Every color has the warmth of something touched by time and light. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background (Primary) | Parchment Cream | #F4EDE0 | Main canvas, plate backgrounds | | Background (Alternate) | Warm Linen | #EBE1D0 | Alternate plate backgrounds for rhythm | | Accent (Primary) | Aged Brass | #B8956A | Progress bar, active indicators, links | | Accent (Secondary) | Honey Amber | #C9A96E | Illustration highlights, hover states | | Text (Primary) | Deep Umber | #4A3F31 | Body text, primary reading content | | Text (Display) | Mahogany Bark | #3D3225 | Headlines, display typography | | Text (Secondary) | Driftwood | #8B7D6B | Subheadings, labels, secondary text | | Illustration Ink | Sepia Line | #6B5B45 | SVG stroke color for botanical/fish illustrations | | Illustration Fill (Warm) | Gilded Scale | #D4A854 | Warm fill accents on tropical fish scales | | Illustration Fill (Cool) | Lagoon Teal | #5B8C7A | Cool counterpoint for fish fins, leaf veins | | Divider / Muted | Faded Gold | #D4C5A9 | Dividers, inactive numerals, ghost elements | ## Imagery and Motifs **Botanical Illustration System:** The primary visual language is **botanical-illustration** -- not photographic, not vector-flat, but the precise, hand-rendered style of 18th/19th-century scientific illustrators like Redoute, Ehret, and the Bauer brothers. All illustrations are rendered as detailed SVG compositions using fine strokes (#6B5B45), cross-hatching for shadow, and selective flat fills in the palette's warm and cool accents. **Tropical Fish as Recurring Motif:** The **tropical-fish** motif permeates the design as a unifying thread. These are not cartoon fish or emoji fish -- they are rendered with taxonomic precision in the botanical-illustration style: - **Plate Divider Fish:** Between each plate, a single species appears in profile view (stroke-only, #C9A96E at 0.3 opacity), oriented to "swim" in the scroll direction. Species rotate: angelfish, discus, betta, lionfish, moorish idol, mandarin dragonet, clownfish - **Feature Illustrations:** Within plates, larger fish compositions (200-400px) serve as visual anchors. Each fish is drawn with visible scale patterns using SVG `` elements, fin rays rendered as individual stroked paths, and eyes as concentric circles with a highlight dot - **Micro-Fish:** Tiny fish silhouettes (16-24px) appear as bullet points in lists, replacing standard dots. Each list item gets a different species silhouette - **Scale Pattern Background:** A subtle repeating SVG pattern derived from fish scales (`` elements arranged in overlapping rows) tiles across alternate plate backgrounds at 0.04 opacity in #C9A96E, creating a texture visible only on close inspection **Botanical Framing Elements:** - Illustrations of tropical aquatic plants (Echinodorus, Cryptocoryne, Vallisneria) frame text blocks, with long leaves curving along column edges and trailing into the gutter spaces - Leaf veins are rendered as individual SVG paths in #5B8C7A (Lagoon Teal), creating intricate networks that reward close viewing - Root systems extend below text blocks, rendered in fine hairline strokes, suggesting that the text itself has grown from the illustration **Decorative Borders:** Each plate is framed by a thin double-rule border (1px + 3px, separated by 4px, in #D4C5A9) with small ornamental corner pieces -- simplified versions of the corner decorations found in antique natural history plates. These corners are SVG compositions of tiny leaf fronds and fish tail silhouettes. ## Prompts for Implementation **Full-Screen Horizontal Narrative Experience:** The site must be implemented as a single horizontal scrolling canvas. Use `overflow-x: scroll; overflow-y: hidden` on the main container, with the inner content wrapper set to `display: flex; flex-direction: row; width: calc(100vw * 8)`. Each plate is a flex child of `width: 100vw; height: 100vh; flex-shrink: 0`. Enable `scroll-snap-type: x mandatory` for plate-by-plate navigation. All scrolling is horizontal -- the mousewheel should be intercepted with JavaScript to translate vertical wheel events into horizontal scroll (`container.scrollLeft += event.deltaY`). **Hover-Lift Interaction Pattern:** The primary interaction pattern is **hover-lift**: when the user hovers over any interactive element (illustration, text block, navigation numeral), the element lifts toward the viewer with `transform: translateY(-6px) translateZ(20px); box-shadow: 0 12px 32px rgba(59, 50, 37, 0.15)` over a 300ms cubic-bezier(0.34, 1.56, 0.64, 1) transition. This spring-like easing gives the lift a physical, tactile quality -- elements feel like they have weight and are being gently picked up. - Fish illustrations on hover: lift + subtle 3-degree rotation (`rotate(3deg)`) as if the fish is banking in water - Text blocks on hover: lift only, with the Sepia Line border darkening from #D4C5A9 to #B8956A - Navigation numerals on hover: lift + scale to 1.1 + color transition from Faded Gold to Aged Brass - Botanical framing elements on hover: individual leaf SVG paths animate a subtle wave (`@keyframes leafSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } }`) creating the impression of a gentle breeze **Plate Entry Animations:** As each plate scrolls into view (detected via Intersection Observer with `threshold: 0.3`): 1. The double-rule border draws itself in from the corners using SVG `stroke-dashoffset` animation over 800ms 2. The headline fades up from 20px below with opacity 0 to 1 over 600ms, delayed 200ms after border 3. The body text appears line by line with 50ms stagger between lines, each sliding in from 10px right 4. The botanical illustration builds itself stroke by stroke: major stems first (400ms), then branches (300ms), then leaves filling in (500ms), then detail veins last (300ms) -- using sequential `stroke-dashoffset` animations on grouped SVG `` elements 5. Fish illustrations swim in from the plate's leading edge (right side for LTR scroll) with a sinusoidal path: `@keyframes swimIn { 0% { transform: translateX(100px) translateY(0); opacity: 0; } 25% { transform: translateX(75px) translateY(-8px); opacity: 0.5; } 50% { transform: translateX(50px) translateY(0); } 75% { transform: translateX(25px) translateY(8px); } 100% { transform: translateX(0) translateY(0); opacity: 1; } }` over 1200ms **Scroll Progress and Ambient Motion:** - The 2px progress bar at the viewport bottom animates in real-time with `requestAnimationFrame`, using the Aged Brass color (#B8956A) - When the user is not scrolling (idle for 3+ seconds), micro-animations activate: fish silhouettes in divider zones begin a slow idle swim cycle (gentle horizontal oscillation of 4px over 4s), and botanical leaves engage their subtle sway animation - The scale-pattern background on alternate plates shifts position by 1px every 200ms on both axes, creating an almost imperceptible shimmer like light on water **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero sections with large background images, hamburger menus, footer link columns, testimonial carousels, cookie banners. This is a contemplative, museum-quality experience, not a conversion funnel. **Technical Notes:** - All illustrations must be inline SVG for animation control, not `` tags - Use CSS custom properties for all palette colors: `--parchment-cream: #F4EDE0; --warm-linen: #EBE1D0; --aged-brass: #B8956A;` etc. - Horizontal scroll JavaScript: `wheel` event listener with `{ passive: false }` and `e.preventDefault()` to hijack vertical scroll - Plate snap points: `scroll-snap-stop: always` to prevent fast-scroll overshooting - Font loading: use `` for Playfair Display, Lora, Anybody, and IBM Plex Mono; render with `font-display: swap` ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal-Scroll Plate System:** Only 1% of designs in the portfolio use horizontal-scroll layout. This site commits fully to the paradigm -- not as a single horizontal section within a vertical page, but as the entire navigational model. The "plate" metaphor borrowed from scientific illustration publishing gives the horizontal progression a narrative logic that most horizontal-scroll sites lack: you are turning pages of a natural history volume, not just sliding sideways. 2. **Evolved-Minimal Aesthetic (0% frequency):** This is the only design using evolved-minimal -- a philosophy where minimalism is not about reduction to blankness but about evolution toward precision. Every element present is maximally considered. The honeyed-neutral palette gives warmth that standard minimalism avoids, while the botanical illustrations add density without clutter because they follow the same systematic, authoritative logic as the typography and grid. 3. **Taxonomic Fish Illustration as UI Element:** No other design uses tropical fish rendered in botanical-illustration style as functional interface components (bullet points, dividers, navigation cues). The fish are not decorative afterthoughts -- they are integrated into the information hierarchy. The micro-fish bullet points, the divider-zone species rotation, and the swim-in entry animations create a consistent zoological visual language that is entirely unique in the portfolio. 4. **Sinusoidal Entry Animation for Illustrated Elements:** While other designs use fade-in, slide-in, or scale-in animations, this design introduces swim-path entry animations where illustrated fish follow sinusoidal curves into their positions. This biologically-inspired motion design reinforces the natural history theme at the interaction level, not just the visual level. 5. **Hover-Lift as Primary Interaction (3% frequency):** Rather than relying on the overused scroll-triggered (96%) or parallax (76%) patterns, this design centers its interactivity on hover-lift with spring easing. Every interactive element physically rises toward the user, creating a tactile, specimen-picking-up quality that reinforces the museum/collection metaphor. **Seed:** aesthetic: evolved-minimal, layout: horizontal-scroll, typography: retro-display, palette: honeyed-neutral, patterns: hover-lift, imagery: botanical-illustration, motifs: tropical-fish, tone: authoritative **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (96%), minimal imagery (95%), friendly tone (98%), vintage motifs (87%). None of these appear as primary choices in this design.