# Design Language for sora.garden ## Aesthetics and Tone sora.garden channels a generative aesthetic — the algorithmic beauty, emergent complexity, and organic computational patterns of procedural art applied to a digital garden celebrating 空 (sky/emptiness) and 소라 (shell/conch). The site grows — with the branching logic of L-system fractals, the emergent beauty of cellular automata, and the quiet wonder of watching algorithms produce garden-like forms from simple rules. Inspiration draws from the computational botany of Przemyslaw Prusinkiewicz, the generative compositions of Casey Reas, the organic algorithms of Karl Sims, and the procedural landscapes of Inigo Quilez's shader art. The tone is conversational — approachable language that invites visitors to tend their corner of this algorithmic garden, sharing sky observations like exchanging seeds between neighbors. The generative language transforms sora.garden into a living computational garden where sky phenomena seed algorithmic growth patterns, each shell spiral a natural algorithm that the site's generative systems echo in code. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture — content in generous editorial spreads creating the quality of a gardening journal where sky observations and shell collections are documented with editorial care. **Magazine Spread Architecture:** - Two-column asymmetric spreads: 55%/45% content-to-visual ratio - Content column: max-width: 480px with generous 32px gutters - Visual column: generative canvas elements and botanical compositions - Full-width divider sections between spreads - Container: max-width: 1080px centered with editorial margins - The magazine spread creates the journal quality of a naturalist's field notebook elevated to editorial design **Section Sequence:** 1. **Cover:** Hero with playful-rounded title on ethereal-blue generative background, layered-depth algorithmic garden forms, minimal seed-pattern imagery 2. **Garden Plot:** Featured sky-garden in magazine spread — magnetic generative-growth interaction with minimal algorithmic compositions 3. **Seed Catalog:** Shell collection in editorial spreads — minimal natural-algorithm studies with layered-depth botanical overlays 4. **Field Notes:** Sky observations in journal-format spreads with layered-depth simplified growth patterns 5. **Greenhouse:** Footer as enclosed garden — conversational farewell with layered-depth settled algorithmic forms ## Typography and Palette **Typography:** - **Headlines:** "Comfortaa" (Google Fonts) — playful-rounded geometric at 2.2rem-3rem, weight 700. Its soft circular forms create the quality of seed pods and sky bubbles, friendly geometry that feels grown rather than drawn. - **Body Text:** "Source Sans 3" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.8. - **Code/Data:** "Fira Mono" (Google Fonts) — monospace at 0.85rem for generative parameters and growth algorithms. - **Labels:** "Source Sans 3" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Sky Mist:** #eef4fa — ethereal blue-white for backgrounds - **Garden Teal:** #3a8888 — living teal for primary accents - **Petal Lavender:** #9888c8 — soft lavender for secondary elements - **Shell Sand:** #e8d8c0 — warm sand for tertiary accent - **Leaf Dark:** #1c3028 — deep green-dark for text - **Spore Gray:** #7888a0 — blue-gray for secondary text - **Growth Panel:** #f5f8fc — cool sky-tinted for panels - **Root Border:** rgba(58,136,136,0.08) — garden teal tint border ## Imagery and Motifs **Minimal Algorithmic Compositions:** Garden sections feature minimal generative imagery — CSS-only growing patterns using repeating-radial-gradient and conic-gradient to create algorithmic botanical forms. Simple dot-grid gardens (background: radial-gradient(circle, #3a8888 1px, transparent 1px); background-size: 24px 24px) suggesting seed placement patterns. **Magnetic Growth Response:** Interactive elements respond with magnetic attraction physics — elements drift toward cursor (transform: translate(calc(var(--dx) * 0.05), calc(var(--dy) * 0.05))) with 300ms ease-out transition, creating the quality of phototropism, garden elements turning toward the light of user attention. **Layered-Depth Botanical Overlays:** Decorative depth layers — foreground: thin SVG vine lines (stroke-width: 0.5px) in Garden Teal at 0.06 opacity; midground: circular seed forms (4-8px) in Petal Lavender at 0.04 opacity; background: diffuse sky wash. The layers create the canopy quality of looking through garden foliage at sky above. **Generative Growth Canvas:** Hero background uses CSS generative pattern — repeating-conic-gradient(from 0deg at 50% 50%, #3a8888 0deg 2deg, transparent 2deg 30deg) creating a radial growth pattern suggesting shell spiral and garden rotation simultaneously. **Sky-Garden Gradient:** Section transitions use sky-to-earth gradients — linear-gradient(180deg, #eef4fa 0%, #f5f8fc 40%, #e8d8c0 100%) suggesting the atmospheric column from sky through air to garden soil, the vertical connection sora.garden cultivates. ## Prompts for Implementation Build the page as a generative sky-garden journal. Magazine spread: .garden-spread { display: grid; grid-template-columns: 55% 45%; gap: 32px; max-width: 1080px; margin: 0 auto; padding: 80px 24px; align-items: center; } Magnetic growth: .phototrope { transition: transform 300ms ease-out; } // JS: element.style.transform = `translate(${dx*0.05}px, ${dy*0.05}px)`; Seed grid: .seed-pattern { background: radial-gradient(circle, #3a8888 1px, transparent 1px); background-size: 24px 24px; opacity: 0.06; } Growth panel: .garden-card { background: #f5f8fc; border: 1px solid rgba(58,136,136,0.08); border-radius: 8px; padding: 28px; } AVOID: Standard garden websites, corporate botanical platforms, and generic nature blogs. Let generative algorithmic beauty and conversational gardening language create a sky-garden where shells spiral like code, sky colors seed growth patterns, and every visit cultivates something new. ## Uniqueness Notes 1. **Generative for sky-garden:** Algorithmic growth patterns make botanical content feel computationally alive rather than photographically documented. 2. **Magazine-spread as field journal:** Editorial spreads create the naturalist quality of sky observations recorded with scientific care and aesthetic pleasure. 3. **Magnetic as phototropism:** Cursor-attraction physics create the biological quality of garden elements responding to the light of user presence. 4. **Layered-depth as garden canopy:** Multiple transparency layers create the quality of looking through foliage at sky, collapsing the vertical garden-to-sky axis. 5. **Minimal seed-grid as algorithmic planting:** Dot patterns suggest both generative code and garden seed placement, bridging digital and botanical. **Seed/Style:** aesthetic: generative, layout: magazine-spread, typography: playful-rounded, palette: ethereal-blue, patterns: magnetic, imagery: minimal, motifs: layered-depth, tone: conversational **Avoided Overused Patterns:** corporate aesthetic (90%), parallax patterns (94%), asymmetric layout (92%), mono typography (94%), warm palette (95%), friendly tone (90%), minimal imagery (93%). This design uses generative aesthetic, magazine-spread layout, playful-rounded typography, ethereal-blue palette, and conversational tone.