# Design Language for nonri.org ## Aesthetics and Tone nonri.org channels a botanical aesthetic — the lush, detailed beauty of scientific botanical illustration and garden design applied to an organization platform for community and environmental initiatives. The site blooms — every section unfurls like a leaf, every element carries the organic complexity of living systems, and the entire experience feels like walking through a carefully curated botanical garden. Inspiration draws from the botanical plates of Pierre-Joseph Redoute, the garden designs of Piet Oudolf, the lush editorial photography of Gardens Illustrated magazine, and the environmental storytelling of the Eden Project. The tone is opulent-grand — lavish, ceremonial language that treats every organizational initiative as a grand botanical exhibition. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — content sections that scroll at different speeds, creating the layered depth of looking through garden beds from foreground to background. **Parallax Sections Architecture:** - Full-viewport sections with background-attachment: fixed - Foreground content at normal scroll speed - Background botanical elements at 0.3-0.5x scroll speed - Transition zones between sections (gradient overlaps) - Container: max-width: 960px centered within parallax frames **Section Sequence:** 1. **Garden Gate:** Hero with art-deco-display title on warm gradient, vector-art botanical gate illustration, leaf-organic climbing vine decorations 2. **Beds:** Organization programs in parallax sections — underline-draw interactive navigation with vector-art botanical program icons 3. **Greenhouse:** Featured initiatives in glass-framed parallax panels with leaf-organic tropical plant motifs 4. **Paths:** Participation pathways in parallax flow with vector-art directional botanical illustrations 5. **Compost:** Footer as cycle completion — opulent-grand closing with leaf-organic decomposition motif and renewal sign-off ## Typography and Palette **Typography:** - **Headlines:** "Cinzel" (Google Fonts) — art-deco-influenced display serif at 2.2rem-3rem, weight 700. Its monumental, inscriptional quality creates the institutional grandeur of botanical garden plaques. - **Body Text:** "Crimson Text" (Google Fonts) — literary serif at 0.95rem, weight 400, line height 1.8. - **Accent:** "Crimson Text" at 1.1rem, weight 400, italic for botanical descriptions and program narratives. - **Labels:** "Cinzel" at 0.65rem, weight 700, uppercase, letter-spacing 0.08em. **Color Palette:** - **Garden Earth:** #1a1810 — deep garden earth for dark sections - **Soil Rich:** #2a2418 — rich soil for panels - **Leaf Emerald:** #308848 — vivid emerald for primary accent - **Bloom Rose:** #c06080 — warm bloom rose for secondary accent - **Pollen Gold:** #c8a030 — warm pollen gold for tertiary accent - **Petal Cream:** #f8f0e4 — soft petal cream for light backgrounds - **Bark Text:** #201810 — warm bark for body text - **Border Twig:** #b8a888 — warm twig border ## Imagery and Motifs **Vector-Art Botanical Illustrations:** Organization concepts illustrated as botanical vector art — SVG line drawings (48-80px) of leaves, flowers, seeds, roots, and vines in Leaf Emerald and Bloom Rose. Thin strokes (1.5px) with occasional gradient fills suggesting watercolor wash. Each illustration connects organizational functions to plant growth stages. **Underline-Draw Botanical Navigation:** Navigation links feature animated underlines that draw from center outward — width expanding from 0 to 100% via pseudo-element over 300ms with ease-out. The underline uses Leaf Emerald at 0.5 opacity, growing like a vine tendril reaching toward the user's cursor. **Leaf-Organic Decorative Vines:** Organic leaf shapes (SVG, 20-48px) in Leaf Emerald and Pollen Gold at 0.06-0.1 opacity positioned along content edges and between sections. Some configured as climbing vines (connected by thin curved lines). The organic decorations transform section boundaries into garden paths. **Warm Botanical Atmosphere:** Light sections use warm, petal-soft backgrounds — Petal Cream with radial warmth (rgba(200,160,48,0.03)) at centers. Dark sections use Garden Earth with Leaf Emerald glow (rgba(48,136,72,0.03)). The warmth creates the greenhouse quality of a well-maintained botanical environment. **Parallax Garden Layers:** Background botanical elements (large SVG leaf silhouettes, 200-400px, at 0.02-0.04 opacity) scroll at slower speeds, creating the depth of looking through layers of garden planting from tall canopy to ground cover. ## Prompts for Implementation Build the page as a botanical organization garden. Parallax: .parallax-section { position: relative; overflow: hidden; } .parallax-bg { position: absolute; inset: -20%; background-attachment: fixed; } Or use transform: translateZ(-1px) scale(2) in perspective container. Underline-draw: .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: rgba(48,136,72,0.5); transition: width 300ms ease-out, left 300ms ease-out; } .nav-link:hover::after { width: 100%; left: 0; } Vector botanicals: SVG with stroke: #308848 or #c06080, stroke-width: 1.5, fill: none or subtle gradient. Leaf vines: .vine-leaf { position: absolute; opacity: 0.08; } .vine-leaf svg { fill: #308848; width: var(--size, 24px); } Warm atmosphere: .petal-section { background: #f8f0e4; } .petal-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 50% 50%, rgba(200,160,48,0.03), transparent 60%); } AVOID: Corporate organization sites, sterile NGO platforms, and utilitarian community pages. Let botanical lushness and opulent-grand ceremony create an organization platform where community initiatives bloom with the grandeur of a world-class botanical exhibition. ## Uniqueness Notes 1. **Botanical for organization platform:** Garden design principles transform organizational structure into living, growing ecosystems. 2. **Parallax as garden depth:** Multi-speed scrolling creates the layered experience of looking through planted beds from foreground to background. 3. **Underline-draw as vine growth:** Animated underlines grow like tendrils, connecting the user's exploration to organic growth. 4. **Vector-art as botanical illustration:** Scientific illustration tradition gives organizational functions the visual authority of documented specimens. 5. **Leaf-organic as garden paths:** Decorative vine elements transform digital section boundaries into botanical garden pathways. **Seed/Style:** aesthetic: botanical, layout: parallax-sections, typography: art-deco-display, palette: warm, patterns: underline-draw, imagery: vector-art, motifs: leaf-organic, tone: opulent-grand **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses botanical aesthetic, parallax-sections layout, warm palette, vector-art imagery, and opulent-grand tone.