# Design Language for namu.market ## Aesthetics and Tone namu.market (Namu — 나무(木), Korean for "tree") channels a hand-drawn aesthetic — the organic, imperfect charm of sketched illustrations and craft-market signage applied to a tree-themed marketplace platform. The site feels handmade — every element carries the warmth of pencil marks on paper, the slight wobble of hand-lettered signs, and the authentic imperfection that distinguishes a farmers' market stall from a supermarket shelf. Inspiration draws from the illustrated packaging of Innocent Drinks, the sketch-style branding of Noma restaurant, the hand-drawn maps of They Draw and Travel, and the artisan market aesthetic of Etsy's vintage sellers. The tone is minimal — economical, direct language that lets products speak with the quiet confidence of things grown well. ## Layout Motifs and Structure The layout uses an **f-pattern** architecture — content arranged to follow the natural F-shaped reading pattern of marketplace browsing, where eyes scan across the top then down the left edge. **F-Pattern Architecture:** - Strong horizontal hero/header establishing the market identity - Content-heavy left column with product listings - Right column for supplementary information - Scanning-optimized rows with consistent left-edge alignment - Container: max-width: 960px centered - The F-pattern matches how people naturally browse market stalls **Section Sequence:** 1. **Market Gate:** Hero with display-bold title across full width on ethereal-blue background, water-bubbles morning dew illustrations, layered-depth stall depth effect 2. **Stalls:** Product listings in F-pattern rows — glitch interactive hover effects with water-bubbles product freshness illustrations 3. **Specialty:** Featured items in wider F-pattern breakout rows with layered-depth showcase staging 4. **Growers:** Producer profiles in left-aligned F-pattern listing with hand-drawn portrait treatments 5. **Close:** Footer as market closing — minimal sign-off with layered-depth folding-stall effect and hand-drawn farewell sketch ## Typography and Palette **Typography:** - **Headlines:** "Archivo Black" (Google Fonts) — bold display sans at 2.5rem-3.5rem, weight 400. Its strong, confident presence creates the bold signage quality of market stall headers. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.9rem, weight 400, line height 1.7. - **Accent:** "Caveat" (Google Fonts) — handwritten at 1.1rem, weight 400 for product notes and grower descriptions. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Morning Blue:** #e4ecf4 — soft morning blue for primary backgrounds - **Mist Pale:** #d4dce8 — pale mist for secondary backgrounds - **Ink Dark:** #283848 — dark ink blue for primary accent - **Sketch Blue:** #4878a0 — sketch-blue for secondary accent - **Berry Warm:** #a85060 — warm berry for tertiary accent - **Text Deep:** #1a2028 — deep blue-black for body text - **Pencil Gray:** #607080 — pencil gray for secondary text - **Border Sketch:** #b8c0cc — sketch-line border color ## Imagery and Motifs **Water-Bubbles Market Freshness:** Product freshness illustrated through water imagery — SVG droplets (6-14px) with gradient fills in Morning Blue and Sketch Blue at 0.1-0.2 opacity clustered near product displays. The water suggests morning dew on fresh produce, the mist of a dawn market, and the vitality of well-watered trees. **Glitch Market Imperfection:** Product cards feature subtle glitch effects on hover — brief (150ms) transform: translate(1px, -1px) with a momentary color-shift (hue-rotate(5deg)) before settling. The controlled glitch suggests the analog imperfection of hand-drawn market signage that shifts slightly in the breeze. **Layered-Depth Market Staging:** Product displays use layered depth — background context layer (0.04 opacity, blurred), mid-ground product layer (clear), foreground accent layer (thin lines, 0.08 opacity). The layering creates the depth of looking into a well-arranged market stall where products are staged at multiple distances. **Ethereal-Blue Market Dawn:** Backgrounds use soft morning blues — the color of a market at dawn when stalls are still being set up and everything carries the promise of the day ahead. Light sections: linear-gradient(180deg, #e4ecf4, #d4dce8). The blue palette distinguishes this market from warm, expected farmers' market aesthetics. **Hand-Drawn Sketch Accents:** Section dividers and card borders use slightly irregular lines — CSS borders with dash arrays (border: 1px dashed Border Sketch) creating hand-sketched quality. Small hand-drawn SVG illustrations (pencil-style strokes, 24-40px) of leaves, apples, and tree silhouettes at content boundaries. ## Prompts for Implementation Build the page as a hand-drawn tree market. F-pattern: .market-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 32px; } Container: max-width: 960px, margin: 0 auto, padding: 48px 24px. Glitch: .product-card { transition: transform 150ms ease; } .product-card:hover { animation: microGlitch 150ms ease; } @keyframes microGlitch { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); filter: hue-rotate(5deg); } 100% { transform: translate(0, 0); filter: hue-rotate(0); } } Water bubbles: .dew-drop { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(72,120,160,0.2), rgba(72,120,160,0.05)); width: var(--size, 8px); height: var(--size, 8px); } Layered depth: .stall-bg { position: absolute; inset: 0; opacity: 0.04; filter: blur(2px); } .stall-accent { position: absolute; opacity: 0.08; } Sketch borders: .sketch-card { border: 1px dashed #b8c0cc; border-radius: 4px; padding: 24px; } AVOID: Slick e-commerce platforms, corporate marketplace designs, and complex shopping cart interfaces. Let hand-drawn warmth and minimal directness create a market where tree products feel freshly harvested and personally presented. ## Uniqueness Notes 1. **Hand-drawn for tree marketplace:** Sketch-style illustrations give every product the authenticity of a handmade market stall. 2. **F-pattern as market browsing:** Natural reading patterns match the way people scan stalls at a physical farmers' market. 3. **Glitch as analog imperfection:** Subtle digital glitches mirror the charming wobble of hand-lettered market signage. 4. **Ethereal-blue as dawn market:** Morning blue palette captures the specific atmosphere of a market at first light. 5. **Water-bubbles as freshness:** Dew drop motifs communicate the vitality and freshness of tree products just harvested. **Seed/Style:** aesthetic: hand-drawn, layout: f-pattern, typography: display-bold, palette: ethereal-blue, patterns: glitch, imagery: water-bubbles, motifs: layered-depth, tone: minimal **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 hand-drawn aesthetic, f-pattern layout, ethereal-blue palette, water-bubbles imagery, and minimal tone.