# Design Language for mosun.xyz

## Aesthetics and Tone

**mosun.xyz** is a candle studio — the word "mosun" evokes a hushed, vaguely Eastern European village word for twilight, the exact hour when the first candle is lit inside a house and amber leaks through lace curtains onto fresh snow. The aesthetic is **inflated-3d muted-vintage**: objects have the satisfying puffiness of wax that has pooled and hardened over time, a kind of slow-solidified warmth. Think: a pillar candle that has been burning for six hours, its sides collapsed inward in glossy wavy ridges; a beeswax taper so smooth it looks sculpted rather than dipped; a jar candle whose frosted glass has condensation rings from decades of being set on the same windowsill.

The tone is **approachable-casual** — this is not a luxury perfume counter. It is the artisan who sells candles at the Saturday market, smells faintly of bergamot and woodsmoke, and can explain why beeswax burns cleaner without sounding like a lecture. The copy is warm, a little witty, unhurried. Sentences trail off into em-dashes. The site does not sell urgency; it sells the idea that the moment you light this candle, the evening changes.

Mood board in language: **antique brass candlesticks sitting on a windowsill draped in dusty rose linen; a marble mortar full of dried lavender; a hand-typed label on cream stock; the soft hiss of a wick catching; fog on old glass; a reading nook with a dog-eared paperback.**

The inflated-3d quality appears not in pop-3d renders but in subtle CSS depth — the candle flame SVG has a bloated, slightly rounded silhouette; section cards have pillowy soft shadows with zero hard edges; text headings appear pressed slightly into the page surface like a letterpress impression but inverted (embossed out rather than debossed in).

## Layout Motifs and Structure

**Parallax-sections** — the page is composed as five independent cinematic panels that each scroll at different rates, creating depth through motion rather than geometry.

**Panel 1 — The Opening Flame:** Full viewport. Dark background (#2a1f1a). A single oversized candle SVG (inflated, pudgy silhouette) centered with a slow-breathing CSS flame animation. The wordmark "mosun" is set extremely large, tracking wide, positioned low-left so the candle reads first. Parallax: the candle drifts upward 40px as the user scrolls down; the wordmark drifts upward 20px; the faint marble texture background drifts upward 10px — three layers of independent movement creating real spatial depth.

**Panel 2 — The Marble Slab:** Light panel (#f5f0ea). A horizontal layout of three "scent families" — each is a circular pillow card (inflated-3d via CSS border-radius + layered box-shadows) with a candle illustration, scent name in large Playfair Display Italic, and two-line descriptor. The cards have a slight parallax lift on scroll so they appear to float off the page surface. Background has a subtle inline SVG marble texture — white Carrara veining over ivory, not a photograph.

**Panel 3 — The Making Process:** Dark panel (#1e1710). Text-dominant. A single tall column of copy set in Lato, describing the hand-poured process in three short paragraphs, each introduced by a Playfair Display drop cap. The parallax here moves a decorative marble slab shape (large ellipse, stone-colored) slowly up behind the text column as you scroll, like a counter rising into frame.

**Panel 4 — The Scent Story:** Full-bleed marble texture panel (#f0ece3 base). Three to four scent "vignettes" arranged in an offset masonry-ish grid — not a rigid 3-column CSS grid but a staggered layout where each card sits at a slightly different Y position, creating visual rhythm. Each card is a parchment-colored square (inflated pillow shadow), headline in Playfair, descriptor in Lato. Magnetic behavior: each card tracks the cursor position with a 5–10px gentle translate, making the grid feel alive without being distracting.

**Panel 5 — The Closing Light:** Full viewport. Returns to the dark (#2a1f1a) opening palette. A slowly rotating ring of small candle-flame SVGs around a central text block. The central text is the studio tagline set in Playfair Display Italic at ~5rem. Below it, an email-capture field with zero border styling — just an underline and a submit arrow. No aggressive CTA language.

**Spatial logic:** Sections alternate dark/light/dark/light/dark in a candlelit rhythm. Generous vertical padding (min 120px top and bottom per section). No sticky nav — a single floating dot-nav at viewport right edge, just five dots that indicate position and can be clicked.

## Typography and Palette

**Primary display font:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) — SC weight 700 italic for hero wordmark; weight 400 italic for section headings; weight 400 upright for scent names in cards. Set very large: wordmark at clamp(5rem, 12vw, 11rem). Playfair's ball terminals and high-contrast strokes look like engraved label typography — precisely right for a candle studio with a vintage sensibility.

**Body and UI font:** [Lato](https://fonts.google.com/specimen/Lato) — weight 300 for body paragraphs, weight 400 for UI elements (nav dots, form field placeholder). Set at 1.125rem / 1.875 line-height. The open geometry of Lato contrasts cleanly with Playfair's ornamental serifs without competing.

**Accent / label font:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 300 italic, used exclusively for small-cap scent descriptors beneath card headlines (e.g., "beeswax · bergamot · oakmoss"). Set at 0.875rem. A third register of old-world typography that deepens the vintage layer.

**Palette — muted-vintage amber warmth:**

| Role | Name | Hex |
|---|---|---|
| Deep Background | Candlenight | #2a1f1a |
| Warm Background | Parchment | #f5f0ea |
| Marble Surface | Ivory Stone | #e8e2d5 |
| Warm Text | Sepia Ink | #3d2b1f |
| Accent Warm | Beeswax | #c9a96e |
| Accent Cool | Dusty Rose | #c4a89f |
| Flame Highlight | Wax Ember | #e8874a |
| Muted Mid | Tallow | #9c8878 |
| Pale Contrast | Linen White | #faf7f2 |

All nine colors are from the same low-saturation family — no primary colors, no digital brights. The palette feels like a collection of natural materials: beeswax, marble, linen, old paper, dried flowers.

## Imagery and Motifs

**Marble texture (inline SVG, not a photo):** A repeating SVG pattern of thin, irregular curved paths in `#d6cfc3` over `#e8e2d5`, simulating Carrara marble veining. Used as a background layer in Panel 2 and Panel 4. The pattern tile is 400×400px with 3–5 branching vein paths per tile, low opacity (0.4) so the texture reads as a whisper rather than a shout.

**Inflated candle SVGs:** All candle illustrations are custom inline SVG. Key design rule: every candle silhouette uses exaggerated rounding — `rx` values on rectangles pushed very high, tapers drawn with smooth bezier curves that give the wax a pooled, slightly melted feeling. The flame shape is a teardrop with an inflated bottom third — not pointed but pillowy at the base where it meets the wick. Three variants:
  - **Pillar candle** — wide cylinder with gentle wax-drip rivulets as decorative sidebar strokes
  - **Taper candle** — elegant S-curve silhouette suggesting a hand-dipped finish
  - **Jar candle** — squat oval form with a frosted glass effect (SVG `feGaussianBlur` on a rect mask)

**Candle flame animation:** A single CSS keyframe animation per flame. The flame body uses `transform: scaleX()` to breathe horizontally (0.95 → 1.05 → 0.95 over 2.4s), `transform: scaleY()` to flicker vertically (1.0 → 0.92 → 1.04 → 1.0 over 1.8s), and a subtle `filter: brightness()` oscillation (0.9 → 1.1). The two animations run on different durations to avoid a mechanical cycle — they drift in and out of phase, producing organic-feeling flicker.

**Magnetic card behavior:** Panel 4 scent cards use a JavaScript `mousemove` listener. On hover, each card computes the cursor position relative to its center and applies a CSS `transform: perspective(800px) rotateX() rotateY() translateZ(8px)` with a maximum 8° tilt in any direction. On mouse-leave, the card springs back via `transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)` — the spring overshoot (1.56) gives a slight bounce-back that reads as satisfying physical weight.

**Candle-atmospheric motifs:**
  - Thin wax-drip decorative dividers between sections — an SVG path of a drip line, `stroke: #c9a96e`, `stroke-width: 1.5`, used in place of `<hr>` tags
  - A ring of nine flame icons in Panel 5, rotating slowly on a CSS animation (`transform-origin: center; animation: orbit 30s linear infinite`) — each flame offset by 40deg around a 180px radius circle
  - Subtle noise texture overlay on all dark panels: an SVG `feTurbulence` filter at `baseFrequency: 0.65` and `opacity: 0.04` over the `#2a1f1a` background, giving the surface the look of aged velvet or wax paper

## Prompts for Implementation

**The story to tell:** A visitor finds the mosun.xyz page in the evening — perhaps after a long day, perhaps looking for a gift, perhaps just following a link from someone who described the candles as "the kind that smell like a room you want to live in." The page meets them in that mood. The first thing they see is the oversized candle, breathing in the dark, and the name "mosun" below it like a signature. There is no banner, no announcement bar, no cookie consent overlay blocking the flame. There is just the candle.

As they scroll, the page lifts them through a sequence of material sensations: the cold smoothness of the marble slab (Panel 2), the warmth of wax poured slowly into a jar (Panel 3), the faint scent-memory evoked by words like "bergamot at dusk" or "oakmoss after rain" (Panel 4), and finally a quiet room where many small flames orbit a simple invitation (Panel 5). The entire experience is approximately 90 seconds of reading at a relaxed pace.

**Implementation specifics:**

1. **Parallax engine:** Use `IntersectionObserver` + `requestAnimationFrame` for performance. Do NOT use scroll-listener on window directly. Each parallax section registers its own observer; once in view it subscribes to a shared rAF loop. On scroll, compute `progress = (scrollY - sectionTop) / sectionHeight` (clamped 0–1) and multiply by each layer's parallax coefficient. Panel 1 has three layers: `--parallax-a: 40px` (candle), `--parallax-b: 20px` (wordmark), `--parallax-c: 10px` (texture). Apply via CSS custom properties updated in JS.

2. **Inflated-3d card system:** Each pillow card is a `<div>` with `border-radius: 24px`, `background: #faf7f2`, and a layered `box-shadow` stack:
   ```
   box-shadow:
     0 1px 2px rgba(61,43,31,0.08),
     0 4px 8px rgba(61,43,31,0.06),
     0 12px 24px rgba(61,43,31,0.05),
     0 32px 64px rgba(61,43,31,0.04),
     inset 0 1px 0 rgba(255,255,255,0.6);
   ```
   The inset top highlight simulates the rounded top surface catching ambient light. No hard shadow edges anywhere.

3. **Magnetic tilt:** Attach `mousemove` to each `.scent-card` element. Compute `dx = (e.clientX - rect.left - rect.width/2) / rect.width` and `dy = (e.clientY - rect.top - rect.height/2) / rect.height`. Apply `transform: perspective(800px) rotateY(${dx * 8}deg) rotateX(${-dy * 8}deg) translateZ(8px)`. Wrap in a `requestAnimationFrame` call to prevent jank. On `mouseleave`, set transform to `none` and let CSS transition handle the spring return.

4. **Flame breathing animation:** Define two independent keyframe sets in CSS:
   - `@keyframes flicker-x { 0%,100%{transform:scaleX(.96)} 40%{transform:scaleX(1.04)} }`
   - `@keyframes flicker-y { 0%{transform:scaleY(1)} 30%{transform:scaleY(.91)} 70%{transform:scaleY(1.05)} 100%{transform:scaleY(1)} }`
   Apply both to the flame `<g>` element simultaneously: `animation: flicker-x 2.4s ease-in-out infinite, flicker-y 1.8s ease-in-out infinite`.

5. **Marble SVG pattern:** Generate the pattern tile programmatically in the `<defs>` section. Use a `<pattern>` element with `patternUnits="userSpaceOnUse"` and `width="400" height="400"`. Inside: 4–5 `<path>` elements, each a cubic bezier drawn by hand to look like marble veining — wandering, slightly branching, with one or two short tributary paths. Stroke: `#cec8bc`, width: `0.8`, opacity: `0.5`. No fills.

6. **Orbit ring in Panel 5:** Position nine `<g class="flame-icon">` elements absolutely inside a container with `position:relative; width:360px; height:360px`. Each flame is positioned via JS or CSS: `left: 180px + 180px * cos(angle * PI/180)`, `top: 180px + 180px * sin(angle * PI/180)`. Angles: 0, 40, 80, 120, 160, 200, 240, 280, 320. The container rotates on `@keyframes orbit { to { transform: rotate(360deg) } }` with duration 30s. Each individual flame counter-rotates by the same animation at −30s speed to stay upright as it orbits.

7. **Dot navigation:** A `<nav class="dot-nav">` fixed at `right: 2rem; top: 50%; transform: translateY(-50%)`. Five `<button>` elements, each 8px × 8px circle, `background: #9c8878`, `border-radius: 50%`. Active dot: `background: #c9a96e; transform: scale(1.4)`. On click, `scrollIntoView({ behavior: 'smooth' })` to the target section. `IntersectionObserver` with `threshold: 0.5` on each section updates the active dot.

8. **No CTA language:** The only action-prompting text is the Panel 5 email capture placeholder: *"your email, for candle news"*. No buttons labeled "Buy Now", "Shop", "Add to Cart". If there is a navigation link to a shop, label it simply "the collection."

9. **Color-scheme awareness:** Detect `prefers-color-scheme: dark` — since the dark panels already exist, the only change needed in dark mode is to make the light panels slightly darker (`#2a1f1a` instead of `#f5f0ea`) and swap text from `#3d2b1f` to `#f5f0ea`. Use CSS custom properties throughout so the swap requires only toggling two root variables.

**Avoid:** Sticky headers that obscure the parallax. Hero countdown timers. Testimonial carousels. Pricing tables. Badge-covered product cards. "Free shipping on orders over $X" banners. Any animation that runs on page load before the user has scrolled (beyond the breathing candle flame in Panel 1 — that one should animate immediately because it is the welcome).

## Uniqueness Notes

1. **Inflated-3d applied to wax physics, not cartoon UI.** The corpus uses inflated-3d at low frequency (<5%). This design applies the puffiness aesthetic specifically to simulated candle material properties — swollen wax cylinders, pooled bases, rounded flame silhouettes — rather than the more common use of inflated-3d as bubbly UI chrome or toy-like icons. The aesthetic vocabulary is coherent: everything that is rounded is rounded because wax rounds.

2. **Parallax-sections as candlelit room sequence.** Parallax at this frequency in the corpus is typically used for hero splits or background image offset. Here, each of the five panels is a complete compositional world — different color temperature, different typography density, different motion character — so the parallax becomes a narrative device: the user moves through rooms lit by different numbers of candles.

3. **Magnetic interaction on non-product cards.** Magnetic cursor behavior in the corpus is typically used on navigation links or CTA buttons. Here it is applied to the scent-family cards in Panel 4, reframing a marketing interaction pattern as a tactile, material interaction — the card tips like a heavy wax tile being nudged on a stone counter.

4. **Marble texture as inline SVG procedural pattern.** Marble photography is present in the corpus at 3% frequency; this design avoids all photography and generates the marble texture as a pure SVG `<pattern>` with handmade bezier veining paths. This allows the texture to scale perfectly, remain stylistically consistent with the illustration system, and load with zero additional HTTP requests.

5. **Three-register typography hierarchy within a single serif family axis.** Most corpus designs that use Playfair Display use it at one or two weights. This design uses Playfair Display + Cormorant Garamond + Lato as a three-register system: ornamental serif for display, refined old-style serif for labels, humanist sans for reading text. The two serif faces share historical roots (both revive 16th-century Garamond forms) so they harmonize without competing, while Lato provides a clean reading floor.

**Chosen seed / style:** aesthetic: inflated-3d, layout: parallax-sections, typography: playfair-elegant, palette: muted-vintage, patterns: magnetic, imagery: marble-texture, motifs: candle-atmospheric, tone: approachable-casual

**Avoided overused patterns (from frequency analysis):** hand-drawn (60% — avoided entirely; all illustration is geometric SVG, not hand-drawn style), editorial (52% — avoided; the layout is cinematic/atmospheric, not editorial-grid), terminal (31% — inapplicable; no monospace, no dark-mode-first command-line aesthetic). Did not use centered-column herbarium layout (already used in a6c.boo-v1 reference). Did not use glitch effects (corpus at 11%; this site has no glitch). No glassmorphism (21% in corpus; not used here — the frosted jar effect is achieved via SVG blur, not backdrop-filter panels).
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:04:26
  domain: mosun.xyz
  seed: serif for labels, humanist sans for reading text
  aesthetic: mosun.xyz** is a candle studio — the word "mosun" evokes a hushed, vaguely Easte...
  content_hash: 05113a97534c
-->