# Design Language for sora.market ## Aesthetics and Tone sora.market is a **corporate intelligence terminal that has gone rogue** — a market-data platform where the clinical language of institutional finance has been hijacked by something alive and slippery in the deep water. The aesthetic is **corporate-precision infected with tropical unease**: the sterile authority of a Bloomberg terminal refracted through an aquarium wall, where tropical fish press their noses against the glass and leave iridescent smear-marks on the data readouts. "Sora" is the Japanese word for sky, so the atmosphere is *high altitude* — thin, cold, crystalline — yet the market feeds that scroll beneath it pulse with something warm-blooded and unpredictable. The tone is **edgy-rebellious**: the site never performs corporate deference. Headlines cut. Labels bite. The fish that appear in the UI are not decorative; they are measuring instruments with opinions. Mood anchors: a trading floor at 4 AM lit by cooling monitor light, a reef shelf at 100m where pressure makes colors shift, a neon-signed izakaya with institutional credentials pinned to the wall. Color temperature: cool and receding, with sudden warm puncture moments where the fish or a lens-flare event fires through the gray pane. No warmth by default — warmth is earned. ## Layout Motifs and Structure The layout is a **HUD-overlay system** — the page is not a document; it is an instrument panel projected over an ambient background. Two visual planes exist simultaneously: **Plane 0: The Deep Field.** A full-viewport background that never scrolls — a living aquarium of slow-drifting bioluminescent particles in `#0e1117` near-black, with three to five tropical fish SVG silhouettes making slow circuits from edge to edge. Fish are rendered as flat vector shapes in the palette's cool-gray range at ~18% opacity, occasionally catching a lens-flare event and blooming briefly to 80% before fading. This plane is completely non-interactive; it is the ocean the instrument panel floats above. **Plane 1: HUD Shell.** The interactive document plane. Composed of: - A **top rail** (64px high, full-width, `#141920` at 92% opacity with a 1px bottom edge in `#2e3b4e`): domain wordmark left, a small lens-aperture icon right (a pure CSS concentric-circle aperture that slowly rotates on hover) - A **primary viewport** (the center ~80vw × 88vh area) composed of **floating data-panels**: semi-transparent rectangles with `backdrop-filter: blur(8px)`, `#1c2533` fill at 78% opacity, and a `1px` border in `#3a4e64`. Panels are not arranged in a grid — they float at slightly different z-depths, with subtle `drop-shadow(0 0 18px #1a8bff22)` halos that intensify on hover. - A **status strip** at the bottom (32px, full-width): scrolling market ticker text in `#6e8ba4` at 11px `Azeret Mono`, punctuated by fish glyphs (◈) at interval separators. **Progressive disclosure rhythm:** panels open in tiers. Tier 0 shows only the panel's header label and a single data number. On hover, Tier 1 expands (200ms ease-out) to show a sparkline and two secondary metrics. On click, Tier 2 fully expands the panel, pushing adjacent panels aside with a smooth spring-physics reflow. No content is ever hidden behind a separate page — it's all present, just collapsed. **No hero section. No pricing block. No stat-grid.** The first thing the visitor sees is the HUD instrument panel, already active and populated with live-feeling data. ## Typography and Palette **Typography — playful-rounded precision, Google Fonts only.** Three typefaces in deliberate tension: - **Display and HUD panel headers:** `Nunito` (variable, weights 600→900, Google Fonts). Used at `clamp(1.1rem, 2.2vw, 1.8rem)` for panel headers. Letter-spacing `-0.01em`. The rounded terminals of Nunito give the corporate data-panel headers an irreverent softness — like a system font that has been slightly warmed by ocean water. Weight 800 for primary numerals displayed large. - **Body and secondary labels:** `DM Sans` (variable, 300→500, Google Fonts). 14px / 22px for all descriptive copy, label strings, and metadata. Weight 300 for captions, weight 500 for active states. - **Data / Ticker / Monospace readouts:** `Azeret Mono` (400→600, Google Fonts). Used exclusively for numbers, tickers, coordinates, percentages. 11–13px. Letter-spacing `0.04em`. This is the only cold typeface — its clinical precision makes the Nunito headers feel even more playfully subversive by contrast. **Palette — cool-grays with surgical accent punctures:** Base layers: - `#0e1117` — deep field void (background of Plane 0) - `#141920` — HUD shell surface (top rail, bottom strip) - `#1c2533` — panel fill at 78% opacity - `#243040` — panel border at hover state / active panel fill Mid-tones (data, labels, lines): - `#3a4e64` — default border / grid line / rule - `#6e8ba4` — secondary text, ticker text, captions - `#9ab3c8` — primary body text, enabled state labels - `#c2d4e2` — panel header text (Nunito 800), active values Accent fires (used sparingly — maximum 3 elements visible at once): - `#1a8bff` — primary accent: sparkline strokes, active panel halos, fish-bloom moments - `#00d4b4` — secondary accent: positive-delta indicators, lens-flare core color - `#ff4e6a` — alert / negative-delta: used only for negative value states ## Imagery and Motifs **Tropical fish as measuring instruments.** The fish motif is the entire visual logic of the site's non-data decoration. No photography. No stock imagery. The fish are a set of 7 SVG silhouette species (a tang, a clownfish, a lionfish, a pufferfish, a surgeonfish, a parrotfish, and an eel rendered as a long sigmoid) each drawn with minimal geometry — 12–20 path nodes — in flat cool-gray fills. They live in Plane 0 and their circuits never repeat exactly (randomized waypoints via a small JS behavior). When a data event fires (a value change above a threshold), the nearest fish catches a lens-flare event: a four-point star bloom (`#00d4b4` center fading to `#1a8bff` at 40% outer glow) overlaid at the fish's position for 800ms before dissolving. This makes the fish feel like they are reacting to the market — turning them from decoration into feedback instruments. **Lens-flare as punctuation.** Lens-flares are not continuous background elements. They are events: a CSS + SVG radial burst that fires on: (a) page load complete, (b) a panel expanding to Tier 2, (c) periodic data-tick events. Each flare has a primary disc (`#00d4b4`, 60px, 90% opacity, 120ms), four thin radial spokes (`#1a8bff`, 1px × 40px, 60% opacity, 200ms), and a soft halo ring (`#9ab3c8`, 80px diameter, 15% opacity, 300ms). After 400ms, all elements fade to 0 over 600ms with `ease-in` curves. Flares cannot overlap — a 1.2s cooldown prevents stacking. **HUD UI elements:** corner-tick brackets (thin `L`-shaped borders, 12px leg, `#3a4e64`, appear at all four corners of hovered panels), a concentric-circle aperture icon (pure CSS, 5 rings, 24px total, rotates 45° on hover at 600ms ease), and a pulse-ring animation (a `border-radius: 50%` ring that expands from 0 to 140% and fades, 2s loop) placed behind the active panel's header number. ## Prompts for Implementation Build sora.market as a **single-page instrument shell** — one HTML document, no routing, no page loads. The visitor lands directly into the HUD panel system, already "running." There is no onboarding splash, no hero CTA, no marketing copy. The page communicates authority through density and restraint, then subverts that authority with fish and light. **Structural blueprint:** 1. **Plane 0 (Deep Field, `position: fixed`, `z-index: 0`).** - `` or CSS animated element: `#0e1117` background, 12 slow-drifting bioluminescent particle dots (`#1a8bff` at 6% opacity, 2–4px, drift at 0.3–0.8px/frame, no interaction). - 5 tropical fish SVG silhouettes: each a `
` with inline SVG child, animating on looped waypoint paths using CSS `@keyframes` with randomized durations (18s–42s). Fish opacity: 18% default. Fish scale: 0.6× to 1.4× randomized at spawn. - Lens-flare container: an absolutely positioned `
` where JS injects flare elements. 2. **Top Rail (`position: fixed`, `z-index: 100`, `height: 64px`).** - Left: `sora.market` in Nunito 800, `#c2d4e2`, 18px, no letter-spacing modification. - Right: aperture icon (5 SVG circles, concentric, `#6e8ba4` stroke, rotates on hover). - Background: `#141920` at 92% + `backdrop-filter: blur(4px)`. 3. **HUD Panel Grid (`position: relative`, `z-index: 10`, `padding-top: 80px`).** - Not a CSS grid — panels use `position: absolute` within a relative container for the floating-depth effect. - Panel count: 6 panels in the initial state. Positions are fixed percentages from top-left of the container: approximate anchors at (8%, 12%), (35%, 8%), (62%, 15%), (8%, 52%), (40%, 48%), (68%, 44%). - Each panel: `width: clamp(220px, 28vw, 380px)`, `border-radius: 6px`, all properties defined above. Three tiers implemented with CSS `max-height` transitions and JS class toggling. - Panel content hierarchy: `
` (label in DM Sans 500 + current value in Nunito 800 + delta badge), `
` (sparkline SVG + two secondary metrics in DM Sans 300), `
` (extended data table in Azeret Mono 400). 4. **Status Strip (`position: fixed`, `bottom: 0`, `z-index: 100`, `height: 32px`).** - Horizontally scrolling marquee of market-ticker style text in Azeret Mono 400, `#6e8ba4`, 11px. Fish glyphs (◈) as separators. - Scroll direction: right-to-left, duration 60s linear infinite. - Background: `#141920` + `backdrop-filter: blur(4px)`. 5. **Progressive disclosure behavior (JS).** - `mouseover` panel → add class `.tier-1-open` → CSS `max-height` transition from 0 to 120px. - `click` panel → add class `.tier-2-open` → deactivate all other panels' `.tier-2-open`, reflow panel positions with `transform: translate()` spring-physics simulation using `requestAnimationFrame`. - On Tier 2 open: fire a lens-flare event at the panel's top-right corner. 6. **Fish-flare coupling (JS).** - Every 8–15 seconds (randomized interval), pick the fish nearest to the center of the viewport. - Inject a `.lens-flare` div at that fish's current position in `#flare-stage`. - CSS `@keyframes` handles the burst-and-fade in 1000ms. **AVOID:** hero banners, pricing tables, testimonial carousels, numbered stat blocks, full-width image backgrounds that compete with the HUD, any animation that loops visibly within 5 seconds (too restless). **EMBRACE:** stillness broken by deliberate events, information density that rewards attention, the feeling of watching a living system rather than reading a marketing page. ## Uniqueness Notes **Chosen seed:** aesthetic: corporate, layout: hud-overlay, typography: playful-rounded, palette: cool-grays, patterns: progressive-disclosure, imagery: lens-flare, motifs: tropical-fish, tone: edgy-rebellious **3+ differentiators from the existing registry:** 1. **Tropical fish as market-event sensors — unprecedented coupling.** No other design in the registry uses the tropical-fish motif (4% frequency) as reactive data-feedback instruments rather than decorative elements. The fish catch lens-flares when data thresholds are crossed, turning a decorative motif into a functional UI indicator. This is the only design where decoration and data are the same object. 2. **Corporate-aesthetic-as-hostile-takeover rather than polish.** The registry's corporate-aesthetic designs (17% frequency, the most overused aesthetic) universally use corporate language to signal trust and competence. sora.market inverts this: the corporate visual grammar (rail navigation, HUD panels, data density, monospace tickers) is retained but the warmth has been bled out and replaced with ocean-trench cold, then the edgy-rebellious tone punctures that coldness with lens-flares and fish. It is corporate visual language held hostage. 3. **HUD-overlay with floating non-grid panel placement.** The 4% of designs using hud-overlay treat it as a dashboard with aligned grid panels. sora.market places panels at absolute percentage coordinates — a deliberate drift from alignment that creates mild spatial tension, as if the panels are floating at slightly different depths. No other design uses position-absolute floating within a fixed HUD shell as its primary layout logic. 4. **Cool-grays palette used as near-monochrome darkness rather than silver-gray lightness.** The registry's cool-grays (2% frequency) appear in brighter, silver-toned executions. sora.market pushes the cool-gray palette into near-void darkness (`#0e1117` through `#243040`), where it reads more as deep oceanic than silver-tech. The only brightness is from lens-flare accents — making the palette's sparse use of `#00d4b4` and `#1a8bff` feel like bioluminescence rather than interface chrome. 5. **Avoided overused patterns:** `corporate` aesthetic at 17% (inverted rather than avoided), `fade-reveal` at 5% (not used — replaced by spring-physics panel reflow), `typewriter-effect` at 5% (not used — no text animation at all, stillness is the contrast). Avoided `glassmorphism` (overused in HUD-adjacent designs) in favor of `backdrop-filter: blur` used minimally and purposefully.