# Design Language for sora.market ## Aesthetics and Tone sora.market is a **dream-broker's atelier** — a place where impossible footage is traded like rare film stock. The governing metaphor is the *oneiric reel*: clips that could never have been shot, sold by the second. The aesthetic is **surreal-dreamscape**, but rendered with the cool precision of an editing suite rather than the cliché melt of Dali pastiche. Think a darkroom at 3am where the safelight is a soft sodium amber, the contact sheets float untethered, and every still wants to keep moving when you look away. The mood is **lucid, not chaotic** — surreal in *content* (a staircase that pours upward, a horizon that breathes, a moon dissolving into koi) but disciplined in *composition*. Nothing wobbles for the sake of wobble. The page behaves like a film projector that has become slightly self-aware: confident, hushed, faintly uncanny. Tone register: *mysterious-moody* crossed with *dreamy-ethereal*, with a thin spine of *elegant-sophisticated* so it never tips into a moodboard. The visitor should feel they have walked into a private screening that started before they arrived and will continue after they leave. No hard sell. No "Sign up free." The clips do the seducing. ## Layout Motifs and Structure The page is a **vertical sequence of seven "exposures"** — full-bleed stages stacked like frames on a 70mm strip, each one a single held shot that slowly transforms. This is *immersive-scroll* and *full-bleed*, deliberately **not** card-grid (the corpus is 92% card-grid; sora.market has zero cards). When a "gallery" of clips is shown, it is shown as a **slow horizontal film-strip that the page itself drives** — frames slide past at a projector's cadence, sprocket holes and all, never as a tiled mosaic. Structural rules: - **The Sprocket Rail.** A thin perforated vertical strip runs down the extreme left of every exposure — eight rounded rectangles per viewport, slowly travelling upward at ~6px/s, like film advancing through a gate. It is the only persistent UI chrome. Section labels hang off it like frame numbers ("EXP. 03 / KOI MOON"). - **Off-center gravity.** Content sits on a **3:5 asymmetric split** — image-event on the wider side, a narrow column of editorial caption on the other, the divide drifting a few percent per exposure so the rhythm never locks. *asymmetric* + *layered-depth*, never *centered*. - **Z-depth as narrative.** Each exposure has three planes: a far backdrop (atmosphere/grain), a mid plane (the impossible event), a near plane (a single floating caption card or a drifting dust mote). Scroll parallax moves them at three different rates so the dream has *volume*. - **Negative space is the safelight.** Generous *ma* — easily 35–45% of each exposure is quiet amber-dark void. The void is content; it is where the next dream is developing. - **No footer wall, no logo strip, no pricing tier, no stat grid.** The final exposure simply fades to black and a single line of mono type breathes at the bottom: a closing credit. ## Typography and Palette **Typefaces (all Google Fonts):** - **Display / exposure titles:** *Fraunces* — its optical "soft" axis and slightly melted serifs read like type seen through a heat shimmer. Used at oversized weights (96–180px), low-contrast tracking, almost always in the amber. - **Editorial captions / body:** *Spectral* — a calm screen-serif with enough warmth to feel like a film-festival programme note. 17–20px, generous leading (1.7). - **Frame numbers / technical labels / closing credit:** *Space Mono* — sparingly, uppercase, letter-spaced +0.18em. This is the projector's own handwriting. **Palette — "Sodium Safelight":** - `#0B0A10` — *vellum noir*, the base void (near-black with a violet undertone, never pure #000) - `#16121C` — *gate shadow*, slightly lifted panels and the sprocket rail - `#E8A23D` — *sodium amber*, the safelight — primary accent, used for display type and key glows - `#F4D9A8` — *projection cream*, soft highlights and caption text - `#7C9CC4` — *cold gel blue*, the cool counter-light that bleeds into surreal events (a moon, a pour of water) - `#C45A8D` — *darkroom rose*, rare third accent for the most uncanny moment (one exposure only) - `#9A8FA8` — *dust grey*, muted mid-tone for secondary text and grain Contrast is **moody, not harsh** — amber and blue glow *out of* the dark rather than sitting on it. Everything has a faint vignette and a 4–6% film-grain overlay. ## Imagery and Motifs This site does not use photography, hand-drawn doodles, or glassmorphic cards. It uses **rendered impossibilities**, each built in SVG/CSS so they can animate: - **The Sprocket Rail** — perforated film edge, eternally advancing (described above), with occasional single-frame "splices" (a hairline white flash) as section transitions. - **EXP. 01 — The Upward Pour:** a staircase rendered as ~24 stacked parallelogram steps in gate-shadow tone, with a ribbon of cold gel blue "water" flowing *up* it via an SVG path animation — gravity politely inverted. - **EXP. 02 — Breathing Horizon:** a single horizon line that is actually a slow sine-wave SVG, inhaling and exhaling over 14s; the amber "sun" on it never quite sets. - **EXP. 03 — Koi Moon:** a circle of projection cream that, on scroll, dissolves into ~9 organic-blob koi (true bezier bodies) swimming in cold blue, then reassembling. The corpus's one nod to "tropical-fish" but rendered as lunar phase. - **EXP. 04 — Dust Choreography:** the darkroom rose exposure — fifty 1–3px motes drifting on layered noise, forming and un-forming the shape of a hand reaching for a frame. - **EXP. 05 — The Contact Sheet that Moves:** the horizontal film-strip — eight "clips" as small framed rectangles with sprocket holes, each a tiny looping CSS animation (a door opening onto sky, rain falling sideways, a corridor folding). The page advances them; hover *slows* the one you touch, as if pinching the strip between two fingers. - **EXP. 06 — Vellum Burn:** a single frame slowly developing — a rectangle whose backdrop-filter / mask reveals an image of "nothing yet," edges scorching amber at the corners. - **EXP. 07 — Closing Credit:** black. One line of Space Mono. A last sprocket hole travels off the top of the screen. Decorative grammar throughout: **hairline frame brackets** at the corners of caption cards (┐ └ shapes, 0.5px, dust grey), faint **reel-counter ticks**, and a recurring **6° tilt** on floating elements that is corrected only on hover (the dream straightening itself when observed). ## Prompts for Implementation Build sora.market as **one HTML document, one CSS file, one ES module** — no framework, no build step, no service worker. It is a ~75-second walk through seven exposures on a sodium-lit void. There is **no CTA button, no pricing block, no stat grid, no testimonials, no email capture, no logo wall, no FAQ accordion, no contact form, no newsletter, no cookie banner, no chatbot.** If a "browse the market" affordance is needed, it is a single understated line of mono type near EXP. 05 that simply scrolls you into the film-strip. **Narrative structure (seven exposures, vertical scroll, projector-cadence entrances):** 1. **EXP. 01 — The Upward Pour.** Open mid-shot, no preamble. Fraunces title fades up out of the dark in sodium amber while the blue water begins climbing the inverted stair. Caption (Spectral, narrow column): a single sentence about footage that obeys no physics. Sprocket rail already advancing. 2. **EXP. 02 — Breathing Horizon.** Scroll-triggered: the horizon line begins its 14s inhale. Parallax: backdrop grain drifts slowest, the amber sun mid-rate, a single dust mote near-plane fastest. 3. **EXP. 03 — Koi Moon.** On entering viewport, the cream circle dissolves into koi (stagger the 9 blobs, spring easing, ~120ms apart), holds for a beat, then on continued scroll reassembles into the moon. This is the page's signature moment. 4. **EXP. 04 — Dust Choreography.** Darkroom-rose lighting fades in. Motes converge into the reaching-hand silhouette over ~2s using a path-following animation, then scatter when the exposure leaves the viewport. 5. **EXP. 05 — The Contact Sheet that Moves.** The horizontal film-strip auto-advances left at projector cadence (one frame per ~2.4s, with a faint splice-flash between). Each frame is its own micro-loop. Hover slows the touched frame to 0.2× and lifts it 4px on the near plane; the 6° tilt corrects to 0°. No click target required — the strip is the experience. 6. **EXP. 06 — Vellum Burn.** A single large frame "develops": a CSS mask wipes from center, corners scorch amber via animated box-shadow/filter. Caption: a line about every clip being one of one. 7. **EXP. 07 — Closing Credit.** Fade entire viewport to vellum noir. One centered line of Space Mono, letter-spaced, breathing at 0.6 opacity ↔ 1.0 over 4s. The final sprocket hole travels up and off screen, then nothing. **Motion principles:** - Everything moves at a **projector's patience** — 4–14s loops, nothing snappy, nothing bouncy-cute. Use long cubic-bezier ease-in-outs, not elastic overshoot. - **Scroll is the projector hand crank** — progress through exposures is scroll-linked, not auto-playing; the visitor controls the reel speed. - **Grain + vignette are always on**, applied as a fixed overlay (`mix-blend-mode: overlay`, ~5%). - **Cursor as a soft light:** a 240px radial sodium-amber glow follows the pointer at low opacity, very gently lagged (lerp 0.08) — it *reveals* faint detail in the void it passes over (subtle CSS mask or extra glow on hovered SVG). This is the one cursor-follow use, and it is *atmospheric*, not a mascot. - **Respect `prefers-reduced-motion`:** loops freeze at their most resolved frame (water mid-pour, koi as moon, motes as hand), grain becomes static, scroll-linked transforms collapse to simple fades. - Honor the storytelling above all: this is a *screening*, not a landing page. If a "conversion" instinct appears, suppress it — let the impossible footage be the only argument. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Zero cards in a 92%-card-grid corpus.** sora.market refuses the grid entirely — its "gallery" is a single page-driven horizontal film-strip with sprocket holes, not a tiled mosaic. The unit of layout is the *exposure* (a full-bleed held shot), never the rectangle-with-shadow. 2. **Surreal content, editing-suite discipline.** Most surreal/dreamscape sites melt and wobble for effect; this one keeps Swiss-tight composition (3:5 asymmetric splits, hairline frame brackets, mono frame numbers) and puts *all* the strangeness into the rendered impossibilities (water flowing up, a moon that swims, a horizon that breathes). Surreal of subject, not surreal of layout. 3. **No glassmorphism, no hand-drawn, no photography** — the three most saturated imagery/aesthetic conventions in the corpus (84% / 94% / 98%) are all absent. Everything visual is CSS/SVG-rendered "footage that was never shot," in a sodium-darkroom palette (`#0B0A10` / `#E8A23D` / `#7C9CC4`) that reads as a 3am editing bay, not a moodboard. 4. **The Sprocket Rail as the only chrome.** Persistent UI is reduced to one perpetually-advancing perforated film edge with hanging frame-number labels — no nav bar, no footer wall, no logo strip. Navigation *is* the reel. 5. **Cursor-as-safelight, not cursor-as-toy.** The one cursor-follow effect is a lagged sodium glow that reveals latent detail in the dark — atmospheric world-building, not a magnetic blob mascot. **Chosen seed / style:** `surreal dreamscape promo` (fallback selection — no seed supplied in assignment; `surreal` aesthetic sits at ~7% in the corpus, `mysterious-moody`/`dreamy-ethereal` tones each ~7–11%, all underused). **Avoided patterns from frequency analysis:** card-grid (92%), glassmorphism (84%), hand-drawn (94%), photography (98%), bento-box, dashboard, mono-as-primary-body-font (94% — here Space Mono is used only for technical labels), bouncy/elastic micro-interactions, CTA-heavy hero, pricing tiers, stat grids.