# Design Language for ronri.xyz ## Aesthetics and Tone ronri.xyz channels the spirit of a hidden imperial conservatory -- a glass-vaulted chamber deep within a gilded palace where rare orchids bloom against walls of dark lacquered wood and jewel-encrusted botanical diagrams hang in heavy gold frames. The aesthetic is **botanical** in the truest sense: not pastoral or cottagecore, but the obsessive, scientific, almost fetishistic documentation of plant life practiced by 18th-century royal courts, where every petal was rendered in gouache with taxonomic precision and bound in volumes with tooled leather covers. The tone is **opulent-grand** -- unapologetically lavish, dripping with surplus, treating every pixel like gilded leaf applied by a restorer's brush. This is a site that refuses minimalism entirely; it believes that emptiness is poverty and that every surface deserves ornament. The visual mood borrows from the Kew Gardens temperate house at golden hour, from Ernst Haeckel's "Kunstformen der Natur" plates, from the jewel rooms of the Hermitage Museum. Colors are deep, saturated, and precious -- emerald, amethyst, sapphire, ruby -- applied not as accents but as the fundamental material of the page. Light enters the composition diagonally, as if through greenhouse glass at late afternoon, casting amber warmth across surfaces that are inherently cool and mineral. ## Layout Motifs and Structure The layout is **centered** but employs a nested frame-within-frame composition that creates extraordinary depth within a symmetrical axis. The page is structured as a series of concentric rectangular frames -- imagine looking down through a telescope at a botanical specimen, where each ring of the viewport narrows slightly, creating a tunnel effect that draws the eye relentlessly toward center content. The outermost frame is the browser viewport itself, painted in the darkest background (#0D0B1A). Inside that sits a decorative border frame rendered entirely in CSS -- a 12px border composed of repeating SVG botanical ornaments (tiny leaf scrollwork, stylized acanthus tendrils) in muted gold (#C9A84C) on transparent. Inside that border lives the content area, which itself uses a single centered column capped at 860px width with generous 80px vertical padding between sections. Each major section is introduced by a full-width decorative divider -- a horizontal botanical frieze rendered as an inline SVG: intertwining stems, leaves, and seed pods drawn in a single continuous line weight (1.5px stroke) in the secondary gold color. These friezes are not identical; each one features a different botanical specimen at its center (a passionflower, a protea, a monstera leaf, a lotus pod), giving each section its own visual identity while maintaining the centered axis. The hero occupies the full viewport and uses a radial gradient emanating from center -- a luminous jewel-tone glow (deep amethyst fading to near-black) with a single large botanical icon (a stylized magnolia rendered in fine gold lines) pulsing subtly at the exact center. Below the hero, content sections alternate between text-dominant panels (centered paragraphs with ornamental drop caps) and icon-showcase panels (3x2 or 2x3 grids of botanical icons, each in its own jeweled frame). On mobile, the centered axis is maintained perfectly; the ornamental borders thin to 4px, padding reduces proportionally, and icon grids collapse to 2x2 or single-column with maintained centering. ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display SC" (Google Fonts) -- the small-caps variant of Playfair Display, used at weights 700-900. The small caps create a lapidary, inscriptional quality -- like text chiseled into the marble lintel of a botanical garden entrance. Sizes range from 2.8rem for section headers to 5.5rem for the hero title. Letter-spacing is set to 0.12em for all headlines, creating the airy, ceremonial spacing of Roman imperial inscriptions. Color alternates between the warm gold (#C9A84C) for headers on dark backgrounds and the deep midnight (#0D0B1A) for headers on light panels. - **Body Text:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with roots in calligraphy, offering excellent readability at body sizes while maintaining organic, hand-crafted warmth that complements the botanical theme. Used at weight 400 for body, 600 for emphasis. Size: 1.125rem (18px), line-height 1.75. Color: #E8E0D0 on dark backgrounds, providing a warm parchment-like reading tone rather than stark white. - **Accents / Labels / Icon Captions:** "Cormorant Infant" (Google Fonts) -- a delicate, high-contrast serif with an almost calligraphic quality, used in italic at weight 500 for botanical specimen names, labels beneath icons, and decorative pull quotes. Size: 0.9rem-1.1rem. This font's thin hairlines and elegant swashes evoke handwritten herbarium labels. - **Expressive Variable Usage:** The hero title uses `font-variation-settings` on "Playfair Display SC" to animate optical size and weight in response to scroll position. As the user begins scrolling, the title's weight thins from 900 to 400 and its letter-spacing expands from 0.12em to 0.35em, creating a dissolving, ethereal quality as the title recedes -- like text fading on aging parchment. This **expressive-variable** technique is the signature typographic gesture of the entire site. **Palette (Jewel Tones):** | Role | Color | Hex | |------|-------|-----| | Deep Background | Midnight Abyss | #0D0B1A | | Primary Surface | Imperial Amethyst | #3B1F5B | | Secondary Surface | Emerald Canopy | #1A4D3A | | Accent Gold | Botanical Gold | #C9A84C | | Accent Ruby | Specimen Ruby | #8B2252 | | Accent Sapphire | Greenhouse Glass | #1E5488 | | Text Primary | Warm Parchment | #E8E0D0 | | Text Secondary | Faded Herbarium | #A89F8E | | Highlight | Living Chlorophyll | #4CAF50 | All backgrounds use the deep midnight (#0D0B1A) as the base with jewel tones applied as radial gradient overlays, creating the effect of colored light passing through gemstones. No flat color fills anywhere -- every surface has depth through gradient, grain, or texture overlay. A CSS noise texture (generated via SVG `` filter at 0.65 baseFrequency, 0.04 opacity) is applied globally via a fixed pseudo-element, giving every surface a subtle organic grain reminiscent of handmade paper. ## Imagery and Motifs **Icon-Heavy Botanical System:** The imagery strategy is **icon-heavy** -- the site communicates primarily through a custom set of botanical line icons rather than photography or illustration. Each icon is an inline SVG depicting a specific plant specimen in a consistent style: single-weight stroke (1.5px) in the Botanical Gold (#C9A84C) color, with no fills, drawn in a scientific-illustration style that emphasizes structural anatomy (venation patterns, stamen arrangements, petal geometry). The icon set includes at minimum 12 specimens: magnolia, passionflower, monstera, lotus, fern frond, oak leaf, ginkgo, protea, bird-of-paradise, orchid, agave, and banksia. Each icon sits within a hexagonal or circular jeweled frame -- a thin border in one of the jewel-tone accent colors with tiny decorative nodes at cardinal points (small circles or diamond shapes). **Nature Motifs as Structural Grammar:** Nature motifs are not decorative afterthoughts but the fundamental structural grammar of the page. The botanical frieze dividers described in the layout section are the primary example, but nature permeates deeper: section backgrounds use extremely subtle, large-scale botanical watermark patterns -- ghostly silhouettes of fern fronds or monstera leaves rendered at 3-4% opacity in slightly lighter versions of the background color, positioned off-center to break the strict symmetry of the centered layout with organic asymmetry. These watermarks shift position via slow CSS animation (120-second loop, ease-in-out) creating an almost imperceptible breathing movement, as if the plants behind the walls are slowly growing. **Jeweled Frame System:** Every discrete visual element (icon, text block, decorative panel) is enclosed in a "jeweled frame" -- a CSS border treatment that combines a thin solid border (1px, gold), a 2px gap, then a thinner outer border (0.5px, jewel accent color), creating a double-frame effect reminiscent of gem settings in jewelry. At the four corners of each frame, small decorative SVG flourishes (tiny leaf sprigs or fleuron marks) provide organic ornamentation. These frames use CSS `border-image` with a custom SVG slice for the corner details. **Haeckel-Inspired Decorative Plates:** At key narrative moments (the transition between major sections), the site presents full-width "botanical plates" -- large, detailed SVG compositions inspired by Ernst Haeckel's biological illustration plates. These are centered, radially symmetrical arrangements of multiple botanical elements (imagine a mandala composed of leaves, seeds, petals, and stems) rendered in the gold stroke style against the dark background. Each plate serves as both a visual pause and a thematic marker for the content that follows. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a single, unbroken vertical journey through a botanical conservatory. The hero section is the entrance -- a full-viewport dark chamber with the single luminous magnolia icon at center, the title inscription above it in gold small caps, and a faint radial amethyst glow emanating from behind the icon. There is no navigation bar. The only affordance to proceed is a subtle downward-pointing chevron (a tiny gold "V" shape) that pulses gently at the bottom of the viewport using a CSS animation (`translateY` oscillation of 6px over 2.5 seconds). As the user scrolls, they "walk deeper into the conservatory" -- sections reveal one chamber at a time. **Micro-Interactions (Primary Animation Pattern):** The site's animation philosophy centers on **micro-interactions** -- small, precise, responsive animations tied to user actions rather than ambient motion. Key micro-interactions include: - **Icon hover bloom:** When the user hovers over a botanical icon, the SVG strokes animate from 1.5px to 2.5px weight over 300ms (cubic-bezier 0.34, 1.56, 0.64, 1), and the jeweled frame's accent color border brightens by 40% (`filter: brightness(1.4)`), creating a "blooming" effect. The icon also scales to 1.08x with `transform: scale(1.08)`. - **Frame corner flourish:** On hover over any jeweled frame, the corner SVG flourishes rotate 15 degrees outward over 400ms, as if the leaves are unfurling in response to attention. - **Gold shimmer on text:** Headlines use a CSS `background-image: linear-gradient` shimmer effect -- a diagonal highlight band (30-degree angle, 20% width, white at 15% opacity) that sweeps across the text on hover via `background-position` animation, creating a metallic shimmer as if light is catching gilded lettering. - **Section reveal:** Each section fades in with a 600ms ease-out opacity transition combined with a 20px upward `translateY` as it enters the viewport (using IntersectionObserver). This is the only scroll-triggered animation -- everything else is interaction-driven. - **Botanical plate rotation:** The Haeckel-inspired decorative plates rotate very slowly (0.5 degrees per second) when in view, creating a kaleidoscopic quality. Rotation pauses when out of view. This is achieved via `requestAnimationFrame` rather than CSS animation to allow precise pause/resume control. **Storytelling Emphasis:** Each section of the page tells a chapter of the "conservatory story." Rather than functional blocks (features, pricing, testimonials), the sections are: The Entrance (hero), The Specimen Hall (icon showcase), The Classification Chamber (taxonomic text with ornamental drop caps), The Greenhouse (a section with green-tinted gradient where botanical watermarks are most visible), The Jewel Room (a section highlighting the ruby and sapphire accents with dense ornamentation), and The Archive (a final section with faded, sepia-shifted tones suggesting aged botanical records). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, generic card components, hamburger menus, sticky headers, flat white backgrounds, sans-serif-only typography, stock photography, corporate gradients, testimonial carousels. **Technical Implementation Notes:** - All botanical icons must be inline SVGs with `currentColor` for stroke, allowing color theming via CSS custom properties. - The noise texture overlay must use SVG filters (``, ``) rather than image files, keeping the entire site image-free. - Jeweled frames should be implemented as a reusable CSS class (`.jewel-frame`) with custom properties for `--frame-accent` color. - The entire color system should use CSS custom properties defined on `:root`, enabling theoretical theme switching. - Font loading strategy: `font-display: swap` for Lora and Cormorant Infant; `font-display: optional` for Playfair Display SC to prevent layout shift on the hero. ## Uniqueness Notes **Differentiators from other designs:** 1. **Botanical-Scientific Opulence:** Unlike the pastoral, soft-focus botanical designs common in the portfolio (which tend toward cottagecore or watercolor aesthetics), this design treats botany as an imperial science -- precise, lavish, and authoritative. The botanical elements are rendered with taxonomic rigor in gold line-work against jewel-dark backgrounds, more Kew Gardens archive than flower shop Instagram. No other design combines scientific illustration precision with jewel-tone luxury. 2. **Icon-Heavy Communication Without Photography:** The site communicates entirely through a custom SVG botanical icon system rather than photographs or illustrations. Every visual element is a structured, reusable SVG component. This is exceptionally rare in the portfolio (icon-heavy imagery at only 3% frequency) and creates a distinctive visual language where the site feels like an interactive botanical field guide rather than a standard web page. 3. **Micro-Interaction-Driven Animation Philosophy:** Rather than the dominant scroll-triggered/parallax animation patterns (97% and 74% frequency respectively), this design centers its entire animation system on hover-driven micro-interactions (8% frequency). Every animation is a direct response to user action -- icons bloom on hover, frames unfurl, text shimmers when touched. This creates a conservatory metaphor where the user's attention is sunlight causing things to grow and respond. 4. **Jeweled Frame System as Modular Design Language:** The double-border "jeweled frame" with corner botanical flourishes is a unique structural element not found in other designs. It serves simultaneously as a container, a decorative motif, and an interaction surface, unifying the entire page under a single ornamental logic derived from gemstone settings in jewelry. 5. **Expressive Variable Typography as Narrative Device:** The use of `font-variation-settings` to animate headline weight and spacing in response to scroll position (thinning and expanding as the user scrolls past) is a distinctive typographic technique that reinforces the conservatory narrative -- text ages and fades like pressed botanical specimens as you move deeper into the archive. **Chosen Seed/Style:** aesthetic: botanical, layout: centered, typography: expressive-variable, palette: jewel-tones, patterns: micro-interactions, imagery: icon-heavy, motifs: nature, tone: opulent-grand **Avoided Overused Patterns:** Deliberately avoided playful aesthetic (96%), mono typography (99%), warm palette (100%), gradient palette (88%), scroll-triggered patterns (97%), parallax patterns (74%), stagger patterns (60%), minimal imagery (95%), vintage motifs (88%), friendly tone (99%). Instead leaned into the underused jewel-tones palette (4%), expressive-variable typography (3%), micro-interactions patterns (8%), icon-heavy imagery (3%), and opulent-grand tone (3%).