# Design Language for mosun.xyz ## Aesthetics and Tone mosun.xyz channels the meditative grandeur of watching light refract through a slowly rotating crystal suspended in a dark chamber -- the kind of experience you might find in a Yayoi Kusama infinity room if it were designed by a calligrapher who paints with molten gold instead of ink. The aesthetic is **generative** in the truest sense: visual forms that appear to grow, branch, and crystallize from mathematical seeds, but rendered with the warmth and imprecision of hand-drawn marks rather than the clinical sterility of algorithmic output. Think of Ernst Haeckel's "Kunstformen der Natur" illustrations reinterpreted as living, breathing gold-leaf organisms against an abyss of depthless black. The tone is **dreamy-ethereal** -- not the pastel, cotton-candy version of ethereal, but the heavy, ancient, liturgical kind. The dreaminess of gilded Byzantine mosaics in a candlelit apse. The ethereality of watching ink disperse in water at extreme slow motion. Every element should feel as if it is caught mid-emergence: not yet fully formed, still becoming, suspended between the abstract and the recognizable. The atmosphere is that of a lucid dream set inside a jeweler's workshop at 3 AM, where the artisan has fallen asleep and the golden filigree on the workbench has begun to grow on its own, sending tendrils across the dark velvet surface. There is no urgency here. No calls to action, no aggressive engagement patterns. The site is a place to arrive at and inhabit, like stepping into a James Turrell light installation. The user should feel that they have discovered something rare and private -- a space that exists for the sake of its own beauty, with meaning embedded in form rather than declared in copy. ## Layout Motifs and Structure The layout follows a **layered-depth** architecture -- a z-axis composition where content exists on multiple perceived depth planes, creating a sense of looking into rather than scrolling across. The viewport is treated not as a page but as a window into a dimensional space where foreground, midground, and background elements operate independently. **Depth Plane System:** - **Background Plane (z: -3):** The deepest layer is pure black (#080608) with an extremely slow-moving generative particle field -- gold-tinted points of light that drift like deep-space dust. These particles are rendered at 15-25% opacity and move at no more than 0.3px per frame, creating the impression of infinite distance. The particle field uses a Perlin noise function to determine drift direction, so motion appears organic rather than random. - **Atmosphere Plane (z: -2):** Between the background and content sits a layer of soft, radial gradients -- large, circular pools of warm light (#B8860B at 4-7% opacity) that shift position over 30-60 second cycles. These act as the ambient lighting of the scene, the way candlelight illuminates a dark room with pools of warmth. No more than 3 atmosphere pools are visible at any time. - **Content Plane (z: 0):** The primary content layer where text and key visual elements live. Content blocks do not fill the viewport edge-to-edge but instead float within generous negative space, typically occupying 50-60% of the viewport width on desktop and centered vertically within their sections. Each content block has a subtle golden border (1px solid, #C5A55A at 20% opacity) that fades in only when the block enters the viewport. - **Ornament Plane (z: +1):** A foreground layer of hand-drawn geometric motifs -- thin golden line-work forming tessellated hexagonal patterns, spirograph-like curves, and sacred geometry forms (the Flower of Life, Metatron's Cube, the Golden Spiral). These ornamental elements drift slowly across the foreground at different speeds depending on scroll position, creating a parallax-within-parallax effect. They are rendered at 10-18% opacity in gold (#D4AF37) so they overlay content without obscuring it. **Section Transitions:** Sections do not end and begin with hard edges. Instead, each section dissolves into the next through a **fade-reveal** pattern: as the user scrolls, the current section's content fades downward (opacity 1 to 0 over 200px of scroll) while the next section's content rises from below (opacity 0 to 1 over the subsequent 200px). During the 100px overlap zone, both sections are partially visible, creating a ghostly double-exposure effect. No snap scrolling -- the transitions are continuous and fluid. **Navigation:** Navigation is minimal and non-intrusive. A single thin golden line runs vertically along the left edge of the viewport (2px wide, #C5A55A at 40% opacity), with small diamond-shaped markers indicating section positions. The current section's diamond pulses gently (opacity oscillating between 40% and 80% over a 3-second cycle). Clicking a diamond triggers a smooth scroll with an ease-in-out-cubic curve over 1.5 seconds. No hamburger menus, no horizontal nav bars, no footer navigation. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Cinzel Decorative" (Google Fonts) -- a typeface rooted in classical Roman inscriptional capitals but with decorative flourishes that evoke gilded letterforms found on antique book spines and cathedral engravings. Weight: 700 (Bold). Used at `clamp(3rem, 6vw + 0.5rem, 6.5rem)` for primary section titles. Letter-spacing: `0.12em`. Color: #D4AF37 (true gold). Text-transform: uppercase. Each headline letter appears individually via a staggered fade-reveal animation, each letter delayed by 60ms, giving the impression of characters being inscribed by an invisible hand. - **Secondary Headlines / Subtitles:** "Cormorant Garamond" (Google Fonts) -- an elegant, high-contrast serif with Garamond heritage and refined hairlines that catch the light like gold wire. Weight: 300 (Light) for subtitles at `clamp(1.2rem, 2.5vw + 0.3rem, 2rem)`. Italic style for emphasis passages. Letter-spacing: `0.06em`. Color: #E8D5A3 (pale gold, lighter than the headline gold for hierarchical differentiation). Sentence case, never uppercase -- the contrast with the all-caps Cinzel creates a tension between monumental and intimate. - **Body Text:** "Nunito Sans" (Google Fonts) -- a humanist sans-serif with rounded terminals that softens the overall reading experience, providing a contemporary counterpoint to the classical display faces. Weight: 300 (Light) at `clamp(0.95rem, 1.2vw + 0.3rem, 1.15rem)`. Line-height: 1.85. Color: #A89F91 (warm gray with gold undertone -- not pure gray, which would feel cold against the black). Max-width: 38em per line. Paragraph spacing: 1.5em. - **Accent / Caption Text:** "Cinzel" (Google Fonts, the non-decorative variant) at weight 400 (Regular), 0.75rem, letter-spacing: `0.2em`, uppercase. Color: #8B7D6B (muted bronze). Used for section labels, metadata, navigation markers, and any small-print utility text. **Color Palette:** | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary Background | Obsidian Void | #080608 | Main background, the abyss from which all elements emerge | | Secondary Background | Charcoal Depth | #121014 | Subtle card/block backgrounds, one step above the void | | Primary Gold | True Gold | #D4AF37 | Headlines, primary interactive elements, ornamental lines | | Secondary Gold | Pale Gold | #E8D5A3 | Subtitles, hover states, secondary emphasis | | Tertiary Gold | Antique Bronze | #8B7D6B | Captions, muted accents, inactive navigation | | Warm Gray | Gilded Ash | #A89F91 | Body text, the primary reading color | | Accent Glow | Molten Amber | #B8860B | Atmospheric light pools, gradient centers, focus states | | Highlight | White Gold | #F5E6C8 | Rare emphasis moments, active states, maximum contrast | The palette operates on a strict principle: **light emerges from darkness**. No element should feel illuminated from an external source. Instead, every bright element -- every gold letter, every glowing line -- should appear to emit its own light against the black ground, the way bioluminescent organisms glow in deep ocean darkness. Background gradients move from #080608 to #121014, never lighter. The gold values (#D4AF37, #E8D5A3, #B8860B, #F5E6C8) form a temperature gradient from warm to cool gold, and should be used to indicate hierarchy: hotter gold = more important. ## Imagery and Motifs **Hand-Drawn Generative Geometry:** The primary visual language of mosun.xyz is **hand-drawn** illustration -- but not the casual, sketchy, marker-on-paper variety. This is the hand-drawn quality of medieval manuscript illumination, of Islamic geometric tilework drafted with compass and straightedge, of Leonardo's geometric studies in the margins of his notebooks. Every decorative element is rendered with deliberate imperfection: lines that are almost straight but carry the subtle tremor of a human hand, curves that are almost perfect circles but wobble 1-2 pixels from mathematical precision. **Motif Library:** 1. **The Golden Spiral:** A logarithmic spiral constructed from golden-ratio rectangles, drawn in a single continuous SVG path with `stroke-width: 1.5` and a hand-drawn filter applied (SVG `` displacement at very low intensity, `baseFrequency="0.03"`, to introduce micro-wobble). The spiral appears as a section separator, slowly rotating at 0.5 degrees per second. Color: #D4AF37 at 25% opacity. 2. **Tessellated Hexagons:** A field of hexagonal tiles that fills the ornament plane, each hexagon drawn with individual SVG paths rather than a repeated pattern, so subtle variations in line weight and vertex position create the hand-drafted feel. Interior lines subdivide each hexagon into six equilateral triangles. Color: #C5A55A at 8-12% opacity. The field extends beyond the viewport and shifts slowly with scroll position. 3. **Vesica Piscis Clusters:** The vesica piscis (the almond shape formed by two overlapping circles of equal radius) appears as a recurring ornamental element, often clustered in groups of 3-5 at different scales. These function as decorative punctuation between content blocks. Drawn with the same hand-tremor filter as the spiral. Color: alternating between #D4AF37 and #8B7D6B at 15-20% opacity. 4. **Particle Constellation:** The background particle field (described in Layout) occasionally forms temporary geometric configurations -- a triangle, a pentagon, a brief hexagonal cluster -- that hold for 3-5 seconds before dispersing. These "constellations" emerge organically from the Perlin noise drift, giving the impression that the void itself is dreaming of geometry. Particle color: #E8D5A3 at 20% opacity, with constellation-forming particles briefly brightening to 50%. 5. **Ink Wash Halos:** Behind major content blocks, a circular ink-wash effect rendered with CSS `radial-gradient` and a noise overlay creates the impression of hand-applied gold leaf with visible brush marks. The gradient moves from #B8860B at 6% opacity at center to transparent at edges, with a radius of approximately 400px. The noise overlay (SVG filter) adds the texture of handmade paper. **No Photography.** No stock images. No icons from icon libraries. Every visual element is either generative (particles, procedural geometry) or hand-drawn (SVG paths with displacement filters). The site's imagery is entirely self-created, existing in a visual universe that belongs to no other domain. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to total darkness -- #080608 filling the viewport with nothing visible for 800ms. Then, a single gold point of light (#D4AF37 at 60% opacity) appears at the exact center of the viewport. Over 2 seconds, this point expands into a thin golden ring (stroke-width: 1px, radius growing from 0 to 120px) with an ease-out curve. As the ring reaches full size, the domain name "mosun.xyz" fades in at the ring's center, set in Cinzel Decorative at approximately 4rem, letter-spacing 0.15em, each letter staggering in with 80ms delay. The ring then slowly begins to rotate (0.3deg/s) and fade to 15% opacity, becoming a permanent ornamental element in the background as the first content section fades in below. **Scroll Behavior:** All scroll animations use the **fade-reveal** pattern exclusively -- no slide-ins from left or right, no scale transformations, no bouncing. Elements emerge from invisibility (opacity 0) to visibility (opacity 1) with an ease-in-out curve over 600ms, triggered when the element's top edge crosses 75% of the viewport height. The fade is always accompanied by a subtle vertical translation of exactly 20px (from `translateY(20px)` to `translateY(0)`), giving the sensation of elements floating up from depth rather than snapping into place. **Content blocks** appear sequentially within each section, with 150ms stagger between siblings. The golden border on each block (1px solid #C5A55A at 20% opacity) draws itself into existence using `border-image` with an animated gradient, starting from the top-left corner and tracing clockwise over 800ms. **Geometric Ornament Interaction:** The foreground ornamental layer responds to mouse movement with an extremely slow, dampened parallax -- when the cursor moves, the ornaments shift in the opposite direction by no more than 8px total, with a 400ms ease-out lag. This is not a dramatic effect; it is a breath, a subtle confirmation that the space is alive and aware. On touch devices, the ornaments shift based on device tilt (DeviceOrientationEvent) with equivalent subtlety. **Section Architecture:** Each major section of the site follows this internal structure: 1. A section label appears first (Cinzel, 0.75rem, #8B7D6B, uppercase, letter-spacing 0.2em) -- something like "ORIGIN" or "RESONANCE" rather than utilitarian labels like "About" or "Contact" 2. 400ms later, the primary heading fades in (Cinzel Decorative, gold) 3. 400ms later, a thin horizontal golden line draws itself from left to right (SVG path animation, 1px, #D4AF37 at 30% opacity, width: 120px) 4. 400ms later, the body text fades in (Nunito Sans, #A89F91) 5. Any geometric ornaments in the section drift into their positions over 2 seconds **Performance Note for Generative Elements:** The particle system on the background plane should use a `` element (not DOM nodes) to maintain 60fps. Limit particle count to 80-120. The hexagonal tessellation in the ornament plane should be a single SVG element with `will-change: transform` for GPU compositing. All fade-reveal animations should use `opacity` and `transform` exclusively (no layout-triggering properties) for compositor-only rendering. **AVOID:** CTA buttons, pricing tables, stat grids, testimonial carousels, team photo sections, newsletter signup forms, cookie banners styled as design elements. The site has no commercial intent; it is a contemplative experience. Avoid any layout pattern that suggests a SaaS landing page or e-commerce template. No centered hero text with a big button below it. No three-column feature grids. No footer with four columns of links. **Bias Toward:** Full-screen immersive sections, narrative scroll experiences, ambient generative backgrounds, typographic compositions where text is art rather than information delivery, moments of deliberate emptiness where the user sees only the void and the distant gold particles. ## Uniqueness Notes **Differentiators from other designs:** 1. **Gold-Black-Luxury Palette at 0% Frequency:** No other design in the portfolio uses the gold-black-luxury palette. While warm palettes appear at 100% frequency, this specific implementation -- a restricted palette of gold values against pure black with no secondary color family -- is entirely absent. The palette does not blend gold with blues, greens, or other hues; it operates exclusively within the gold-to-bronze spectrum against obsidian black, creating a visual language closer to goldsmithing than web design. 2. **Dreamy-Ethereal Tone at 1% Frequency:** Nearly unused in the portfolio. Combined with the gold-black palette, this creates a unique emotional register -- ethereality typically implies lightness, airiness, soft colors, but here it manifests as the weightless dreaminess of floating in warm darkness, the ethereality of a gilded reliquary rather than a cloudy sky. This is heavy ethereal, liturgical ethereal, alchemical ethereal. 3. **Hand-Drawn Sacred Geometry as Primary Imagery:** While hand-drawn appears at 23% in aesthetics, no design combines hand-drawn imagery specifically with sacred and mathematical geometry (golden spirals, vesica piscis, tessellated hexagons). The hand-drawn quality here is not casual sketching but precision draftsmanship with deliberate imperfection -- the tradition of geometric manuscript illumination, not doodling. 4. **Layered-Depth Layout with Four Explicit Z-Planes:** The layered-depth layout at 7% frequency is uncommon, but this implementation is unique in defining exactly four named depth planes (Background, Atmosphere, Content, Ornament) that operate independently. Other designs may use z-index for overlapping elements; mosun.xyz treats depth as the fundamental organizational principle, with content floating in a three-dimensional void. 5. **Generative Particle Constellations:** The background particle system that spontaneously forms and dissolves geometric configurations is a feature absent from all other designs. This is not a static particle background or a simple starfield; it is a living system that generates transient geometric art, making each visit subtly different. 6. **Zero Photography, Zero Icons:** The site uses absolutely no photographic imagery and no icon library elements. Every visual is either algorithmically generated (particles, gradients, noise textures) or hand-drawn SVG geometry. This complete rejection of representational imagery in favor of abstract, generative, and geometric forms is unique in the portfolio. **Chosen Seed/Style:** aesthetic: generative, layout: layered-depth, typography: display-bold, palette: gold-black-luxury, patterns: fade-reveal, imagery: hand-drawn, motifs: geometric-shapes, tone: dreamy-ethereal **Avoided Overused Patterns:** playful aesthetic (95%), centered layout (99%), scroll-triggered patterns (97%), friendly tone (98%), mono typography (99%), warm palette (100%), gradient palette (90%), minimal imagery (95%), vintage motifs (83%), parallax patterns (76%), photography imagery (71%). The design deliberately steers away from the dominant visual language of the portfolio -- no playful energy, no centered single-column layouts, no monospace type, no photographic imagery, no vintage nostalgia.