# Design Language for name
## Aesthetics and Tone
**name** is a one-word domain — the most primal, most essential noun. The site is conceived as a **digital cabinet of nomenclature**: a scholarly observatory where every name humans have ever invented is studied, weighed, and rendered as a small inflated marble figurine. Imagine a 17th-century Wunderkammer rebuilt in soft physics — taxonomical placards in dignified rounded type, classical busts puffed up like dough, the whole room cast in the dusty parchment light of an old etymology library at 4pm in November.
The aesthetic fuses two normally incompatible registers: the **scholarly-intellectual** authority of an academic monograph (footnotes, marginalia, careful labels) with the **inflated-3d** vocabulary of soft, balloon-like forms — Cinema-4D blob letters, pillowed plinths, and rubbery serifs that look pumped with helium. The collision is the point: gravitas without rigidity, learning without staleness. Every rounded form sits on a slab of muted vintage marble whose veins drift like underlined passages in a book.
Mood: **quiet wonder + dry erudition**. The user feels they have wandered into a private reading room where the librarian is also the prop master for a stop-motion film. Soft, not cute. Considered, not cold. The voice on the page would speak in measured, footnoted sentences and yet describe the names with affection.
**Avoided directions:** no neon, no glassmorphism, no SaaS gradients, no playful confetti, no CTA buttons, no pricing tables, no stat grids, no photography, no dark-mode default. No "fun" rainbow 3D — the inflated forms are restrained, monochromatic, sculptural.
## Layout Motifs and Structure
The page is built on a **minimal-navigation** philosophy: there is no top bar, no menu, no hamburger. A single small breadcrumb sits in the top-left corner — `the cabinet of name. › folio i`. That is the entire chrome. Navigation happens through the document itself, by scroll and by quiet inline links the way one moves through a printed book.
**Spatial system: the Folio.** The viewport is divided by a faint grid-lines underlay (1px hairlines at #c9bda8, 5% opacity, 96px module). The grid is never used to align content perfectly — content drifts intentionally one or two cells off, the way handwritten notes never quite land on the printed rule. This produces a feeling of *measured imprecision*.
**Vertical rhythm — Five Folios.**
1. **Folio I — The Specimen.** Full viewport. Centered: a single inflated-3d glyph spelling **n a m e** as four pillowed letters, each an SVG-filtered shape with soft inner shadow and a marble-textured fill that drifts slowly. Below it, in small caps rounded-sans: `*Specimen 0001 — collected from the lexicon of common nouns. Inflated, polished, catalogued.*` The letters tilt 6° in 3D on cursor proximity (tilt-3d).
2. **Folio II — The Plinth.** A wide horizontal pedestal of veined marble fills the lower half of the viewport. Resting on it: three more inflated marble figurines — a comma, an asterisk, an ampersand — labelled in scholarly placards `fig. 1.`, `fig. 2.`, `fig. 3.` with hairline leader lines pointing to each. Margin column on the right reads like a footnote: definition, etymology, year of first attested use.
3. **Folio III — The Etymology Stair.** A vertical timeline rendered as a staircase of grid-lines. Each step is a date (Old English, Middle English, modern usage) with a pillow-3d bullet of muted-vintage olive drawing a tilt-on-scroll path beside it. The whole column reads like a paleographer's notes.
4. **Folio IV — The Concordance.** A masonry of small marble cards, each one carrying a single related word in inflated-3d typography (*noun*, *epithet*, *cognomen*, *nom de plume*, *appellation*). Hovering tilts the card 8° on Y-axis, revealing a footnote underneath drawn in italic rounded-sans.
5. **Folio V — The Colophon.** A printer's-mark style closing: a small inflated marble emblem, a Latin tag (`finis nominum*`), and a centered sentence acknowledging the source manuscripts and the dust of the room.
**Composition rule.** Every Folio reserves its outer 12% as a margin (left and right) where annotations, fig. numbers, and folio markers live. This margin is the *book's binding*; content never enters it, but breadcrumbs and pagination do.
The layout deliberately resists the dashboard, the SaaS hero, and the e-commerce grid. There is no card-grid of features, no three-column "Why Choose Us." The page reads top-to-bottom as a *codex*.
## Typography and Palette
**Typography (Google Fonts only):**
- **Display — inflated specimen letters:** **"Fraunces"** (Google Fonts), variable, weight 900, opsz max, SOFT axis high (where supported), set at clamp(6rem, 18vw, 14rem) for the four hero glyphs. Fraunces' soft, slightly bulbous serifs become the chassis for the inflated-3d treatment — the SVG filter pipeline (a long blur + displacement + inner shadow + faint marble-fill image) puffs the already-rounded letterforms into proper sculptural objects. Tracking: -0.04em.
- **Headings & Folio markers — rounded-sans:** **"Nunito"** (Google Fonts), weight 800 for folio numerals (e.g., `Folio II.`), weight 600 small-caps for placards (`fig. 1.`). 0.08em letter-spacing on small-caps. Nunito's perfectly rounded terminals echo the inflated forms in 2D.
- **Body & footnotes — humanist scholarly:** **"Crimson Pro"** (Google Fonts), weight 400 / 1.7 line-height / 1.0625rem. Italic 400 for marginalia. Crimson Pro provides the bookish, readable foundation; its crisp serifs sit beside the inflated display type the way printed text sits beside a sculpture in a museum vitrine.
- **Inline accents — placards:** **"Nunito"** at 0.75rem, weight 700, all-caps, letter-spacing 0.18em — used for figure labels, fold markers, and fig. callouts.
**Palette — muted-vintage, no pure black, no pure white:**
- `#efe7d6` — **Parchment.** Primary background. A creamy vintage off-white, the colour of a foxed page that has been read often.
- `#e3d7bf` — **Vellum shadow.** Used as the marble base tint on plinths and card surfaces; one stop darker than the page.
- `#c9bda8` — **Grid hairline.** The 1px ruled lines of the Folio underlay; also footnote leader-lines.
- `#3a3326` — **Library walnut.** Primary text colour. A warm near-black with brown undertones; the colour of dried iron-gall ink.
- `#6c5a3e` — **Fig. label.** Secondary text colour for placards, footnotes, etymology dates. A muted bronze-brown.
- `#8b9476` — **Olive moss.** The single accent colour, used for the etymology bullets, leader-line tips, and the colophon emblem. Drawn from the verdigris on old library brass.
- `#a7846b` — **Inflated-form highlight.** The warm specular tint baked into the SVG filter that gives marble busts their lit-from-above look. Never used as a flat fill.
- `#1f1a12` — **Deep walnut shadow.** Used only for the inner shadow on inflated glyphs and the deepest marble vein. Never as a background.
The whole palette stays inside a 30° hue arc — warm beiges, walnut, and a single muted olive — producing the *aged paper* feeling and avoiding the bright neon vocabulary that dominates the corpus.
## Imagery and Motifs
**Core motif — the Inflated Marble Specimen.** The signature recurring object is a soft, pillowed letterform or punctuation mark, rendered as if 3D-printed in bronze-veined cream marble. Built in the browser via a stacked SVG filter (`` + `` + `` mapped to a perlin-noise marble texture + `` over a soft drop-shadow). Always rendered in tones from the muted-vintage palette — never saturated. There are exactly five of these on the page (the four hero glyphs + the colophon emblem), no more.
**Marble texture surfaces.** Plinths, cards, and the colophon medallion carry a procedural marble pattern — a slow-drifting Perlin-noise SVG with two muted veins (`#c9bda8` thin, `#8b9476` thinner) crawling at 40s loops. The drift is so slow that it reads as *almost-static* — only on a long pause does the user notice the marble is breathing.
**Grid-lines underlay.** The 96px module hairline grid is always visible at 5% opacity, like a ruler beneath tracing paper. Headings and the margin column align to it; figure illustrations deliberately do not. This is the page's "rule" in the sense of a printed book's lined paper.
**Hairline leader-lines.** Each `fig.` placard connects to its specimen via a 1px walnut leader-line drawn with `path-draw-svg` on scroll-enter — the line writes itself across the page over 600ms, terminating with a small olive-moss circle. This is the *taxonomist's pointer*, and it is the page's only animated decoration besides the tilt and the marble drift.
**Folio markers and pagination.** Each Folio carries a quiet oversized roman numeral (`I.` `II.` `III.` `IV.` `V.`) in Nunito 800, top-right of its margin, in vellum-shadow tone — like the chapter numerals stamped on a book's outer corner.
**Footnote dingbats.** Footnote markers use a tiny inflated-3d asterisk (8px, the same SVG-filter family as the hero glyphs) instead of a numeral — a small joke for the reader who notices that even the footnote symbols are sculpted.
**No photography. No icons from icon libraries. No stock illustration.** The entire visual world is built from: type, marble, grid-lines, leader-lines, and the five inflated specimens. This is by design — a closed visual vocabulary, the way an academic book uses only its plates and its diagrams.
## Prompts for Implementation
Build as a **vertical scroll codex of five Folios**. Single HTML page, single CSS file, single small JS file for cursor-tilt, scroll-trigger leader-line draws, and the slow marble drift. No framework needed.
**Background and frame.** `body { background: #efe7d6; color: #3a3326; font-family: 'Crimson Pro', serif; font-size: 1.0625rem; line-height: 1.7; }`. Wrap content in `` with `max-width: 1200px; margin: 0 auto; padding: 0 12%;`. The 12% padding is the *binding margin*.
**Grid-lines underlay.** Apply globally as a fixed full-viewport pseudo-element: `body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(to right, #c9bda8 1px, transparent 1px), linear-gradient(to bottom, #c9bda8 1px, transparent 1px); background-size: 96px 96px; opacity: 0.05; pointer-events: none; z-index: 0; }`. Content sits at `z-index: 1`.
**The hero specimen letters (Folio I).** Render `n`, `a`, `m`, `e` as four absolutely-positioned ``s wrapped in an inline `