# Design Language for mujun.day ## Aesthetics and Tone `mujun.day` is an **art-deco occult observatory** — a single-screen environment that fuses the severe geometric elegance of 1920s Paris with the language of live electrical circuitry. The site's premise: *today is a frequency, and here is its waveform rendered in copper and shadow*. Imagine the interior of a Chrysler Building penthouse repurposed as a signal laboratory — black lacquered walls inlaid with gilt circuit traces, bronze instrument bezels, and the kind of silence that hums. Every visual element is simultaneously decorative and functional; the chevrons and stepped arches that define Art Deco become the actual topology of a circuit board. No photography, no human presence — only geometry, light, and the low pulse of a system thinking. The mood is **mysterious-moody**: not dramatic or theatrical, but quietly charged, the way a room feels before a thunderstorm. The site does not explain itself. It does not invite clicks. It displays. The visitor is a technician who has arrived at a terminal room and is reading its instruments. **Inspirations:** Tamara de Lempicka's cold glamour, Erté's gilded geometry, Nikola Tesla's Colorado Springs laboratory sketches, the circuit boards of 1960s IBM mainframes, the interior ornament of the Palais de Chaillot. ## Layout Motifs and Structure **Minimal-navigation**: the page is a single locked viewport — no scroll, no carousel, no infinite feed. The full-screen canvas is divided into a **golden-ratio split**: the left 61.8% is the primary field (the "circuit face"), the right 38.2% is the instrument panel. Both panels occupy exactly 100vh with no overflow. **Circuit Face (left panel):** A full-height gradient-mesh canvas — the living wallpaper of the site — that renders a procedural Art Deco circuit motif in real time. The mesh is a 7×11 grid of Bézier nodes, each node slowly drifting ±3px under a magnetic force field (cursor position warps the nearest 9 nodes toward the pointer with a spring physics ease-out). Geometric ornaments — stepped pyramids, sunburst chevrons, stylized lotus forms — are stamped at circuit node intersections and rendered in SVG, their fill animated between three analogous tones. **Instrument Panel (right panel):** Divided into three horizontal registers by 1px copper-colored rules: 1. **Top register (30vh):** Wordmark `mujun.day` set in decorative Art Deco type, vertically centered, flanked by two symmetrical winged ornaments in SVG. 2. **Middle register (50vh):** The day's "frequency signature" — a live waveform visualization generated from today's Unix timestamp. Three sine waves with golden-ratio frequency ratios scroll horizontally at different speeds, creating a moiré interference pattern. The waves are drawn as fine SVG strokes in copper (#B87333), aged gold (#C9A84C), and bone (#E8E0D0). 3. **Bottom register (20vh):** A single line of metadata — the current date in ISO format — and a faint categorical sub-label ("frequency archive", "signal log") that rotates every 24 hours using a deterministic seed from the date. **Navigation:** None visible by default. A single `≡` glyph in the top-right corner (12px, barely visible at 30% opacity) expands a minimal overlay: five links in a vertical list, fading in at staggered delays, disappearing when the user clicks outside. The overlay itself has no background — only the links appear, floating over the circuit canvas. **Grid logic:** 12-column CSS Grid, but only two columns are used (7fr / 5fr). Internal panel layouts use CSS Subgrid for register alignment. No breakpoint complexity — on mobile, the split collapses to a single column with the circuit face becoming a 50vh hero and the instrument panel below. ## Typography and Palette **Typography — two faces, severe contrast, all Google Fonts:** - **Display / Wordmark:** [`Cormorant SC`](https://fonts.google.com/specimen/Cormorant+SC) — small-caps serif with the sharp hairline contrast and bracketed serifs of a Baskerville-refined tradition. Used exclusively for `mujun.day`, the three register headings, and the navigation overlay links. Set at `clamp(2.4rem, 4.5vw, 5rem)` for the wordmark, `0.85rem` for register labels (tracked at +0.22em). Cormorant SC's extreme contrast — thick strokes meeting ultra-thin hairlines — feels like Art Deco metal inlay. - **Monospace / Metadata / Data:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono) — weight 300 only. Used for the ISO date stamp, waveform axis labels, circuit node coordinates (shown on hover as a tooltip), and the rotating sub-label. Set at `0.72rem` / 1.4 line-height, tracked at +0.08em. Its engineered regularity reads as instrument output. **Palette — analogous, centered on the deep blue-violet-teal arc of the spectrum, against near-black:** | Role | Name | Hex | |------|------|-----| | Background — primary | Lacquer Black | `#0D0D14` | | Background — panel | Midnight Indigo | `#12101F` | | Background — register rule | Dark Copper Line | `#2A1E0F` | | Accent 1 — primary | Antique Copper | `#B87333` | | Accent 2 — warm | Aged Gold | `#C9A84C` | | Accent 3 — cool | Verdigris | `#5B8A7A` | | Accent 4 — mid | Deep Teal | `#2D6A5E` | | Text — primary | Parchment Bone | `#E8E0D0` | | Text — secondary | Warm Ash | `#9A8E7E` | | Circuit node | Gilded Mint | `#7BBFA0` | | Waveform A | Antique Copper | `#B87333` | | Waveform B | Aged Gold | `#C9A84C` | | Waveform C | Bone White | `#E8E0D0` | The analogous logic: copper → gold → verdigris → teal — a 90° arc on the color wheel, all desaturated and aged, against void black. No complementary contrast, no bright primaries. The entire palette reads as oxidized metal in low light. ## Imagery and Motifs **Imagery: Gradient Mesh (not photography, not photography-adjacent).** The left circuit face is the site's sole "image" — a procedurally generated gradient mesh in CSS and SVG. The mesh is constructed from a 7×11 grid of control points; each point carries an HSL color sampled from the analogous palette with ±8° hue jitter and ±12% lightness variance. A `` SVG filter at `baseFrequency="0.018"` overlays a slow grain (animated `seed` attribute, one increment per 8 seconds) that simulates the patina of oxidized copper. The result is a surface that breathes — not animated in an obvious way, but never quite static. **Circuit Motifs (SVG, inline, procedurally placed):** - **Trace lines:** Horizontal and vertical segments connecting circuit nodes, 0.5px stroke in `#B87333` at 60% opacity. At intersection points: four-way junction diamonds, 4px. - **Art Deco ornaments at nodes:** Three rotating ornament types placed at every third node intersection — (1) stepped chevron pyramid (5 tiers, 24px tall), (2) sunburst radiating 12 strokes at 30° intervals (16px radius), (3) stylized lotus / fan with 7 petals (20px). Each is an inline SVG `` instantiated with ``. On magnetic hover, the nearest three ornaments slowly rotate 15° in alternating directions over 600ms. - **Border ornament:** A 2px inner border of the entire left panel composed of a repeating Art Deco key-fret pattern (SVG `` tile, 24×24px) in `#2A1E0F` at 80% opacity. This frame makes the circuit canvas feel like a framed instrument rather than a raw canvas. - **Waveform decoration:** The three sine waves in the middle register each have a 12px-wide glowing stroke achieved with `filter: drop-shadow(0 0 3px currentColor)`. The waves interfere with each other visually but are never overlapping in Z — layered at different `opacity` (1.0 / 0.65 / 0.35) to create depth. ## Prompts for Implementation **The story to tell.** A visitor opens `mujun.day` and finds themselves inside a signal-monitoring room inside a very old, very elegant building. The left wall is a live circuit diagram that responds to their presence — nodes drift toward the cursor like iron filings toward a magnet. The right column shows them what day it is in the way a physicist would show it: as a waveform, a frequency, a repeating pattern with a unique interference signature for every calendar date. There is no call to action. There is nothing to buy. The site is a clock that thinks it is an observatory. **Implementation priorities:** 1. **Gradient mesh as CSS + SVG hybrid.** Use a `` element with `` elements anchored to mesh node positions, composited with a `mix-blend-mode: screen` overlay. Animate node positions with `requestAnimationFrame`, delta ~0.4px/frame in a slow Lissajous drift. Layer an `` SVG filter on top for grain. 2. **Magnetic cursor physics.** On `mousemove`, calculate distance from cursor to each of the 77 mesh nodes. Nodes within 120px of the cursor get a spring-physics pull (Hooke's law, k=0.08, damping=0.75). Apply the same pull to the SVG circuit ornaments nearest the cursor. Use `transform: translate()` not layout properties — never trigger reflow. 3. **Waveform renderer.** On page load, extract today's Unix timestamp modulo `86400` (seconds since midnight). Use this value as a phase seed for three sine generators with frequencies in golden-ratio relationship: f, f×1.618, f×2.618. Draw to a `` element sized to the middle register. Redraw every 200ms with a 1px horizontal scroll (the waves appear to stream right-to-left in real time). 4. **Art Deco SVG ornaments.** Define all three ornament types as `` elements in a hidden SVG sprite. Instantiate them at circuit node positions using ``. On magnetic hover, `transform: rotate(15deg)` on the three nearest — transition 600ms `ease-out`. 5. **Navigation overlay.** The `≡` trigger is `position: fixed; top: 1.5rem; right: 1.5rem; opacity: 0.3; transition: opacity 200ms`. On click, a `
` elements styled as `border: none; border-top: 1px solid #B87333; opacity: 0.4; margin: 0`. The copper color of these lines is the primary accent repeated — not a new color introduction. 7. **Tone guidance.** Keep all text at low opacity in the default state: primary text at 85%, secondary at 55%, metadata at 40%. This opacity discipline — nothing quite at 100% — creates the sense of information barely visible in dim light, which is the right tone for this site. Only the wordmark earns full opacity. **AVOID:** - Any call-to-action button, sign-up form, or pricing element - Photography or raster images of any kind - Bright white backgrounds or high-contrast light modes - Scrollable sections, hero banners, or "fold" thinking - Hover states that change color to a complementary (avoid orange→blue swaps) - Gradients that include pure black or pure white endpoints ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **art-deco**, layout = **minimal-navigation**, typography = **baskerville-refined**, palette = **analogous**, patterns = **magnetic**, imagery = **gradient-mesh**, motifs = **circuit**, tone = **mysterious-moody**. **Frequency-analysis context** (from `tools/design/frequency.sh`, 306 designs analyzed): - **minimal-navigation layout: 3%** — extremely rare. The registry is dominated by asymmetric (40%) and parallax-sections (10%). Locking the entire experience to a single viewport with no scroll eliminates the most common layout pattern in the corpus. - **analogous palette: 4%** — used by almost no designs. The registry is warm (89%) and muted (33%); this palette occupies the cool-to-warm transition arc (copper → teal) without landing in either dominant camp. - **gradient-mesh imagery: 8%** — the only non-photographic imagery choice that is also not in the dominant "minimal" (40%) category. Procedural mesh generation means no raster assets whatsoever — unusual in a corpus where photography reaches 90%. **Three differentiators from every other design in the registry:** 1. **Art Deco circuit fusion — a motif collision no other registry entry attempts.** Circuit (12%) and Art Deco (6%) appear in the registry separately, but this is the first design to treat circuit board topology as Art Deco ornament: trace lines become gilded inlay, junction diamonds become decorative bosses, sunburst ornaments double as via indicators. The conceptual premise — *a 1920s Parisian obsessed with electrical engineering* — has no precedent in the corpus. 2. **Golden-ratio waveform as the primary "content."** Rather than displaying information (text, images, data) in the traditional sense, `mujun.day` renders today's date as a live interference pattern from three golden-ratio-related sine waves. This is not a decorative background — it IS the content. The visitor reads the day by looking at the waveform's current shape. No other registry design uses temporal data as its visual centerpiece in this way. 3. **Magnetic mesh + Art Deco ornament interaction.** Most magnetic-pattern designs (16% of registry) apply magnetic effects to simple floating circles or blobs. This design applies magnetic physics to a structured geometric ornament system — the ornaments rotate under cursor influence, the mesh nodes drift — creating a kinetic Art Deco instrument panel that feels physically responsive without breaking its decorative logic. The interaction enriches the theme rather than contradicting it. **Avoided patterns (overused in corpus):** - Photography (90% of corpus) — replaced with procedural gradient mesh - Asymmetric layout (40%) — replaced with strict golden-ratio split - Parallax (77%) — eliminated entirely; single locked viewport - Warm palette (89%) — replaced with oxidized metal analogous arc (copper-teal) - Hand-drawn aesthetic (59%) — replaced with precise Art Deco geometry