# Design Language for namu.farm ## Aesthetics and Tone namu.farm inhabits a world where organic life has been reimagined through the lens of inflatable vinyl and blown-glass dimensionality -- a digital greenhouse where every leaf, branch, and root system appears as a glossy, pressure-filled 3D form hovering against deep wine-dark space. The name "namu" (tree in Korean) and "farm" together conjure cultivation, growth, patience -- but rendered here not as pastoral quietude but as a futuristic bio-laboratory where arboreal forms have been vacuum-sealed, inflated, and suspended in burgundy-tinted amniotic fluid. The core aesthetic is **inflated-3d**: every element on the page -- from navigation labels to section dividers to background ornamentation -- carries the visual weight of a pressurized, softly rounded, light-catching three-dimensional object. Buttons look like they could be squeezed. Headings appear embossed from a thick rubbery surface. Cards bulge outward with a convex curvature that catches specular highlights along their upper-left edges. This is not the flat, clinical 3D of product renders; it is the tactile, almost absurd dimensionality of Jeff Koons balloon sculptures crossed with a leather-bound botanical encyclopedia. The tone is **futuristic-cutting-edge** -- not the cold chrome futurism of sci-fi interfaces, but a warm, organic futurism where biotechnology and craft converge. The feeling is of visiting a research station on another planet where someone has successfully grown trees in artificial atmospheres, and they document their progress with the reverence of a Renaissance naturalist using tools from 2090. There is seriousness here, but also a sense of wonder and playful experimentation -- bubbles rise through the interface like CO2 in a bioreactor, and every interaction feels like poking something alive. ## Layout Motifs and Structure The layout is **hero-dominant**: the experience opens with a monumental full-viewport hero composition that establishes the entire visual thesis in one immersive frame. This hero is not a static banner with a tagline -- it is a living, breathing scene rendered in CSS and animated SVG, where an inflated 3D tree form slowly rotates in space against a deep burgundy gradient background, with bubble-like particles drifting upward around it. Below the hero, the page unfolds in a deliberately asymmetric rhythm of **oversized visual sections** alternating with **narrow typographic interludes**. Each major section occupies 85-100% of the viewport height, creating the sensation of moving through discrete chambers in an exhibition rather than scrolling a webpage. The asymmetry comes from content placement: text blocks anchor themselves to the left third of the screen in one section, then leap to the right quarter in the next, while imagery and decorative elements fill the opposing space. **Grid Specifications:** - Base grid: 12-column, with content typically spanning 4-8 columns, never all 12 - Gutter: 2.5vw (wider than conventional, creating breathing room between inflated elements) - Maximum content width: 1440px, but hero and transitional sections break to full viewport width - Vertical rhythm: sections separated by 15vh minimum spacing, filled with floating bubble motifs - The hero occupies exactly 100vh with no scroll indicator -- discovery of more content below is intentional and delayed **Section Transitions:** Between major content blocks, the page inserts "membrane zones" -- 30-50vh tall regions where the deep burgundy background lightens slightly and clusters of animated bubble motifs drift across, creating the illusion of passing through a liquid barrier between chambers. These membranes serve as visual paragraph breaks and contain no text content. **Navigation:** A minimal fixed navigation bar hugs the top of the viewport -- barely visible, rendered in semi-transparent burgundy (#4A0E2B at 70% opacity) with inflated pill-shaped nav items that subtly scale up on hover (1.0 to 1.08 scale with a spring easing). The navigation never competes with the hero or content sections. ## Typography and Palette **Typography:** - **Display / Headlines:** "Righteous" (Google Fonts) -- a bold, rounded display face with inflated, balloon-like letterforms that perfectly embody the inflated-3d aesthetic. Its wide stance and smooth curves make each headline feel like it has been pumped full of air. Used at 4rem-8rem for primary headings with `letter-spacing: 0.02em` and `line-height: 0.95`. Always rendered in the lightest palette color (#F2E0D0) against dark backgrounds, with a subtle CSS `text-shadow` that simulates a 3D inflation effect: `text-shadow: 0 2px 0 #3A0A20, 0 4px 8px rgba(74,14,43,0.4)`. - **Subheadings / Accent Text:** "Urbanist" (Google Fonts) -- weight 600, a geometric sans-serif with a modern, slightly rounded quality that bridges the gap between the exuberant display type and the reading body text. Used at 1.4rem-2.2rem for section subtitles, pull quotes, and navigational labels. Set in the warm cream (#F2E0D0) or the muted rose (#C47A8A) depending on background contrast. - **Body / Reading Text:** "Nunito" (Google Fonts) -- weight 400 for body, 300 for captions. A rounded, friendly sans-serif that maintains the soft, inflated quality at smaller sizes without sacrificing legibility. Set at 1.05rem with `line-height: 1.72` and `letter-spacing: 0.01em`. Body text appears in a warm off-white (#F2E0D0) against dark backgrounds, or in deep burgundy (#4A0E2B) against light sections. - **Monospace / Technical:** "Space Mono" (Google Fonts) -- used sparingly for metadata, timestamps, or small technical labels. Weight 400, size 0.85rem, always in the muted rose (#C47A8A) to differentiate it from narrative text. **Palette:** | Role | Color | Hex | |------|-------|-----| | Primary Background | Deep Burgundy Void | #2B0A1A | | Secondary Background | Burgundy Membrane | #4A0E2B | | Accent Dark | Oxblood Depth | #6B1B3A | | Accent Warm | Muted Rose Glow | #C47A8A | | Text Primary | Parchment Cream | #F2E0D0 | | Highlight | Inflated Gold | #D4A054 | | Bubble Tint | Translucent Blush | #E8A0B0 | | Shadow Depth | Near-Black Maroon | #1A0510 | The palette is overwhelmingly dark -- deep burgundy dominates 70-80% of the visual field, creating a cave-like intimacy. The parchment cream (#F2E0D0) provides high-contrast readability without the harshness of pure white. The muted rose (#C47A8A) and inflated gold (#D4A054) serve as accent tones that catch the eye like light refracting through tinted glass. The translucent blush (#E8A0B0) is used exclusively for bubble motifs at low opacity (10-30%), creating an ethereal layer of floating color. **Gradient Usage:** Key backgrounds use a radial gradient from #2B0A1A (center) to #1A0510 (edges), creating a vignette effect that draws the eye inward. The hero section uses a more complex three-stop radial: #4A0E2B (center highlight) through #2B0A1A (mid) to #1A0510 (edges), simulating a spotlight on the central 3D tree form. ## Imagery and Motifs **Leather-Texture Surfaces:** The primary material language is leather -- not the smooth, polished leather of luxury goods, but the rich, grain-heavy texture of a well-worn botanical field journal. This texture appears as: - CSS background patterns using layered `radial-gradient` and `noise` techniques that simulate leather grain at macro scale - Card surfaces that appear to be upholstered in burgundy leather, with subtle embossing around edges achieved through `box-shadow` stacking (inset shadows creating the illusion of padded, quilted surfaces) - The hero section's background incorporates a leather grain texture overlay at 8-12% opacity, giving the deep burgundy field a tactile, material quality rather than the flatness of a pure CSS gradient **Bubble-Playful Motifs:** Bubbles are everywhere -- rising, floating, clustering, popping. They are the life force of the farm, the oxygen of the digital greenhouse. Implementation: - **CSS Bubble Particles:** 40-60 circular `div` elements with `border-radius: 50%`, sized between 8px and 120px, positioned absolutely across the page. Each bubble uses a radial gradient from transparent center to semi-transparent #E8A0B0 edge, with a small white specular highlight (`::after` pseudo-element, 20% size, positioned upper-left). Animated with individual `@keyframes` that combine slow vertical drift (translateY), gentle horizontal wobble (translateX sine wave), and subtle scale pulsing (0.95 to 1.05). - **Lottie Bubble Clusters:** At key scroll positions (hero, membrane zones, footer), Lottie animations render more complex bubble behaviors -- clusters that split apart, bubbles that merge and divide like cells, chains of bubbles that trace the outline of tree branches. These Lottie files use the palette's translucent blush and muted rose colors exclusively. - **Interactive Bubbles:** On hover/touch near bubble clusters, nearby bubbles accelerate their drift and scale up slightly, as if disturbed by the user's presence. This uses lightweight JavaScript pointer tracking with requestAnimationFrame. **Inflated 3D Elements:** Every interactive element -- buttons, cards, tags, navigation pills -- is rendered with CSS techniques that simulate inflated volume: - `border-radius` values between 16px and 28px (never sharp corners) - Layered `box-shadow`: an inner highlight (`inset 0 2px 4px rgba(242,224,208,0.15)`), a soft ambient shadow (`0 8px 32px rgba(26,5,16,0.6)`), and a contact shadow (`0 2px 4px rgba(26,5,16,0.3)`) - Background gradients that shift from lighter (upper-left) to darker (lower-right), simulating directional lighting on a curved surface - On hover, elements scale to 1.05 with a spring-physics transition (`transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)`) and the inner highlight intensifies **Tree Iconography:** Stylized tree forms appear throughout -- not photorealistic trees but inflated, balloon-like silhouettes with rounded canopies and bulbous trunks. These are implemented as SVG paths with the same inflated shading treatment (gradient fills from light to dark burgundy). A single large tree SVG dominates the hero section, slowly rotating via CSS `transform: rotateY()` animation over a 30-second cycle to reveal its three-dimensional form. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as an immersive journey through a futuristic botanical world. There is no traditional website structure -- no pricing tables, no feature grids, no testimonial carousels. Instead, the page unfolds as a vertical descent into a burgundy-tinted bio-laboratory where trees grow in impossible forms and bubbles carry fragments of meaning. **Hero Sequence (0-100vh):** The page opens to absolute darkness (#1A0510). Over 1.5 seconds, a radial light blooms from the center, revealing the deep burgundy void. A Lottie animation of an inflated 3D tree form fades into existence at the center -- its branches terminating in bubble clusters that gently separate and drift upward. The domain name "namu.farm" appears below the tree in "Righteous" at 6rem, with each letter staggering in from 0 opacity over 200ms intervals. Below that, a single line in "Nunito" at 1.2rem fades in after the title completes: a poetic tagline about cultivation in impossible places. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, cookie banners, chatbot widgets, "above the fold" marketing conventions. **Scroll-Driven Narrative Sections:** Each major section below the hero tells one chapter of the namu.farm story. Sections are revealed through scroll-triggered Lottie animations -- as the user scrolls into a membrane zone, the Lottie plays forward showing bubbles parting like a curtain to reveal the next chamber. **Animation Philosophy:** - Primary animation: Lottie-based sequences for complex bubble and organic motions (the underused lottie-animation pattern at 1% frequency) - Secondary animation: CSS transitions with spring-physics easing for hover states and micro-interactions - Tertiary animation: requestAnimationFrame-driven particle systems for ambient bubble drift - All animations respect `prefers-reduced-motion` by collapsing to static states - No animation exceeds 3 seconds in duration; most hover transitions complete in 300-500ms - The overall rhythm is slow and contemplative -- nothing snaps or jolts; everything floats, inflates, and settles **Lottie Integration Specifics:** - Use `lottie-web` (bodymovin) library loaded asynchronously - Lottie JSON files should use the palette colors exclusively -- no off-palette colors - Lottie canvases render at 2x resolution for retina displays - Scroll-linked Lottie playback uses IntersectionObserver to trigger and a scroll position mapping function to control frame progression - At least three distinct Lottie sequences: (1) hero tree growth, (2) membrane bubble transitions, (3) footer dissolution **Leather Texture Implementation:** - Generate leather grain using CSS: a base `background-color` of #2B0A1A overlaid with a `background-image` of multiple layered radial gradients at varying sizes (2px-6px) and low opacity (3-8%) in slightly lighter/darker burgundy variants - For card surfaces, add `backdrop-filter: contrast(1.02) brightness(0.98)` to subtly enhance the textural depth - Leather texture is most prominent on card elements and the hero background; body sections use smoother gradients **Interactive Depth:** - Cards respond to mouse position with a subtle CSS `perspective` and `rotateX/rotateY` tilt (maximum 3 degrees), creating the illusion that inflated elements are physical objects catching light differently as the user moves. Implemented with lightweight JavaScript that maps cursor position to CSS custom properties `--tilt-x` and `--tilt-y`. - Buttons depress on click: scale drops to 0.97, inner shadow deepens, background gradient darkens -- as if the inflated surface is being pushed in. **Performance Strategy:** - Lottie animations are loaded lazily via IntersectionObserver, only initializing when their container enters the viewport - Bubble particle system caps at 60 active elements and uses `will-change: transform` for GPU compositing - All CSS animations use `transform` and `opacity` exclusively to stay on the compositor thread ## Uniqueness Notes **Differentiators from other designs:** 1. **Inflated-3D Aesthetic at 0% Frequency:** No other design in the entire portfolio uses the inflated-3d aesthetic vocabulary. This site is the first and only expression of this puffy, pressurized, balloon-sculpture visual language. Every element -- from typography shadows to card surfaces to SVG illustrations -- carries this distinctive volumetric quality that sits completely outside the wabi-sabi, brutalist, and editorial modes that dominate the portfolio. The inflated quality transforms a farming/nature domain into something unexpected and visually unprecedented. 2. **Lottie-Driven Animation at 1% Frequency:** While 96% of portfolio designs rely on scroll-triggered CSS animations and 76% use parallax, namu.farm is built around Lottie animation sequences as its primary motion language. The bubble transitions, tree growth sequences, and membrane dissolves are authored as Lottie JSON rather than CSS keyframes, enabling a complexity and organic fluidity of motion that CSS alone cannot achieve. This puts namu.farm in an animation category almost entirely unoccupied in the portfolio. 3. **Deep Burgundy Palette at 1% Frequency:** The palette rejects the warm neutrals, earth tones, and muted creams that dominate the portfolio (100% warm, 68% muted). Instead, namu.farm plunges into a deep, wine-dark color world where #2B0A1A and #4A0E2B create an atmosphere closer to a velvet-lined cabinet of curiosities than a nature website. The burgundy-as-nature-color is a deliberate inversion -- forests and farms are green in reality but crimson in this futuristic reinterpretation. 4. **Leather Texture as Digital Material:** At 2% imagery frequency, leather-texture is nearly absent from the portfolio. Here it serves as the fundamental material language -- surfaces feel upholstered, padded, and grain-rich. This tactile material choice combined with the inflated-3d aesthetic creates a unique sensory contradiction: forms that look pumped full of air sit on surfaces that feel like aged hide. The collision of soft pneumatic volume and rough organic material is found nowhere else in the portfolio. 5. **Bubble Motifs as Structural Element:** While bubble-playful motifs appear at just 3% frequency, namu.farm elevates bubbles from decorative accent to structural architecture. The membrane zones between sections ARE bubble systems. The tree form IS a cluster of bubble shapes. Navigation pills ARE bubbles. The entire spatial logic of the site is organized around spherical, bubble-derived forms rather than rectangular containers -- a compositional strategy no other design employs. **Documented Seed/Style:** aesthetic: inflated-3d, layout: hero-dominant, typography: display-bold, palette: deep-burgundy, patterns: lottie-animation, imagery: leather-texture, motifs: bubble-playful, tone: futuristic-cutting-edge **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with inflated-3d (0%) - centered layout (99%) -- replaced with hero-dominant (5%) with asymmetric content placement - mono typography (98%) -- replaced with display-bold (9%) via Righteous - warm palette (100%) -- subverted with deep-burgundy (1%), a warm hue pushed to its darkest extreme - scroll-triggered patterns (96%) -- deprioritized in favor of lottie-animation (1%) as primary motion - friendly tone (98%) -- replaced with futuristic-cutting-edge (2%) - minimal imagery (94%) -- replaced with leather-texture (2%) and bubble motifs - vintage motifs (85%) -- replaced with bubble-playful (3%)