# Design Language for maljosim.com ## Aesthetics and Tone maljosim.com (말조심 — Korean for "watch your words" / comment verification) channels a zen aesthetic — meditative stillness, deliberate negative space, and the disciplined beauty of restraint applied to the concept of careful, mindful communication. The site embodies the principle that words carry weight, using visual calm to encourage users to pause and consider before speaking. Inspiration draws from Japanese rock gardens (karesansui), Korean temple architecture, the quietude of calligraphy practice spaces, and the contemplative emptiness of Mark Rothko's color field paintings. The tone is opulent-grand — despite the visual minimalism, the language carries ceremonial weight, treating thoughtful speech as a noble art worthy of reverence. The minimal-navigation layout removes all friction and distraction, allowing the core message to resonate in silence. ## Layout Motifs and Structure The layout uses a **minimal-navigation** architecture — navigation stripped to the absolute essential, creating a meditative experience where content exists in contemplative isolation. **Minimal Navigation Architecture:** - No visible navigation bar — a single subtle mark (Korean 말 character) in the top-left corner serves as home link - Content: single-column, max-width: 640px centered, with 120px+ vertical section spacing - Sections separated by vast negative space rather than visual dividers - Page functions as a single meditative scroll — no pagination, no tabs, no menus - Small dot indicators (4px, fixed right edge) show scroll position silently **Section Sequence:** 1. **Stillness:** Near-empty hero — the phrase "말조심" in classical serif, surrounded by enormous negative space and subtle noise-texture background 2. **The Weight of Words:** Central concept section with poetic triadic-colored text blocks on the importance of careful communication 3. **Verification Ritual:** Feature description as a ceremonial process — each verification step presented as a meditative practice 4. **Particle Field:** Subtle particle-effects background section where tiny dots drift slowly, representing words floating in consciousness 5. **Silence:** Footer with nearly nothing — a single contact link and a period ## Typography and Palette **Typography:** - **Headlines:** "Cormorant Garamond" (Google Fonts) — refined classical serif at 2.5rem-4rem, weight 400. Its elegance and thin strokes embody the delicate nature of careful speech. - **Body Text:** "Cormorant Garamond" at 1.05rem, weight 400, line height 2.0. Extra-generous line height creates breathing room between lines, like pauses in mindful speech. - **Korean:** "Nanum Myeongjo" (Google Fonts) — Korean serif matching the classical elegance. - **Labels:** "Cormorant Garamond" small caps at 0.8rem, weight 600, letter-spacing 0.12em. **Color Palette:** - **Triadic Gold:** #c4a040 — warm gold for primary accents and key text - **Triadic Deep Blue:** #2040a0 — rich blue for secondary accents and links - **Triadic Rose:** #a04060 — deep rose for tertiary emphasis - **Rice Paper:** #f8f4ec — warm white background suggesting traditional paper - **Ink Dark:** #1a1a1a — near-black for primary text - **Stone Gray:** #8a8880 — warm gray for secondary text and subtle elements - **Mist White:** #f0ece4 — slightly darker cream for alternating backgrounds - **Shadow Light:** #e0d8c8 — warm shadow tone for depth accents ## Imagery and Motifs **Noise-Texture Paper Quality:** The entire page background features a subtle noise texture (SVG feTurbulence, baseFrequency 0.7, numOctaves 3, at 0.02 opacity) over Rice Paper, creating the handmade quality of traditional Korean hanji paper. This texture is nearly invisible but adds subliminal warmth and materiality. **Particle-Effects Meditation Field:** In the background, 40-60 tiny dots (2px, Stone Gray at 0.15 opacity) drift slowly in random directions (CSS @keyframes with translateX/translateY shifts over 30-50s, infinite, alternate). They represent words — some rising, some falling, all moving with quiet purpose. **Glitch Moments of Disruption:** Occasionally and subtly, text elements experience a micro-glitch — a 50ms horizontal displacement (transform: translateX(3px)) with chromatic split (text-shadow: 2px 0 Triadic Rose, -2px 0 Triadic Deep Blue) that flickers and resolves. This represents the danger of careless speech breaking the zen calm. Triggered sparingly on scroll at 2-3 points in the page. **Calligraphic Ink Splash:** A single, large (300-400px) abstract ink splash shape (SVG, organic blob with Ink Dark at 0.03 opacity) positioned behind the hero text, suggesting the bold stroke of a calligraphy brush — one decisive mark representing one careful word. **Breathing Animation:** Key text elements subtly pulse with a breathing rhythm — opacity oscillating between 0.85 and 1.0 over 4 seconds (ease-in-out, infinite), mimicking the meditative breathing practice that precedes mindful speech. ## Prompts for Implementation Build the page as a zen meditation on words. Body: background: Rice Paper. Container: max-width: 640px, margin: 0 auto. Sections: padding: 120px 0, creating enormous breathing room. Noise texture: full-page overlay div, position: fixed, inset: 0, pointer-events: none. SVG filter: feTurbulence baseFrequency="0.7" numOctaves="3" as background, mixed with feColorMatrix at 0.02 opacity. Particle effects: 50 small divs (2px, border-radius: 50%, Stone Gray at 0.15 opacity), position: fixed, distributed randomly across viewport. Each animated with unique @keyframes: translateX(random) translateY(random) over 30-50s, infinite, alternate. Glitch effect: @keyframes glitch { 0%, 95%, 100% { transform: translateX(0); text-shadow: none; } 96% { transform: translateX(3px); text-shadow: 2px 0 rgba(160,64,96,0.5), -2px 0 rgba(32,64,160,0.5); } 98% { transform: translateX(-2px); text-shadow: -2px 0 rgba(160,64,96,0.5), 2px 0 rgba(32,64,160,0.5); } }. Applied to select elements with animation: glitch 15s ease infinite. Breathing: @keyframes breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } applied with animation: breathe 4s ease-in-out infinite. AVOID: Busy interfaces, multiple CTAs, social proof sections, and any sense of urgency. Let the vast silence and deliberate slowness embody the "watch your words" philosophy. ## Uniqueness Notes 1. **Zen aesthetic for comment verification:** Visual meditation creates the pause and reflection that thoughtful communication requires. 2. **Minimal navigation as forced contemplation:** Removing all interface choices forces the user into a focused, meditative interaction. 3. **Glitch disruptions within zen calm:** Brief visual breaks represent the danger of careless words, making the calm feel earned and fragile. 4. **Particle-effects as floating words:** Drifting dots represent the weight and movement of words in conscious space. 5. **Breathing animation as mindfulness prompt:** The subtle pulse encourages users to synchronize with a calmer rhythm before engaging. **Seed/Style:** aesthetic: zen, layout: minimal-navigation, typography: serif-classic, palette: triadic, patterns: glitch, imagery: noise-texture, motifs: particle-effects, tone: opulent-grand **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses zen aesthetic, minimal-navigation layout, triadic palette, noise-texture imagery, and opulent-grand tone.