# Design Language for sora.garden ## Aesthetics and Tone sora.garden is a **garden that grows in the sky** — *sora* (空) is the Japanese word for sky, emptiness, the open air — and this site treats that pun with total literal-minded seriousness. It is the field journal of an impossible horticulture: beds of cumulus tilled into rows, trellises strung between contrails, seedlings that root in stratospheric haze and flower as weather. The tone is **surreal but unhurried** — Magritte by way of a botanical almanac, a dream remembered precisely enough to be diagrammed. Nothing here is "cute." It is calm, slightly uncanny, faintly Victorian-scientific in its certainty: a horticultural society that happens to garden at 9,000 metres and keeps meticulous notes about it. The dominant feeling is **upward drift** — every element wants to rise, settle, and rise again, the way a balloon caught under a ceiling nudges along it. Cool light, thin air, long silences between observations. Where most of the corpus reaches for hand-drawn warmth and frosted glass, this leans into a **flat, matte, almanac-print surrealism**: paper-pale grounds, ink-thin botanical engravings of clouds-as-plants, and a single saturated sky-blue used like a stamp. ## Layout Motifs and Structure The structure is an **altitude column** — the whole page is one tall vertical scroll read as a climb, with a permanent left-margin **altimeter rail**: a hairline scale ticking off "elevations" (Ground · Haze Line · The Beds · Trellis · Bloom · Open Sky) that fills as you ascend, like mercury in a thermometer laid on its side and stood up. There is **no card grid anywhere**. Each section ("elevation") is a full-height stanza composed asymmetrically: a narrow ruled column of *journal text* (date, observed conditions, planting notes set as a typed table) pinned to one margin, and across the open field a large **flat-color botanical plate** — a cloud rendered as if it were a specimen pressed in an herbarium, labelled with leader lines and italic Latin. Margins are generous and deliberately *empty* — the sky is mostly nothing, and the layout honours that. Sections do not slam together; they **dissolve** into one another with a band of graded haze, so the page has no hard horizontal seams. A thin meridian line runs down the page just off-center, the "plumb line" the whole garden hangs from. On wide viewports the journal text and the plate sit side by side with a wide gutter; on narrow viewports the plate floats full-width and the journal text tucks beneath it like a caption. ## Typography and Palette **Fonts (Google Fonts only):** - **Display & elevation headers — `Fraunces`** (variable; use the "Soft" optical axis at large sizes, lighter weights 300–400, with a touch of italic for Latin specimen names). A warm, slightly wonky old-style serif with floral terminals — it reads as *botanical almanac* without tipping into costume. Set headers in title case, wide letter-spacing, never bold-shouty. - **Journal body, tables, leader-line labels — `Newsreader`** (400 / 400-italic / 500). A literary serif designed for long reading with excellent oldstyle figures — perfect for the ruled "observation" tables (dates, altitudes, conditions). Italic carries the species epithets. - **Micro-labels, altimeter ticks, captions — `IBM Plex Mono`** (400, small, tracked out). Used *sparingly* for instrument-panel numerals: altitudes in metres, plate numbers ("PL. VII"), grid coordinates. Lends the dream a clipboard. **Palette (minimum three; full set):** - `#0E1B2A` — **Deep Stratosphere** (near-black ink blue; primary text, engraving strokes) - `#2F6FB0` — **Stamp Sky** (the one saturated accent — labels, the altimeter mercury, key strokes) - `#A9C7DE` — **Haze** (mid blue-grey; secondary fills, the dissolve bands, distant cloud-plates) - `#F4F1E8` — **Almanac Paper** (warm paper ground for the whole page) - `#E9EEF2` — **Cold Light** (cooler off-white for upper "elevations," so the page literally gets thinner-aired as you climb) - `#C9B79A` — **Dried Stem** (a single muted tan — the only warm note; used for ruled table lines and the herbarium leader lines, like aged thread) ## Imagery and Motifs - **Clouds-as-botanical-plates:** the spine of the imagery. Each elevation gets one large flat-color SVG "plate" of a cloud drawn like an 18th-century engraved specimen — thin `#0E1B2A` contour strokes, flat `#A9C7DE` shading, no gradients-as-render (only the inter-section haze uses gradient). PL. I — *a cumulus seedling in a terracotta pot*, two cottony leaves unfurling. PL. III — *a cirrus vine on a wire trellis*, wispy tendrils labelled with leader lines. PL. V — *a stratus hedge clipped flat*, a topiary wall of grey vapour. PL. VII — *a cumulonimbus in full bloom*, the anvil drawn as a vast pale flower-head. PL. IX — *open sky, the empty bed*, just ruled soil-lines fading into nothing. - **The altimeter rail:** a left-margin instrument — hairline scale, mono numerals in metres, a slowly rising `#2F6FB0` fill. Doubles as the nav. - **Leader lines & specimen labels:** thin `#C9B79A` lines with tiny circle terminals pointing from the plates to italic `Newsreader` captions in the margin — "*Cumulus humilis* — sown 04:12, full sun, soil: haze, fine." - **Drifting seeds:** a scattering of tiny pale ovals (dandelion-clock seeds / cloud-spores) that slowly rise across the whole page behind the text, the only persistent motion. Never more than a handful on screen. - **Ruled "soil":** faint horizontal hairlines at the foot of each section, like furrows, that thin and vanish as elevation increases. - **A recurring trellis lattice:** a sparse diagonal grid of thin lines in `#A9C7DE`, used as a section-backdrop where vine-clouds climb. ## Prompts for Implementation Build as **one HTML page, one CSS file, one ES module** — no framework, no build step. The page is roughly a 90-second ascent through a sky garden, told as journal entries climbing from "Ground" to "Open Sky." It must read as a *story of a single growing season at altitude*: seed → seedling → vine → hedge → bloom → the bed left empty, ready again. **Animation & interaction (favour drift over flash):** - The default motion is **buoyant rise** — elements enter by floating *up* into place over ~1.2s with a long ease-out and a faint overshoot-and-settle, as if released underwater. No bouncy springs, no magnetic cursor chasing. - The **altimeter mercury** fills smoothly tied to scroll position; the active elevation label brightens to `#2F6FB0`. - **Inter-section haze dissolves:** as one section leaves, a band of `#A9C7DE`→transparent gradient grows and the next section's paper colour blends in — the page should never show a crisp horizontal cut. - **Plate assembly:** each cloud-plate's contour SVG draws itself in (stroke-dashoffset) over ~1.5s when it enters, then the flat `#A9C7DE` shading fades up beneath the lines; leader lines extend last, terminal-dot first, then the italic label types in slowly (a few chars/sec — restrained, almanac-precise, not a clattering typewriter). - **Drifting seeds:** a tiny `requestAnimationFrame` field of ~6–10 pale ovals translating slowly upward + gentle horizontal sway, wrapping from bottom to top; subtle, behind text, paused when offscreen. - **Specimen hover:** hovering a plate (or focusing it) gently raises it ~6px and brightens its label — the specimen "perks up." That is the only hover effect; nothing flips, nothing tilts in 3D. - The page **gets visually thinner as you climb** — paper shifts `#F4F1E8`→`#E9EEF2`, strokes get hairline-finer, soil-lines disappear, more empty margin — so altitude is felt, not just read. **Bias toward a full-screen narrative experience.** **Do NOT include:** CTA buttons, pricing tables, stat-counter grids, "trusted by" logo walls, testimonial sliders, newsletter capture, FAQ accordions, contact forms, cookie banners, chat widgets, hero video, social-proof badges. The only "destination" is the final empty sky-bed. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **No card grid, no full-bleed photo hero, no glassmorphism** — ~92% of the corpus uses card-grid, ~85% full-bleed, ~84% glassmorphism, ~98% photography. This design has *zero* of those: it is a single ruled altitude-column on warm almanac paper, with all imagery drawn as flat-color engraved "specimen plates" (vector only, the antithesis of the corpus's photo-default). 2. **A surreal premise carried with deadpan scientific rigor.** Surreal appears in only ~7% of the corpus; here the conceit (clouds farmed as plants at altitude) is treated as straight-faced horticultural fieldwork — herbarium leader lines, Latin epithets, mono altimeter numerals — rather than whimsical decoration. 3. **An altimeter rail as navigation, and a page that physically thins as you scroll.** Instead of the corpus-typical parallax/cursor-follow/magnetic toolkit, motion here is "buoyant rise" + scroll-linked mercury + haze dissolves between seamless sections, plus a literal cooling of the palette and fining of strokes with elevation — interaction that *means* the climb. 4. **A near-monochrome cool blue palette anchored by one stamp accent** (`#2F6FB0`), against the corpus's overwhelmingly warm/gradient default — with a single muted tan (`#C9B79A`) used only as "aged thread" for ruled lines. Document chosen seed/style: **surreal dreamscape promo** (chosen as a fallback, no seed supplied in assignment; "surreal" / "ethereal" sit at the underused end of the frequency analysis). Referenced avoided patterns from frequency analysis: card-grid (~92%), full-bleed (~85%), centered (~80%), glassmorphism (~84%), hand-drawn (~94%), photography (~98%), warm palette (~98%), gradient palette (~94%), parallax (~89%), cursor-follow (~89%), spring (~83%), magnetic (~78%), tilt-3d (~31%) — none used here.