# Design Language for sora.quest ## Aesthetics and Tone sora.quest is a **surreal dreamscape promo for an expedition into a sky that does not exist** — a hand-drawn cartography of impossible weather. "Sora" is the Japanese word for *sky* (空), and this site treats that word as a literal place: a vertical atlas of cloud-strata, drifting horizons, and stairs of light that lead nowhere and everywhere. The `.quest` is not a product funnel — it is a *field journal*. The site reads like the recovered notebook of someone who walked off the edge of the ground and kept going up, sketching what they saw: a cumulus shaped like a sleeping animal, a staircase of clouds with a door at the top, three suns at different altitudes, a flock of paper birds migrating sideways through a rainstorm of light. The tone is **dreamy-ethereal** with a thread of quiet melancholy — the mood of a Magritte canvas crossed with the margin doodles of a Studio Ghibli storyboard. Nothing is sharp. Edges are slightly soft, like a watercolor that hasn't fully dried. The whole experience floats: text rises into view like it's being remembered rather than loaded, clouds parallax at different speeds the way real distant things do, and the cursor leaves a faint contrail of light that fades after a breath. There is a deliberate *unhurriedness* — this is a place to drift through, not click through. Visitors should feel like they've wandered into someone's lucid dream and been handed the journal to keep reading. The defining gesture: **the horizon line is never where you expect it.** It tilts. It doubles. It sits at the top of the screen in one section and the bottom in the next. The ground is always somewhere else. ## Layout Motifs and Structure The layout is a **single continuous vertical scroll — an "altitude column"** — not a card grid, not a bento box, not a dashboard. The registry shows 92% of sibling sites lean on card-grids and 80% on rigid centering; sora.quest refuses both. Instead the page is read as a *climb*: you scroll *upward in fiction even as you scroll down in the browser*, passing through named altitude bands — "The Last Solid Thing," "Where the Birds Turn Sideways," "The Staircase Cloud," "Three Suns," "The Door at the Top," "What I Saw Looking Back Down." Each band is a near-full-viewport panel with generous breathing room, content drifting off-center on an **organic-flow** axis — never two consecutive panels aligned the same way. Spatial rules: - **Floating elements, never gridded.** Text blocks, sketch-cards, and journal annotations sit at irregular positions — some hugging the left margin, some near the right edge, some tilted 2–4 degrees as if pinned loosely. A faint hand-ruled baseline (1px, dashed, low opacity) runs behind some of them like notebook lines, but the content ignores it. - **Layered cloud-strata.** Each panel has 3–5 parallax layers: far haze, mid clouds, near wisps, the journal layer, and a foreground "rain of light" layer. They move at staggered speeds on scroll so depth feels physical. - **The migrating horizon.** A single thin luminous line is present in every panel but at a different height and tilt each time — top, then upper-third, then bottom, then doubled (two horizons, one faint), then gone entirely in "The Door at the Top," then back at the very bottom for the final look-down. - **A vertical "altitude ribbon" on the far left** — a thin hand-drawn scale with irregular tick marks and altitude labels in a doodled hand ("∞ ft," "still rising," "no idea," "above the birds"), filling in as you climb. This is the only persistent navigation, and it's more poem than menu. - No header bar. No footer block. No CTA band. No pricing tier. No stat grid. The journal simply ends with a hand-drawn arrow pointing back up the page and the words "go back down, if you want. it's still there." ## Typography and Palette **Typefaces — Google Fonts only:** - **Caveat** — the journal hand. Used for all annotations, altitude labels, marginalia, the altitude-ribbon ticks, and short interjections. Caveat's loose, airy ballpoint quality is the *voice of the explorer*. Set at 1.1rem–1.6rem, slightly rotated per instance (−3deg to +3deg), generous line-height (1.7). - **Fraunces** — the display and section-title face. A "soft serif" with optical sizing and a wonky, almost melting personality at large sizes — perfect for dreamy headers. Used for altitude-band names at clamp(2.8rem → 6rem), with the `SOFT` and `WONK` axes pushed high so the letterforms feel hand-shaped and a little unstable, like clouds. Italic for the most surreal panel titles ("Three Suns"). - **Spectral** — the body serif for the longer journal paragraphs. Calm, literary, comfortable for sustained reading. 1.15rem, line-height 1.85, max-width ~62ch, never justified. **Palette — a sky at an impossible hour:** - `#EAF0F6` — *high haze* — the dominant background, a pale luminous blue-white, the color of looking straight up on a bright overcast day. - `#1B2A41` — *deep altitude ink* — primary text and line work, a soft near-black navy, never pure #000. - `#7FB4D6` — *cloud shadow blue* — mid-tone for clouds, dashed baselines, the migrating horizon, secondary line work. - `#F4C95D` — *the three suns* — warm gold accent, used sparingly for the sun-discs, the contrail cursor glow, key hand-drawn arrows, and the filled portion of the altitude ribbon. - `#E8A7C0` — *rose-light rain* — a dusty pink, used only in the "rain of light" foreground particles and the doubled-horizon panel, giving a faint dawn-on-the-wrong-side feeling. - `#C9DCEA` — *paper-cloud* — the slightly-tinted "card" fill for sketch panels, barely distinct from the background, with a soft 24px blur shadow so cards feel like they're floating just above the page. Backgrounds shift subtly per altitude band: bottom panels are cooler and denser (`#DDE6EF`), top panels lighten almost to white (`#F2F6FA`) — you can feel the air thinning as you climb. ## Imagery and Motifs All imagery is **hand-drawn line illustration** — single-weight ink strokes (1.5px–2.5px), slightly wobbly, drawn as if with a fine liner pen, never photographic, never 3D-rendered. Recurring motifs: - **The staircase cloud** — a flight of steps made of stacked cumulus, with a small simple door at the top, drawn in outline only. This is the site's signature emblem and appears at three scales: tiny in the altitude ribbon, mid-size in its own panel, and huge and faint as a background watermark in the final panel. - **Sideways-migrating paper birds** — flocks of 5–12 minimal V-stroke birds, drawn flying *horizontally across* a panel that is itself about vertical climb, animated on a slow looping SVG path-draw. - **Three suns at different heights** — three identical thin-outline circles with short radiating ticks, placed at three altitudes in one panel, each casting a faint `#F4C95D` glow. - **The rain of light** — vertical streaks of faint gold and rose, falling *upward* in the panels above the birds, drifting normally below them. - **Cloud-creatures** — two or three clouds that, on close look, have the silhouette of sleeping animals (a curled cat, a whale, a folded crane) — drawn so the animal only resolves if you look for it. - **Hand-ruled notebook lines** — dashed `#7FB4D6` baselines at low opacity behind some text blocks, deliberately ignored by the text that sits near them. - **The altitude ribbon** — a thin vertical hand-drawn ruler down the left edge with irregular ticks and doodled labels, the only HUD element, drawn in the same liner-pen style as everything else. Decorative texture: a very faint paper grain over the whole page (subtle, ~3% opacity noise) so the digital sky feels like it's printed in a real notebook. ## Prompts for Implementation Build sora.quest as **one long single-page vertical HTML document** — six or seven altitude-band panels stacked in a single column, no SPA, no routes, no modals, no nav bar, no footer. The visitor scrolls top-to-bottom and is meant to feel they are *climbing through a sky*. Prioritize **atmosphere and slow narrative over information density**. There is no call-to-action. There is no pricing block. There is no testimonial row. There is no stat grid. There is no FAQ accordion. There is no email capture. There is no feature comparison. If you feel the urge to add a button that says "Get Started," draw a paper bird instead. Storytelling and motion guidance: - **Multi-layer parallax on every panel** — far haze, mid clouds, near wisps, journal layer, foreground rain-of-light — each at a different scroll speed. Use `transform: translate3d()` driven by scroll position; keep it buttery, no jank. - **The migrating horizon** — a single thin luminous line that changes height and tilt per panel. Animate its entrance: it should *draw itself* left-to-right (SVG `stroke-dasharray`) as the panel enters the viewport. - **Text arrives like a memory** — journal paragraphs and annotations fade-and-rise into place (`opacity 0→1`, `translateY 24px→0`, ~900ms ease-out), staggered word-group by word-group for the headers, line by line for body. - **Cursor contrail** — a faint `#F4C95D` glow trail follows the cursor and fades over ~700ms; on the "Three Suns" panel the trail picks up a second, rose-tinted echo. - **The staircase-cloud emblem** does an SVG path-draw reveal in its own panel, then the door at the top gently pulses (a slow 4s scale 1→1.03→1). - **The paper birds** loop forever along a hand-drawn SVG path, flying sideways; a few of them flap (tiny rotation on the V) on a desynced timer. - **The altitude ribbon** fills upward as you scroll, its doodled labels fading in one at a time as you pass their altitude. - **Rain of light** — small CSS/canvas particles, gold and rose, falling *upward* in upper panels, *downward* in lower panels, very slow, very faint. - **The final panel** ("What I Saw Looking Back Down") inverts everything: the horizon snaps to the very bottom, the giant faint staircase-cloud watermark sits behind the text, and the page ends with a hand-drawn arrow pointing back up and the line "go back down, if you want. it's still there." — then nothing. No footer. The dream just stops. - Use `prefers-reduced-motion` to disable parallax/particles and just present the journal as a calm static read — but keep the wobbly hand-drawn aesthetic intact. ## Uniqueness Notes Differentiators from other sites in the catalogue: 1. **The domain word "sora" is taken literally as the Japanese word for *sky* (空), and the entire site is a vertical "altitude column" — you scroll down the page while climbing up through fictional weather.** No sibling site builds its layout around the *meaning* of its domain word translated from another language, and the down-scroll/up-climb inversion is unique here. 2. **The migrating horizon line** — a single luminous stroke that changes height and tilt in every panel, doubling once and vanishing once — is a structural through-motif no other design uses. Most siblings anchor a hero and stamp card grids; sora.quest's only "grid" is a horizon that refuses to stay put. 3. **Surreal aesthetic at ~7% sibling frequency**, paired with **single-column layout (~17%)** and a **Magritte-meets-Ghibli-storyboard hand-drawn line style** — explicitly avoiding the catalogue's dominant card-grid (92%), centered (80%), glassmorphism (84%), and photography (98%) patterns. There is zero photography, zero glass, zero 3D render, zero dashboard, zero CTA/pricing/stat-grid. 4. **Falling-upward "rain of light"** and **cloud-creatures that only resolve if you look for them** — small surreal details that reward slow attention rather than fast scanning, reinforcing the "field journal you wandered into" framing. Chosen seed/style: **surreal dreamscape promo** — expressed as `aesthetic: surreal, layout: single-column, typography: soft-serif (Fraunces) + handwritten (Caveat), palette: ethereal-blue / pale-sky with gold + rose accents, patterns: parallax + fade-reveal + path-draw-svg + cursor-follow, imagery: hand-drawn line-illustration, motifs: flowing-curves / star-celestial (suns) / floating-elements, tone: dreamy-ethereal`. Avoided patterns from frequency analysis: card-grid (92%), full-bleed dashboard, centered (80%), glassmorphism (84%), photography (98%), warm/gradient default palettes, hand-drawn-as-cute-doodle cliché (kept it melancholic and surreal instead), and all CTA-heavy / pricing / stat-grid structures.