# Design Language for yamichika.net ## Aesthetics and Tone yamichika.net ("near-darkness" -- 闇近, "yami" = darkness, "chika" = near/proximity) is a **victorian-ornate** scholar's chamber re-rendered in **dopamine-neon** -- the private reading-room of a 19th-century occultist who has discovered fluorescent ink. The site presents itself as the personal correspondence-archive of an unnamed bibliophile-cryptozoologist who studies "things that live just beyond the candle's reach." The tone is **mysterious-moody**: not horror, not goth, but the hushed concentration of a researcher leaning into a circle of lamplight while everything outside it remains unknowable. Where most Victorian-revival sites lean sepia and parchment, this one is steeped in deep-water indigo and shot through with hot-magenta and acid-green neon -- as if the marginalia of an old grimoire were written in highlighter pens that the librarian has secretly approved. Inspirations: William Morris wallpaper run through a Lisa Frank colorway; the deep-sea bioluminescence of Edith Widder's footage; the typographic confidence of an 1880s patent-medicine broadside; the warm absurdity of a Wes Anderson library scene. The reader is not a customer but a confidant -- invited to lean over a worn desk and read the pages of a journal that pulses faintly in the dark. ## Layout Motifs and Structure The page is a **single-column** vertical scroll, presented as one continuous **manuscript-page** flowing the full reading-width of the viewport (max-width 720px, centered, generous outer margins of ~14vw on desktop that shrink to 6vw on tablet, 5vw on mobile). The single-column choice is deliberate and load-bearing: this is a document, a letter, a chapter -- not a dashboard. Reading rhythm is the entire structural argument. **The Frontispiece (first viewport):** Full viewport-height opening "title plate." A double-ruled ornamental border (animated, see Imagery) traces the outer edge with Victorian fleur-de-lis cornerpieces in hot magenta. Centered: the domain "yamichika.net" set as a hand-engraved title in playful-rounded display type (lowercase, with a single decorative ampersand-style flourish replacing the dot). Below, a smaller subtitle reads *"a private archive of things observed near the edge of the lamplight"* in italicized scholarly serif. A subtle column of faint **water-bubbles** (small, irregular, slow-drifting circles) rises in the left and right margins from off-screen below to off-screen above, like the title page is submerged a few feet underwater. **Body sections** are organized as a sequence of **journal entries**. Each entry has: an ornate drop-cap (4-line, hot-magenta letterform inside a square Victorian frame with neon-cyan filigree), a date-line set in small caps with hairline rules either side ("the 12th of march, late evening"), 2-4 paragraphs of body prose, and a closing **finis-mark** (a small centered SVG glyph -- a sea-anemone, a key, a moth, a mollusk shell, an inkwell -- in dopamine-neon yellow on indigo). Between entries, a horizontal divider: an animated chain of bubbles drifting left-to-right across a hairline rule, the bubbles glowing faintly. **Marginalia rail:** On viewports wider than 1100px, a narrow left margin (~140px) holds occasional marginalia notes -- small italicized side-comments anchored to specific paragraphs by a thin curved line. On narrower viewports these collapse inline as parenthetical asides in muted color. Marginalia is *content*, not decoration: short observations, citations, or the bibliophile's whispered second-thoughts. **Closing colophon:** The page ends not with a CTA or pricing block but with a colophon -- typeset like an 1880s book's final page -- declaring fonts, the date the page was "set in type," and a tiny illuminated octopus trailing more bubbles upward. No newsletter signup, no buttons. The reader simply reaches the end of the chapter. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Headings:** "Fraunces" -- a contemporary playful-rounded serif with optical sizing and softened terminals; used for the frontispiece title at `clamp(4rem, 11vw, 9rem)` weight 600 with optical-size axis pushed to display, and for entry titles at `2.4rem` weight 500. Fraunces' rounded ball-terminals carry the playful-rounded mandate while its high-contrast strokes carry the Victorian gravity. - **Body:** "Lora" -- a balanced Google serif with a faint calligraphic memory and excellent reading rhythm; size `1.125rem`, line-height `1.7`, max measure ~62 characters. Drop-caps use Fraunces at weight 700. - **Marginalia / dates / colophon:** "IM Fell English SC" -- a Google Fonts revival of a 17th-century type with all the warm imperfection of historical printing, used for small-caps date-lines and colophon. Size `0.85rem`, letter-spacing `0.08em`. - **Bubble-glyph captions and the rare neon callout:** "Fraunces" italic at small sizes for italicized whispered emphasis, and the system stack only ever appears for absolute fallbacks. **Palette (deep-water midnight base, dopamine-neon ornament):** - `#0b1230` -- abyssal indigo (page background; deep-water midnight) - `#152045` -- moonlit-trench (section/card surfaces, slightly raised) - `#f0e7d0` -- vellum-cream (primary body text -- warm, never pure white) - `#ff2e9a` -- hot-magenta neon (drop-caps, fleur-de-lis cornerpieces, primary ornament) - `#27e6c2` -- bioluminescent cyan (marginalia rules, bubble outlines, rule accents) - `#fff066` -- highlighter-yellow (finis-marks, rare emphasis) - `#7b3ff2` -- ultraviolet (subtle hover halos, frontispiece subtitle italic) - `#3a4470` -- foggy lamp-rim (hairline rules, low-contrast borders) The palette rule: indigo is 78% of the page area; vellum-cream 18%; the four neons together are no more than 4% combined. Neon must always feel earned, like rare illumination on a dim page. ## Imagery and Motifs **Border-Animate Frontispiece Frame:** The opening title plate is wrapped in a double ornamental border drawn in SVG: an outer hairline rule in foggy lamp-rim, an inner hand-thick scrollwork band of Victorian fleur-de-lis arabesques in hot-magenta. The border is animated: a slow `stroke-dashoffset` traversal sends a single faint cyan "lit segment" traveling counter-clockwise around the perimeter on a 24-second loop, like a candle being walked around the room's edge. Cornerpieces (Victorian quatrefoil ornaments, ~80px) anchor the four corners with a slow `transform: rotate()` micro-pulse (0.5° amplitude, 8s ease-in-out alternating). **Water-Bubbles (the signature motif):** Bubbles appear in three layers throughout the page. (1) **Margin bubbles**: in the outer page gutter (and in the marginalia rail on wide viewports), small irregular circles (4-22px) of cyan outline with vellum-cream fill at 8% opacity rise slowly from below the viewport to above it, on independent randomized vertical paths and durations (18s-44s), with subtle horizontal sway via a sin-wave `translateX`. Density is sparse -- 6-10 bubbles in flight at any moment per gutter. (2) **Divider bubbles**: between journal entries, a chain of 7-12 bubbles drifts horizontally across the page on the dividing rule, gently bobbing. (3) **Closing colophon octopus**: an SVG line-illustrated octopus at the page foot trails a slow stream of bubbles upward as if exhaling -- this is the only moment bubbles travel near the actual reading column. **Book-Scholarly Drop-Caps and Finis-Marks:** Each journal entry begins with a 4-line drop-cap framed in a square Victorian medallion -- the letter in hot-magenta on a moonlit-trench panel, the medallion edged with neon-cyan filigree (SVG, distinct per letter where possible). Each entry ends with a centered finis-mark SVG glyph drawn in line-art style and tinted highlighter-yellow: a different specimen per entry from a small library (sea-anemone, ammonite shell, inkwell-with-feather, moth, key with bow-of-eye, ribboned scroll, octopus, antique compass). **Marginalia Connectors:** Each marginalia note in the wide-viewport rail is anchored to its paragraph by a hand-drawn-feeling SVG curve in cyan -- not a straight line but a single bezier with a faint hand-tremor, ending in a tiny circular dot at the paragraph anchor. The connector animates in (1.2s ease-out) when the paragraph scrolls into the viewport. **Pressed-Botanical Watermarks:** Behind selected paragraphs (every 4th-6th entry), a faint SVG line-drawing of a pressed botanical specimen (fern, sea-grass, kelp, maidenhair) sits at 6% opacity in indigo-lighter, rotated 8-14°, oversized so only a fragment is visible -- as if the page were pressed against a herbarium sheet. ## Prompts for Implementation Build the site as **a single, continuous reading experience**: a Victorian scholar's manuscript that someone has highlighted in neon. There are no nav links, no buttons, no CTAs, no pricing -- only a frontispiece, a sequence of journal entries, and a colophon. The reader is meant to scroll the document slowly, top to bottom, once. **Single-column shell:** `body { background:#0b1230; color:#f0e7d0; font-family:"Lora",serif; }` and a `
` with `max-width:720px; margin:0 auto; padding:14vh 0 22vh;`. Outer page padding lives on `body` so the bubble gutters can sit outside the manuscript column. Use `font-feature-settings:"liga","onum","kern";` on body for old-style figures and ligatures. **Frontispiece:** Full-viewport `min-height:100vh` flex-centered block with the SVG double border absolutely positioned `inset:5vh 5vw`. Title in Fraunces, lowercase, `font-variation-settings:"opsz" 144;`. The decorative dot-replacement uses an inline SVG flourish glyph in hot-magenta. Subtitle in Fraunces italic `1.05rem` color `#7b3ff2`. The border SVG uses two `` elements with `pathLength="100"`, the inner one with `stroke-dasharray="6 94"` and an animated `stroke-dashoffset` keyframe (0 → -100 over 24s linear infinite) plus the cornerpiece `` groups with `transform-origin` set to corner anchors and a separate keyframe for the 0.5° pulse. **Journal entries:** Each `
` has `margin: 7rem 0;`. Drop-caps via `:first-letter` is insufficient -- use a `` with `float:left; font-family:"Fraunces"; font-weight:700; font-size:5.6rem; line-height:1; padding:0.4rem 0.6rem; margin:0.2rem 0.8rem 0 0; color:#ff2e9a; background:#152045; border:1px solid #27e6c2; box-shadow: inset 0 0 0 4px #0b1230;`. Date-line is `

` in IM Fell English SC, small-caps via `font-feature-settings:"smcp"`, bracketed by 1px hairline rules using `display:flex` with `flex:1` rules either side. Finis-marks are inline SVG, 32px, `display:block; margin:3rem auto 0;`. **Margin bubbles:** Two fixed `

` and `--right` containers, `position:fixed; top:0; bottom:0; width:14vw;` (left:0 / right:0). Each contains 8 SVG `` elements styled as bubbles with `stroke:#27e6c2; stroke-width:1; fill:rgba(240,231,208,0.08);`. Animate each via `@keyframes rise { from { transform:translateY(110vh) translateX(0); } to { transform:translateY(-12vh) translateX(var(--sway)); } }` with per-bubble custom-property delays, durations (18-44s), and `--sway` sway amplitudes (-12px to 14px). Use `prefers-reduced-motion` to freeze positions and reduce opacity to 60%. **Divider bubbles:** Between entries, an SVG horizontal divider with `` in foggy lamp-rim and a row of 9 small bubbles `` riding along it; animate each `` with a left-to-right `transform:translateX` keyframe over 14s linear infinite, staggered. **Marginalia (wide viewports only):** Use `position:relative` on each `
`. Marginalia `