# Design Language for yami.wiki ## Aesthetics and Tone yami.wiki (v2) is a **Zen Glass Encyclopedia** -- a quiet wiki rendered as a Kyoto temple's reading garden, where each entry rests in a floating glassmorphic card suspended in pale ethereal-blue mist. The aesthetic is **zen**: vast negative space, a single low reading column at the center of attention, raked-gravel diagonals subtly suggested in the background, and the entire visual rhythm governed by *ma* (the Japanese concept of meaningful empty space between things). The .wiki suffix is read literally -- a small, hand-tended encyclopedia of seven entries about yami (darkness, shadow, evening) -- but the wiki rejects the dense tabular reference style. Each entry breathes. The tone is **conversational**: the writer speaks softly, as if walking with the reader through a stone garden, pausing at each glass card to consider one definition of darkness. There are no info-boxes, no infoboxen, no taxonomy-trees, no edit-history sidebars. Only seven floating glass entries, a serif body, and a slow morph-pattern between them as the visitor scrolls. The palette breathes ethereal-blue at every saturation -- deep pre-dawn blue at the bottom, mist-blue mid-page, and a pale celestial blue almost-white at the top. The narrative spine: seven entries arranged vertically in a long ma-negative-space scroll. Each entry is a single glassmorphic card centered in vast quiet space, and as the visitor scrolls from one entry to the next, the previous card morphs (its shape elastically reshapes from a tall rectangle into a horizontal one, into a circle, into a hexagon, never abruptly). Geometric-shapes motifs -- circles, triangles, hexagons, single lines -- drift softly behind the glass cards as the only ornaments. ## Layout Motifs and Structure The composition is a **ma-negative-space** layout -- a single very narrow reading column (max-width 540px) centered on a vast pale blue ground, with extraordinary vertical and horizontal breathing room around each entry. Each entry occupies roughly 80% viewport height of pure space and only 20% glass card. The page is deliberately under-furnished. **Macro structure:** - **Threshold (Section 0, 120vh):** A pale ethereal-blue field with a single small wordmark "yami.wiki" set in serif at center, 24px, letter-spacing 0.32em uppercase. Below, in the lower 30vh, a single italic line: "*a slow encyclopedia of darkness, in seven entries.*" The first morphing geometric shape -- a faint pale-blue hexagon, 140px, 8% opacity -- drifts in from the lower-right corner. - **Seven Entries (Sections 1-7, 130vh each):** Each entry is exactly one glassmorphic card centered in the vertical middle of its viewport. The card holds: - **A single small entry numeral** (e.g., "ENTRY I." in small caps, 12px tracked 0.22em). - **An entry title** in serif italic (e.g., "*yami*: the darkness between two lit lanterns," 36px). - **A definition paragraph** of 4-6 short sentences in classical serif. - **A single italic etymology line** ("from old Japanese, c. 8th century"). - **One small geometric ornament** -- a thin pale-blue circle, triangle, hexagon, or line segment -- floating to the side of the card. - **Garden Bridge (Section 8, 70vh):** A wider open viewport with no card, only the geometric shapes from all seven prior entries drifting slowly together into a single composite figure at center. The morph pattern reaches its longest sustained state here. - **Colophon (Section 9, 60vh):** A small italic serif paragraph thanking the reader, and a single hexagonal monogram at the very bottom. **Spatial grammar:** The entire document holds to ma. Each entry's card is centered horizontally, with 120-160px of breathing space above and below. The geometric ornaments drift 200-400px away from the card, never overlapping it. The card itself is small (max-width 540px, padding 56px) -- a quiet object in a large room. There are no sidebars, no nav, no breadcrumbs, no tags. Only the slow vertical scroll. ## Typography and Palette **Fonts (all Google Fonts):** - **Display titles (entry titles):** "Cormorant Garamond" italic weight 500 at clamp(28px, 3.4vw, 44px), letter-spacing 0em. A classical serif used for the seven entry titles and the threshold tagline. - **Body text:** "Cormorant Garamond" weight 400 at clamp(16px, 1.2vw, 18px), line-height 1.8. Used for entry definitions. - **Entry numerals and small caps:** "Cormorant SC" (small caps) at 11-13px, tracking 0.24em. Used for "ENTRY I.," "ENTRY II.," etc. - **Etymology lines:** "Cormorant Garamond" italic weight 400 at 13px, line-height 1.5, 70% opacity. - **Wordmark:** "Cormorant SC" at 24px, tracking 0.32em uppercase. **Palette (ethereal-blue, ten stops mist-to-deep, plus glass and ink):** - **Sky-mist top:** #EAF1F8 (sky-mist), #DCE7F4 (pale celestial), #C2D4E8 (soft sky-blue). - **Mid mist:** #97B3CE (dusty cerulean), #6E8FB4 (cool blue), #4E7099 (deep mist). - **Pre-dawn deep:** #2C4868 (pre-dawn blue), #182B47 (deep night-blue). - **Glass cards:** rgba(255, 255, 255, 0.42) over a 20px backdrop blur, with a 1px inner stroke of #E0E9F3 and a soft outer drop shadow at 8% opacity. - **Ink color (serif text):** #1F2E47 (very dark blue-black, never pure black). - **Etymology and ornament:** #6E8FB4 at 70% opacity. **Type-color rules:** All body text in ink #1F2E47. Italic entry titles in #2C4868. Etymology lines in #6E8FB4 at 70%. The page gradient runs from sky-mist at the top through soft sky-blue mid-page to deep night-blue at the bottom -- a slow tonal descent matching the encyclopedia's progression from "evening" through "deep night." ## Imagery and Motifs **Core visual motifs:** - **Glassmorphic-cards imagery (imagery mandate):** Each of the seven entries is housed in a glassmorphic card -- a 540px-wide rounded rectangle (border-radius 18px) with a translucent white fill (42% opacity), a 20px backdrop blur effect, a 1px inner stroke of pale blue, and a soft 8% drop shadow. The glass has a faint inner highlight at the upper-left corner (a 1px diagonal white line at 28% opacity), suggesting refracted light. The cards never overlap; each is alone in its viewport. - **Geometric-shapes motif (motif mandate):** A single small geometric shape drifts beside each card. Seven shapes, one per entry: (1) a thin pale-blue circle (140px, 1.4px stroke), (2) a small upward-pointing triangle (96px), (3) a regular hexagon (120px), (4) a long horizontal line segment (320px), (5) a downward-pointing triangle (96px), (6) a small filled circle (60px, 30% opacity), (7) a hexagram (two overlapping triangles). The shapes are always thin-stroke pale blue (#6E8FB4 at 70%); they never touch the cards. In the Garden Bridge section, all seven shapes drift together into a composite figure. - **Morph patterns:** As the visitor scrolls from one entry to the next, the previous card's geometric ornament morphs into the next entry's ornament via a slow SVG path-morph (1.6s, cubic-bezier(.4, 0, .2, 1)). Circle becomes triangle, triangle becomes hexagon, etc. The morphing is the design's primary motion and feels meditative. - **Background gradient descent:** The page background is a slow vertical gradient descending from sky-mist at the top through cerulean mid-page to pre-dawn deep at the bottom. The gradient is the visitor's clock; the wiki begins in evening and ends just before dawn. - **Raked-gravel hint:** A barely-visible (4% opacity) horizontal stripe pattern in the background suggests raked gravel -- the pattern is 1px lines at 14px intervals, drawn in #97B3CE. This is the only "texture" in the design and is almost invisible. ## Prompts for Implementation **Opening narrative:** Page loads on sky-mist #EAF1F8. The wordmark "yami.wiki" fades in at center over 1.2s. The italic tagline "a slow encyclopedia of darkness, in seven entries." types in via a slow typewriter (28cps). The first geometric ornament (a thin pale-blue circle) drifts in from the lower-right corner over 2.4 seconds, settling 220px from where the first entry's card will appear. Nothing else happens for 2 seconds -- the design enforces a pause. **Scroll narrative:** As the visitor scrolls toward Entry I, the glassmorphic card emerges from below the viewport with a 900ms upward fade (the card's translucency and blur build progressively as it rises). The card settles in the vertical center of its viewport. The body text inside fades in paragraph by paragraph over 1.2s. The geometric ornament morphs at the section transition: between Entry I and Entry II, the circle morphs into a triangle via a 1.6s SVG path-morph. **The card as still object:** Once a card is settled, it does not animate on hover (zen rejects hover-fanfare). The only motion inside the card is the slow text fade-in. The card does not lift, tilt, scale, or glow. It rests in its space. **Garden Bridge composite:** As the visitor scrolls into the Garden Bridge, all seven ornaments drift into the center of the viewport over 4 seconds. They overlap to form a composite figure -- a hexagram inside a circle inside a triangle inside a line. The composite holds still for the duration of the bridge section. The italic line "*a slow encyclopedia of darkness, in seven entries.*" briefly appears beneath the composite, then fades. **Avoid:** No buttons, no nav, no menu, no sidebars, no edit links, no breadcrumbs, no info boxes, no taxonomy lists, no tags, no comments. No CTAs, no testimonials, no stat blocks. No video. No icons. No round buttons or pills. No raster imagery. Strictly no decoration beyond the seven geometric ornaments and the glass cards. **Tone in motion:** Slow, meditative, breath-paced. All transitions use cubic-bezier(.4, 0, .2, 1). Morph animations are 1.6 seconds; fades are 900ms; scrolling is unaccelerated. The design refuses speed. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zen wiki:** A wiki structured as a zen reading garden, not as a reference document. Zen aesthetic (3%) applied to a wiki (a structurally dense content format) inverts both. No infoboxes, no tabs, no taxonomies -- only seven entries, breathing. 2. **Ma-negative-space as primary layout:** Ma-negative-space (4% layout) used at full intensity, with each entry occupying only 20% of its viewport and the remaining 80% pure breathing space. No other site in the corpus commits to ma this completely. 3. **Morph as the only inter-section motion:** Patterns 8% (morph) used for SVG path-morphing of geometric ornaments between sections -- circle to triangle to hexagon to line. The morph is the entire transition mechanism. No parallax (94% AVOIDED), no scroll-triggered card-grids (33% AVOIDED). 4. **Ethereal-blue as a scroll-driven tonal descent:** Ethereal-blue (1% palette) applied as a long vertical gradient descending from sky-mist to pre-dawn deep -- a chromatic time-of-day across the document. The palette is the narrative's clock. 5. **Glassmorphic cards as quiet objects:** Glassmorphic-cards (2% imagery) used here not as a stack of UI cards but as single floating objects, each alone in its viewport. No card-grid (90% AVOIDED), no card hover effects. 6. **Conversational tone via classical serif:** The classical Cormorant Garamond italics carry a soft, walking conversational voice rather than a brisk wiki tone. Conversational tone (4%) paired with serif-classic typography (5%) and zen aesthetic is a rare combination. **Chosen seed:** aesthetic: zen, layout: ma-negative-space, typography: serif-classic, palette: ethereal-blue, patterns: morph, imagery: glassmorphic-cards, motifs: geometric-shapes, tone: conversational. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94% -- though the column is centered, the design is dominated by ma not by hero-centered card-grid composition), photography (90%), mysterious-moody (71%), warm palette (92%), mono typography (82%).