# Design Language for namu.farm ## Aesthetics and Tone **Concept: The Subversive Apiary — Art-Deco geometry collides with wild, unkempt nature in a manifesto against sterile agriculture.** namu.farm is a living tension: the rigid gilded geometry of 1920s Art Deco pressed against the chaotic, sprawling energy of a feral meadow. Think of a honeycomb cell constructed not by bees but by a Constructivist architect in 1927 — perfect hexagonal brass frames containing wild grass, mushrooms, and seed-heads that refuse to be contained. The site breathes rebellion. Nature does not submit to the grid; it occupies it. The tone is **edgy-rebellious**: this is not a pastoral farm with gentle fonts and soft greens. This is a farm that rejects the commodity aesthetics of wellness brands, farmers markets, and Instagram agriculture. namu (나무, "tree" in Korean) implies deep-rootedness, patience, and force — not prettiness. The visual language weaponizes Art Deco's most aggressive qualities: the chevron, the angular fan, the stepped arch — then populates them with nature refusing to be decorative. Mood references: a hornet's nest built inside a jewel box; the angular branches of a winter oak traced in gold leaf on black lacquer; a protest banner printed in geometric sans with dried seed-pods pressed into the ink. The palette is an **analogous range anchored in deep ochre-amber**: burnt gold, earthy sienna, oxidized copper-green, blackened soil. No pastels. No softness. These are the colors of polished brass left outside for a season — partially tarnished, partially brilliant. ## Layout Motifs and Structure **Hexagonal honeycomb as the master grid — but fractured.** The primary layout unit is the hexagon. Not a decorative hexagon pattern placed behind text — but a true structural honeycomb grid where content lives *inside* hex cells. The grid is then deliberately **broken**: some cells are cracked open, their edges displaced, their contents spilling into adjacent cells. This fracture is the rebellion motif made spatial. **Grid architecture:** - **Hero viewport:** A full-screen hexagonal tile mosaic built from SVG. Seven large hexagons (roughly 340px point-to-point on desktop) arranged in a honeycomb cluster, each containing a different isometric icon or path-draw SVG animation. The cluster is slightly off-center-left, with the rightmost cells open and bleeding off-screen. - **Content sections:** A 6-column grid at 1440px reference width where columns are implicitly hexagonal lanes (staggered row offsets applied via CSS custom properties). Section breaks are marked by full-width SVG path-draw dividers — angular, chevron-like strokes that animate drawing themselves on scroll entry. - **Asymmetric two-column layout** in the main content body: a 7/5 split. The wider left lane holds primary narrative text in large-scale Futura-style type; the narrow right lane holds isometric icon compositions and annotated botanical fragments. - **Fixed vertical axis rail** on the far right (32px wide): a repeating diamond-and-dash Art Deco border, the kind found on 1920s elevator doors, rendered as a repeating SVG pattern scrolling at 0.3x parallax. **Spatial philosophy:** Every white space is a potential cell that has been removed. The viewer should perceive the grid's ghost even where content is absent — implied hexagons visible as faint `#2a1f0a` outlines at 0.15 opacity. **Scroll behavior:** Sections snap into view at 90% viewport height increments. No smooth-scroll laziness — the transitions are hard cuts with a brief 80ms hex-cell-collapse animation (cells appear to fold inward then snap open for the new section). ## Typography and Palette **Type system (all Google Fonts, verified):** - **Primary display — `Josefin Sans`** (wght 300, wght 700, all-caps). Josefin Sans is the most authentic Futura-geometric substitute on Google Fonts: the same geometric 'o', the same high crossbar on 'A', the same even stroke weight. Used for all section titles, hero text, and the site wordmark at extreme scale (10vw–14vw), letter-spacing 0.15em. The all-caps setting is non-negotiable — it enforces the Art Deco register. - **Secondary display — `Playfair Display`** (wght 400 italic). Used sparingly, only for the Korean word 나무 and for a single pull-quote per section rendered as an inline aside. At 1.8rem italic, it provides the only softness in the typographic system — a deliberate breach in the geometric armor, like a hand-written label in a brass specimen case. - **Body text — `DM Mono`** (wght 400, wght 500). A geometric monospace that echoes technical field-notes and schematic annotations. Used for all paragraph text at 0.95rem, line-height 1.7. The monospace grid reinforces the hexagonal cell metaphor — every character occupies an identical slot. - **Label and annotation — `Josefin Sans`** wght 300 at 0.7rem, 0.12em tracking, uppercase. Used for hex-cell labels, coordinates, and callout tags. **Color palette — analogous ochre-amber-copper range:** | Role | Color | Hex | |---|---|---| | Ground/background | Deep bitumen black | `#0d0a06` | | Primary surface | Midnight soil brown | `#1c1508` | | Primary accent | Burnt amber-gold | `#c8830a` | | Secondary accent | Oxidized copper-green | `#4a7c59` | | Tertiary accent | Raw sienna-ochre | `#a85e1e` | | Text primary | Aged parchment | `#e8d9b8` | | Text secondary | Tarnished brass | `#9a7c42` | | Ghost grid lines | Near-black outline | `#2a1f0a` | | Highlight/active | Hammered gold | `#e8a820` | The analogous sweep runs from the amber-gold through ochre and into copper-green — a short arc on the color wheel, 60° range, rooted in autumnal earth tones. No blues, no purples. The copper-green is the only chromatic break from pure earth tones, representing the oxidized-metal-meets-living-plant tension at the heart of the concept. ## Imagery and Motifs **All imagery is SVG — no photographs, no raster assets.** **Isometric icon system — "Botanical Schematics":** Each hex cell in the hero grid contains one isometric icon drawn at 2px stroke in `#c8830a` on `#1c1508` background. The icons are botanical-industrial hybrids: 1. **Isometric oak tree** — a geometric tree with a hexagonal canopy rendered as layered isometric planes, trunk as a rectangular prism. Three face colors: top `#4a7c59`, left `#2d5c3a`, right `#1f3d28`. Root system visible as thin lines descending below the hex border. 2. **Isometric beehive** — a traditional domed skep hive rendered in full isometric projection. Horizontal bands suggest woven straw; a single hex entrance hole glows `#e8a820`. 3. **Isometric seed pod** — an abstracted seed pod split open on its isometric axis, revealing a grid of seeds inside each half-shell. Seeds are small `#e8d9b8` spheres in isometric arrangement. 4. **Isometric trowel and soil block** — a garden trowel piercing a cube of dark earth, soil particles floating as small diamond shapes around the impact point. 5. **Isometric honeycomb fragment** — a single hexagonal comb fragment showing 9 cells in isometric perspective, cells alternating filled `#c8830a` and empty. 6. **Isometric mushroom cluster** — three mushrooms in isometric projection at different heights, caps as flat hexagonal discs, stems as cylinders. The tallest mushroom cap is cracked, spores radiating as small dots. 7. **Isometric wheat sheaf** — bundled wheat stalks in isometric view, the binding cord drawn as a geometric knot. **Path-draw SVG animations:** - **Section dividers:** Between each content section, a full-width SVG chevron-chain (a row of connected `>` shapes made of 1.5px strokes, 8 chevrons across) draws itself left-to-right over 1.2 seconds on scroll entry. Color `#c8830a`, `stroke-dasharray` animation. - **Hero background network:** Behind the hexagonal cluster, a network of fine connecting lines (0.5px, `#2a1f0a`) linking hex centroids extends across the full viewport. On page load, these lines draw themselves outward from the center in 800ms, creating the impression of the honeycomb structure assembling. - **Art Deco fan ornament:** The hero wordmark is flanked by two symmetrical SVG fan ornaments (semicircular radiating lines, a classic Art Deco motif). These animate: the lines extend from the center-point outward, one by one, over 600ms, like a hand of cards being fanned. - **Botanical fractal border:** Running along the bottom of the hero section, a single continuous SVG path traces an angular vine — not organic curves but 45°/135° angle-only strokes, as if nature were forced to obey a geometric constraint. This path draws itself on page load over 2 seconds. **Ghost hex grid:** Across the entire page background, a subtle hexagonal tessellation at 12% opacity in `#2a1f0a` creates spatial rhythm without visual noise. This is a single inline `` SVG tiled via CSS `background`. ## Prompts for Implementation **The story to tell.** namu.farm is not a website about farming. It is a manifesto about what farming *could be* — if it rejected the aesthetics of abundance-theater (the overflowing crate of vegetables, the soft-focus meadow, the Instagram harvest caption) and instead aligned itself with the truth of agriculture: geometry, patience, insect infrastructure, fungal networks, decomposition, and recurrence. The visitor does not browse a product catalog. They enter a schematic — a technical document for a farm that does not yet exist, or that exists only in the exact form nature intended before humans began prettifying it. **Hero section:** Full viewport. Background `#0d0a06`. The hexagonal cluster SVG is positioned center-left, with each hex cell housing an isometric icon (described above). On load: the background grid lines draw themselves (800ms), then the hex borders materialize with a brief golden flash (`#e8a820` → `#c8830a` transition over 200ms), then the isometric icons fade in staggered (100ms delay between cells). The wordmark **namu.farm** appears in `Josefin Sans` 700 uppercase, 10vw, `#e8d9b8`, positioned upper-right with the Art Deco fan ornaments flanking it. Below the wordmark, a single line in `DM Mono` 0.85rem `#9a7c42`: `// the geometry of growth`. No CTA, no button. Scroll indicator: a minimal downward chevron in `#c8830a` at the bottom-center, pulsing at 0.5s interval. **Section 1 — The Grid (나무의 구조 / Structure of the Tree):** Asymmetric 7/5 layout. Left: three paragraphs in `DM Mono` `#e8d9b8` about the hexagonal architecture of natural systems — honeycomb, cellular biology, crystal lattice. Right: the isometric honeycomb fragment icon at 2× scale, floating in a dark cell with subtle golden ambient glow (radial-gradient behind it). Section divider SVG chevron-chain draws in on entry. **Section 2 — The Schematic (설계도 / Blueprint):** Full-width layout. A large isometric scene: the oak tree, the beehive, and the wheat sheaf arranged in a coherent landscape at roughly 1200×600px of SVG. The scene is annotated with `Josefin Sans` 300 labels connected by thin `#9a7c42` leader lines: `QUERCUS ROBUR`, `APIS MELLIFERA`, `TRITICUM AESTIVUM`. The background of this scene is a field of ghost hexagons. Text below in narrow centered column: a single paragraph in `DM Mono` about the farm as a designed system rather than an accident. **Section 3 — The Rebellion (저항 / Resistance):** This section deliberately breaks the geometry. The hex grid background tilts 3° via CSS transform. Text in `Josefin Sans` 700 at 6vw, `#c8830a`, reads: `NATURE DOES NOT FIT YOUR GRID.` Below it, three fractured hex cells (SVG, edges displaced 4–8px from their geometric position) each containing one of the smaller isometric icons (seed pod, mushroom cluster, trowel). The displacement animation triggers on scroll entry — cells start in correct position, then rapidly fracture to their displaced state (200ms, `cubic-bezier(0.68, -0.55, 0.27, 1.55)` easing). **Section 4 — The Root System (뿌리 / Roots):** Dark section, background `#1c1508`. The botanical fractal border (45°/135° angular vine) runs top-to-bottom on the left edge, drawing itself as the user scrolls. Right side: a single large 나무 character in `Playfair Display` italic at 20vw, `#c8830a` at 20% opacity, serving as a ghosted background element. Over it: body text in `DM Mono` about patience, deep systems, underground fungal networks. The only place on the site where the rebellious tone softens momentarily — this section is contemplative. **Footer:** Full-width `#0d0a06`. Centered `Josefin Sans` 300 all-caps: `NAMU.FARM` at 2rem, `#9a7c42`. Below: `나무` in `Playfair Display` at 1rem `#4a7c59`. A horizontal line `#2a1f0a`. Below the line: a single row of all seven isometric icons at 40px each, separated by small `#9a7c42` diamond shapes. No navigation links, no legal text, no social icons — the farm has no presence on social media, by design. **Animation philosophy:** All animations are purposeful and brief. Maximum duration 1.5 seconds for any single animation. No looping except: the ghost hex grid (static, no loop), the chevron scroll indicator (gentle pulse, 2s loop), and the Art Deco vertical rail (continuous 0.3x parallax scroll). The path-draw animations trigger exactly once per section, on first entry. No replay on re-scroll. **No CTA blocks.** No pricing. No testimonials. No stat grids. The site has one implicit invitation: to understand the geometry. ## Uniqueness Notes **Chosen seed:** aesthetic: art-deco | layout: hexagonal-honeycomb | typography: futura-geometric | palette: analogous | patterns: path-draw-svg | imagery: isometric-icons | motifs: nature | tone: edgy-rebellious **Differentiators from the existing design corpus:** 1. **Hexagonal honeycomb as true structural grid, not decoration.** At 4% frequency, `hexagonal-honeycomb` layout is rare — but even the existing designs using it treat the hexagon pattern as a decorative motif placed behind conventional rectangular content. namu.farm uses hexagonal cells as the actual content container architecture, with fractured-cell displacement as the primary interactive animation. No other design in the corpus applies structural hex grids with deliberate geometric rebellion (displacement, fracture, tilt). 2. **Art Deco + nature + edgy-rebellious triad is unrealized.** The corpus's `art-deco` designs (6%) pair the aesthetic with luxury, fashion, or sci-fi contexts. `edgy-rebellious` tone exists at 3% but always pairs with brutalism, cyberpunk, or street aesthetics. The combination of formal Art Deco geometry weaponized against the sanitized imagery of modern agriculture — using Art Deco's own precision to argue for nature's refusal of that precision — has no precedent in the registry. 3. **Isometric-icons + path-draw-svg in a single coherent system.** `isometric-icons` sits at 2% frequency and `path-draw-svg` at 12%. Both patterns exist in the corpus but never together, and never with the specific logic of icons living inside hexagonal cells while path-draw animations connect and divide those cells. The botanical-industrial isometric icon vocabulary (tree, beehive, seed pod, mushroom) is designed as a unified set around a single conceptual argument — schematics of natural infrastructure. 4. **Korean typography as structural element, not cultural decoration.** The 나무 glyph in the footer and Section 4 ghost background is not a branding flourish or internationalization feature. It functions as a geometric object — the vertical-axis symmetry of the character echoes the bilateral symmetry of the hexagonal grid. This mirrors the site's core tension: a Korean word (patient, rooted, permanent) housed inside a European avant-garde geometrical system (angular, designed, willful). 5. **Avoided overused patterns from frequency analysis:** The design explicitly avoids `centered` layout (86% frequency), `full-bleed` hero photography (69%), and `parallax-sections` (9%). The grid is asymmetric (not centered), the hero is SVG-based (no photography), and transitions are hard-cut snap (not parallax).