# Design Language for sora.markets ## Aesthetics and Tone sora.markets is a **surreal dreamscape of skies that have not happened yet** — a contemplative observatory where each "market" is a different *possible weather of the future*, painted as a hovering sky-fragment in an endless cool twilight. "Sora" (空) is the Japanese word for sky, and the whole site treats prediction as **sky-reading**: the discipline of standing very still and watching cloud-banks resolve into shapes. The tone is **mysterious-moody, never hype-driven** — no "trade now," no green-up/red-down adrenaline, no leaderboard dopamine. Instead the mood is the silence of a planetarium ten minutes before the show: dim, vast, attentive, faintly melancholic. Inspiration sources: René Magritte's *The Empty Mask* and *Decalcomania* (skies as cut-out apertures into other skies), James Turrell's Skyspaces (a rectangle of real sky framed so hard it stops looking real), Hiroshi Sugimoto's seascape long-exposures (the horizon as a single grey decision line), and the cold blue hour of Caspar David Friedrich. Everything floats; nothing is anchored; gravity is a rumour. The interface should feel like it was *found drifting* rather than *designed and shipped* — slightly off-true, hand-balanced, with the gentle wrongness of a dream where the clouds are indoors. ## Layout Motifs and Structure The page is a **single horizontal drift** — not a scroll-down site but a **slow lateral pan across a panoramic sky**, like walking the length of a very long mural. Sections are not stacked; they are **sky-fragments suspended at different depths and heights** along the pan, connected by nothing but empty air (heavy `ma` negative space — the void between fragments is the point, occupying 55–65% of every viewport). Five fragments total: 1. **Aperture** — the title fragment: a hard-edged rectangle cut out of the dim ground, through which a *brighter, impossible sky* shows. The wordmark sits inside the cut. 2. **The Drifting Banks** — three or four "open questions about the future" rendered as cloud-masses at different altitudes, each labelled with a quiet phrase, no numbers visible until hover. 3. **Horizon Line** — a single razor-thin line crossing the full width: the page's one moment of certainty, annotated sparsely. 4. **Falling Upward** — a fragment where small objects (a key, a stone, a door) drift *up* out of frame, illustrating "what resolves and leaves the sky." 5. **Still Watching** — the closing fragment: an empty framed rectangle of plain twilight, a Turrell Skyspace, with one line of text. No CTA, no email field, no footer links cluster. There is **no top navigation bar**. Movement happens via a **thin altitude-rail on the right edge** — a vertical line with five small notches, one per fragment; the active notch glows faintly. Drag-to-pan, scroll-to-pan, and arrow-keys-to-pan all work; the page never jumps, it *eases* across like a slow tide (long durations, 1100–1600ms, gentle easeInOutSine). Composition is deliberately **asymmetric and slightly tilted** — fragments sit at ±0.4° to ±1.2° rotations, never perfectly level, as if hung by an inattentive curator. Layered depth is real: a far cloud-haze layer pans at 0.25×, a mid layer at 0.6×, the fragments at 1×, and a single near "dust mote" layer at 1.3× (this is the *only* parallax — restrained, not the usual everywhere-parallax). ## Typography and Palette **Type system (Google Fonts only):** - **Display / wordmark / fragment titles:** `Fraunces` (variable, optical sizing on, weights 300–500, soft "wonky" axis nudged up) — a "surreal serif": warm, slightly drowsy, with ball terminals that look hand-cut. Used very large (clamp 3rem → 7rem) for fragment titles, set in low-contrast soft weights, letter-spacing `-0.01em`, often in lowercase. Fraunces' optical wobble suits the dreamscape's "found, not designed" feeling. - **Body / annotations / micro-labels:** `Spectral` (weights 200, 300, 400; 200 italic for asides) — a screen-built serif with a calm, literary, almost dusk-lit color on the page. Used at 1.05rem–1.2rem with generous 1.75 line-height. Annotations on the horizon line use Spectral 200 italic, letter-spacing `0.02em`. - **The single mono accent:** `Spline Sans Mono` (weight 300) — used *only* for the hover-revealed probability readouts (e.g. `0.41`) and the altitude-rail notch numbers. Deliberately quiet, low-opacity, never the main voice — a refusal of the corpus's mono-dominant convention by demoting mono to a whisper. **Palette — cold twilight, no warm gradients:** - `#10131C` — **Nightground**: the deepest base, near-black with a blue bias. The void between fragments. - `#1C2333` — **Dusk Slate**: primary panel/ground tone, a step up from Nightground for the dim mid-field. - `#2E3A52` — **Storm Steel**: cloud-mass mid-tone, the body of the drifting banks. - `#7E93B8` — **Pale Altitude**: muted periwinkle-grey for body text and thin lines — the color of a sky losing its light. - `#C8D4E6` — **Cirrus**: high-value cool whisper-blue for fragment titles and the bright "impossible sky" inside the Aperture cut. - `#E8D9C4` — **Stolen Daylight**: a single restrained warm sand tone, used at most 4% of surface area — only as the glow leaking through the Aperture cut and the active altitude notch, so warmth reads as *something forbidden showing through*, not as the page's temperature. Gradients, if used at all, are **vertical atmospheric fades within a 30° hue band** (Nightground → Dusk Slate → Storm Steel), never the warm sunset gradient the corpus over-uses. Overall feel: monochrome-leaning, cool, high *value* contrast but low *hue* contrast. ## Imagery and Motifs - **Magritte aperture-cuts:** the recurring device — a hard rectangle or door-shape cut out of one layer to reveal a *different sky behind it*. Render as CSS `clip-path` windows with a 1px Cirrus inner-stroke and a faint Stolen Daylight glow on the inner edge. Never a photo — the "sky behind" is a soft procedural noise-and-gradient field, generated, not stock photography (a rejection of the 98% photography corpus norm). - **Cloud-masses as soft generative blobs:** each "market" is a slow-morphing cloud built from 3–5 overlapped, heavily-blurred radial gradients (`filter: blur(40–70px)`), drifting on long sine paths, never crisp. They have *no card chrome* — no border, no shadow-box, no rounded rectangle. The label floats beside the cloud in open air. - **The one Horizon Line:** a 1px line in Pale Altitude crossing full width, with 4–6 tiny tick-marks and Spectral-italic annotations hung below it at irregular intervals. This is the page's only "data" gesture — a single line standing in for an entire dashboard. - **Falling-upward objects:** small line-drawn silhouettes (a key, a smooth stone, a plain door, a paper boat) rendered as thin SVG strokes in Pale Altitude, slowly translating *upward* and fading at the top of the frame — "questions that resolved and left the sky." - **Dust motes:** a sparse near-layer of 12–20 tiny semi-transparent Cirrus dots drifting on independent slow paths, the only fast-ish motion, giving depth to the void. - **Turrell Skyspace frame:** the closing motif — a perfectly plain rectangle of flat Dusk-Slate-to-Storm-Steel gradient, framed by a thick Nightground border with a hairline Cirrus inner edge, doing nothing, meaning everything. - **Texture:** an extremely faint film-grain overlay (2–3% opacity, animated jitter at ~8fps) over the whole page, so the dim fields never band — the grain of a long-exposure negative, not a paper texture. ## Prompts for Implementation Build sora.markets as **one HTML page, one CSS file, one ES module** — no framework, no build step. The experience is a **90-second slow lateral pan across a panorama of impossible skies**, narrated only by the fragments themselves. - **There is NO:** call-to-action button, pricing block, stat-grid, "how it works" 3-column row, testimonial carousel, logo wall, email-capture field, FAQ accordion, signup form, cookie banner, chatbot bubble, sticky header, or footer link-farm. If a section feels like it wants a "Get Started" button, replace that urge with **empty sky**. - **Pan mechanics:** the body is a wide horizontal track (≈500vw). Scroll wheel, drag, and ← → keys all advance the pan; never snap-jump — `transform: translateX()` eased over 1100–1600ms with `cubic-bezier(0.37, 0, 0.18, 1)` (long, calm, tide-like). A right-edge **altitude-rail** (vertical line, 5 notches) shows position; clicking a notch eases to that fragment. Respect `prefers-reduced-motion` by disabling the parallax layers and dust motes, keeping only the pan. - **Layer parallax (restrained, the ONLY parallax):** far haze 0.25×, mid clouds 0.6×, fragments 1×, dust motes 1.3×. Nothing else parallaxes — no parallax on text, no parallax on the rail. - **Cloud-mass behavior:** each cloud is a `div` of stacked blurred radial-gradients animated with `@keyframes` on a 30–60s loop (gentle scale + translate + opacity breathing), plus a slow hue-rotate of < 8°. On `pointerenter`, the cloud's label reveals a **Spline Sans Mono probability** (e.g. `0.41`) that fades in over 700ms beneath the phrase, and the cloud thickens slightly (opacity +0.08). No flip, no tilt-3d, no magnetic cursor — the interaction is *almost nothing*, on purpose. - **Aperture cut (hero):** the title fragment is a rectangle with `clip-path` revealing an inner layer that is brighter (Cirrus + a Stolen-Daylight radial glow) and animates with a slow drift; the wordmark "sora.markets" in Fraunces lowercase sits *inside* the cut, with the inner sky visibly drifting behind the letters (use a second clip-path or `background-clip: text` trick on a duplicated layer). Letters fade in one at a time over 2.5s on load, like clouds resolving. - **Horizon Line reveal:** when the pan reaches fragment 3, draw the 1px line left-to-right via `stroke-dashoffset` over 1800ms (`path-draw-svg`), then fade in the Spectral-italic tick annotations with a 120ms stagger. - **Falling-upward fragment:** 4–5 SVG line-objects translate upward on independent 14–22s loops, fading from 0.5 → 0 opacity in the top 20% of the fragment, respawning at the bottom. - **Closing Skyspace:** a plain framed gradient rectangle; one line of Spectral text below it ("watch long enough and the question becomes weather"). The altitude-rail's 5th notch glows Stolen Daylight when reached. End. No newsletter, no "back to top," no socials row. - **Grain & atmosphere:** full-page fixed `::after` with an SVG `feTurbulence` grain at 2–3% opacity, position-jittered via JS at ~8fps. All transitions favor `ease-in-out-sine`, durations ≥ 600ms — nothing on this site is fast. - **Storytelling spine:** Aperture (a window opens) → Drifting Banks (the open questions hang in the air) → Horizon Line (the one thing we're sure of) → Falling Upward (things resolve and leave) → Still Watching (the empty frame, the patience). The user should leave feeling they *witnessed weather*, not that they were *sold a product*. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Horizontal slow-pan panorama instead of vertical scroll** — the entire site is one lateral mural traversed like a Turrell Skyspace walk, with `ma`-negative-space as 55–65% of every viewport. The corpus is overwhelmingly vertical/centered/card-grid (92% card-grid, 80% centered); this has no cards and no vertical scroll at all. 2. **Cold cool twilight palette in a corpus that is 98% warm + 94% warm-gradient** — Nightground/Dusk Slate/Storm Steel with only a 4%-coverage "forbidden" warm sliver leaking through one aperture-cut. Inverts the dominant temperature convention entirely. 3. **Generated/procedural skies, never photography** — clouds are blurred-radial-gradient blobs and noise fields; the corpus is 98% photography. Zero stock imagery. 4. **Mono typography demoted to a 300-weight whisper** — `Spline Sans Mono` appears only in hover-revealed `0.41`-style readouts and rail notch numbers, refusing the 94% mono-dominant convention by making mono the quietest voice on the page. 5. **Anti-interaction interaction model** — no magnetic cursor, no tilt-3d, no spring overshoot, no card-flip; the strongest gesture is a label fading in over 700ms. Deliberately rejects the corpus's 89% cursor-follow / 89% parallax-everywhere / 83% spring stack, keeping exactly one restrained 4-layer parallax and nothing else. 6. **A prediction-market product with no urgency UI** — zero CTAs, zero pricing, zero stat-grids, zero leaderboards; "trade now" energy is structurally replaced with empty sky and a Spectral-italic line about watching weather. **Chosen seed/style:** `surreal dreamscape promo` — *aesthetic: surreal, layout: horizontal-scroll, typography: serif-revival, palette: midnight-blue, patterns: path-draw-svg, imagery: generative-art, motifs: aurora-lights, tone: mysterious-moody* **Avoided overused patterns from frequency analysis:** hand-drawn (94%), glassmorphism (84%), card-grid (92%), full-bleed-everywhere, centered (80%), warm palette (98%), warm gradient (94%), photography imagery (98%), mono-dominant typography (94%), parallax-everywhere (89%), cursor-follow (89%), spring (83%), magnetic (78%), stagger-as-default (70%), pastoral-romantic tone (33%), warm-inviting tone (21%).