# Design Language for namu.day ## Aesthetics and Tone namu.day (namu meaning "tree" in Korean) is a living watercolor sketchbook left open on a windowsill during a light rain. The aesthetic channels the tender imprecision of wet-on-wet watercolor technique: pigment bleeds past its intended borders, edges dissolve into soft halos, and white paper breathes through translucent washes like light through fog. The tone is dreamy-ethereal -- not saccharine or whimsical, but quietly hypnotic, like watching ink drop into still water in slow motion. The visual inspiration draws from three specific sources: (1) the sumi-e ink wash paintings of Hasegawa Tohaku, particularly his "Pine Trees" screen where forms emerge from and dissolve into negative space; (2) the muted monochrome watercolor studies of Agnes Martin, with their meditative repetition and barely-there linework; and (3) vintage Korean botanical field journals from the 1930s, where hand-lettered annotations surround delicate specimen illustrations with ink that has aged to warm grey. Every surface should feel as though it was painted by hand moments ago and is still drying. Backgrounds carry visible paper grain texture. Section transitions bleed like pigment crossing a fold in damp paper. Text appears as though it was lettered with a brush pen -- not perfectly, not sloppily, but with the natural variation that comes from a steady, practiced hand. The mood is meditative and unhurried. Scroll speed should feel slower than expected. Animations unfold gradually, like a time-lapse of a watercolor drying. Nothing demands attention; everything invites contemplation. The site should feel like a deep breath held for a long, gentle moment before release. ## Layout Motifs and Structure The layout follows a magazine-spread composition, breaking away from the ubiquitous centered single-column format. The page is organized as a series of editorial spreads, each occupying the full viewport height and width, as though the visitor is turning pages of a hand-bound art book. **Spread Architecture:** Each spread is divided into an asymmetric two-panel composition -- never a perfect 50/50 split. The proportions follow the golden ratio: approximately 61.8% / 38.2%, alternating which side receives the larger panel as the user scrolls. On odd spreads, the left panel is dominant (carrying the primary watercolor illustration); on even spreads, the right panel takes over. This creates a rhythmic zigzag reading pattern that mimics the way one's eyes travel across a physical magazine. **Grid System:** Within each panel, content is placed on a loosely aligned 12-column grid, but the grid itself is subtly skewed -- columns are not perfectly vertical. Each column tilts 0.5-1.5 degrees from true vertical using `transform: rotate()`, creating a hand-drawn imprecision that reinforces the watercolor aesthetic. Elements snap to this tilted grid but with deliberate misalignment: images might overshoot a column boundary by 8-12px, text blocks might sit 4px off the baseline. This controlled imperfection is critical. **Vertical Rhythm:** Spreads are separated by "bleed gutters" -- full-width horizontal bands 120-180px tall that contain nothing but a slow-moving watercolor wash animation. These gutters serve as visual palate cleansers between sections, like the blank pages in an art book between chapters. The wash in each gutter uses a slightly different grey tone, creating a subtle tonal progression as the user scrolls deeper. **Navigation:** There is no traditional nav bar. Instead, a vertical column of small watercolor dot marks sits fixed to the left edge of the viewport, each dot representing a spread. The current spread's dot "bleeds" outward in a soft halo animation, while inactive dots remain as crisp, dark marks. Clicking a dot triggers a smooth scroll to that spread with an easing curve that mimics the flow of water: fast in the middle, slow at start and end (`cubic-bezier(0.22, 0.68, 0.35, 1.0)`). **Responsive Behavior:** On viewports below 768px, spreads collapse from side-by-side panels into a stacked arrangement, but the asymmetry is preserved through alternating full-bleed images and inset text blocks with generous margins (24px left/right, creating a "pillar" effect that references the narrow columns of a poetry chapbook). ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) -- a true handwritten script font with natural pen variation, used at sizes 2.8rem to 5.5rem. Weight 700. The letterforms carry the wobble and character of actual brush lettering, reinforcing the hand-painted aesthetic. Headlines use generous letter-spacing: `letter-spacing: 0.04em` to let each character breathe like individual brushstrokes. Line height: 1.15 for tight, intentional stacking. - **Body Text:** "Cormorant Garamond" (Google Fonts) -- an elegant, high-contrast serif with delicate hairlines that echo the thin brushstrokes in watercolor detail work. Used at 1.1rem-1.2rem, weight 400 for body, 600 for emphasis. Line height: 1.85 for luxurious reading spacing. The serif letterforms feel like they were set in movable type and pressed into handmade paper. `font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1` for old-style numerals that blend with the vintage journal aesthetic. - **Captions and Annotations:** "Kalam" (Google Fonts) -- a handwriting font modeled on actual handwriting with South Asian pen characteristics. Used at 0.85rem-0.95rem for image captions, margin notes, and small annotations. Weight 300 (light) for a pencil-sketch quality. Captions are positioned at slight angles (-2deg to +2deg) using transforms, as though they were scribbled in the margin of a sketchbook. - **Monospaced Detail:** "Cutive Mono" (Google Fonts) -- used sparingly for dates, metadata, or technical labels at 0.75rem. Its typewriter-like quality contrasts with the handwritten fonts, adding the feel of a museum catalogue label affixed to a painting. **Palette:** The palette is strictly monochrome, built entirely from a single hue axis with no chromatic color. This creates the effect of a black-and-white watercolor study -- pure pigment diluted to various strengths in water. | Role | Name | Hex | Usage | |------|------|-----|-------| | Paper White | Unbleached Vellum | `#F7F3EE` | Primary background, the "paper" | | Light Wash | Morning Fog | `#D8D3CC` | Section backgrounds, bleed gutters, subtle fills | | Mid Tone | Graphite Mist | `#9E9790` | Secondary text, borders, decorative elements | | Dark Wash | Sumi Charcoal | `#4A4541` | Body text, strong graphic elements | | Deep Black | Ink Well | `#1C1A17` | Headlines, focal illustrations, maximum contrast points | | Warm Grey | Aged Linen | `#C4BEB6` | Hover states, active navigation dots, caption text | | Paper Shadow | Foxed Page | `#E8E2DA` | Drop shadows (extremely subtle, 2-4px blur, 20% opacity) | The monochrome constraint means all visual hierarchy is achieved through value contrast and transparency. Watercolor effects use the same grey tones at varying opacity levels (5%-80%) to create the illusion of diluted pigment. Background washes layer multiple semi-transparent greys to build depth, just as a watercolorist layers washes to create tonal richness. ## Imagery and Motifs **Organic Blob Forms:** The primary visual motif is organic blob shapes -- amorphous, fluid forms that reference watercolor puddles, ink drops in water, and the silhouettes of leaves and tree canopies. These blobs are generated using SVG `` elements with smooth cubic Bezier curves. Each blob has an irregular, non-geometric outline with 8-12 control points, creating forms that feel biological rather than mathematical. Blobs serve multiple roles: - **Background decoration:** Large, low-opacity (8-15%) blobs float behind content panels, drifting slowly on a 30-second CSS animation loop. Their movement is barely perceptible, like watching clouds through frosted glass. - **Image masks:** All imagery is clipped to blob shapes using `clip-path` with SVG references, never displayed in rectangles. This means every image on the page has a soft, organic boundary like a watercolor vignette. - **Section transitions:** Between spreads, overlapping blob shapes in different grey tones create the effect of pigment pooling at the fold of a page. **Retro Pattern Accents:** Small geometric patterns inspired by 1960s-70s textile design appear as accent strips and border decorations. These patterns use only the monochrome palette and include: - A repeating scallop/wave pattern (`border-image` using inline SVG) used as decorative rules between text blocks - A dot-dash pattern reminiscent of Morse code or traditional Korean pojagi patchwork seams, used as vertical dividers between columns - A crosshatch pattern applied as a subtle background texture (opacity 3-5%) within certain panels, evoking the look of pencil shading on paper These retro patterns provide geometric counterpoint to the organic blobs, creating tension between the loose watercolor aesthetic and structured pattern-making traditions. **Watercolor Wash Effects:** CSS-generated watercolor washes using layered radial gradients with `filter: blur()` and `mix-blend-mode: multiply`. Each wash is built from 3-5 overlapping radial gradients of different grey tones, blurred to different radii, creating the natural irregularity of pigment settling into paper grain. Washes animate slowly: gradient positions shift on a 20-40 second loop using `@keyframes` with `background-position` changes. **Paper Texture:** A subtle paper grain texture is applied globally via a CSS pseudo-element on the ``. This texture is a repeating noise pattern generated as an inline SVG using `` with `baseFrequency="0.65"` and `numOctaves="4"`, composited with `` to match the Unbleached Vellum tone. Opacity: 40%. This gives every surface the tactile quality of cold-pressed watercolor paper. **Brushstroke Borders:** Section borders and decorative rules are never straight lines. Instead, they use SVG path elements that trace slightly irregular, hand-drawn paths. These border strokes have variable width achieved through `stroke-width` animation along the path, thickening and thinning like a brush loaded with ink that gradually runs dry. The border-animate pattern makes these strokes appear to draw themselves into existence as the user scrolls to them, using `stroke-dasharray` and `stroke-dashoffset` animation over 1.5-2.5 seconds. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a single, continuous contemplative journey -- a scroll through a watercolor sketchbook where each spread reveals a new composition. There is no traditional hero section with a CTA. Instead, the opening spread fills the viewport with a large-scale watercolor wash animation that slowly resolves from blank paper to a visible tonal landscape, taking 4-5 seconds to fully appear. The site title "namu.day" is lettered in Caveat at 5.5rem, positioned off-center (following the golden ratio), and fades in character by character with 80ms stagger as the wash develops beneath it. **Scroll-Driven Storytelling:** Each spread tells a micro-story through the interplay of imagery, typography, and animated watercolor effects. As the user scrolls into a spread, elements appear in a choreographed sequence: first the background wash bleeds in (0.8s), then the primary blob-masked image materializes (0.4s delay, 1.2s duration), then the headline draws itself (0.6s delay, brush-style reveal from left), and finally the body text fades up in paragraphs with 200ms stagger between them. This sequence creates the feeling of watching an artist build a painting layer by layer. **Border Animation System:** The border-animate pattern is central to the design language. Every decorative rule, section divider, and accent border should draw itself using SVG stroke animation. Implementation: each border SVG has `stroke-dasharray` set to its total path length and `stroke-dashoffset` starting at the same value (fully hidden). When scrolled into view (IntersectionObserver with `threshold: 0.3`), `stroke-dashoffset` animates to 0 over 2 seconds with `ease-in-out` timing. The stroke should have `stroke-linecap: round` and variable width sections to feel brush-like. **Watercolor Wash Generation:** Implement washes using this CSS technique: create a `
` with `position: absolute; inset: 0; overflow: hidden; pointer-events: none;` containing 4-5 child divs, each with a radial gradient background in different grey tones at 15-30% opacity. Apply `filter: blur(40px)` to the container. Animate each child's `transform: translate()` on offset timing loops (15s, 22s, 28s, 35s) so the wash shifts organically. Apply `mix-blend-mode: multiply` to darken where washes overlap. **Blob Shape Animation:** Organic blobs should morph slowly between shapes. Use CSS `clip-path` with `polygon()` or reference SVG `` elements. Animate between two blob states using `@keyframes` with `clip-path` interpolation over 8-12 second loops. Each blob should have a unique animation duration to prevent synchronized movement. **Performance Considerations for Atmosphere:** Use `will-change: transform, opacity` on animated wash elements. Keep blur filters on GPU-composited layers. Implement scroll-triggered animations with `IntersectionObserver` rather than scroll event listeners. Use `requestAnimationFrame` for any JavaScript-driven animations. Limit simultaneously animating elements to 8-10 per viewport to maintain smooth 60fps. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Sharp geometric dividers, straight ruled lines, perfect circles - Saturated or chromatic colors of any kind - Snappy, instant transitions -- everything should flow - Parallax scrolling (overused at 76%) -- use cross-fade and wash-bleed transitions instead - Card-grid layouts, dashboard patterns, sidebar navigation - Centered single-column layout (overused at 99%) **BIAS TOWARD:** - Full-viewport immersive spreads with no visible UI chrome - Slow, contemplative animation timing (1.5s minimum duration for any transition) - Paper-like materiality in every surface texture - Hand-drawn imperfection in every geometric element - Silence and white space as compositional tools ## Uniqueness Notes **Differentiators from other designs:** 1. **True Monochrome Watercolor System:** While other designs use watercolor as a decorative accent or apply watercolor-style blobs over colorful palettes, namu.day commits fully to a monochrome watercolor language where every visual element -- from backgrounds to imagery to navigation indicators -- is rendered exclusively in grey-scale washes. The combination of watercolor aesthetic with strict monochrome palette creates a cohesive visual identity that no other design in the portfolio achieves. This is not "monochrome with accent colors" -- it is absolute tonal purity. 2. **Magazine-Spread Viewport Composition:** Instead of the continuous vertical scroll with centered content blocks used by 99% of designs, namu.day structures its content as distinct double-panel editorial spreads, each occupying exactly one viewport. The golden-ratio asymmetric panel split alternating left/right creates a physical reading rhythm borrowed from print editorial design. Combined with bleed-gutter transitions between spreads, this creates the sensation of paging through a bound art book. 3. **Self-Drawing Brushstroke Borders:** The border-animate pattern (used in only 2% of existing designs) is elevated from a subtle accent to a core structural element. Every divider, decorative rule, and section boundary draws itself into existence with SVG stroke animation that mimics the gestural quality of a loaded brush moving across paper. The variable-width stroke animation (thickening and thinning along the path) has no precedent in other designs, which use uniform stroke widths for any path animation. 4. **Retro-Pattern/Organic-Blob Tension:** The deliberate juxtaposition of geometric retro textile patterns (scallops, crosshatch, dot-dash) with amorphous organic blob forms creates a visual dialectic between structure and fluidity that is unique in the portfolio. Most designs commit to either geometric or organic -- namu.day holds both in productive tension, referencing the way traditional Korean pojagi patchwork combines rigid seam geometry with flowing, asymmetric fabric shapes. 5. **Anti-Navigation Navigation:** The rejection of conventional navigation in favor of watercolor dot marks that bleed and resolve is a distinctive interaction pattern. Navigation becomes part of the watercolor metaphor rather than an imposed UI element, dissolving the boundary between decoration and function. **Chosen Seed/Style:** - aesthetic: watercolor (9% frequency -- underused) - layout: magazine-spread (8% frequency -- underused) - typography: handwritten (20% frequency -- moderate) - palette: monochrome (10% frequency -- underused) - patterns: border-animate (2% frequency -- very underused) - imagery: organic-blobs (6% frequency -- underused) - motifs: retro-patterns (1% frequency -- very underused) - tone: dreamy-ethereal (2% frequency -- very underused) **Avoided Overused Patterns:** - Centered layout (99%) -- replaced with asymmetric magazine-spread panels - Warm palette (100%) -- replaced with strict monochrome greys - Scroll-triggered as sole animation strategy (96%) -- supplemented with continuous ambient wash animations and self-drawing border strokes - Friendly tone (98%) -- replaced with dreamy-ethereal contemplative mood - Parallax scrolling (76%) -- replaced with wash-bleed cross-fades between spreads - Vintage motifs (85%) -- replaced with retro-patterns and organic-blobs - Mono typography (98%) -- replaced with handwritten font family (Caveat, Kalam) paired with elegant serif (Cormorant Garamond)