# Design Language for sora.market ## Aesthetics and Tone sora.market channels a cyberpunk aesthetic — the neon-soaked data streams, dense information overlays, and high-tech marketplace energy of near-future digital commerce applied to a trading platform for 空 (sky/emptiness) and 소라 (shell/conch) themed goods. The site pulses — with the flickering energy of Blade Runner market stalls, the data-dense interfaces of Ghost in the Shell's net-diving scenes, and the gritty beauty of commerce conducted under neon signs in perpetual rain. Inspiration draws from the visual density of Katsuhiro Otomo's Neo-Tokyo, the interface design of Minority Report's gesture systems, the market chaos of William Gibson's Chiba City, and the atmospheric layering of Syd Mead's future cityscapes. The tone is nostalgic-retro — paradoxically backward-looking language that frames this cyberpunk market as a place where traditional shell-trading and sky-watching meet high-tech commerce, the old ways persisting in neon. The cyberpunk language transforms sora.market into a neon-lit bazaar where sky futures are traded alongside shell specimens, each transaction a data stream in the flickering economy of atmospheric commerce. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — content in dense grid modules creating the market-stall quality of goods displayed in tight, efficient arrangements, each cell a vendor's window into cyberpunk commerce. **Portfolio Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(260px, 1fr)) for responsive market stalls - Grid gap: 12px creating narrow alleys between stalls - Featured items: span 2 columns for premium market real estate - Container: max-width: 1120px centered with 16px edge margins - Scrollable grid with sticky category navigation - The portfolio grid creates the bazaar quality of dense marketplace navigation through cyberpunk commercial space **Section Sequence:** 1. **Neon Gate:** Hero with baskerville-refined title on gradient neon-rain background, star-celestial holographic projections, grain-overlay atmospheric market imagery 2. **Main Bazaar:** Market items in portfolio grid — parallax depth-layered stalls with grain-overlay cyberpunk treatment 3. **Sky Futures:** Featured atmospheric trades in expanded grid cells — grain-overlay meteorological data with star-celestial holographic accents 4. **Shell Exchange:** Specimen trading in dense grid with star-celestial simplified celestial motifs 5. **Back Alley:** Footer as market exit — nostalgic-retro farewell with star-celestial dimmed neon signs ## Typography and Palette **Typography:** - **Headlines:** "Libre Baskerville" (Google Fonts) — baskerville-refined serif at 2rem-2.8rem, weight 700. Its classical elegance creates the paradoxical quality of traditional typography illuminated by neon, old-world letterforms in a cyberpunk context. - **Body Text:** "IBM Plex Sans" (Google Fonts) — technical sans at 0.9rem, weight 400, line height 1.7. - **Market Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for price feeds and transaction data. - **Labels:** "IBM Plex Sans" at 0.6rem, weight 500, uppercase, letter-spacing 0.15em. **Color Palette:** - **Void Black:** #0c0818 — deep void-dark for backgrounds - **Neon Cyan:** #00d8e8 — electric cyan for primary accents - **Market Magenta:** #e838a8 — hot magenta for alerts and prices - **Shell Amber:** #e8b840 — warm amber for secondary accent - **Panel Dark:** #141024 — deep purple-dark for panels - **Sky Text:** #c8d0e0 — cool light for body text - **Haze Purple:** #6858a0 — muted purple for secondary text - **Grid Border:** rgba(0,216,232,0.12) — neon cyan tint border ## Imagery and Motifs **Grain-Overlay Atmospheric Noise:** Market sections feature grain-textured overlay — SVG turbulence filter (baseFrequency="0.65") at 0.04 opacity creating the CRT-monitor quality of cyberpunk display technology, every surface slightly noisy with electronic life. **Parallax Neon Depth:** Market stalls feature parallax micro-depth — foreground prices at 1x scroll, product images at 0.95x, background neon glow at 0.8x. The slight depth separation creates the holographic quality of cyberpunk display cases where products float in neon-lit space. **Star-Celestial Holographic Points:** Decorative star motifs as holographic projectors — CSS radial-gradient points (3-6px) in Neon Cyan and Market Magenta, positioned at section corners and grid intersections. Subtle pulse animation (opacity 0.3 to 0.6 over 3s infinite). The stars create the quality of holographic market signage projecting constellations across the bazaar ceiling. **Neon Price Glow:** Price elements with neon text treatment — text-shadow: 0 0 8px rgba(0,216,232,0.4), 0 0 20px rgba(0,216,232,0.15); creating the quality of neon-tube pricing signs flickering above market stalls. **CRT Scanline Overlay:** Subtle horizontal scanlines across market sections — repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,216,232,0.015) 2px, rgba(0,216,232,0.015) 4px) creating the display-technology quality of cyberpunk screens. ## Prompts for Implementation Build the page as a cyberpunk shell-and-sky bazaar. Portfolio grid: .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-width: 1120px; margin: 0 auto; padding: 40px 16px; } Neon glow price: .neon-price { color: #00d8e8; text-shadow: 0 0 8px rgba(0,216,232,0.4), 0 0 20px rgba(0,216,232,0.15); font-family: 'IBM Plex Mono', monospace; } Grain overlay: .grain { position: absolute; inset: 0; opacity: 0.04; pointer-events: none; } // SVG filter turbulence Market stall: .stall-card { background: #141024; border: 1px solid rgba(0,216,232,0.12); padding: 20px; } AVOID: Standard e-commerce platforms, clean marketplace layouts, and minimal product grids. Let cyberpunk neon density and nostalgic-retro traditional-meets-tech language create a market where sky futures flicker on CRT displays and shell specimens glow under holographic lights. ## Uniqueness Notes 1. **Cyberpunk for sky-shell market:** Neon-soaked near-future commerce makes natural specimens feel like precious contraband in a high-tech bazaar. 2. **Portfolio-grid as market stalls:** Dense grid modules create the claustrophobic quality of cyberpunk market alleys packed with goods. 3. **Baskerville-refined in neon context:** Classical serif typography under neon glow creates the paradox of old-world elegance in cyberpunk space. 4. **Grain-overlay as CRT texture:** Electronic noise makes every surface feel like it is displayed on aging cyberpunk technology. 5. **Star-celestial as holographic projectors:** Pulsing star points create the quality of holographic market signage rather than decorative elements. **Seed/Style:** aesthetic: cyberpunk, layout: portfolio-grid, typography: baskerville-refined, palette: gradient, patterns: parallax, imagery: grain-overlay, motifs: star-celestial, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic (90%), mono typography (94%), asymmetric layout (92%), minimal imagery (93%), friendly tone (90%), warm palette (95%). This design uses cyberpunk aesthetic, baskerville-refined typography, grain-overlay imagery, and nostalgic-retro tone.