# Design Language for yami.wiki ## Aesthetics and Tone yami.wiki is a sunlit field-station almanac for a future that already remembered to bring its grandmother's seed jars. The site reads like a hand-bound observation diary kept by an off-grid botanist who happens to maintain a low-orbit weather satellite — cottagecore warmth in the page texture and pacing, but every measurement is read off a glowing sci-fi heads-up display gridded over the linen. "Yami" (闇 — shade) is reframed here as the cool dapple under an apple tree at noon: not absence of light but the soft pocket where readings get most accurate. The mood is unhurried, optimistic, slightly bookish, and quietly technological. Imagine a wiki written in a sun-bleached canvas tent: typewritten margin notes, pressed-flower diagrams, and a transparent green vector overlay tracking pollinator vectors in real time. The voice is a calm field-naturalist who cross-references seasons with telemetry, treats every entry as a living draft, and signs off in pencil. Authority comes from patient observation, not loud claims. The site should feel like a place a reader can stay inside on a rainy afternoon and come out knowing more about both rosemary cuttings and orbital mechanics. ## Layout Motifs and Structure The page is organized as an **asymmetric two-track ledger**: a wide "Field Page" track (roughly 62% of viewport) anchored to the left, and a narrow "Telemetry Margin" track (roughly 28%) anchored to the right, separated by a 1px hand-ruled vertical line in Iron Gall Ink (#3A2E1F). The remaining ~10% is generous outer margin — never touched by content, only by occasional stamp-like motifs (a date, a wax seal mark, a small constellation glyph). The vertical line is intentionally not perfectly straight; it has tiny tremors at three pre-set y-coordinates, as if drawn with a fountain pen on slightly buckled paper. Within the Field Page track, content blocks **break their own grid**: a recipe-style block aligns to a 7-column sub-grid, the next entry aligns to a 5-column sub-grid offset by 18px to the right, the next is centered with a tilted stamp on its top-left corner. This rolling re-grid prevents the eye from settling into a templated rhythm. Each entry begins with an oversized hand-numbered glyph (e.g., "Entry 014") set hanging into the left margin, like a manuscript folio. The Telemetry Margin runs as a continuous live-feeling sidebar — but it is **structurally a sidebar of a wiki, not a dashboard**. It contains: a low-fidelity sci-fi HUD frame with rounded square corners and a 1px stroke in Phosphor Sage (#7FB069); inside the frame, three stacked "instrument readouts" (azimuth, lumens, soil_pH) that are explicitly drawn as dial-type widgets with hand-tickmark scales rather than bar charts. Below the HUD, a hand-pressed leaf scan in line-illustration style overlaps the bottom-right corner of the frame by ~24px, as if a real leaf was tucked between the page and the screen. This collision of rendered HUD and hand-drawn botanical is the central layout tension of the design. Vertically, the page is sectioned not by hard rules but by **horizon lines**: faint 0.5px dashed lines in Linen Dusk (#D8CDB8) drawn at irregular intervals (one every 1.4 to 2.1 viewport heights), each carrying a small typeset coordinate (e.g., "37.7749° N · 122.4194° W · 142m") on its right end. The horizon lines are decorative wayfinding, not section dividers in the usual SaaS sense. Header navigation is a single horizontal strip across the top reading like a card-catalog tab bar — five labels separated by typed em-dashes — left-aligned, no logo block hogging center-stage. **AVOIDED:** sidebar-and-content app shells, dashboard tile grids, full-bleed marketing hero photographs, three-up stat columns, pricing tier cards, masonry image walls. ## Typography and Palette **Typography (Google Fonts only):** - Display + entry numerals: **Familjen Grotesk** (700) — a contemporary geometric-sans with subtle humanist warmth in the lowercase a, e, and t. Set massive on entry numerals at clamp(56px, 9vw, 142px), tracked at -0.015em, slightly optical-sized down at large weights. The geometric construction reads as the "instrument" voice of the design. - Body + reading text: **Inria Serif** (400, 400 italic, 700) — a softly typewriter-flavored serif with a warm vertical stress and gently slabbed terminals. Set 18px / 1.62 line-height, max measure 64ch, italic used for marginal asides only. Serif in body and geometric-sans in display deliberately inverts the stale "serif headline / sans body" formula. - Telemetry readouts: **DM Mono** (400, 500) — narrow monospace for coordinate strings, instrument values, and timestamps. Set at 13px with slight letter-spacing (+0.04em) and used **only** inside HUD frames or after dashed horizon lines, never in body prose. - Margin handwriting: **Caveat** (400) used at 19px for two or three pencil-style annotations per entry, rotated -1.5deg to -3deg, never repeating the exact rotation twice on a page. **Palette (warm-earthy with a single low-saturation HUD accent):** - **Linen Field** `#F1E9D6` — primary page background; reads as undyed canvas under daylight. - **Iron Gall Ink** `#3A2E1F` — primary text and ruled lines; chosen over plain black because it has a faint warm cast that prevents harsh contrast on the linen ground. - **Sun-Soaked Terracotta** `#C46A3B` — secondary accent for entry numerals, drop caps, and pressed-flower fills; warm, not saturated, sits well on linen. - **Mossy Drawer** `#5C6B3A` — used for botanical line-illustration strokes and for the underline-draw motion on links; reads as garden-shed pigment. - **Phosphor Sage** `#7FB069` — the sci-fi HUD stroke and dial tickmarks; a desaturated, slightly powdery green that suggests a phosphor CRT seen through a kitchen window. This is the only color that "glows," and only at 1px stroke weight. - **Linen Dusk** `#D8CDB8` — soft horizon-line dashes, hairline rules, and disabled-state UI; a shade darker than the page so it whispers rather than divides. - **Wax Seal Madder** `#8E2F2F` — appears once per page maximum, only as a small circular stamp/wax-seal motif near the date; never used for buttons or large fields. The palette is deliberately **warm-grounded with one cool point of light** (Phosphor Sage). No gradients. No drop shadows. Color separation is achieved by hue temperature, not saturation contrast. ## Imagery and Motifs - **Line-illustration botanicals**: Hand-vector line drawings in Mossy Drawer at consistent 1.25px stroke, no fills. Subjects are plants with practical specificity — yarrow, mugwort, tomato truss, sage clipping with cut-end visible — not the generic "monstera leaf" of corporate decks. Each illustration carries a tiny hand-typed Latin name beneath it in Inria Serif italic. Illustrations are positioned at unexpected anchor points: half-bleeding off the left edge of the Field Page track, tucked into the corner of a HUD frame, or floated alongside an entry's first paragraph as a 280px wide marginal scan. - **Sci-fi HUD frame system**: A small library of four HUD chrome frame styles, all drawn as outlined SVG with no fills, all in Phosphor Sage at 1px stroke. The styles are: (1) rounded-square instrument frame with two corner cut-marks, (2) circular dial with hand-tick scale, (3) horizontal "scan strip" of three connected boxes for time-series readouts, (4) compass-rose with cardinal letters in DM Mono. None of these frames pulse, glow, or animate continuously; they are stationary chrome that the live numerals tick within. - **Pressed-paper textures**: A subtle 6% opacity grain layer over the Linen Field background, tileable, generated from a real linen scan but desaturated. The grain is non-uniform — slightly heavier toward the upper-left corner of each viewport, simulating page-edge wear. - **Wax-seal stamp glyph**: A single circular Wax Seal Madder mark, 64px wide, with a recognizable initial inside ("Y"). Placed once per page near a publication date. This is the only spot of red on the page. - **Lottie animation moments**: Three and only three Lottie-animated moments per page. (1) A botanical sprout that draws itself stem-up over 1.4s when its illustration enters the viewport — line-draw animation along the SVG path. (2) A HUD dial whose needle gently advances over 2.6s from rest to current value with a soft spring overshoot, then settles. (3) A small "graphite pencil tick" that scratches a check-mark into the margin next to the most recent entry with a 0.6s draw-on. All three Lottie payloads are small (under 18kb each), JSON-driven, and **do not loop**. - **Coordinate stamps**: Small typeset DM Mono strings ("37.7749° N · 142m · 14:08 PDT") that appear at the right end of horizon lines. They are not interactive, not links — they are atmospheric trail-markers that establish the field-station fiction. - **Hand-numbered folios**: Entries begin with an oversized "014" or "027" in Familjen Grotesk 700, hanging into the left margin and clipped slightly by the page edge, evoking manuscript foliation rather than blog post numbering. **No photography. No stock illustrations. No 3D renders. No glossy gradients. No glassmorphism.** The only "screen-native" element is the Phosphor Sage HUD chrome, and it is deliberately set against analog warmth. ## Prompts for Implementation - Build the page as a **single long-form vertical reading experience** that mimics flipping through a hand-bound field journal. Use a CSS Grid root with `grid-template-columns: minmax(40px, 1fr) minmax(0, 62ch) 24px minmax(0, 32ch) minmax(40px, 1fr)` so the asymmetric two-track ledger is structural, not decorative. The 24px gutter holds the hand-ruled vertical line. - Render the **vertical hand-ruled line** as an SVG `` with `stroke="#3A2E1F"`, `stroke-width="1"`, and a hand-jitter applied via three intermediate `` segments at slightly varied x-coordinates (±0.6px) at three pre-chosen y-positions. Do **not** animate the line; it is part of the static page. - Each **entry block** uses `scroll-margin-top: 12vh` so anchor-jumping lands the entry just below the page chrome, not flush. Entries are separated by ~14vh of vertical breathing room, never by horizontal rules. - The **HUD chrome frames** in the Telemetry Margin should be authored as inline SVG components with `stroke="#7FB069"`, `fill="none"`, `stroke-width="1"`, `stroke-linecap="square"`. The numerical readouts inside them use `font-feature-settings: "tnum" 1, "zero" 1` on DM Mono so digits align in their cells. - **Lottie animations** trigger via `IntersectionObserver` with a `rootMargin: '-20% 0px'` threshold so they fire when the element is comfortably in view rather than at the edge. Each Lottie plays exactly once per page load. Use `lottie-web` light build, not full. After play, the final frame stays — there is no looping. - **Link interactions**: links in body prose render with no underline at rest; on hover, an underline draws left-to-right in Mossy Drawer over 280ms with `cubic-bezier(0.2, 0.7, 0.1, 1)`. On focus, the underline appears instantly (no animation) at full length and gains a 1px Sun-Soaked Terracotta dot at its left end. - **Scroll behavior**: `scroll-snap-type: none`. The page should scroll like paper, not slides. No scroll-jacking, no parallax of background images. The only scroll-coupled motion is the entrance of each Lottie moment. - **Cursor**: default cursor in body. Over the HUD frames, swap to a custom 16x16 SVG crosshair cursor in Phosphor Sage. Over the line-illustrations, swap to a graphite-pencil cursor in Iron Gall Ink. These two cursor swaps are the only "interactive personality" cues in the design. - **Margin annotations** use absolutely-positioned `