# Design Language for renai.wiki ## Aesthetics and Tone Editorial aesthetic crossed with a zen-contemplative knowledge garden - imagine the Stanford Encyclopedia of Philosophy redesigned by Massimo Vignelli and Hara Kenya, with the patient knowledge organization of Jorge Luis Borges' Library of Babel rendered as a quiet ethereal-blue archive. The tone is zen-contemplative: this is a wiki that does not race to deliver "results," that does not gamify edits with badges, that does not chase recent-changes feeds. Instead, articles unfold slowly like the contemplation of a single koan; cross-references float gently in the margins like distant blue lanterns; the page architecture is built for thinking, not skimming. The mood is "a quiet research library at twilight, where the only sound is paper turning and the only colors are ink, cream, and the pale blue light through frosted glass windows." Circuit motifs are reinterpreted as knowledge-graph diagrams: nodes and edges drawn with the contemplative discipline of a Japanese rock garden. ## Layout Motifs and Structure Masonry layout: a multi-column masonry arrangement where article cards of varying heights pack tightly like books on uneven shelves. Three columns at the standard breakpoint, each 320px wide with 16px gaps, with masonry packing. Each card is a wiki article summary - the heights vary based on content length (180-480px). Between masonry "shelves" (every 4-6 cards), a full-width horizontal divider appears: a single hairline rule with a small circuit-graph ornament centered. The masonry is anchored on the left by a persistent vertical "category column" 200px wide containing the wiki's taxonomy in mono type. Right margin holds floating cross-references and ambient "see also" suggestions - small isometric-icon thumbnails attached by curved hairlines to relevant cards. Circuit-motif lines connect related cards: thin blue traces draw between cards on hover, revealing the knowledge graph beneath. ## Typography and Palette Body and headline face: JetBrains Mono (Google Fonts) - the mono spec - used at all sizes with weight modulation for hierarchy. Headlines at clamp(36px, 5vw, 72px) weight 700 with -1% tracking. Body at 15px/1.7 weight 400 with 0 tracking - mono body is intentional for the archive feel. The mono choice here is deliberate: among 81% of corpus that uses mono, this design uses it specifically as a wiki-archive marker, dressing knowledge in code-like authority. Italic for cross-reference link text. Display caps for category labels at 12px tracked +8%. Palette (ethereal-blue): - #F0F4F8 frost-white (primary background, page surface) - #DCE5EE mist-pale (secondary surface, card fills) - #A8C5E0 lantern-blue (primary accent, links, circuit traces) - #5B7FAA twilight-blue (secondary accent, hover states, category labels) - #1F2937 ink-blue-black (primary text, near-black with cool warmth) - #6B7C93 graphite-blue (secondary text, captions, metadata) - #E8F1FB porcelain-tint (highlight surfaces, hover backgrounds) ## Imagery and Motifs Isometric-icon imagery: every wiki article card carries a small isometric-icon thumbnail (48-72px) in the upper-left corner - the icon visually summarizes the article's topic (a tiny isometric building for architecture entries, a tiny isometric beaker for chemistry, etc.). Icons are 3-color flat: highlight, mid, shadow drawn from the ethereal-blue palette. Circuit motifs are the unifying visual element: thin lantern-blue lines (1.5px stroke) trace between related cards on hover, revealing the wiki's connection graph. Static decorative circuit-trace patterns appear as background textures in section dividers - knowledge-graph diagrams drawn in twilight-blue at 12% opacity. NO photography, NO 3D, NO illustrative imagery beyond isometric-icons - the wiki is an austere archive of ideas, not pictures. ## Prompts for Implementation Build the site as a quiet knowledge archive with a masonry article wall. Hero: full viewport. The wiki's title "renai.wiki" appears centered in JetBrains Mono 700 at large display, with a subtitle in italic mono explaining "a contemplative archive of ideas, slowly assembled." Below, the masonry grid populates: each card slides up from below with a slide-reveal pattern (4% corpus) - the cards stagger their entry by 80ms per card, sliding from translateY(40px) to 0 over 600ms with ease-out. Use slide-reveal pattern (4% corpus, underused) as the dominant interaction: hovering any card slides a small "related links" panel out from the right edge of the card, 240px wide, containing 3-5 floating wiki links. Circuit traces draw between hovered card and its related cards over 400ms via stroke-dashoffset animation. NO pricing, NO ads, NO sign-up forms - this is a public-good archive. The category column on the left scrolls separately from the main content (sticky), and clicking a category filters the masonry with a fade-and-rearrange animation. Cursor is a thin crosshair in lantern-blue (1px lines, 16px length) that pulses gently every 2 seconds. Footnote cross-references in the right margin appear as faint isometric icons connected by hairlines to their referenced paragraph. ## Uniqueness Notes - Masonry layout (3% corpus) combined with persistent left category column and right margin floating cross-references - the three-zone wiki architecture is structurally distinct. - Ethereal-blue palette (1% corpus) deployed as a complete monochromatic system rather than an accent - the entire design lives in pale blue tonal space. - Mono typography (81% corpus) used here with deliberate wiki-archive reference; specifically JetBrains Mono at all sizes - the typographic discipline distinguishes this from the corpus norm. - Chosen seed: aesthetic: editorial, layout: masonry, typography: mono, palette: ethereal-blue, patterns: slide-reveal, imagery: isometric-icons, motifs: circuit, tone: zen-contemplative - Avoided patterns from frequency analysis: parallax (94%), card-grid in standard sense (90%) - masonry is irregular, photography (90%) - none used, warm palette (93%) - ethereal-blue is structured coolness, mysterious-moody tone (70%) - zen-contemplative used instead.