# Design Language for memorial.wiki ## Aesthetics and Tone **memorial.wiki** is a place where the dead are never fully gone — their records persist, their stories accumulate, their names endure in the kind of permanent, institutional weight that only carved stone and archival ink can impart. The aesthetic is **skeuomorphic stonework and archival paper**: the site should feel like handling a museum-quality document inside a mausoleum reading room, where vaulted ceilings press silence down and every typeface has the authoritative permanence of a cenotaph inscription. The mood is solemn but not mournful — it is the gravity of a reference work, not the grief of a funeral. Think of the visual language of *the Dictionary of National Biography* (first edition, 1885–1900) bound in dark buckram and stamped in gilt, opened flat on a stone reading table in pale gray light from a high window. Authoritative. Deliberate. Permanent. **Skeuomorphic surfaces used deliberately** — not as nostalgic novelty but as epistemological argument: physical materiality implies permanence, reliability, trustworthiness. Simulated stone column capitals flank the masthead. The page body sits in a simulated aged-paper well with subtle inset-shadow to suggest a document resting inside a stone recess. Field labels in search forms carry embossed text-shadow to suggest chiseled letterforms. These are restraint signals, not decorations. The **parallax** is implemented as **stone-depth parallax** — not the cheap web-scroll-parallax of floating circles or gradient blobs, but geological layering: the background stone wall moves at 0.2× scroll speed, a mid-layer of worn marble cladding at 0.6×, and the content surface at 1.0×, creating the sensation of reading documents sealed inside an architectural monument. The three-layer parallax references carved memorial architecture rather than digital decoration. Tone: authoritative, archival, permanent. The site is not selling anything. It is the record. ## Layout Motifs and Structure **F-pattern editorial layout** — the natural reading gravity of alphabetically organized reference work. The layout follows the F-pattern deliberately and uncomplicatedly: a wide left column functions as the primary reading track, carrying the subject biography text, infobox, and key facts. A narrow right column carries chronological index links, cross-references, and related records — the apparatus criticus of a scholarly reference volume. But the F-pattern is given architectural weight rather than digital lightness: column dividers are rendered as carved stone pilasters (3px border with inset shadow and subtle texture), not thin lines. **Macro structure:** - **Masthead zone**: Full-width stone-textured header band, ~100px tall, carrying the `memorial.wiki` wordmark in gilt-effect condensed serif. Below it, a single horizontal rule rendered as a carved incised line (CSS box-shadow inset in two tones: lighter above, darker below). - **Hero search panel**: Centered in the viewport on the landing page, inside a simulated stone arch recess. The arch is CSS-only: radial-gradient background and border-radius forming a rounded vault. Search input sits on a aged-parchment surface. - **Body grid**: 12-column CSS grid. Primary content occupies columns 1–8 (left), secondary apparatus columns 9–12 (right). On scroll, the right column becomes sticky inside its stone column frame. - **Entry pages**: The biographical entry opens with a full-width parchment-texture banner carrying the subject's name, dates, and a brief epitaph-style tagline. Below this banner, the two-column editorial layout begins. - **Footer**: A shallow dark-gray ashlar-stone footer with the site name repeated in condensed caps and a faint repeating stone-course texture. **Spatial grammar**: generous margins (min 80px horizontal on desktop), deliberate whitespace between sections interpreted as the silence between epitaph lines — not padding for its own sake but for reading-cadence. Section separators are stone-rule ornaments (CSS-only: short centered horizontal rules in two pieces with a small diamond lozenge in the center, formed via `::before`/`::after`). **Flowing-curve accent**: The outer edge of the arch recess and the page's entry-banner use flowing-curve silhouettes — gentle single-radius arcs that reference carved vault lines, not aggressive rounded-rectangle brutalism. The header wordmark has a subtle arc baseline registered in SVG. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Masthead**: [`Cormorant SC`](https://fonts.google.com/specimen/Cormorant+SC) — small-capitals variant, weight 600. Used for the site wordmark, section headers of biographical entries, and the subject name in entry banners. Cormorant SC carries the weight of chiseled titling lettering, formal and permanent. Set at `clamp(2rem, 5vw, 4.5rem)` for the masthead. Letter-spacing `0.12em`. - **Primary Body / Reference Text**: [`IM Fell English`](https://fonts.google.com/specimen/IM+Fell+English) — weight 400, both roman and italic. This is the digitized revival of the historic Fell Types donated to Oxford's Clarendon Press in the 1670s. No other typeface delivers the same combination of scholarly authority and archival age. Body text at `1.05rem`/`1.75` line-height on the parchment surface. Italic for quotations and epitaphs. - **Condensed Labels / Navigation / Apparatus**: [`Barlow Condensed`](https://fonts.google.com/specimen/Barlow+Condensed) — weight 400 and 600. Used for navigation links, field labels, date stamps, category tags, and the right-column apparatus. Condensed type in the apparatus creates visual separation from the body text — it reads as a different register, more indexical, less narrative. Set at `0.82rem`, letter-spacing `0.06em`, weight 600 for labels, 400 for values. - **Small Caps / Epitaph lines**: [`Cormorant SC`](https://fonts.google.com/specimen/Cormorant+SC) weight 300 italic for epitaph-style taglines under subject names. **Palette (cool-grays with archival warmth):** - `#2C2C2C` — **Carving Ink**: Near-black, used for body text and masthead wordmark. Warmer than pure black (#000), the color of iron gall ink on cream paper. - `#4A4A52` — **Ashlar Stone**: Dark cool-gray, used for pilaster column dividers, footer background, stone-texture bands. - `#787882` — **Worn Marble**: Mid cool-gray, used for decorative rules, figure captions, secondary text. - `#B8B8C0` — **Quarried Limestone**: Light cool-gray, used for borders, inset-shadow highlights on embossed elements. - `#E8E4D8` — **Aged Parchment**: Warm off-white (very slightly warm, like 400-year-old paper), used for the main content surface background and search panels. Distinct from pure white — this is the color of archival paper, not a screen. - `#D4C89A` — **Gilt Accent**: Warm gold-tan, used for the masthead wordmark gilt-effect, hoverstates on navigation links, the lozenge ornament in section dividers. Restrained — appears in no more than 4 UI locations. - `#F4F2EC` — **Reading Room White**: Near-white with barely perceptible warm undertone, used for entry-banner text on dark stone backgrounds. - `#1E1E24` — **Vault Dark**: Very deep cool near-black, used for the hero arch recess background and the footer stone band. ## Imagery and Motifs **Imagery philosophy**: No photography of people (faces must not be in a memorial context without consent and attribution systems). Primary imagery is **paper-aged archival document** aesthetic — degraded scan textures, foxing patterns, torn-edge effects, all rendered as CSS and SVG, not raster imports. **Surface textures (CSS/SVG only, no raster images required):** - *Parchment texture*: CSS `background-image: url("data:image/svg+xml,...")` using a very fine noise pattern at 4% opacity over the `Aged Parchment` base color. The noise uses a repeating SVG feTurbulence filter at `baseFrequency="0.65"` and `numOctaves="3"`, giving slight paper grain without legible pattern. - *Stone texture*: Darker, coarser noise (feTurbulence `baseFrequency="0.35"`, `numOctaves="2"`) over `Ashlar Stone`. Used in header, footer, and column divider zones. - *Foxing accent*: On entry banners and page margins, tiny circular CSS pseudo-elements (`.foxing::before`, 2–6px, opacity 0.06–0.12, warm brown `#8B6A42`) scattered via `nth-child` position offsets to simulate aged paper spotting. **Motifs:** - *Stone arch recess*: The hero search panel sits inside a CSS-rendered arch — `border-radius: 50% 50% 0 0 / 60% 60% 0 0` on a container with `Vault Dark` background and inset shadow layers creating depth illusion. The arch silhouette is the primary flowing-curve element. - *Flowing-curve section transitions*: Between the hero and body sections, an SVG wave path (``) in `Aged Parchment` creates a gentle curve transition instead of a hard horizontal rule — like the arc of a document corner lifting from a stone surface. - *Lozenge ornament*: A small diamond/lozenge `◆` in `Gilt Accent` used as the midpoint of section-rule ornaments. Purely typographic — a Unicode `◆` character (U+25C6) in `Cormorant SC`. - *Pilaster column caps*: CSS-only simulated column capitals (a wider rectangle over a narrower rectangle with box-shadow depth) flank the masthead, visible on viewport widths ≥1200px, appearing as faint stone structural elements behind the header. - *Gilt deboss effect on entry subject name*: The subject name in entry banners uses `text-shadow: 0 1px 0 #F4F2EC, 0 -1px 0 #1E1E24` to create a gentle engraved-letterform illusion. **No animated parallax blobs, floating geometric shapes, or gradient orbs.** The skeuomorphic surfaces are always materials (stone, parchment, gilt) never abstract geometry. ## Prompts for Implementation **The experience to build**: A visitor arrives at `memorial.wiki` and immediately understands they are entering a permanent institution, not a startup. The homepage presents an austere stone arch recess with a single search field bearing the placeholder: *Search the record*. No hero tagline. No features list. No "Get started." Just the arch, the field, and silence. On scrolling past the hero, the stone-depth parallax engages: the far wall (background stone texture) lags at 0.2× scroll speed, the near parchment surface moves at 1.0×. This three-layer parallax should be implemented via `transform: translateY()` in a `requestAnimationFrame` loop — NOT CSS `background-attachment: fixed`, which is unreliable on mobile and produces the generic "floating background" effect rather than genuine architectural depth. **Entry pages**: A biographical entry page should feel like opening a folio in a reference archive. The entry banner (full viewport width, 280px tall, dark stone background) carries the subject name in large `Cormorant SC`, dates below in `Barlow Condensed`, and a single flowing-curve SVG arc at the banner's lower edge transitioning into the parchment body. The two-column body begins immediately below. **Skeuomorphic details to render carefully:** - The search input field must have `box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 #B8B8C0` to feel recessed into the stone. - The primary content well has `box-shadow: inset 0 3px 8px rgba(0,0,0,0.15)` on its container — the document rests *inside* a surface, not on top of one. - Column pilasters use `box-shadow: 2px 0 4px rgba(0,0,0,0.25), -1px 0 0 #B8B8C0` to feel like genuine structural columns with light catching their near edges. **Narrative structure of homepage scroll:** 1. Arch recess / search hero (full viewport, Vault Dark background, arch in CSS) 2. Flowing-curve SVG transition to parchment 3. Recently added entries (narrow editorial rows, IM Fell English, Gilt Accent hover) 4. Mid-page stone-band section divider (full-width `Ashlar Stone` strip, ~60px, with lozenge ornament) 5. Featured memorial (wider card, parchment surface, entry banner thumbnail in miniature) 6. Footer (dark ashlar stone, condensed caps wordmark repeat) **Animation rules**: Parallax only on scroll (RAF loop). No entrance animations, no fade-ins, no CSS transitions on text. The only permitted micro-animations are: link hover gilt-color transition (150ms ease), and the subtle 200ms inset-shadow deepen on search field focus. Every other element is static — motion is reserved for the architectural parallax, and stillness is the dominant sensory experience. **AVOID**: hero CTAs, pricing blocks, testimonials, stat grids, card decks with hover lifts, rounded-corner modal sheets, gradient-filled buttons, anything that reads as SaaS or consumer app. This is a reference institution. ## Uniqueness Notes **Three differentiators from every other design in this registry:** 1. **Skeuomorphic stone-and-parchment is at 1% registry frequency — essentially unused.** The only prior skeuomorphic treatment in the corpus (if any) addresses consumer-product surfaces (leather, metal UI). This design applies skeuomorphism to *architectural* surfaces — stone, vault, inset document wells — which no other registry entry uses. The combination of skeuomorphic stone + cool-gray palette + archival typography creates a visual language with no direct predecessor in the registry. 2. **Three-layer stone-depth parallax replacing the standard single-layer floating background.** Parallax appears at 79% in the registry — massively overused. This design justifies its parallax use by reimplementing it as architectural depth (three distinct material layers at 0.2×/0.6×/1.0× scroll velocities) rather than decorative floating shapes. The parallax is an *epistemological* device — it proves the content is inside a monument — not a stylistic accent. 3. **IM Fell English as primary body typeface.** The registry's most common body fonts are Inter, Space Grotesk, and geometric/neo-grotesque variants. IM Fell English — a revival of 17th-century Fell Types with genuine optical irregularity and historical mass — appears nowhere else in the corpus. Its deliberate imperfection (slightly uneven stroke weights, compressed f-ligatures, old-style figures) makes the parchment surface feel genuinely archival rather than retro-themed. No other site in the registry uses this typeface.