# Design Language for okurairi.com ## Aesthetics and Tone okurairi.com (お蔵入り — okurairi, Japanese for "shelved" or "put into storage") channels a y2k-futurism aesthetic — the chrome-and-holographic optimism of millennial-era technology predictions applied to a platform for archived, shelved, and forgotten projects. The site shimmers with the unrealized future — iridescent surfaces, metallic textures, and the bittersweet beauty of technologies that were promised but never delivered. Inspiration draws from the chrome interfaces of Winamp skins, the holographic packaging of 2000s tech products, the optimistic concept art of unrealized gadgets, and the metallic dreamscapes of The Matrix's digital world. The tone is scholarly-intellectual — measured, analytical language that documents shelved projects with the careful reverence of archival science. ## Layout Motifs and Structure The layout uses a **broken-grid** architecture — content blocks arranged in deliberately fractured compositions, mirroring the disrupted timelines and incomplete paths of shelved projects. **Broken Grid Architecture:** - Base: 8-column grid with content at irregular positions - Blocks overlap partially (negative margins -8 to -16px) - Some blocks rotated slightly (1-2deg) suggesting casual filing - Feature blocks break grid entirely with full-width expansion - Container: max-width: 1040px centered - The broken arrangement suggests files scattered across a storage shelf **Section Sequence:** 1. **Vault:** Hero with rounded-sans title on analogous gradient, custom-illustration Y2K chrome renderings, geometric-shapes holographic accent decorations 2. **Archive:** Shelved projects in broken-grid — skeleton-loading interactive reveals with custom-illustration retro-tech concept art 3. **Timeline:** Project chronology in fractured grid arrangement with geometric-shapes timeline markers 4. **Catalog:** Categorized archives in loose grid blocks with custom-illustration category icons and skeleton-loading browsing states 5. **Dust:** Footer as settled archive — scholarly-intellectual closing with geometric-shapes archival seal and storage sign-off ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2.2rem-3rem, weight 700. Its soft, rounded quality creates the approachable, non-threatening interface style of Y2K consumer technology. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.75. - **Code:** "Fira Code" (Google Fonts) — monospace at 0.8rem for archive identifiers and metadata. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Chrome Dark:** #10101c — deep chrome-dark for backgrounds - **Silver Surface:** #1c1c2c — silver-dark for panels - **Holographic Cyan:** #40c8d0 — iridescent cyan for primary accent - **Holographic Violet:** #8848c0 — holographic violet for secondary accent - **Chrome Silver:** #b0b8c8 — chrome silver for tertiary accent - **Light Chrome:** #d8dce8 — light chrome for text - **Dim:** #505868 — muted for secondary text - **Border Holo:** rgba(64,200,208,0.1) — holographic border ## Imagery and Motifs **Custom-Illustration Y2K Concept Art:** Shelved projects illustrated as Y2K-era concept renderings — SVG illustrations (48-72px) of chrome devices, holographic screens, and unrealized gadgets in Holographic Cyan and Chrome Silver. Gradient fills simulate the metallic, reflective quality of Y2K product renders. **Skeleton-Loading Archive Reveals:** Project entries start as skeleton loading states — rectangular placeholder shapes (background: linear-gradient(90deg, #1c1c2c, #242438, #1c1c2c) animated: backgroundPosition shifting over 1.5s). Content fades in over 400ms when loaded. The skeleton state suggests content being retrieved from deep storage. **Geometric-Shapes Holographic Accents:** Small geometric shapes (hexagons 12px, circles 8px, triangles 10px) with iridescent gradient fills (Holographic Cyan to Holographic Violet) at 0.1-0.15 opacity. Scattered at content margins. The shapes suggest holographic stickers — the Y2K decorative language of consumer technology packaging. **Analogous Color Harmony:** Colors work in analogous relationship — Cyan through Violet occupying adjacent color-wheel positions, with Chrome Silver as neutral anchor. Backgrounds: linear-gradient(135deg, rgba(64,200,208,0.03), rgba(136,72,192,0.03)) creating iridescent shift. **Broken-Grid Filing Disorder:** Content blocks positioned with slight rotations (transform: rotate(0.5deg) to rotate(-1deg)) and irregular spacing, suggesting casually filed documents and shelved prototypes stored without perfect organization. ## Prompts for Implementation Build the page as a Y2K archive vault. Broken grid: display: grid, grid-template-columns: repeat(8, 1fr), gap: 16px. Content: .archive-block { grid-column: var(--start) / span var(--span); transform: rotate(var(--tilt, 0deg)); } Container: max-width: 1040px, margin: 0 auto, padding: 60px 24px. Skeleton: .skeleton { background: linear-gradient(90deg, #1c1c2c 25%, #242438 50%, #1c1c2c 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } Holographic shapes: .holo-shape { background: linear-gradient(135deg, #40c8d0, #8848c0); opacity: 0.12; } Y2K illustrations: SVG with gradient fills simulating chrome. Iridescent background: .iridescent-section { background: #10101c; } .iridescent-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(64,200,208,0.03), rgba(136,72,192,0.03)); } AVOID: Modern project management tools, active-development platforms, and forward-looking tech sites. Let Y2K-futurism nostalgia and scholarly-intellectual care create an archive where shelved projects are preserved with the reverence of futures that almost were. ## Uniqueness Notes 1. **Y2K-futurism for shelved archives:** Millennial tech optimism creates the perfect aesthetic for documenting unrealized futures. 2. **Broken-grid as scattered files:** Fractured compositions mirror the disorganized reality of projects put into deep storage. 3. **Skeleton-loading as retrieval:** Loading-state animations suggest content being pulled from deep archival storage. 4. **Holographic shapes as Y2K decoration:** Iridescent geometric accents recreate the packaging aesthetic of turn-of-millennium technology. 5. **Scholarly-intellectual for archival care:** Academic language gives shelved projects the dignified preservation they deserve. **Seed/Style:** aesthetic: y2k-futurism, layout: broken-grid, typography: rounded-sans, palette: analogous, patterns: skeleton-loading, imagery: custom-illustration, motifs: geometric-shapes, tone: scholarly-intellectual **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 y2k-futurism aesthetic, broken-grid layout, analogous palette, custom-illustration imagery, and scholarly-intellectual tone.