# Design Language for okurairi.net ## Aesthetics and Tone okurairi.net (お蔵入り — okurairi, Japanese for "shelved" or "put into storage") channels an ethereal aesthetic — the luminous, half-visible quality of things glimpsed through fog, applied to a network platform for connecting and rediscovering shelved creative works. The site hovers in the liminal space between visibility and invisibility — content emerging from and receding into soft light, as if shelved works are slowly materializing back into existence. Inspiration draws from James Turrell's light installations, the atmospheric photography of Todd Hido, the translucent architecture of SANAA's Louvre-Lens, and the glowing screens of Blade Runner 2049's archive scenes. The tone is nostalgic-retro — warm, backward-looking language that treats rediscovering shelved works as recovering lost memories. ## Layout Motifs and Structure The layout uses a **hud-overlay** architecture — content presented as translucent information overlays on atmospheric backgrounds, creating the archival retrieval interface of a network accessing stored data from deep memory. **HUD Overlay Architecture:** - Full-viewport atmospheric backgrounds per section - Content overlaid as translucent panels: max-width: 640px - Panels: slight transparency, gentle blur backdrop - Status indicators at viewport edges showing network/retrieval state - Information hierarchy through typography and opacity **Section Sequence:** 1. **Signal:** Hero with sans-grotesk title as HUD overlay on pastel gradient, line-illustration ghostly archive diagrams, sci-fi-hud retrieval interface elements 2. **Memory:** Rediscovered works in HUD panels — scroll-triggered reveals emerging from fog with line-illustration fading artwork 3. **Network:** Connection map in HUD overlay with sci-fi-hud node connectivity graphics and line-illustration wire diagrams 4. **Recovery:** Featured recoveries in expanded HUD panels with scroll-triggered content materializing 5. **Archive:** Footer as system sleep — nostalgic-retro closing with sci-fi-hud shutdown sequence and gentle sign-off ## Typography and Palette **Typography:** - **Headlines:** "Inter" (Google Fonts) — clean sans-grotesk at 2rem-2.8rem, weight 700. Its neutral precision creates the system-interface quality of an archival retrieval system. - **Body Text:** "Inter" at 0.9rem, weight 400, line height 1.75. - **Accent:** "Source Serif 4" (Google Fonts) — serif at 1rem, weight 400, italic for recovered work descriptions. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Pastel Lavender:** #e0d8ec — soft pastel lavender for light backgrounds - **Pastel Rose:** #ecd8e0 — gentle pastel rose for secondary backgrounds - **Fog White:** #f4f0f6 — foggy white for panel backgrounds - **Violet Soft:** #7860a0 — soft violet for primary accent - **Rose Muted:** #a07888 — muted rose for secondary accent - **Text Gentle:** #282030 — gentle dark for body text - **Dim Fog:** #807088 — foggy for secondary text - **Border Mist:** rgba(120,96,160,0.1) — misty border ## Imagery and Motifs **Line-Illustration Ghostly Diagrams:** Shelved works illustrated as fading line drawings — SVG illustrations (40-64px) with very thin strokes (1px) in Violet Soft at 0.2-0.4 opacity suggesting partially-visible blueprints and fading technical drawings. The ghostly quality represents works that are not fully present — only their outlines remain accessible. **Scroll-Triggered Memory Recovery:** Content emerges from invisibility on scroll — opacity transitions from 0.1 to 1 over 600ms with filter: blur(4px) to blur(0). The slow materialization creates the sensation of memories slowly returning to clarity as they are retrieved from archival storage. **Sci-Fi-HUD Retrieval Interface:** Thin interface elements at viewport edges — small status lines (30px, 1px) in Violet Soft at 0.12 opacity, tiny circular indicators (4px) showing retrieval progress, and minimal text labels ("RETRIEVING...", "MEMORY LOADED") in Labels style. The HUD creates the archival-system interface for accessing shelved network data. **Pastel Fog Atmosphere:** Backgrounds use soft pastel fogs — linear-gradient(135deg, #e0d8ec, #ecd8e0, #f4f0f6) creating the gentle, indeterminate atmosphere of a memory that hasn't fully resolved. Radial highlights (rgba(120,96,160,0.03)) suggest light sources in the fog. **HUD Panel Translucency:** Content panels use translucent treatment — background: rgba(244,240,246,0.8), backdrop-filter: blur(8px), border: 1px solid rgba(120,96,160,0.08). The translucency means content never fully obscures the atmospheric background, maintaining the half-visible quality of recalled memories. ## Prompts for Implementation Build the page as an ethereal archival network. HUD: section { min-height: 100vh; position: relative; } .hud-panel { max-width: 640px; margin: 0 auto; background: rgba(244,240,246,0.8); backdrop-filter: blur(8px); border: 1px solid rgba(120,96,160,0.08); border-radius: 12px; padding: 32px; } Scroll-triggered: .memory-block { opacity: 0.1; filter: blur(4px); transition: opacity 600ms ease, filter 600ms ease; } .memory-block.visible { opacity: 1; filter: blur(0); } Ghostly illustrations: SVG with stroke: rgba(120,96,160,0.3), stroke-width: 1, fill: none. HUD indicators: .hud-status { position: fixed; right: 16px; top: 50%; } .hud-line { width: 30px; height: 1px; background: rgba(120,96,160,0.12); margin: 8px 0; } Pastel fog: .fog-section { background: linear-gradient(135deg, #e0d8ec, #ecd8e0, #f4f0f6); } AVOID: Modern networking platforms, active project management sites, and bright social media interfaces. Let ethereal luminescence and nostalgic-retro gentleness create a network where rediscovering shelved works feels like recovering half-forgotten memories from the fog of time. ## Uniqueness Notes 1. **Ethereal for archival network:** Luminous, half-visible aesthetics perfectly represent the liminal state of shelved works — present but not fully accessible. 2. **HUD-overlay as retrieval system:** Information overlays create the archival-technology interface for accessing stored creative data. 3. **Scroll-triggered as memory recovery:** Content materializing from blur recreates the slow process of memories returning to clarity. 4. **Line-illustration as fading blueprints:** Ghostly drawings represent shelved works that exist only as outlines in archival memory. 5. **Pastel fog as indeterminate memory:** Soft, undefined atmospheric colors capture the uncertain quality of half-recalled creative works. **Seed/Style:** aesthetic: ethereal, layout: hud-overlay, typography: sans-grotesk, palette: pastel, patterns: scroll-triggered, imagery: line-illustration, motifs: sci-fi-hud, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses ethereal aesthetic, hud-overlay layout, pastel palette, line-illustration imagery, and nostalgic-retro tone.