# Design Language for yami.quest ## Aesthetics and Tone yami.quest (闇 + quest = "the pursuit of darkness") is a **cyberpunk obsidian almanac** -- a neon-laced index of unfinished pursuits rendered as if discovered in the basement of a 22nd-century data cathedral. The aesthetic is **cyberpunk** filtered through **black-marble monumentality**: imagine a server rack carved from polished obsidian, the cooling fins replaced by veins of phosphorescent ore, and the LED status lights bleeding through the stone like trapped fireflies. The tone is **bold-confident** and **edgy-rebellious**: this is not a moody dark-mode site -- it is a declarative, oversized, almost arrogant artifact that announces itself in display type the size of doorframes. Inspirational anchors: the title sequence of *Blade Runner 2049* combined with the chiseled-stone monumentality of Brutalist Soviet metro stations and the typographic confidence of Wim Crouwel's *Stedelijk* posters. Every element should feel quarried, cut, and lit from within. Movement is restrained but assertive -- magnetic snapping, decisive flicker, never decorative jitter. The visitor should feel they have entered a vault where each block of content is a load-bearing slab in an unfinished cathedral of side-quests, with neon green/magenta light leaking from the seams. The mood is **nocturnal-monumental** rather than playful or warm: this site avoids cuteness, gradient mush, photographic backdrops, and rounded card-grid coziness entirely. It is sharp, structural, illuminated, and self-aware about its own gravitas. ## Layout Motifs and Structure The composition is built on **modular-blocks** -- rectangular obsidian slabs that snap into a 12-column hard grid, reinforced by visible **grid-lines** that show their construction rather than hide it. No card-grids, no center-stacked hero, no soft vertical scroll narrative. **Hero Slab (100vh):** A single full-viewport black-marble block with the word `YAMI` rendered in oversized display type (clamp(8rem, 22vw, 18rem)) crossing two-thirds of the viewport diagonally. Beneath, in a much smaller mono caption: `quest log // index of pursuits // 闇`. The hero has visible 1px hairline grid-lines (color: rgba(57, 255, 110, 0.18)) drawn at every 8.33vw column boundary, extending top to bottom -- a structural skeleton that the marble blocks sit on top of. A single neon-magenta vein cuts diagonally through the marble (SVG path with `filter: blur(0.4px) drop-shadow(0 0 14px #ff2e7a)`) following an uneven crack. **Index Wall:** Below the hero, the page becomes a **modular brick wall** of asymmetric obsidian rectangles -- each one a "quest entry." Block sizes vary on a 12-column grid: some span 4 cols, some 7, some 12, with deliberate full-bleed and inset variants. Mortar between bricks is the underlying neon-grid background showing through (3px gap, never larger). On hover, blocks **magnetically lift** toward the cursor (translate3d up to 14px, ease-out 280ms cubic-bezier(0.2, 0.85, 0.3, 1.05)) and a faint marbled glow leaks from the gap. **Magnetic Cursor Field:** A bespoke cursor is a hollow neon-green square (24px) that **magnetically snaps** to the nearest interactive corner within 80px radius (lerp 0.18). When near a block edge, the cursor square stretches into a 2:1 rectangle aligning with the edge. This is the site's signature interaction. **Lateral Scroll Spans:** Two horizontal-scroll bands punctuate the vertical flow -- "active quests" and "abandoned quests" -- where blocks slide horizontally in obsidian-on-grid panels with scroll-snap-type: x mandatory and scroll-snap-align: start. Vertical scroll resumes after the band's end-marker, signified by a cyan grid-line that pulses once. **Footer Substructure:** A flat horizontal stratum of 12 micro-blocks (each 8.33vw wide, 12vh tall) listing meta-data: timestamp, build-id, content-hash, copyright glyph. They look like the foundation course of bricks supporting the cathedral above. The structural rule: **every visible edge is intentional**. Blocks never have rounded corners. Borders are 1px hairlines or 0px (relying on color contrast against grid-lines). Rounded corners, soft drop-shadows, and gradient-blurs are forbidden -- replace with sharp inner-glows and discrete spot-glow halos. ## Typography and Palette **Display (the monumental voice):** "Big Shoulders Display" (Google Fonts), weight 800, letter-spacing -0.04em, clamp(4.5rem, 18vw, 16rem), line-height 0.85. Used for `YAMI`, section heads, and quest titles. This face is condensed-but-broad-shouldered, optimized for being CHISELED into surfaces. It carries the bold-confident tone without resorting to decorative serifs. **Secondary Display / Index Numbers:** "Unbounded" (Google Fonts), weight 700, used at clamp(1.4rem, 3.2vw, 2.6rem) for quest index numbers (e.g., `Q-014/97`) and category brackets like `[NIGHTSHIFT]`. Letter-spacing 0.06em, all-caps. **Mono / Metadata:** "JetBrains Mono" (Google Fonts), weight 400 for body metadata and weight 600 for inline emphasis. clamp(0.78rem, 1.05vw, 0.92rem), line-height 1.55. Used for timestamps, hashes, status labels, file-paths -- the "system" voice that grounds the monumentality in a server-room reality. **Body (the quest log voice):** "Inter Tight" (Google Fonts), weight 500, clamp(0.95rem, 1.15vw, 1.06rem), line-height 1.62, letter-spacing 0.005em. Used for quest descriptions and longer-form passages inside blocks. **Palette (Obsidian Vein):** - `#0a0a10` -- **Obsidian Black** (primary background, the marble base color) - `#14141d` -- **Slab Charcoal** (secondary block fills, slight lift) - `#1f1f2c` -- **Stone Edge** (block borders, table dividers) - `#39ff6e` -- **Vein Lime** (signature neon glow, primary accent, hovers) - `#ff2e7a` -- **Quartz Magenta** (secondary neon, used on cracks/veins, danger states, abandoned-quest markers) - `#7a8cff` -- **Phosphor Indigo** (tertiary glow, used sparingly for "in-progress" status) - `#e9eaf2` -- **Marble White** (high-emphasis text, headings) - `#8c8fa3` -- **Ash** (mid-emphasis text, captions) **Glow rules:** Neon glows use a two-stage filter: `text-shadow: 0 0 1px [color], 0 0 12px [color]/0.55` for text; `box-shadow: 0 0 0 1px [color], 0 0 26px -6px [color]` for blocks. Never use `blur > 30px` -- the glow must remain crisp and contained, like LED-through-stone, not soft diffusion. ## Imagery and Motifs **Marble-Texture (load-bearing surfaces):** Procedurally generated black-obsidian marble fills every primary block. Implemented via a 1024px tiling SVG (single shared asset, 8KB) with 4 layers of `feTurbulence` (baseFrequency 0.014/0.038/0.084/0.21, octaves 2/3/2/1) composited through `feColorMatrix` to produce smoky greenish-purple veining on a near-black field. The marble is intentionally *low-contrast* so it reads as texture rather than image -- you should sense it before you see it. CSS: `background-blend-mode: screen` over solid `#0a0a10`. **Grid-Lines (the cathedral scaffold):** A persistent 1px hairline grid is rendered as a fixed-position pseudo-element on `::before` using `background-image: linear-gradient(90deg, transparent calc(8.33% - 1px), rgba(57,255,110,0.09) calc(8.33% - 1px), rgba(57,255,110,0.09) 8.33%, transparent 8.33%); background-size: 100% 100%`. It sits *behind* the marble blocks, so it shows through the gaps. Horizontal grid-lines appear only at section boundaries (every 12vh) -- never as a full mesh, to avoid graph-paper feel. **Neon Veins (the cracks):** Hand-authored SVG paths that simulate cracks across the marble blocks. Each vein is stroke-width 1.2px, color `#39ff6e` or `#ff2e7a`, with `filter: drop-shadow(0 0 8px currentColor)`. Veins animate via `stroke-dasharray` path-draw on entrance (1.4s ease-out, IntersectionObserver triggered, once-only). One vein per major block; never decorative repetition. **HUD Tickers:** Thin top and bottom strips (24px tall) running horizontal-scrolling mono text in `#39ff6e` at 60% opacity, displaying live-feel telemetry: `// SECTOR-7 // Q-014 ACTIVE // SHARD COUNT: 0x4f8a // 23:47:12 KST`. Pure CSS `@keyframes` translateX, paused on hover. **Quest Glyph:** A custom 24px hollow-square cursor doubles as the recurring brand-mark. It appears as a stamped sigil in the corner of every block (top-right, 12px inset). When a block is "completed," the sigil becomes a filled neon-green square; "abandoned" gets a magenta diagonal-slash variant; "active" pulses softly. **Forbidden imagery:** No photography, no portraits, no landscape backdrops, no gradient meshes, no organic blobs, no playful illustrations, no stock-icon sets. Every visual element is geometric, structural, or veinous. ## Prompts for Implementation The site is a **single-page narrative artifact**, not a marketing surface. There is no pricing block, no feature-comparison table, no testimonial carousel, no stat-grid claiming "10,000 happy users," no email-capture CTA, no logo wall. **Boot sequence (page load, 2.0s total):** (1) Pure black field. (2) The grid-lines fade in from 0 to 0.09 alpha over 600ms. (3) The hero marble slab materializes with a hard wipe (clip-path inset from 100% to 0%, 320ms). (4) The neon vein draws across the slab (stroke-dashoffset 1.2s ease-out). (5) The display word `YAMI` is revealed letter-by-letter using a vertical mask wipe (each letter 80ms stagger, clip-path inset bottom). (6) The HUD tickers begin scrolling. No skeletons, no spinners, no fade-everything-in-together. **Magnetic cursor (always-on JS):** Replace native cursor with a custom hollow square. On every `mousemove`, find the nearest interactive corner within 80px and lerp the cursor's center toward it (factor 0.18). Lock the cursor's rotation to align with the nearest edge. Mix-blend-mode: difference, so the cursor inverts whatever it touches. **Block magnetism (hover):** When hovering a quest block, the block translateY(-14px) and scale(1.012), with a 1px neon-green inner stroke fading in (200ms). Adjacent blocks within 200px shift away by translate3d up to 6px on the perpendicular axis (subtle parallax repulsion). Use `will-change: transform` only during hover, not always. **Scroll behavior:** Use IntersectionObserver to trigger one-shot vein-draw animations as each major block enters viewport. Avoid scroll-linked transforms (no parallax). Two horizontal-scroll bands use native scroll-snap with `overscroll-behavior-x: contain`; the page's vertical scroll never hijacks. **Storytelling spine:** The page reads as a *log*, not a sales letter. Section flow: 1. Hero: monumental `YAMI` declaration 2. Manifesto block (3 short paragraphs): what a quest is, who keeps the log 3. Active Quests (horizontal-scroll, 6-9 blocks) 4. Completed Archive (modular wall, ~14 blocks) 5. Abandoned (horizontal-scroll, magenta-veined) 6. Coda: a single full-bleed marble slab with one sentence in display type 7. Footer: the 12-cell foundation strip **Performance:** All marble textures are a single shared SVG (cached). The font subset is restricted to Latin + numerals + bracket glyphs. JS budget: under 12KB minified (cursor + intersection-observer + scroll-snap helpers only). No frameworks, no animation libraries -- vanilla CSS animations and a small RAF loop for the magnetic cursor. **Accessibility:** Respect `prefers-reduced-motion` -- disable cursor lerp, disable vein-draw, disable HUD ticker, disable magnetic block lift. Reduce neon glow alpha by 50%. Maintain WCAG AA contrast: marble-white on obsidian = 17.8:1, ash on obsidian = 6.2:1. Provide focus-visible outlines using the same neon-green hollow-square aesthetic as the cursor. **AVOID:** centered hero with subhead-and-button, three-column feature grid, testimonial cards, pricing tiers, stat counters, photographic backgrounds, gradient mesh blobs, glassmorphic frosted panels, rounded-corner soft cards, warm/pastel palettes, playful illustrations, emoji decoration, large CTA buttons. ## Uniqueness Notes - **Marble-encased cyberpunk** is the central paradox: the genre is almost universally rendered with chrome, glass, and rain -- this design replaces those surfaces with quarried obsidian shot through with neon veins. No other site in the corpus pairs marble-texture with dark-neon and cyberpunk. - **Visible structural grid-lines** glowing faintly *behind* the modular blocks (not as decoration but as architectural revelation) -- the cathedral's scaffold remains visible through the seams. This is distinct from the few designs that hide their grid or use it as a photographic overlay. - **Magnetic hollow-square cursor** that snaps to interactive corners and stretches along edges -- the cursor itself becomes the brand mark and reappears stamped on every block. No copy-cursor designs in the corpus use this corner-snap-and-stretch behavior. - **Oversized display monumentality** at clamp(8rem, 22vw, 18rem) for the hero word, deployed in a category (typography: oversized-display) registered at 0% frequency in the corpus. - **Quest-log narrative spine** (active / completed / abandoned strata) replacing the conventional landing-page structure -- no CTA, no pricing, no testimonials, no stat-grid. - Document chosen seed/style: aesthetic: cyberpunk, layout: modular-blocks, typography: oversized-display, palette: dark-neon, patterns: magnetic, imagery: marble-texture, motifs: grid-lines, tone: bold-confident - Avoided patterns from frequency analysis: warm (84%), photography (82%), mono-typography overuse (79%), card-grid (73%), playful (70%), centered-layout (66%), gradient (60%). This design uses zero photography, zero card-grids, zero centered hero composition, zero warm tones, and treats mono only as a small metadata voice (not the primary typeface).