# Design Language for muhan.studio ## Aesthetics and Tone muhan.studio inhabits the visual space of a dry stone garden viewed through a floor-to-ceiling window at 5:47 AM -- the moment before the groundskeeper begins raking, when the gravel furrows hold their perfect geometry and the first gray light turns every surface into a gradient between slate and silver. The word "muhan" (무한) means "infinite" in Korean, and this infinity is expressed not through expansion or excess but through reduction: the design language asks how few elements are needed before the viewer begins to fill the emptiness with their own contemplation. The aesthetic is **zen** -- but not the decorative zen of spa websites with their stock bamboo imagery and gratuitous Buddha silhouettes. This is the zen of the Ryoan-ji rock garden: fifteen stones arranged so that from any vantage point, only fourteen are visible. Something is always withheld. The site operates on the principle of **ma** (間) -- the productive emptiness between elements that gives them meaning. Every pixel of negative space is intentional, every gap is a statement. The tone is **calm-serene** -- the quietness of a library reading room at closing time, when the last reader has left but the desk lamps are still on. There is no urgency, no persuasion, no call to action. The site simply exists, like a stone exists, and invites the visitor to exist alongside it. Color is subdued to the point where the eye must adjust, like entering a dim room. Motion is present but unhurried -- things move at the speed of clouds crossing a window. The overall mood draws from three sources: the negative-space compositions of Hasegawa Tohaku's pine tree screens (where fog is the subject, not the background), the systematic gray studies of Gerhard Richter's abstract paintings, and the interface philosophy of Dieter Rams ("less, but better"). The result is a site that feels simultaneously ancient and modern -- a stone garden rendered in CSS. ## Layout Motifs and Structure The layout follows a **split-screen** architecture: the viewport is divided into two persistent halves, left and right, that function as independent but conversational surfaces. This is not the generic 50/50 split of portfolio templates; the division is **asymmetric and breathing** -- the left panel occupies approximately 38% of the viewport while the right panel takes 62%, creating a golden-ratio tension that the eye finds satisfying without understanding why. **Left Panel (The Anchor):** The left panel is the "stone" -- it is relatively static, containing the site identity, primary navigation as a sparse vertical stack of text links, and a persistent ambient element (a slow-cycling enso circle drawn in SVG that completes one revolution every 90 seconds, its brush stroke thickening and thinning as it travels). The left panel has a fixed position; it does not scroll. Its background is a flat #1C1F26 (nearly black with a blue-charcoal undertone) and all its typography is rendered in cool grays ranging from #9BA3AF to #D1D5DB. The navigation links are set flush-left with generous line spacing (2.4em) and no decoration -- they respond to hover by a slow opacity shift from 0.5 to 1.0 over 600ms, like a stone emerging from fog. **Right Panel (The Flow):** The right panel is the "water" -- it scrolls independently from the left panel, carrying the main content in a vertical stream. Its background is #F4F5F7 (a warm-tinted gray that stops just short of white), creating a stark luminance contrast with the dark left panel. Content within the right panel is laid out in a single column with extreme top and bottom margins (12vh between sections), allowing each content block to occupy its own moment of attention. **The Division Line:** The split between panels is not a simple border. It is a 1px line rendered at #3A3F4B that subtly pulses in opacity (0.3 to 0.7) on a 4-second sine wave, as if the boundary between the two halves is breathing. This creates the subliminal impression that the two panels are alive, that the split is not fixed but negotiated. **Responsive Collapse:** Below 768px, the split-screen collapses into a stacked configuration: the left panel becomes a minimal top bar (the enso shrinks to a 24px icon, navigation collapses into a hamburger), and the right panel becomes the full-width scrolling surface. The transition between desktop and mobile is handled by a CSS `clip-path` animation that makes the left panel appear to fold inward like a screen door closing. **Grid Within the Right Panel:** Content in the right panel follows a 6-column sub-grid with 24px gutters, but text blocks never span more than 4 columns. The remaining 2 columns are always empty -- dedicated negative space that reinforces the ma principle. Occasionally, a small icon or a single kanji character floats in this margin space, like a seal stamp on a scroll painting. ## Typography and Palette **Typography:** - **Display / Headlines:** "Zen Kaku Gothic New" (Google Fonts) -- weight 500 (Medium). This typeface is a Japanese-designed sans-serif with Latin character support that maintains consistent stroke width and a geometric calm across both scripts. Its letterforms have the quiet precision of architectural drafting -- no flourishes, no excess. Used at 2.8rem-4.5rem for primary headings, always in sentence case. Letter-spacing is set to -0.02em for a slightly tighter, more considered appearance. Line-height at 1.15 for headings creates compact text blocks that function as visual objects rather than reading material. - **Body / Prose:** "Inter" (Google Fonts) -- weight 300 (Light) for body text, weight 400 (Regular) for emphasis. Inter's optical sizing and carefully tuned x-height make it exceptionally readable at small sizes even in light weight. The light weight at 0.95rem with 1.85 line-height creates text that feels etched rather than printed -- each letter precise, each word given room to breathe. Paragraph max-width is capped at 38em to maintain a comfortable reading measure. - **Accent / Labels:** "Space Mono" (Google Fonts) -- weight 400 (Regular) at 0.75rem. Used exclusively for timestamps, metadata, section labels, and navigational markers. Set in uppercase with 0.15em letter-spacing and color #6B7280 (medium gray). The monospace treatment for metadata creates a clear hierarchy distinction from body text -- these are system annotations, not prose. They read like the small printed numbers in the margin of an art book. - **Variable-Fluid Sizing:** All type sizes are defined using CSS `clamp()` functions for fluid scaling between breakpoints. Headlines use `clamp(1.8rem, 3vw + 0.5rem, 4.5rem)`, body uses `clamp(0.85rem, 0.9vw + 0.4rem, 1.05rem)`, and accent uses `clamp(0.65rem, 0.6vw + 0.3rem, 0.8rem)`. This creates a typography system that breathes with the viewport, never snapping between fixed sizes but flowing continuously -- the typographic equivalent of water finding its level. **Palette:** The palette is built on **cool grays** -- a spectrum that moves from near-black to near-white with a consistent blue-charcoal undertone, punctuated by a single accent color that appears so rarely it becomes an event. | Role | Name | Hex | Usage | |------|------|-----|-------| | Deep Ground | Charcoal Ink | #1C1F26 | Left panel background, footer | | Dark Accent | Slate Shadow | #2E323B | Card backgrounds on dark surfaces, code blocks | | Mid-Dark | Iron | #3A3F4B | Borders, dividers, subtle UI elements | | True Mid | Graphite | #6B7280 | Secondary text, metadata, disabled states | | Light Mid | Pewter | #9BA3AF | Tertiary text, placeholder text | | Near-Light | Silver Mist | #D1D5DB | Primary text on dark backgrounds | | Light Ground | Morning Fog | #F4F5F7 | Right panel background, light surfaces | | Accent | Stone Moss | #5B8C6B | Single accent color -- used for the enso stroke, active nav indicators, and one element per viewport. Never used for backgrounds or large areas. Appears like moss on a gray stone: natural, restrained, alive. | The accent color #5B8C6B is a muted sage-green that references the moss that grows between garden stones. Its usage rule is strict: no more than one instance of this color should be visible in any given viewport at any time. This scarcity gives it gravitational pull -- the eye finds it immediately, and it anchors the composition like a single flower in an ikebana arrangement. ## Imagery and Motifs **Icon-Heavy Visual Language:** muhan.studio replaces conventional imagery (photographs, illustrations, hero graphics) with a comprehensive icon system. Every concept, section, and navigational element is represented by a custom-drawn line icon rendered in SVG at a consistent 1.5px stroke weight. The icons follow a design language of geometric reduction: circles, lines, and arcs only -- no filled shapes, no gradients, no shadows. Each icon is 48x48px at default size and is drawn in #6B7280 (Graphite) against whatever background it sits on. The icons are not decorative -- they are the primary visual content, replacing photographs entirely. **Icon Categories and Specific Designs:** 1. **Enso Circle (primary motif):** An imperfect circle drawn with a slight gap at the 2 o'clock position, rendered as an animated SVG `` that draws itself on page load. The stroke uses `stroke-dasharray` and `stroke-dashoffset` animation to appear as if being painted by an invisible brush over 3 seconds. This is the site's logo, identity mark, and loading indicator simultaneously. 2. **Stone Arrangements:** Icons representing different content types use arrangements of circles (stones) on horizontal lines (ground). A "project" is three stones in a triangular grouping. A "writing" piece is five stones in an asymmetric row. A "contact" link is two stones separated by negative space. The number and arrangement encode meaning, like the counting systems of ancient civilizations. 3. **Wave Patterns:** Section dividers use a repeating SVG pattern of sine waves stacked vertically with decreasing amplitude -- a visual representation of calm water settling. The waves are rendered at 0.5px stroke width in #D1D5DB and repeat horizontally across the full width of the right panel. 4. **Leaf Silhouettes:** The nature motif manifests as occasional leaf-form icons scattered in the margin space of the right panel. These are not realistic botanical illustrations but geometric abstractions: a leaf is a pointed ellipse bisected by a center line, a branch is three such ellipses at varying angles from a common stem. Drawn in #9BA3AF, they function like the marginal drawings in a naturalist's field notebook. 5. **Grid of Dots:** A subtle background pattern of dots at 48px intervals covers the right panel, rendered at 1px radius in #E5E7EB (barely visible against the #F4F5F7 background). This dot grid creates a faint sense of structure and measurement, like graph paper seen through tracing paper, reinforcing the architectural precision of the layout. **Nature Motifs -- Abstracted, Not Literal:** Nature references are present throughout but always reduced to their geometric essence. A mountain is a triangle. A river is a sine wave. A tree is a vertical line with three angled branches. A moon is a circle with a crescent cutout. These abstractions connect the design to the natural world without falling into decorative naturalism or stock-photo territory. ## Prompts for Implementation **Full-Screen Split Narrative Experience:** The site opens to the full split-screen layout immediately -- no loading screen, no splash page, no animation gate. The left panel is already present with its dark surface and the enso circle mid-draw (the SVG `stroke-dashoffset` animation begins at page load, taking 3 seconds to complete the circle). The right panel begins with an oversized heading "muhan.studio" set in Zen Kaku Gothic New at `clamp(2.5rem, 4vw, 4.5rem)`, positioned with 15vh of top margin so it floats in the upper portion of the screen with vast emptiness below. Below the heading, after 8vh of space, a single sentence in Inter Light describes the studio in under 15 words. Then nothing -- just the dot grid and silence -- until the user scrolls. **Scroll Behavior in the Right Panel:** As the user scrolls the right panel, content sections fade in using `IntersectionObserver` with a 0.15 threshold. Elements do not fly in from the sides or bounce -- they simply increase in opacity from 0 to 1 over 800ms with a concurrent translateY of 20px to 0px. This is the only scroll animation. It is deliberately understated because in a zen context, the absence of spectacle IS the spectacle. **Shake-Error Pattern (Purposeful Disruption):** The shake-error pattern is repurposed from its conventional use (form validation feedback) into a moment of intentional disruption that breaks the calm surface. When the user hovers over the enso circle in the left panel, after a 2-second hover dwell, the circle performs a brief horizontal shake animation (translateX oscillation of +/- 4px over 300ms, easing with cubic-bezier(0.36, 0.07, 0.19, 0.97)) and then redraws itself -- the SVG stroke resets to offset and re-animates. This is the design equivalent of a zen master striking a student with a keisaku (warning stick): a sharp, unexpected break in stillness that heightens awareness. The same shake triggers if the user attempts to right-click anywhere on the site -- a gentle "no" that is felt rather than explained. **Enso Drawing Interaction:** On the right panel, one section invites the user to draw their own enso. A canvas element with a gray circular guide (dashed stroke) responds to mouse/touch input: the user can draw a single continuous stroke within the circle area. The stroke is rendered in #5B8C6B (Stone Moss accent) at 2px weight with a slight tremble filter applied (SVG `feTurbulence` with baseFrequency 0.02). Once the stroke ends, the user's enso fades to 50% opacity and remains on the page as they continue scrolling -- a trace of their visit, their moment of imperfection left behind in the garden. **Ambient Sound Toggle:** A small speaker icon (line-drawn, matching the icon system) sits at the bottom of the left panel. Clicking it enables a looping ambient audio track: rain on stone, approximately 30 seconds, seamlessly looped using the Web Audio API with a crossfade of 2 seconds at loop boundaries. The audio begins at volume 0 and fades in over 3 seconds to a maximum of 0.15 (barely audible). This is not background music; it is environmental texture, the sonic equivalent of the dot grid -- barely there, but shaping perception. **CSS Custom Properties for the Gray Scale:** All colors are defined as CSS custom properties on `:root`, enabling a potential dark/light mode toggle that is simply a remapping of the same gray scale: ```css :root { --deep: #1C1F26; --dark: #2E323B; --mid-dark: #3A3F4B; --mid: #6B7280; --light-mid: #9BA3AF; --near-light: #D1D5DB; --light: #F4F5F7; --accent: #5B8C6B; } ``` **Navigation as Poetry:** Navigation links in the left panel are not conventional labels. Instead of "About," "Work," "Contact," the links read as fragments: "stone" (about/identity), "water" (work/portfolio), "moss" (journal/writing), "path" (contact/connection). These single words are set in Zen Kaku Gothic New at 1.1rem, weight 300, with 2.4em line-height. On hover, the word does not underline or change color -- instead, the corresponding kanji character fades in to the right of the word at 40% opacity: stone becomes "stone 石", water becomes "water 水", moss becomes "moss 苔", path becomes "path 道". **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero sliders, cookie banners styled as modals, parallax scrolling on the main content, gradient backgrounds, drop shadows heavier than 4px blur, any animation duration longer than 1 second (except the enso draw and ambient pulse), stock photography, emoji, exclamation marks in copy. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Split-Screen as Philosophical Statement:** At 1% frequency, split-screen layout is nearly unused in the portfolio. Here it is not a design convenience but a conceptual framework: left/right maps to still/moving, dark/light, anchor/flow, stone/water. The asymmetric 38/62 division and the breathing border line between panels create a layout that is structurally unlike anything else in the collection. No other design uses the split as a duality metaphor. 2. **Icon-Heavy Without Tech Aesthetic:** Icon-heavy imagery sits at 2% frequency, and its typical deployment is in dashboard or tech-documentation contexts. muhan.studio inverts this by using a hand-drawn, geometry-reduced icon language that references zen calligraphy and Japanese mon (family crests) rather than Material Design or Feather icons. The enso-as-logo, stone-arrangement-as-content-type, leaf-as-marginal-notation system has no parallel in the existing designs. 3. **Shake-Error as Zen Device:** The shake-error pattern at 2% frequency is conventionally used for form validation. Repurposing it as a zen "keisaku" moment -- an intentional disruption of calm that heightens awareness -- is a complete inversion of its typical meaning. No other design in the portfolio uses an error pattern as a contemplative device. 4. **Single-Accent-Color Discipline:** While cool-grays appears in 6% of designs, no other design enforces the strict "one accent instance per viewport" rule. The #5B8C6B Stone Moss green functions like ikebana's single flower principle: its rarity gives it enormous visual weight, and the discipline of its deployment is itself a design statement. 5. **Interactive Enso Drawing:** No other design in the portfolio includes a participatory drawing element. The user-drawn enso creates a moment of genuine interaction -- not clicking a button or filling a form, but making a mark that persists in the page. This transforms the visitor from viewer to participant, from consumer to co-creator of the garden. **Chosen seed/style:** aesthetic: zen, layout: split-screen, typography: variable-fluid, palette: cool-grays, patterns: shake-error, imagery: icon-heavy, motifs: nature, tone: calm-serene **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), scroll-triggered patterns (97%), parallax patterns (76%), warm palette (100%), mono typography (99%), friendly tone (98%), vintage motifs (83%), minimal imagery (95%), photography imagery (71%). The design deliberately steers away from all of these dominant patterns, constructing its visual identity from the portfolio's least-utilized vocabulary.