# Design Language for nfth.ing ## Aesthetics and Tone nfth.ing is conceived as **The Saltwater Ledger of Lord Pelagius — an Edwardian curio-cabinet for non-fungible *things*, kept by a fictitious naturalist-baron who treats every digital token as if it were a rare cichlid pinned in a velvet-lined drawer.** The domain reads two ways: *NFT-ing* (the digital cliché) and *nfth-ing* (a private, half-said word, like a butler clearing his throat). The site refuses the crypto-bro vernacular entirely. There are no charts climbing into the upper-right, no laser-eye avatars, no neon glassy "mint" buttons. Instead the visitor opens what looks like a private octavo journal bound in oxblood morocco leather — a chamber where each token is a *specimen*, given a Linnaean binomial, an ink-blot provenance stamp, a hand-corrected price card, and a small living tropical fish that drifts behind the page like a thought through a captain's mind during a long Atlantic crossing. The mood is **tactile, hushed, slightly absurd, and immensely expensive** — the way a colonial-era natural history museum smells (camphor, brass polish, salt, old varnish). It is *opulent-grand* in the sense of late-Victorian opulence: not the chrome opulence of new money, but the opulence of inherited mahogany cabinets that have outlived three regimes. The skeuomorphism is intentionally pre-iOS-7 — closer to the leather-stitched Find My Friends app of 2011 than to the clean flat surfaces of 2018. Every UI element has a job to perform as a real object: the navigation is a brass-fitted ledger tab, the search field is a typewriter platen, the "buy" affordance (which we will rename) is a wax-seal stamp. The cursor leaves a faint salt-trail. The page rustles when scrolled, on purpose. Inspirations to hold in the mind during implementation: **Wes Anderson's *Life Aquatic* color script crossed with the fish-folio plates of Marcus Bloch's *Allgemeine Naturgeschichte der Fische* (Berlin, 1782–95)**; the marbled endpapers of an Italian relié-de-luxe binding; the title cards of a 1962 Powell-Pressburger reissue; the leather desk-pads at the New York Yacht Club; the typewriter ribbon of a forgotten correspondence. Imagine an oceanographer-collector who decided, on a whim of taxonomic mischief, that every JPEG in his ledger required its own zoological dignity — and so each NFT in this catalogue swims, rather than scrolls. ## Layout Motifs and Structure The page is a **strict full-viewport vertical split-screen** — the left hemisphere is the **Ledger** (90% words, hand-set, paper-textured, scrollable in micro-jumps) and the right hemisphere is the **Vivarium** (a salt-glass pane in which a single tropical fish swims slowly across a deep teal water column, carrying the current "specimen" in its mouth like a retrieval dog with a folded note). The split is not 50/50: it is **44/56**, ledger on left, vivarium on right, separated by a 14px column of stitched leather (a literal SVG-rendered saddle-stitch with cream linen thread). On scroll, the Ledger advances paragraph-by-paragraph with a clean **typewriter cadence**, while the Vivarium responds: the previous fish exits stage-right with a flick of the tail, water gently sloshes (a single subtle CSS gradient shift, no real fluid simulation), and a new fish enters stage-left bearing the next specimen. **Below the split** (only visible after the seventh scrolled paragraph) the layout *opens* into a **second register**: the Ledger continues to occupy 44% on the left, but the right side becomes the **Drawer Cabinet** — a 4-column × N-row grid of skeuomorphic specimen drawers, each labelled with a brass cartouche containing the token's binomial name (e.g. *Imago dichotoma var. cobalti*), date of accession, and a wax-sealed price disc. Drawers are 240×340 px, leather-fronted, with subtle pull handles. Hovering a drawer slides it out 18px with a soft rubber-bumper easing curve, revealing a velvet interior and the actual token's image suspended on near-invisible silk threads. The whole cabinet is set into a panelled **library wall** (CSS background using a tiled wood-grain SVG with knot-holes placed at golden-section coordinates). **The footer** is a **signed flyleaf** — a single page-wide rectangle of cream paper (background `#EDE2C9`) with Lord Pelagius's purported signature in royal-blue ink (rendered as an animated SVG `path-draw` that completes only on first scroll-into-view), the date of catalogue ("Catalogus Editio MMXXVI"), and a small embossed wax seal in the lower-right depicting a fish coiled around a key. There is **no traditional CTA**. There is no "Connect Wallet" button. There is, instead, **a brass bell** (drawn as an inline SVG, with subtle radial highlight) labelled *To Petition the Curator*, which when struck (clicked) emits a single dampened *ting* tone (an embedded base64 WAV under 6kb) and reveals a hand-folded letter-form contact panel. The grid math: a 12-column underlying scaffold, but the visual rhythm rejects the 12-column logic — instead, all gutters are derived from the **fishbone (Fibonacci-adjacent)** sequence 8, 14, 22, 34, 55 px, which produces an asymmetric breathing that feels handmade rather than aligned. Vertical rhythm follows a **34px baseline** (the height of an imagined hot-metal leading slug). Negative space is generous around the Ledger column to evoke deckle-edged paper margins; the Vivarium has *no* padding — the water reaches all four edges, because oceans do not have margins. ## Typography and Palette **Primary typeface: "Nunito"** (Google Fonts). Nunito is a *rounded-sans* with very slight humanist warmth — its terminals are little cushions of ink, its 'a' has a soft single-storey alternate, its 'g' is a friendly double-loop. Body weight 400 at 17px / 1.65 line-height for the Ledger; specimen labels at weight 700 in small caps tracked +60 letter-spacing. The roundness is essential: it's the typographic equivalent of the leather it's printed on — soft, hand-pressed, never knife-edged. Where Nunito would feel too modern alone, we deliberately *age* it via a 2px text-shadow at 6% opacity in the parchment cream (`#EDE2C9`) to simulate the slight bleed of typewriter ink into rag paper. **Secondary typeface: "Special Elite"** (Google Fonts). This is reserved for **the typewriter-effect headings** — the "now-typing" cursor that draws each chapter title letter by letter, with a faint mechanical stutter on the third letter of any word longer than five characters (a deliberate flaw, seeded per-session). Special Elite has the misaligned baseline and ribbon-grime characteristic of a 1958 Royal Quiet De Luxe. Used at clamp(1.8rem, 4.4vw, 3.2rem), weight 400 (it has only one weight, which is correct). **Tertiary typeface: "Cormorant Garamond"** (Google Fonts), italic only, used exclusively for the Linnaean binomials of each specimen (e.g. *Pseudothing aurantium* Pelagius 2026). Italic Cormorant has the chancery sweep of a naturalist's field notebook; restricting it to binomials maintains taxonomic dignity. **Palette — *muted*, leaning oxblood-and-aquarium:** - `#3D2A1E` — **morocco leather** (deep oxblood-brown; primary surface of the Ledger backing and drawer fronts) - `#1B3A48` — **abyssal teal** (the water of the Vivarium; the right hemisphere of the entire viewport) - `#EDE2C9` — **rag-paper cream** (the writing surface of the Ledger; footer flyleaf) - `#A89172` — **brass-fitting tan** (cartouches, navigation tabs, bell, drawer pulls — anything metallic) - `#7E3F2E` — **wax-seal cordovan** (price discs, signature ink shadow, accent for live links) - `#C8A25C` — **gilt thread** (rare highlights only — the wax-seal rim, the fish's dorsal band, the date) - `#5E7B7A` — **sea-glass green** (secondary muted accent; the back-tail flick of fish at rest, reserved cool counterpoint to the warm leather) - `#231914` — **lampblack ink** (body text on cream, drawn at 92% opacity to never feel printer-fresh) The palette is *muted* in the strict sense: every value sits within an L*a*b* lightness band of 18–88 with chroma capped at 38, so nothing screams. This is what makes the rare gilt (`#C8A25C`) feel precious when it appears — it is the only chroma-elevated note in the entire chord. ## Imagery and Motifs **1. Leather, four ways.** The Ledger backing is a tiled SVG `feTurbulence`-displaced morocco grain (octave 4, baseFreq 0.7, scale 8) atop the morocco-leather base color, plus a hand-stitched border (saddle-stitch path drawn with `stroke-dasharray: 4 6` in cream linen `#EDE2C9`). The drawer fronts use a *different* leather — straight-grain calfskin, simulated with a horizontal Perlin-noise gradient, at 86% opacity over `#3D2A1E`. The flyleaf back-cover (visible only at the footer's far edge as a 14px sliver) is end-papered with marbled paper (an SVG turbulence-warped multi-color blob field in oxblood + cream + sea-glass + gilt). The bell-pull cord is plaited leather, drawn as three overlapping bezier curves with subtle ambient shadow. **2. Tropical fish — the soul of the site.** Six SVG fish are pre-drawn (each ≤4kb, hand-tuned bezier paths) representing a fictional bestiary: *Cobalt Imago*, *Vermilion Quarter-note*, *Sea-glass Lacework*, *Gilt-thread Pikelet*, *Inkblot Drifter*, and *Pelagic Cartographer*. Each fish has six animated keyframe states (idle hover, swim-left, swim-right, dive, surface, disappear-with-bubble). Fish are placed in the Vivarium right-hemisphere at random vertical depths within the abyssal-teal water column. Their motion uses **easeInOutSine** at 14–22 second durations, varied per-instance, so no two fish ever swim in lockstep. A Cartographer fish carries the current specimen image in its mouth, framed in a hand-drawn brass loupe; on scroll, it hands the loupe off to the next fish entering stage-left in a tiny choreographed pass — a touch lifted from the baton-pass of a 4×100 relay. **3. Stamps, seals, and ink-blots.** Every specimen card has three skeuomorphic ink-affordances: (a) a **provenance ink-blot** — an irregular dark splatter rendered with seven layered SVG circles of varying radius, blur, and opacity, no two identical — ; (b) a **wax seal** — a circular dark-cordovan disc with a raised pictograph (the fish-coiled-key motif), drawn with inner-shadow + radial highlight CSS to suggest pressed wax; (c) a **collection stamp** in royal-blue ink reading "EX BIBL. PELAGII" in a circular type-arc. None of these are static images: they are inline SVGs whose seeds vary, so the stamps feel hand-applied each visit. **4. Brass furniture.** All metallic UI elements (navigation tabs, drawer pulls, the bell) are drawn with a 4-stop linear gradient (`#5C4A30 → #A89172 → #C8A25C → #8B7250`) at 14° tilt, plus an inner highlight `box-shadow: inset 0 1px 0 rgba(255,255,255,0.18)`. Subtle, never glossy. **5. The salt-trail cursor.** The mouse pointer leaves a faint trail of 5–8 small white dots (radius 1.4px, opacity decaying from 0.6 to 0 over 900ms) wherever it moves over the Vivarium hemisphere — like phosphorescent plankton wake at night. Disabled on the Ledger hemisphere, where ink-permanence is the rule. ## Prompts for Implementation **Architecture.** Vanilla HTML + CSS + a single modest JavaScript file (target ≤ 9kb minified). No framework, no router, no build pipeline beyond optional minification. The page is **one HTML document**. Total page weight goal: under 180kb including all SVGs and the bell-tone audio. **Document spine.** ```
[Title cartouche, brass nav-tabs, wordmark]
[Left 44%: paragraphs, typewriter headings]
[Below-the-fold: drawer grid, library wall]