# Design Language for mandala.day ## Aesthetics and Tone mandala.day is a meditative digital experience centered on the Buddhist concept of mandala (曼荼羅) -- sacred geometric diagrams that map the cosmos, the self, and the path to enlightenment. The site is not an encyclopedia but an interactive contemplation space where the visitor creates, observes, and dissolves mandalas through scroll and cursor interaction. The aesthetic is zen-contemplative, drawing from the visual traditions of Tibetan thangka paintings, Japanese Shingon Buddhist mandala art, and contemporary sacred geometry. The tone rejects urgency in all forms -- no loading spinners, no progress bars, no countdowns. Everything moves at the speed of breath. Colors emerge and dissolve like sand paintings swept away by monks at the conclusion of a ceremony. ## Layout Motifs and Structure **Primary layout: ma-negative-space** with a **single-column** center axis radiating outward. The entire site is organized around a central axis -- the vertical center of the viewport. All content emanates from this center point, mirroring the radial symmetry of a mandala itself. The layout uses extreme negative space (ma, the Japanese concept of meaningful emptiness) with content occupying only 40-50% of the viewport width. **Spatial relationships**: The page is divided into concentric conceptual rings. The outermost ring (the viewport edges) is always empty -- pure background. The middle ring contains navigational elements and ambient geometry. The innermost ring holds the primary content. This three-ring structure is maintained at every scroll position. **Navigation**: No visible navigation elements. The site is a continuous vertical meditation that responds to scroll depth. A faint circular progress indicator (a thin arc that completes a full circle as the user reaches the bottom) appears at the center of the viewport, overlaying content at very low opacity (0.08). It serves as the only orientation cue. ## Typography and Palette **Typography** - **Display / Mandala Names:** "Philosopher" (Google Fonts) -- a serif typeface with calligraphic influences and a meditative quality. Used at 2.5rem-4rem, weight 700. Its flowing letterforms connect to the hand-drawn tradition of mandala art. - **Body / Contemplation Text:** "Nunito" (Google Fonts) -- a well-balanced, rounded sans-serif with warmth and softness. Weight 300 for body (light, airy), 600 for emphasis. Line-height 2.0 for extremely generous reading rhythm. 18px size. - **Sanskrit / Sacred Terms:** "Noto Serif Devanagari" (Google Fonts) -- used exclusively for Sanskrit terms and mantras displayed alongside their translations. Weight 400. Adds authentic cultural texture. **Color Palette** | Role | Color | Hex | |------|-------|-----| | Emptiness | Deep indigo-black | #0d0d1a | | Saffron Ring | Sacred saffron orange | #e8a317 | | Lotus Pink | Soft ceremonial pink | #d4728c | | Lapis Ground | Deep lapis lazuli blue | #1a237e | | Gold Leaf | Metallic gold accent | #c9a84c | | Incense Smoke | Translucent warm gray | #a89f91 | | Moonlight | Cool pale silver | #d4d7e0 | The palette references traditional Buddhist art materials: saffron robes, gold leaf, lapis lazuli pigment, lotus petals, and incense smoke. Colors are used sparingly against vast fields of Emptiness. ## Imagery and Motifs **Core Visual Motifs** 1. **Generative Mandala Engine**: The centerpiece is an SVG-based mandala that builds itself as the user scrolls. Starting as a single point, it progressively adds concentric rings of geometric patterns -- petals, triangles, interlocking circles, and angular frames. Each ring appears with a slow path-draw animation (stroke-dashoffset transition, 3-5s per ring). The mandala is visible at the center of the viewport throughout the scroll, growing more complex with depth. By the final section, a complete mandala fills the viewport. 2. **Sand Dissolve Effect**: When the user scrolls backward (upward), mandala rings dissolve from outside-in with a particle scatter animation -- small colored dots (2px) that drift outward and fade, mimicking sand painting dissolution. This reinforces the Buddhist teaching of impermanence. 3. **Breathing Pulse**: The entire background subtly pulses -- a radial gradient centered on the viewport center oscillates between Emptiness and a slightly lighter shade (#111128) on a 6-second cycle (matching a slow breathing rhythm). This ambient animation is the heartbeat of the experience. 4. **Concentric Circle Guides**: Thin, barely-visible circles (0.05 opacity, 1px stroke) are always present in the background at fixed distances from the center, providing the geometric scaffold that all content aligns to. These reference the construction lines used in traditional mandala drawing. 5. **Incense Trail**: A thin vertical line descends from the top of the viewport to the content area, rendered as a gradient from Incense Smoke to transparent. It wavers slightly with a CSS animation (translateX oscillation of 2-3px over 8 seconds), evoking rising incense smoke inverted. ## Prompts for Implementation **Storytelling and Narrative Arc** The experience begins in total darkness -- a black screen with only the faintest breathing pulse. After a pause (2 seconds of stillness), a single point of Gold Leaf appears at the center. The title "MANDALA" fades in below it in Moonlight. As the user scrolls, the mandala grows. The first ring (simple circle) appears with accompanying text explaining the outermost ring of a mandala -- the fire ring, representing transformation. Each subsequent scroll section adds a ring and presents its Buddhist meaning: the vajra ring (indestructible truth), the lotus ring (purity), the deity ring (enlightened forms), and the center point (bindu, the seed of consciousness). The final section inverts the journey. The text asks the visitor to scroll up, and as they do, the mandala dissolves into sand particles. The last thing visible before complete darkness returns is the original single point -- now pulsing with all the colors of the mandala rings simultaneously, before fading to nothing. **Animation Priorities** - SVG mandala path-draw build animation (stroke-dashoffset controlled by scroll position via IntersectionObserver or scroll listener) - Sand dissolve particle system (canvas overlay with particles spawning from SVG node positions, drifting outward with gravity and fade) - Breathing background pulse (CSS keyframe on radial-gradient, 6s infinite ease-in-out) - Incense trail waver (CSS keyframe translateX, 8s infinite alternate) - Circular progress arc (SVG circle with stroke-dasharray controlled by scroll percentage) **Full-screen Meditative Experience**: No scroll-snap -- the scroll should be fluid and continuous. Content sections use min-height: 100vh but allow smooth transition. The mandala SVG should be position: fixed at the center. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, card layouts, hamburger menus, footer grids, loading animations, progress bars. ## Uniqueness Notes **Differentiators:** 1. **Scroll-driven generative SVG construction**: The mandala builds itself in direct response to scroll depth, creating a unique relationship between user input and visual output. No other design in the batch ties scroll position to generative SVG construction. 2. **Reverse-scroll dissolution**: The sand painting dissolution when scrolling upward introduces a novel bidirectional scroll narrative -- forward builds, backward destroys, teaching impermanence through interaction. 3. **Radial layout system**: All content radiates from a central axis with concentric ring organization, breaking entirely from conventional column/grid systems and directly embodying the mandala's own organizational principle. 4. **Meditative pacing as design constraint**: The deliberate rejection of any urgency-inducing patterns (no spinners, no progress bars, no countdowns, breathing-rate animations) creates a unique temporal experience. **Chosen seed/style:** interactive webgl experience **Avoided overused patterns:** corporate aesthetic (89%), centered-only layout (87%), minimal imagery (84%), counter-animate (90%), mysterious-moody tone (96%), mono typography (92%). Instead used ma-negative-space layout, zen-contemplative tone, elegant-serif + rounded-sans typography, and jewel-tones palette with gold-black-luxury accents.