# Design Language for munju.club ## Aesthetics and Tone munju.club -- a phonetic echo of "munju" (문주, the decorative stone pillar that guards the entrance to Korean palace gates) married to the convivial intimacy of "club" -- inhabits a visual world where **the ceremonial weight of East Asian stone carving meets the philosophy of wabi-sabi imperfection, all presented through a lens of opulent grandeur**. The site does not depict a literal palace. Instead, it channels the emotional register of standing before a weathered granite munju pillar: the sense that something was once carved with perfect symmetry, that time and rain have softened every edge into asymmetry, and that this erosion has made the object more beautiful, not less. The site feels like entering a private members' club housed inside an abandoned marble bathhouse -- high ceilings stained with mineral deposits, water-worn tessellated floors, gilded fixtures gone green with patina, the air thick with the smell of wet stone and sandalwood. The **wabi-sabi** aesthetic drives every decision: nothing is perfectly aligned, nothing is factory-clean, nothing gleams. But this is not poverty or decay -- it is the particular grandeur that comes from materials so fine they age magnificently. Think: cracked celadon glaze on a Goryeo-dynasty vase, gold kintsugi veins tracing the fractures. Think: marble countertops in a 1920s Parisian hotel, their surfaces etched by decades of coffee cups and cigarette ash into a topography of ring-stains and scorch marks that no interior designer could replicate. The tone is **opulent-grand** -- this is not humble or restrained. It is extravagant in its embrace of deterioration. Luxury that has passed through time and emerged softer, warmer, more human. The mood oscillates between the heavy silence of a temple archive and the warm amber glow of a late-night whiskey bar. There is gravity here, but also intimacy. The site does not shout. It murmurs, with the confidence of something that does not need to prove its value. ## Layout Motifs and Structure The layout employs a **parallax-sections** architecture -- the page is divided into deep, full-viewport sections that layer foreground content over slowly scrolling background planes, creating a sense of physical depth, as if the user is peering through successive rooms of a long marble corridor. Each section is a spatial chamber with its own depth and atmosphere. **Parallax Section System:** - **Chamber 0 (Portal):** Full-viewport entrance. A single marble-textured background plane scrolls at 0.3x speed behind a centered stone-carved title treatment. The title itself is rendered in Commissioner with generous letter-spacing (0.15em) and appears to be chiseled into the surface -- achieved via layered `text-shadow` in warm stone tones (#C4A882, #8B7355) with a subtle inset effect. No navigation. No CTA. Just the name and a single downward-pointing kintsugi crack that serves as a scroll invitation. The crack is an SVG path with a gold (#C9A96E) stroke that draws itself over 3 seconds using `stroke-dasharray` animation. - **Chamber 1 (The Foyer):** Two parallax planes -- a background marble texture at 0.4x scroll speed and a foreground content panel floating at 1x speed. The content panel is not a card or a box; it is a `clip-path: polygon()` shape that mimics the silhouette of a weathered stone tablet, with irregular edges. Inside, body text (Commissioner at 1.125rem, weight 300) describes the space in a single, unhurried paragraph. The text color is #5C4A3A against a translucent warm ground (#F5EDE3 at 92% opacity). A faint noise texture (CSS `background-image` using SVG filter turbulence) sits behind the text to evoke handmade paper. - **Chamber 2 (The Gallery):** Three parallax planes at 0.2x, 0.5x, and 1x speeds, creating a trompe-l'oeil corridor effect. Circular marble medallions (CSS `border-radius: 50%` with marble-texture `background-image`) float at the middle parallax speed, while text blocks drift at full speed in the foreground. The medallions have a `box-shadow` that simulates the way light catches the edge of a convex stone surface: `0 8px 32px rgba(92, 74, 58, 0.3), inset 0 -4px 12px rgba(201, 169, 110, 0.15)`. - **Chamber 3 (The Archive):** A single deep parallax plane (0.15x speed) carrying a full-width marble texture that slowly reveals a sepia-tinted map or diagram as the user scrolls. Foreground content is arranged in a loose, asymmetric stack -- not a grid, but elements placed with deliberate irregularity, as if someone laid papers on a stone desk. Each element is rotated between -1.5deg and +2deg using CSS transforms, and their positions are offset by randomized margins (achieved in CSS with `:nth-child()` selectors applying different `margin-left` values: 4%, 12%, 7%, 2%). - **Chamber 4 (The Sanctum):** The final viewport. All parallax layers converge to a single plane. The marble texture, which has been distant background until now, comes forward to fill the entire viewport at 1x scroll speed. The closing text -- a single sentence in Commissioner italic, weight 200, at 2rem -- floats in the center, letterspaced at 0.2em, with color #C9A96E (gold). Below it, a small bubble motif: five concentric translucent circles of decreasing opacity (from 12% to 3%), drawn in CSS with `border: 1px solid rgba(201, 169, 110, 0.12)` and `border-radius: 50%`, pulsing gently with a `scale` keyframe animation (1.0 to 1.04, 8-second cycle, ease-in-out). **Spatial Principles:** - No fixed navigation bar. The entire experience is a vertical descent through chambers - Sections are separated not by lines or color blocks but by changes in parallax depth -- the user feels the space opening and closing - Maximum content width is 680px for text blocks, but marble textures and medallions bleed full-width - Vertical rhythm is generous: 120px minimum between content elements. Breathing room is a design material ## Typography and Palette **Typography:** - **Display / Headlines:** "Commissioner" (Google Fonts) -- a variable font with weight range 100-900 and optical sizing. Used at weights 200-400 for headlines (never bold -- wabi-sabi rejects assertion). Headlines are set at 2.5rem-4.5rem with `letter-spacing: 0.08em` and `line-height: 1.15`. The variable weight axis is exploited for hover interactions: titles gently shift from weight 200 to 300 on mouse proximity (not hover -- proximity, using JavaScript to detect cursor distance and interpolate). The font's slightly squared terminals and humanist proportions read as both contemporary and classical, sitting comfortably between stone-carved inscription and modern editorial. - **Body Text:** "Commissioner" at weight 300, 1.125rem, `line-height: 1.75`, `letter-spacing: 0.015em`. The single-font strategy is deliberate: wabi-sabi design does not mix and match. It finds depth within constraint. Body text color is #5C4A3A (warm umber) on light grounds and #E8DFD3 (warm parchment) on dark grounds. - **Accent / Metadata:** "Commissioner" at weight 100, 0.8125rem, `letter-spacing: 0.25em`, `text-transform: uppercase`. Used for dates, labels, section markers. This ultra-thin weight, when letterspaced heavily, evokes inscriptions on memorial stones -- the kind of text that was meant to last centuries, not to grab attention. - **Numerals and Special Characters:** Commissioner's tabular numerals are used for any dates or numbers, set at weight 200 with `font-variant-numeric: tabular-nums`. Numbers are always rendered in #C9A96E (gold) regardless of context, creating a subtle visual thread through the page -- as if the numbers were inlaid in a different material. **Palette:** The palette is **honeyed-neutral** -- a range of warm stone, amber, and parchment tones grounded by deep umber and accented by antiqued gold. No cold tones. No pure whites or blacks. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Aged Parchment | `#F5EDE3` | The warm cream of old paper exposed to decades of sunlight. Used for main content grounds | | Background Deep | Temple Stone | `#2C2218` | Near-black warm brown, the color of stone in shadow. Used for dark chambers and contrast sections | | Text Primary | Warm Umber | `#5C4A3A` | The brown-black of aged ink on paper. Never pure black -- wabi-sabi finds pure black aggressive | | Text Light | Pale Clay | `#E8DFD3` | Light text for dark backgrounds. Warm, slightly yellow, like unglazed porcelain | | Accent Gold | Kintsugi Gold | `#C9A96E` | The color of gold lacquer used to repair broken ceramics. Rich but not shiny -- matte gold, the gold of old things | | Accent Warm | Honey Amber | `#B8956A` | Mid-tone amber, the color of dark honey or aged maple syrup. Used for borders, subtle highlights | | Surface Mid | Sandstone | `#D4C4AD` | Neutral warm mid-tone. The color of dry limestone. Used for card backgrounds, secondary surfaces | | Shadow Tone | Deep Sienna | `#8B7355` | Warm shadow color. Used in `box-shadow` and `text-shadow` instead of black or gray | | Marble Vein | Vein Gold | `#A89070` | The color of mineral veins in natural marble. Used for decorative lines and crack motifs | **Color Rules:** - Shadows are never gray or black. All shadows use #8B7355 at varying opacities - No element has `border-color` in gray. Borders are either #C9A96E (gold), #D4C4AD (sandstone), or transparent - Background transitions between sections use `linear-gradient` blends between #F5EDE3 and #2C2218, never abrupt color changes - Opacity is a primary design tool: most decorative elements sit at 8%-25% opacity, creating a sense of veils and layers ## Imagery and Motifs **Marble Texture as Foundation:** The entire site is built on a marble-texture visual substrate. This is not a single background image repeated tile-fashion. Instead, CSS generates a convincing marble effect using layered SVG filters: 1. Base: `fePerlinNoise` with `baseFrequency="0.015 0.025"` and `numOctaves="6"` -- this produces the organic veining pattern 2. Color mapping: `feColorMatrix` shifts the noise into the honeyed-neutral palette (#F5EDE3 for light areas, #D4C4AD for mid-tones, #A89070 for vein lines) 3. Displacement: A `feTurbulence` + `feDisplacementMap` combination warps the veining to prevent regularity 4. Final composite: Layered via `mix-blend-mode: multiply` over the base background color at 40% opacity, so the marble reads as a subtle texture rather than a photographic surface Each parallax section uses a different `seed` value in the `feTurbulence` filter, ensuring no two sections have identical marble patterns. The veining density increases as the user scrolls deeper -- Chamber 0 has sparse, thin veins; Chamber 4 has dense, thick veins -- creating a narrative of geological compression. **Bubble-Playful Motifs:** Counterbalancing the weight of stone and marble, the site is populated by **bubble motifs** -- translucent circles that float, drift, and pulse throughout the design. These are not literal soap bubbles. They are the visual echo of water drops on stone, of air pockets trapped in aged glass, of the circular imperfections in hand-poured ceramics. They represent the wabi-sabi principle that perfection is found in the accidental. - **Ambient Bubbles:** CSS-only circles (`border-radius: 50%`, `border: 1px solid rgba(201, 169, 110, 0.08)`, `background: radial-gradient(circle at 30% 30%, rgba(245, 237, 227, 0.06), transparent)`) scattered across sections. They range from 40px to 280px in diameter. Each bubble has a slow `translateY` animation (keyframes drifting 8-20px over 12-25 seconds, ease-in-out, infinite). Some bubbles overlap content -- they sit at `z-index` between background and text, creating a layered atmosphere. - **Kintsugi Crack Network:** A decorative SVG overlay that draws golden crack lines across section boundaries. The cracks originate from bubble centers (as if the bubbles have cracked the marble) and radiate outward in organic, branching paths. Stroke color: #C9A96E at 30% opacity, stroke-width: 1px. The cracks are animated with `stroke-dashoffset` transitions triggered by scroll position, so they appear to spread as the user scrolls through each section. - **Bubble Cluster Markers:** At the beginning of each new chamber, a cluster of 3-7 concentric bubbles serves as a section marker (instead of a number or title). The bubbles are nested concentrically with increasing diameter and decreasing opacity, pulsing at slightly different rates to create a breathing, organic marker. **Patina and Wear Effects:** - All images (if any external images are used) receive a CSS treatment: `filter: sepia(0.15) saturate(0.85) contrast(0.95)` plus a pseudo-element overlay of the marble noise texture at 8% opacity - Decorative borders use `border-image` with a custom SVG that simulates worn stone edges -- slightly irregular, thicker in some places than others - Text occasionally receives a very subtle `opacity: 0.92` to prevent it from appearing too crisp against textured backgrounds ## Prompts for Implementation **Full-Screen Parallax Narrative Experience:** The site must be experienced as a descent through a marble corridor -- each viewport is a chamber with its own depth, its own parallax speed, its own density of marble veining and bubble motifs. There is no navigation bar, no hamburger menu, no footer links. The user scrolls down, and the space unfolds. The scroll itself is the interaction model. **Parallax Implementation Strategy:** Use CSS `transform: translateZ()` within a `perspective` container for GPU-accelerated parallax, rather than JavaScript scroll listeners. The root container has `perspective: 1200px` and `transform-style: preserve-3d`. Child layers are positioned at different `translateZ` values: - Far background marble: `translateZ(-600px) scale(1.5)` -- moves at 0.5x scroll speed - Mid-layer medallions/bubbles: `translateZ(-300px) scale(1.25)` -- moves at 0.75x scroll speed - Foreground content: `translateZ(0)` -- moves at 1x scroll speed This CSS-only approach eliminates jank and works without JavaScript for the core parallax effect. JavaScript is reserved only for: 1. Commissioner weight interpolation based on cursor proximity (requestAnimationFrame loop) 2. Kintsugi crack SVG `stroke-dashoffset` animation triggered by IntersectionObserver 3. Bubble ambient drift randomization (assigning random animation delays and durations on load) **Scroll-Driven Atmospheric Shifts:** As the user scrolls from Chamber 0 to Chamber 4, the following properties transition smoothly: - Background base color: from #F5EDE3 (warm parchment) to #2C2218 (temple stone) -- the corridor grows darker - Marble vein density: from sparse (filter `baseFrequency: 0.01`) to dense (`baseFrequency: 0.03`) - Bubble opacity: from 5% ambient to 15% -- more visible in the darkness - Gold accent brightness: from muted (#B8956A) to bright (#C9A96E) -- gold catches more light in dark spaces - Text weight: body text shifts from Commissioner 300 to 200 as the user descends, growing more delicate These transitions are driven by CSS scroll-timeline (using `animation-timeline: scroll()` where supported) with a JavaScript IntersectionObserver fallback. **Animation Philosophy:** All animations are slow. Nothing moves quickly. The fastest animation on the page is the kintsugi crack drawing at 3 seconds. Bubble drifts are 12-25 seconds. Weight interpolations are 800ms. Parallax is inherently tied to scroll speed (user-controlled). The site breathes at the pace of geological time, not digital time. **Storytelling Arc:** The page tells a story without words -- or rather, the words are secondary to the spatial narrative: 1. **Arrival** (Chamber 0): Light, spacious, a single carved name in warm stone. The user is at the entrance 2. **Greeting** (Chamber 1): A weathered tablet introduces the space. Marble texture is present but subtle. Bubbles begin to appear at the edges 3. **Immersion** (Chamber 2): Depth increases. Three parallax layers create a corridor effect. Medallions float between planes. The marble is more pronounced 4. **Discovery** (Chamber 3): The archive. Content is scattered with deliberate imperfection. Kintsugi cracks connect elements. The atmosphere darkens 5. **Stillness** (Chamber 4): Everything converges. One plane. One sentence. Gold text on dark stone. Bubbles pulse in concentric rings. The descent is complete **AVOID:** - CTA buttons of any kind. This is not a conversion funnel - Pricing blocks, feature grids, testimonial carousels - Stat-grids or numbered achievement blocks - Any element that reads as "SaaS landing page" - Pure white (#FFFFFF) or pure black (#000000) anywhere - Sharp corners (`border-radius: 0`). Every element has at least 2px radius, most have 4-8px - Stock photography. All visual content is CSS-generated (marble textures, bubble motifs, crack networks) - Fast animations. Nothing under 800ms duration ## Uniqueness Notes **Differentiators from other designs:** 1. **CSS-Generated Marble as Primary Visual Material:** No other design in the portfolio uses procedurally generated marble texture (via SVG filters) as the foundational visual substrate of every section. While marble-texture appears in 2% of designs as an accent, this site makes it the architectural material of the entire experience -- different seeds per section, increasing vein density as a narrative device, and marble fragments used as decorative medallions. The marble is not decorative; it is structural. 2. **Parallax-Sections as Spatial Architecture (0% frequency):** The parallax-sections layout pattern has 0% usage in the current portfolio. While 76% of designs use parallax as an animation pattern, none structure their entire layout around parallax depth as a spatial metaphor. Each "chamber" in munju.club is a room defined by parallax depth, not a section defined by content type. The layout is architectural rather than informational. 3. **Single-Font Variable Weight System (Commissioner at 100-400):** While most designs pair 2-3 fonts, munju.club uses only Commissioner across all text roles, exploiting its variable weight axis (100-900, used here exclusively in the 100-400 range) for hierarchy. This is a direct expression of wabi-sabi: finding infinite variety within severe constraint. The cursor-proximity weight interpolation (200 to 300 on approach) is a unique micro-interaction not seen in any other design. 4. **Kintsugi Crack Network as Navigation Metaphor:** The golden crack lines that spread between sections -- originating from bubble centers and radiating across marble surfaces -- serve as both decoration and wayfinding. They are the visual connective tissue of the page, replacing conventional dividers, borders, and separators with an organic, animated network that references the Japanese art of golden repair. No other design uses crack propagation as a design system. 5. **Bubble Motifs as Wabi-Sabi Imperfection Markers (2% frequency):** The bubble-playful motif category sits at only 2% usage. Here, bubbles are recontextualized from their usual playful/childlike associations into markers of geological imperfection -- air pockets in stone, water drops on marble, the circular voids in hand-poured ceramic glaze. This reframing of a "playful" motif into a "grand" context is a deliberate tension unique to this design. 6. **Darkening Atmospheric Progression:** The scroll-driven transition from light parchment (#F5EDE3) to dark stone (#2C2218) creates a narrative arc of descent that is uncommon. Most designs maintain consistent lighting throughout. munju.club treats scroll position as time-of-day, and the page grows darker and more intimate as the user ventures deeper. **Chosen Seed/Style:** `aesthetic: wabi-sabi, layout: parallax-sections, typography: commissioner-versatile, palette: honeyed-neutral, patterns: parallax, imagery: marble-texture, motifs: bubble-playful, tone: opulent-grand` **Avoided Overused Patterns:** - "playful" aesthetic (95% frequency) -- replaced with wabi-sabi (3%) - "centered" layout (99%) -- replaced with parallax-sections (0%) - "mono" typography (99%) -- replaced with commissioner-versatile (1%) - "warm" palette (100%) -- while the palette IS warm in temperature, it is categorized as honeyed-neutral (3%), a specific warm subset that is underrepresented - "scroll-triggered" patterns (97%) -- while parallax is scroll-responsive, the primary pattern mechanism is CSS `translateZ` parallax (not JS scroll-trigger), and the pattern category is "parallax" which at 76% is common but the implementation via CSS perspective is distinctive - "friendly" tone (98%) -- replaced with opulent-grand (2%) - "minimal" imagery (94%) -- replaced with marble-texture (2%) - "vintage" motifs (84%) -- replaced with bubble-playful (2%)