# Design Language for sora.garden ## Aesthetics and Tone **Concept: The Marble Observatory — retro-futuristic contemplation suspended between eras.** `sora` is Japanese for *sky*. A garden is a designed wilderness — nature subjected to intention. This site sits at the strange intersection of a 1960s Space Age observatory and a formal Japanese stone garden: marble surfaces polished to cold perfection, rendered under the soft amber glow of cathode-ray instrumentation. Imagine a garden pavilion built in 1968 by architects who believed the future would be made of travertine and titanium — where the stone is cool to the touch but the readout dials glow warm, and the silence is total. The aesthetic is **retro-futuristic minimalism**: not the neon-saturated vaporwave interpretation, but the austere, confident version — Stanley Kubrick's *2001* reimagined as a garden. Marble as the primary material. Geometric precision as the grammar. The future as it was imagined before it became ironic. **Tone:** Unhurried, ceremonial, slightly monastic. This is a site that asks you to pause. No urgency. No conversion pressure. The absence of noise is the message. Every element earns its place. ## Layout Motifs and Structure **Primary structure: split-screen architecture with gravitational asymmetry.** The viewport is divided vertically into two unequal panels — not 50/50 but a deliberate 38/62 golden-ratio split. The left panel is a fixed marble surface: a deep-textured stone field rendered as a full-height CSS background with fine veining lines drawn as SVG overlays. This panel does not scroll. It anchors the composition. The right panel is the live zone: content scrolls here while the left marble field holds absolutely still, creating a parallax-like temporal contrast without using parallax. As text rises and fades in the right panel, the stone on the left witnesses it, unmoved. **Structural specifics:** - **Left panel (38vw)**: Marble texture field. A single floating Lottie animation plays — a slowly rotating geometric instrument (astrolabe-adjacent) that breathes at 0.3 cycles per minute. The instrument hovers at vertical center, floating upward and downward by 12px in a 8-second cycle. No text. - **Right panel (62vw)**: Primary reading zone. `sora.garden` wordmark in Cormorant Garamond at the top. Below: three to four content sections that scroll smoothly. Each section begins with a one-line header in small caps, followed by body text set in clean, tight columns. - **Floating elements**: Thin horizontal rules at irregular intervals — not separating content but *punctuating* it, like lines scored into stone. Each rule has a small diamond marker at its left terminus. - **Vertical text rail**: Along the far left edge of the left panel, a single vertical label — `sora.garden` in tiny caps, rotated 90 degrees, set in the lightest palette tone. A coordinate system printed on stone. - **No hero image, no cards, no grid**: The site is one continuous reading experience. The split is the drama. The marble is the backdrop. **Mobile adaptation**: Below 768px, the left panel collapses to a horizontal marble header band (100vw × 40vh) pinned to top. The Lottie instrument scales down and centers. Content flows beneath in a single column. ## Typography and Palette **Primary typeface: [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** — the quintessential Garamond revival on Google Fonts. Used for the wordmark, section headers, and all display text. The italic variant carries emotional weight; the roman carries authority. Set at extreme scale contrast: 88px italic for the hero wordmark, 13px roman small-caps for section labels. Garamond's narrow proportions and high x-height work with the split-screen — text doesn't fight for width. **Secondary typeface: [DM Mono](https://fonts.google.com/specimen/DM+Mono)** — for coordinates, labels, metadata, and the vertical rail text. Monospace as scientific notation, not as tech-bro aesthetic. The rigidity of DM Mono counterweights Cormorant's calligraphic warmth. **Analogous palette — stone, sky, amber:** The analogous family moves through warm gray into cool sage into pale gold — the precise color neighborhood of an Italian marble at dusk. | Role | Name | Hex | |------|------|-----| | Ground (marble field background) | Carrara White | `#F2EFE9` | | Deep ground (right panel bg) | Linen Ash | `#E8E2D9` | | Primary text | Nero Veining | `#2C2825` | | Secondary text / labels | Warm Dusk | `#7A7268` | | Accent 1 (Lottie instrument, rules) | Sage Bronze | `#8A9182` | | Accent 2 (hover states, diamond markers) | Pale Amber | `#C8A96E` | | Accent 3 (active states, glow) | Deep Saffron | `#B07E3A` | The palette has zero pure whites and zero pure blacks. All tones are pulled from the marble — the family feels like one material seen in different lights. ## Imagery and Motifs **Marble texture as the foundational surface.** The left panel's marble is not a photograph — it is constructed from CSS and SVG. A `#F2EFE9` base with three overlapping SVG `` effects: `feTurbulence` for the stone grain, `feColorMatrix` to tint veins toward `#D4CCBF`, and fine hairline `` elements tracing three primary veins across the field. The effect is referential — it reads as marble — but it is entirely fabricated from code. This matters: nothing about this site is a photograph. **Lottie animation: the suspended instrument.** A single Lottie animation occupies the center of the left marble panel. The animation depicts a wireframe geometric instrument — part astrolabe, part orrery, part mid-century scientific apparatus — rendered in `#8A9182` Sage Bronze on the marble ground. The instrument rotates with extreme slowness: one full revolution per 40 seconds. It floats vertically in a `transform: translateY()` CSS loop, rising and falling 12px over 8 seconds. There is no interaction. The instrument simply *exists*, as a garden ornament exists. **Floating elements:** Three categories of floating decorative elements appear in the right panel between sections: 1. **Diamond rule markers** — SVG `◆` at 8px, in `#C8A96E`, positioned at the left edge of horizontal rules. These float with a subtle vertical oscillation (3px, 4-second cycle, `ease-in-out`). 2. **Coordinate fragments** — Small DM Mono text fragments (`35.6762° N`, `139.6503° E` — Tokyo coordinates, sora's origin) that appear in the margins of body text at near-zero opacity (0.08), slightly rotated (±2deg), as if watermarked into the stone. 3. **Thin orbital rings** — Pure CSS `border-radius: 50%` circles, 2px stroke in `#8A9182`, appearing behind section headers as quiet orbital markers. They animate: a slow clockwise rotation (one revolution per 60 seconds) at 12% opacity. **No photography. No stock imagery. No icons from libraries.** ## Prompts for Implementation **The story to tell.** A visitor arrives at `sora.garden` the way one arrives at a Japanese rock garden — there is no mission statement, no call to action, no pricing table. There is a garden. The garden is made of marble and silence and the slow rotation of a suspended instrument. The visitor reads. The stone does not scroll. That is all. **Hero section (right panel top):** `sora.garden` in Cormorant Garamond Italic, 88px, `#2C2825`. Below it, a single line in DM Mono small caps, 11px, `#7A7268`: `a cultivated silence`. A diamond rule follows. This takes up the full first viewport height on the right side. No scroll cue — the visitor discovers the scroll by reading. **Content sections (right panel scrolling):** Three sections, each beginning with a one-word header in Cormorant Garamond SC (small caps), 14px, letter-spacing 0.25em, in `#7A7268`. Body text in Cormorant Garamond roman, 19px, line-height 1.75, `#2C2825`. Each section ends with a thin SVG rule (1px, `#D4CCBF`) with a diamond at left. **Left panel permanence:** The marble field must not scroll, jitter, or react to mouse. It is stone. `position: fixed; left: 0; width: 38vw; height: 100vh`. The Lottie container centers absolutely within this. No hover effects on the marble. **Animation principles:** Only three animations run on this page — the Lottie instrument rotation, the instrument float, and the orbital ring rotation. All three are infinite CSS/Lottie loops. No scroll-triggered animations. No stagger reveals. No parallax. Motion is ambient, not reactive. **Implementation notes:** - Use [LottieFiles/lottie-web](https://github.com/airbnb/lottie-web) for the instrument animation. The Lottie JSON should describe a wireframe geometric shape rotating on its vertical axis. - The split at 38/62 should use `display: grid; grid-template-columns: 38vw 1fr` on the body. - Marble veining SVG should use `preserveAspectRatio="xMidYMid slice"` to fill the left panel regardless of viewport height. - Font loading: `font-display: swap` for both fonts. Load Cormorant Garamond weights 300, 400, 500, and the italic variants. Load DM Mono weight 400 only. ## Uniqueness Notes 1. **Static marble witness vs. scrolling content**: The left panel is architecturally frozen — it does not scroll, animate reactively, or respond to input. It watches. This creates an unusual temporal contrast that other split-screen designs avoid (most use the split for parallel scrolling, mirrored content, or side-by-side comparisons). Here the split is between *permanence* and *passage*. 2. **Lottie as garden ornament, not hero animation**: The corpus uses Lottie for loading screens, hero intros, and micro-interactions (reactive to user action). This design uses Lottie as a *static ornament* — the animation runs but never changes state based on user input, never serves narrative, and exists as pure ambient presence. The instrument is decoration, like a fountain in a garden. This is the first use of Lottie as purely atmospheric, non-communicative decoration. 3. **Marble constructed entirely from CSS/SVG, not photography**: Other designs using marble (marble-classical, 2%) use background-image photography. This design builds the marble from `feTurbulence` + `feColorMatrix` SVG filters — the texture is generated, not photographed. This maintains the site's internal logic (nothing is imported from outside; the garden is self-contained). 4. **Analogous palette derived from material, not mood**: Most analogous palettes in the corpus are color-theory exercises (adjacent hues on the wheel chosen for harmony). This palette is derived from a specific material — Italian Carrara marble — and stays within the stone's actual color range. The result is unusual: warm grays and pale ambers that read as analogous but don't feel like a designed palette. **Seed**: aesthetic: retro-futuristic, layout: split-screen, typography: garamond-classic, palette: analogous, patterns: lottie-animation, imagery: marble-texture, motifs: floating-elements, tone: minimal **Avoided (overused in corpus)**: hand-drawn aesthetics, editorial flow layout, parallax animations, stagger reveals, centered composition, full-bleed imagery, warm color palette (generic), gradient backgrounds