# Design Language for amamiya-honpo.net ## Aesthetics and Tone amamiya-honpo.net (v2) is a **Sci-Fi Apothecary Split** -- an elegant, sophisticated digital storefront-cum-archive imagined as if a 22nd-century botanist-engineer had inherited her grandmother's vintage rain-country apothecary and rewired half of it for orbital trade. The .net suffix is treated as a "trade ledger" -- a network of distributed apothecaries -- and the design lives at a deliberate split: on one side, a living organic blob garden of rain-soaked herbs; on the other, a serene archival ledger panel rendered in a muted vintage palette. The mood is **elegant-sophisticated**: never loud, never brash, always poised; a cursor that follows you everywhere with a small drifting halo, soft cinematic edges, and a restrained pace that respects the visitor's attention. Where most sci-fi sites lean neon-cyan-on-black, this one stays in muted celadon, oxidized copper, and aged paper -- futuristic by composition, vintage by chroma. ## Layout Motifs and Structure The composition is a **split-screen** layout -- a vertical 50/50 division that persists from the first viewport to the colophon, with the left panel as the "organic garden" (botanical, generative blob shapes, slow ambient motion) and the right panel as the "ledger" (typographic, archival, structured, fixed). Cursor-follow is the connective tissue: a small celadon halo traces the cursor across both panels, and certain glyphs in the right panel rotate slightly to "look at" the cursor. **Macro structure:** - **Hero split (Section 0, 100vh):** Left -- a single oversized organic blob rendered in muted celadon with slow morphing animation (12s loop, SVG path morph); cursor-follow rotates the blob's highlight 18deg as the cursor moves. Right -- "AMAMIYA HONPO" in serif revival, etched into aged paper, with a small archival subtitle: "Honpo - main shop. Est. AETHER 2173." A faint copper rule divides the panels. - **Apothecary spread (Section 1, 120vh):** Left -- three smaller organic blobs (celadon, oxidized copper, faded plum), each labeled with a serif Latin botanical name; cursor entering a blob causes a slow 600ms reveal of its tincture description in the right panel. - **Trade ledger (Section 2, 100vh):** Left -- a slowly-drifting organic blob lattice. Right -- a tall ledger entry list, serif revival numerals tracking 19 known apothecaries in the network; cursor-follow underlines the nearest entry in oxidized copper. - **Vignette (Section 3, 120vh):** Left -- a single still organic blob (motionless, the "rest" panel). Right -- a long-form prose vignette set in serif revival, italic pull-quotes, with one drop-cap in oxidized copper. - **Colophon (Section 4, 80vh):** Both panels merge briefly into a single archival page with credits, then split again at the final scroll-line. **Cursor-follow pattern:** Throughout the site, a small 18px circle of celadon (with 12% opacity glow) trails the cursor at 0.85 lerp factor. Hover-eligible elements pull the halo with a slight attractor force. On hover over a blob, the halo enlarges to 36px and gains a faint oxidized-copper inner ring. **Spacing:** Outer margin 0 (the split runs edge-to-edge). Right panel inner padding 6vw. Left panel padding 4vw. Vertical rhythm 26px on the right; the left is freeform organic. ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "Cormorant Garamond" weight 600 -- a serif revival with sharp Didone contrast, used at clamp(48px, 7vw, 116px). Tracking -0.01em. The serifs lean classical-modern. - **Sub-labels/ledger:** "Cormorant Garamond" weight 500 small-caps at 13-15px, tracking 0.18em. Used for ledger entries, archival subtitles, and section markers. - **Body text:** "EB Garamond" weight 400 at clamp(17px, 1.25vw, 20px), line-height 1.7. The companion serif provides a slightly softer reading texture against the display Cormorant. - **Numerals:** "Cormorant Garamond" old-style figures for ledger entries; the asymmetric numerals signal handwritten archive. **Palette (muted-vintage with sci-fi undertones):** - `#E8E2D2` -- **Aged Paper**, the dominant right-panel background -- pale, slightly warm linen. - `#D8CFB8` -- **Faded Linen**, secondary right-panel surface. - `#7A8B7C` -- **Muted Celadon**, the primary accent and dominant left-panel hue -- oxidized green pale. - `#9E6A4A` -- **Oxidized Copper**, secondary accent -- a faded oxidized copper rust used for rules, drop-caps, and the cursor halo's inner ring. - `#3B3A36` -- **Ink Charcoal**, primary text color on aged paper. - `#5C4D5F` -- **Faded Plum**, rare accent for cross-reference markers and italic pull-quotes. - `#1F2422` -- **Deep Apothecary**, the rare deep-tone reserved for the colophon and footnote shadows. The palette is restrained, sun-bleached, slightly oxidized. Nothing is fully saturated. ## Imagery and Motifs **Core visual motifs:** - **Organic blobs (imagery mandate):** The left panel is dominated by SVG-rendered organic blob shapes -- amoebic, gently morphing, painted in muted celadon and oxidized copper with faint inner gradients. Each blob has a 12-16s morph cycle using SVG path interpolation. Blobs occasionally drift 30-60px horizontally over a 20s sine cycle. - **City-urban motif (motif mandate):** Subtle city-urban tracery is etched into the right panel as faint silhouettes of distant rooftops and antenna lines, rendered at 6% opacity in muted celadon. These appear in the gutter strips and behind ledger entries -- the city as memory. - **Cursor-follow pattern:** A celadon halo follows the cursor at 0.85 lerp; hover targets attract it. Glyphs in the right panel (specifically the ledger numerals) tilt 4deg toward the cursor when within 200px proximity. - **Apothecary jar icons:** Tiny etched line icons of apothecary jars and labeled vials appear in the margin of ledger entries, drawn in 1px oxidized copper strokes. - **Etched rule motif:** All horizontal rules are drawn as 1px oxidized copper lines with a faint 4% noise overlay, mimicking aged engraved plates. - **Holographic blueprint flicker:** Once per scroll-section, a faint blueprint-grid overlay (cyan-celadon, 8% opacity, 1.6s flicker) sweeps across the left panel -- the sci-fi peek into the apothecary's "trade hologram." ## Prompts for Implementation **Opening narrative:** Page loads on Aged Paper (right) and Deep Apothecary fading to Muted Celadon (left). Over 2.0s, the split-line draws in vertically from top to bottom in oxidized copper; the left blob assembles from a small dot, scaling and morphing into its first shape; the right wordmark "AMAMIYA HONPO" reveals letter-by-letter in serif revival with a 70ms stagger. The archival subtitle types in mono-cadence after a 600ms delay. The cursor halo materializes when the cursor first enters the viewport. **Scroll narrative:** As the user scrolls, each section's blob set morphs into its new arrangement (1.2s ease-in-out); ledger entries fade-up line-by-line (40ms stagger); the city-urban silhouette in the right gutter shifts slightly in opacity (6% to 11% on active section). Section transitions feature a brief 400ms desaturation of the left blob garden, then a re-bloom of color as the new section enters. **Microinteractions:** - **Blob hover:** Blob's morph speed doubles (6s cycle); a 360ms reveal slides a serif-revival description into the right panel's adjacent slot. Cursor halo grows to 36px with oxidized-copper inner ring. - **Ledger entry hover:** Entry's numerals tilt 4deg toward cursor; an oxidized-copper underline draws in from left over 240ms; a small apothecary-jar icon appears 8px before the entry's label. - **Drop-cap hover:** Drop-cap pulses oxidized copper to faded plum and back over 800ms. - **Pull-quote hover:** Italic pull-quote slowly underlines in faded plum (1.4s draw); a subtle text-shadow halo (oxidized copper, 6% opacity) blooms. - **Section transitions:** A 500ms gentle desaturate-resaturate of the left panel marks each new section. **Storytelling:** The site is structured as the field-notebook of an apothecary-engineer. Section anchors: "Honpo," "Apothecary," "Trade Ledger," "Vignette," "Colophon." The voice is sophisticated, elegant, slightly archival; the apothecary's recipes are not for sale -- they are a record. The colophon ends with a single italic invitation: "Should you wish to correspond, find us at the Aether dock." **Typography motion:** Cormorant Garamond display reveals letter-by-letter with a 70ms stagger and a faint per-letter scale-up from 0.94 to 1.0. EB Garamond body fades-in line-by-line with a soft 24ms cascade. Pull quotes are accompanied by a 1.4s underline-draw in faded plum. **AVOID:** stat-grids, pricing tiers, "shop now" CTAs, social-proof testimonial blocks, three-up "feature" cards, generic neon sci-fi cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Muted-vintage sci-fi:** A sci-fi aesthetic rendered entirely in oxidized celadon and aged paper, without a single neon or pure cyan tone. The futurism is in composition (split-screen, holographic blueprint flickers, blob morphing) rather than chroma. 2. **Organic blob garden as living left panel:** The left panel is treated as a continuous living botanical apothecary diorama -- SVG path-morphing blobs at 12-16s cycles, gently drifting in sine motion. The blobs are not decorative; they are the imagery system itself. 3. **Cursor-following ledger:** Right-panel ledger numerals tilt 4deg toward the cursor when within proximity, and a celadon halo glides across both panels at 0.85 lerp. This unifies the split into a single perceptual surface. 4. **City-urban motif as faint memory:** The "city-urban" motif is rendered at 6% opacity as a barely-visible rooftop silhouette in the gutters -- a sci-fi backstory implied rather than stated. 5. **Apothecary-jar marginalia:** Tiny etched apothecary-jar line icons appear in the ledger margins on hover, drawing a botanical-archival texture not present in any other registry design. **Chosen seed/style:** Planned seed -- aesthetic: sci-fi, layout: split-screen, typography: serif-revival, palette: muted-vintage, patterns: cursor-follow, imagery: organic-blobs, motifs: city-urban, tone: elegant-sophisticated. **Avoided patterns from frequency analysis:** Avoided overused photography (91%), minimal imagery (33%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused sci-fi aesthetic (7%), organic-blobs imagery (6%), muted-vintage palette, and cursor-follow pattern with serif-revival typography.