# Design Language for yami.wiki ## Aesthetics and Tone yami.wiki is a **dark-academia scriptorium for things that resist being indexed**. "Yami" (闇) is the Japanese word for darkness — not the friendly dim of a reading lamp, but the darkness *behind* the lamp, the part of the archive the lamp deliberately doesn't reach. The site is built as if a 19th-century European antiquarian and a Kyoto temple's sutra-copying monk co-founded a wiki and then both quietly left, leaving the lamps lit and the inkwells uncovered. It is a knowledge base for marginalia, apocrypha, half-attested footnotes, and the kind of articles that begin "Sources disagree." The tone is **mysterious-moody** and **scholarly-intellectual** held in tension — rigorous citation apparatus rendered in candlelight. Nothing here screams. The mood is the held breath of someone reading a stub article at 3 a.m. and realizing the "References" section is empty. There is dust on the serifs. The cursor does not chase anything; it *waits*, like a librarian who has seen you before. Crucially, yami.wiki rejects almost everything the corpus over-uses. The frequency analysis shows 94% hand-drawn, 85% glassmorphism, 98% warm palettes, 92% gradients, 89% cursor-follow, 87% parallax, 83% spring physics, 93% mono type — yami.wiki uses **none of those as a primary device**. It is cold, matte, ungradient, un-frosted, and it moves like turning a page, not like a trampoline. ## Layout Motifs and Structure The skeleton is the **two-column scholarly codex** — `sidebar` layout, which the frequency analysis shows at only 14%, and used here in its truest form: a left margin column for apparatus (article tree, "see also," citation counter, last-edited timestamps written like manuscript colophons) and a wide right column for the body text. No card grid. No bento. No dashboard. The corpus is drowning in `card-grid` (93%) and `full-bleed` heroes (84%); yami.wiki refuses both. **Spatial system:** - A **measure of exactly 33em** for body text, set ragged-right (no justification — this is a manuscript, not a printed book), with the right edge of the text column deliberately uneven so the *negative space on the right* becomes a vertical river of darkness running the whole length of every article. That river is where margin-glosses appear on hover — small annotations in a contrasting hand, like a previous reader's pencil. - The **left apparatus column** is 14em, separated from the body not by a line but by a **3em gutter of pure void** — the columns float in black with no rule between them, the way facing pages of an open book are joined only by a shadow. - **Vertical rhythm** locked to a 28px baseline grid that is *visible* — a faint horizontal ruling, like the lines of a copybook, sits behind the text at 4% opacity. Text sits *on* the lines, descenders crossing them. - The masthead is not a hero. It is a **running head**: the word "yami" in blackletter, very small, top-left, with the current article's path beside it in small caps — "yami / apocrypha / the missing folio" — exactly like the running header of a critical edition. - No footer marketing. The page ends in a **colophon block**: a single centered paragraph in italic describing (in invented archivist's voice) when the article was "copied," from what "exemplar," and a Latin-style closing formula. - Page transitions are **vertical wipes of ink** — navigating to a new article, a black field rises from the bottom like rising water, covers the page, and recedes to reveal the new text. No fade, no slide, no spring. ## Typography and Palette **Typefaces (Google Fonts only — no invented names):** - **UnifrakturMaguntia** — a true blackletter (Textura) face from Google Fonts. Used *sparingly and only at large size or very small size, never as body text*: the wordmark "yami," section dividers (a single glyph like a ¶ or a manicule rendered in this face), and drop-caps at the start of each article. Blackletter at body size is unreadable; that's the point — it's used as ornament, not text. - **Cormorant Garamond** — the body face for all article prose. Weight 300 normal, 300 italic for glosses and the colophon, weight 500 for the rare sub-heading. Set at a generous size (20–21px) with loose leading (1.55) so the text breathes like a hand-set page. This is the workhorse — readable, old, slightly fragile at the thins. - **EB Garamond** — used for the *apparatus*: footnote numbers, the citation counter, the "see also" list, timestamps. Smaller (14px), set in its small-caps where possible. The deliberate pairing of two Garamond cuts (Cormorant for body, EB for apparatus) is a printer's joke — the same family, two centuries of revival apart. - **No monospace anywhere.** The corpus uses `mono` at 93%; yami.wiki has a strict rule: if you need to show a "code-like" string (a hash, an ID, a coordinate), it is set in EB Garamond small-caps with letter-spacing, like a catalog number on a museum label — never in a terminal font. **Palette — cold, matte, ungradient. Eight values, no gradient meshes, no glassmorphic translucency:** - `#0B0B0D` — **yami black**: the page ground. Not pure #000 — a near-black with the faintest blue, the color of old ink that has been black so long it has started to forget. - `#15151A` — **vellum-shadow**: the apparatus column background, one shade up from the ground, barely perceptible — you feel the column more than see it. - `#D6D0C4` — **bone-paper**: the body text color. A warm-grey off-white, like aged rag paper read by a cold light. (This is the only concession to warmth, and it is a *paper* warmth, not a sunset warmth.) - `#8C8578` — **dust-grey**: secondary text, glosses, the visible baseline rules at higher opacity, timestamps. - `#5A5650` — **faded-pencil**: tertiary text, the colophon, the running head's article path. - `#7A1F2B` — **rubrication red**: the single accent, used exactly the way medieval rubricators used red — for the *first word* of each article, for footnote markers, for the manicule glyphs, for the active link. Deep, oxidized, blood-into-iron red. Never bright. Used at maybe 2% of the page's surface. - `#3B4A52` — **slate-verdigris**: for visited links and "stub" tags — the green-grey of old bronze, the color of something that *was* metal. - `#C9A24B` — **gilt**: reserved for one thing only — the drop-cap of "featured" / "scholar's pick" articles, and the thin hairline that underlines the wordmark. Matte gold leaf, not shiny. If you see it, the article matters. ## Imagery and Motifs **Primary imagery: paper-aged texture + line-illustration manicules** — explicitly *not* photography (corpus is at 98% photography; yami.wiki has zero photographs). - **Manicules (☞):** the recurring motif. The pointing-hand marginal symbol from medieval and early-modern manuscripts. A custom SVG manicule — drawn in 1px `#7A1F2B` line — marks every "see also" link and every internal cross-reference. On hover the cuff's ruffle animates: a slow inked redraw of the line, 1.2s, like a hand being drawn rather than appearing. - **Catchwords:** at the bottom-right of each long article section, the *first word of the next section* appears small and italic in `#5A5650` — the manuscript "catchword" device used to keep gatherings in order. Decorative and functional: it tells you what's coming. - **Ink-bleed corners:** each major content block has, at one corner only (rotated randomly per block), a soft irregular darkening — an SVG `feTurbulence` ink stain at ~6% opacity, as if the page rested face-down on a wet one. Never symmetric, never on the same corner twice. - **The ruling lines:** the visible copybook baseline grid described above is itself a motif — it makes the entire page feel like a sheet pulled from a copyist's exercise book. - **Lacunae:** where an article is incomplete, the gap is rendered as a literal manuscript lacuna — a `[…]` set in rubrication red, or a short row of `※ ※ ※` (Japanese reference marks, kome-jirushi) — a quiet nod to "yami" being a Japanese word. The kome-jirushi is the one place East-meets-West in the ornament. - **Drop-caps:** every article opens with a 4-line drop-cap in UnifrakturMaguntia, in `#D6D0C4` (or `#C9A24B` if featured), with the *rest of the first word* in small-caps rubrication red — pure medieval incipit treatment. - No icons in the modern UI sense. No line-illustration "scenes." The ornament budget goes entirely to manicules, catchwords, kome-jirushi, and ink stains. ## Prompts for Implementation Build as a single static HTML document per article — no SPA, no router, no build step. One CSS file, three Google Fonts (UnifrakturMaguntia, Cormorant Garamond, EB Garamond), one small JS file. Target under 70KB before fonts. **Storytelling spine — "reading by the last lamp":** The site presents itself as a single article being read at night. The narrative is not "scroll through sections of a landing page" — it is "you have opened a book in a dark room." Implement these beats: 1. **The opening blackness.** On load, the page is `#0B0B0D` and *almost empty* — only the running head ("yami / …") visible, in `#5A5650`. After ~600ms, the body text **rubricates in**: the first word (in red) appears first, letter by letter at ~40ms each (a slow ink-drawing, not a typewriter clatter — use opacity+blur transitions per letter, not hard cuts), then the drop-cap, then the rest of the paragraph fades up as one block over 900ms. Subsequent paragraphs are already present — no scroll-triggered reveals after the first screen. The corpus over-uses `scroll-triggered` (27%) and `typewriter-effect` (17%); use the ink-draw *once*, at the top, then stop. 2. **The margin awakens on dwell, not on move.** This is the anti-`cursor-follow` rule. Nothing tracks the cursor's position. Instead: if the cursor *rests* (no movement for 700ms) within the right-hand "river" of negative space beside a paragraph, a **margin gloss** for that paragraph inks in — a short italic annotation in `#8C8578`, EB Garamond, as if a previous reader paused there too. Move again and after 400ms it quietly fades. The interaction rewards stillness. 3. **The lamp.** A single very large, very soft radial darkening is fixed to the *viewport* (not the cursor) — centered slightly above the text column — so the top of the page is marginally less dark than the bottom. As you scroll down a long article, the whole `body` background interpolates from `#0B0B0D` toward `#070708` via one `IntersectionObserver` on quartile sentinels — the deeper into the article, the deeper the dark. "Yami" gets darker the further you read. 4. **Footnote behavior.** Footnote markers are superscript EB Garamond numerals in rubrication red. Click (or `:hover` on desktop) and the footnote text **unfurls in place** — the paragraph below it spreads apart and the note slides into the gap in `#8C8578` italic, with a thin `#7A1F2B` rule above it. No tooltips, no popovers, no modals. The page is a continuous manuscript; everything happens *in the body*. 5. **Page-to-page = the ink wipe.** Internal links: on click, a `#0B0B0D` panel transforms from `scaleY(0)` anchored at the bottom to `scaleY(1)` over 500ms `cubic-bezier(.7,0,.3,1)`, holds 150ms, then the new page's panel recedes `scaleY(1)→0` anchored at the top. It reads as ink rising and draining. No spring, no bounce, no fade. 6. **The colophon close.** Every article ends with the centered italic colophon paragraph. As the reader reaches it, the visible baseline ruling lines fade to 0 over the last 200px of scroll — the "page" runs out of ruled lines, as a real copybook page does near the bottom. A final `※` in rubrication red, centered, ends the document. **Motion rules (strict):** - Easing is *always* slow-in/slow-out, durations 500–1200ms. Nothing is snappy. No `spring`, no `elastic`, no `bounce`, no `magnetic`, no `tilt-3d` — all corpus over-uses. - The only "physics" is gravity-like: the ink wipe and the lamp-darkening both move with weight, downward. - Manicule redraw and the rubrication ink-in are SVG `stroke-dashoffset` / per-letter opacity-blur reveals — hand-drawn *feeling* without the corpus's literal `hand-drawn` doodle aesthetic (94%). - `prefers-reduced-motion`: the ink wipe becomes an instant cut to a 200ms cross-dissolve; the rubrication-in becomes a single 300ms fade; the dwell-gloss still works (it's not motion-triggered, it's stillness-triggered). Honor it. **AVOID (explicit):** no CTA buttons, no "Sign up to edit," no pricing tier blocks, no stat-grid ("10,000 articles!"), no testimonial cards, no card-grid landing, no full-bleed photographic hero, no glassmorphic panels, no warm gradient washes, no monospace, no neon, no cursor-trailing particles. If the page looks like it wants you to *do* something, it has failed. It should only want you to *keep reading*. ## Uniqueness Notes Differentiators this design commits to — and that other CMassC sites should not duplicate: 1. **Blackletter as pure ornament, never as text.** UnifrakturMaguntia appears only at drop-cap scale and wordmark/divider scale — never as readable running text. Almost no site in a 684-file corpus pairs a Textura blackletter with a Garamond body in a strict incipit/rubrication system. The "two Garamonds" pairing (Cormorant body + EB Garamond apparatus) is itself a deliberate, near-unique printer's conceit. 2. **Interaction rewards stillness, not movement.** The margin glosses appear on *cursor dwell* (700ms still), and the lamp/darkening is anchored to the viewport, not the cursor. This is a direct, intentional inversion of the corpus's 89% `cursor-follow` reflex. yami.wiki is the site where moving your mouse makes things *go away*. 3. **A cold, matte, ungradient, un-frosted dark palette.** Against 98% warm / 92% gradient / 85% glassmorphism, yami.wiki is near-black `#0B0B0D` with bone-paper `#D6D0C4` text and a single oxidized-red rubrication accent used at ~2% surface area. No gradient mesh, no translucency, no glow. The only "metal" is matte gilt on featured drop-caps. 4. **The page literally darkens as you read it** ("yami" = darkness), via quartile IntersectionObservers on `body` background — a content-as-name device, paired with copybook baseline rulings that fade out near the colophon as a real ruled page does. 5. **Manuscript apparatus as the entire UI:** manicules (☞), catchwords, kome-jirushi lacunae (※), colophons in invented archivist Latin, sidebar layout (14% in corpus) used as a true codex margin — and zero photography (corpus: 98%), zero card-grid (corpus: 93%), zero dashboard, zero hero. **Chosen seed / style:** `dark-academia` aesthetic — composed as `aesthetic: dark-academia, layout: sidebar, typography: garamond-classic + blackletter, palette: monochrome (cold near-black + bone), motifs: book-scholarly + cultural (kome-jirushi), imagery: paper-aged + line-illustration (manicules), tone: mysterious-moody × scholarly-intellectual, patterns: fade-reveal + path-draw-svg (used minimally)`. **Avoided patterns from frequency analysis:** hand-drawn (94%), glassmorphism (85%), mono typography (93%), warm palette (98%), gradient (92%), cursor-follow (89%), parallax (87%), spring (83%), magnetic (76%), stagger (67%), tilt-3d (32%), card-grid (93%), full-bleed (84%), photography (98%), scroll-triggered (27%), typewriter-effect (17%) — none used as a primary device; where SVG path-draw and fade-reveal appear, they are used once and quietly.