# Design Language for mystical.day ## Aesthetics and Tone mystical.day is an Art Deco temple of divination — imagine the lobby of a 1928 cinema rebuilt as an oracle's parlour, all black marble, brass inlay, and stepped ziggurat ornament catching candlelight. The mood is **opulent, hushed, and quietly arcane**: a luxury-premium register rather than a hippie one. No crystals-on-a-craft-table; instead, lacquered ebony cabinets, gilt sunburst medallions, and tarot suits engraved like hotel signage. The site reads like a private members' club for people who consult the stars before breakfast. Tone words: **mysterious-moody, opulent-grand, dreamy-ethereal, elegant-sophisticated**. Everything moves slowly, with weight. Light is low and directional — a single warm pool against deep cool darkness. The visitor should feel they have pushed open a heavy brass door into a room where the air itself is older than they are. Anti-references (deliberately rejected): the 96%-common hand-drawn doodle look, the 78%-common frosted glassmorphism, the warm-gradient-everywhere palette, photo-led hero blocks, and the pastoral-romantic cottage tone. mystical.day is geometric, not organic; engraved, not sketched; cool-noir, not honeyed. ## Layout Motifs and Structure A **vertical "tarot spread" composition** — the page is one long ceremonial scroll divided into chambers, each chamber framed like a Deco theatre proscenium with stepped corner brackets and a thin double-rule border in brass. - **Symmetry as law.** The default axis is dead-center; content is mirrored left/right around a central spine (a hairline gold rule that runs the full height of the page like a plumb line). Asymmetry appears only as a deliberate "broken card" moment, once. - **Chambers, not cards.** Instead of the 90%-common card-grid, sections are full-bleed "chambers" stacked vertically (stacked-sections / immersive-scroll), each introduced by a Deco **fan-light header**: a half-sunburst of radiating gold lines above the chamber title. - **The Three-Card Reading** is the one place a grid appears: exactly three tall portrait panels side by side, like drawn cards — Past / Present / Path — each with a heavy beveled frame, generous gutters, and a faint engraved Roman numeral watermark (I, II, III). - **Ma / negative space** between chambers is intentional and dark — long stretches of near-black marble texture so each lit chamber feels like emerging from a corridor. - **Footer as colophon**: a single centered Deco medallion (concentric rings + sunburst), the domain set in spaced capitals beneath it, like the seal pressed into the last page of a grimoire. No sidebar, no dashboard, no bento clutter. Navigation is a slim top bar — letter-spaced uppercase links separated by tiny lozenge glyphs (◇), with a thin gold underline that does NOT animate on cursor-follow (that pattern is at 89% — we abstain). ## Typography and Palette **Display / headings:** `Cormorant Garamond` (Google Fonts) for the romantic, high-contrast serif voice in chamber titles — used very large, light weight, wide tracking. For the hardest Deco moments (the wordmark, the medallion seal), `Cinzel` (Google Fonts) — engraved Roman capitals with that monumental, carved-in-stone feel. **Subheads / labels / nav:** `Cinzel` in small uppercase with heavy letter-spacing, or `Marcellus` (Google Fonts) for slightly softer sub-labels. **Body text:** `EB Garamond` (Google Fonts) — a warm, readable old-style serif that keeps the literary, occult-manuscript tone. Generous leading (1.8), measure capped near 62ch. **Accent numerals / dates:** `Cinzel Decorative` (Google Fonts) for the big Roman numerals on the three reading cards and the "day" date display. Deliberately **NO monospace** (94% of designs use it) and NO handwritten face. Palette — a cool noir-and-gilt scheme (rejecting the 98%-warm consensus): - `#0B0B10` — **Obsidian** (page base, the dark corridors) - `#14131B` — **Black Marble** (chamber backgrounds, faintly veined) - `#1F2233` — **Midnight Lapis** (deep blue used for star-fields and the reading-card interiors) - `#C8A24A` — **Antique Brass / Gilt** (primary accent: rules, sunbursts, frames, the central spine) - `#E7D7A8` — **Candle Gold** (highlight tint on edges, hover glow, small text accents) - `#7C8AA8` — **Slate Moonlight** (secondary text, dim labels) - `#F4EFE3` — **Vellum** (body text on dark, never pure white) - `#5B2A4A` — **Aubergine Velvet** (rare deep accent for the "broken card" moment and link visited state) Contrast strategy: high-contrast gilt-on-obsidian for structure; everything else low-contrast and dim so the gold genuinely *glints*. ## Imagery and Motifs - **Sunburst / fan-light medallions** — concentric rings with radiating tapered rays, rendered as crisp SVG with a subtle gold gradient. The signature motif; appears as section headers, the footer seal, and a giant faint one behind the hero. - **Stepped ziggurat / chevron borders** — Deco corner brackets and frame ornaments built from nested right angles, like the Chrysler Building's crown flattened into line art. - **Engraved tarot iconography** — The Sun, The Moon, The Star, The Wheel — drawn as fine single-weight gold line engravings (think banknote intaglio), never colorful illustration. Tarot suit pips (cups ♢, swords, wands, pentacles) as tiny inline glyphs. - **Constellation lattice** — sparse star points connected by hairline gold lines forming geometric (not naturalistic) constellations; used as a slow drifting background layer in the Midnight Lapis chambers. - **Marble veining texture** — extremely subtle, low-opacity SVG/PNG noise+vein overlay on dark chambers so blacks have depth, never flat. - **The "day" device** — since the domain is *mystical.day*, a recurring motif of a small sun-disc that, on the daily-reading chamber, shows today's date in Roman numerals inside a Deco cartouche. - **Beveled brass frames** — every framed element (reading cards, quote plates) has a chunky two-tone bevel: a lighter Candle Gold top-left edge, darker Antique Brass bottom-right, faking lamplight. No stock photography (98% of sites use it) — this world is entirely drawn in vector gold-on-black. ## Prompts for Implementation - Build it as a **full-screen vertical ceremony**: each chamber is `min-height: 100vh` (or near it), and entering a chamber on scroll triggers a slow choreographed reveal (scroll-triggered, fade-reveal — but gently, 800–1200ms, generous easing like `cubic-bezier(.16,1,.3,1)`). The gold rules should **draw themselves** (path-draw-svg) as the chamber enters: borders trace from a corner, sunbursts radiate ray-by-ray. - **Hero chamber:** centered `Cinzel` wordmark "MYSTICAL · DAY" over an enormous faint sunburst SVG that rotates *imperceptibly slowly* (one rotation per ~6 minutes). Beneath it a single line of `EB Garamond` italic: a one-sentence invocation. A small Roman-numeral date cartouche sits below, quietly. No buttons, no CTA, no signup field — just a downward Deco chevron that pulses once every few seconds inviting the scroll. - **The Daily Reading chamber:** the three portrait cards (Past / Present / Path). On load they sit face-down (a Deco back-pattern of repeating chevrons in brass on obsidian). On scroll-into-view they flip one at a time (card-flip, staggered ~300ms apart, with a subtle elastic settle) to reveal an engraved tarot figure + a short `EB Garamond` passage. Hover on a revealed card: the brass frame's Candle-Gold edge brightens and a faint warm glow blooms behind it (no tilt-3d — that's at 27%; keep it flat and stately). - **Constellation background** in lapis chambers: a `` or SVG with ~40 star points drifting on a very slow sine path, hairline gold connectors fading in/out. Respect the dark — keep opacity low so text stays dominant. - **Typography animation:** chamber titles in `Cormorant Garamond` should letter-space *open* slightly on entry (tracking animates from `0.2em` to `0.45em` over 1s) — a slow exhale. Body paragraphs fade up in soft staggered lines. - **The one broken-card moment:** somewhere mid-page, a single chamber deliberately tilts its frame a few degrees and bleeds Aubergine Velvet into the gilt — "The Tower" energy — then the next chamber snaps back to perfect symmetry. Use this once for narrative punctuation. - **Cursor:** keep it conventional; do NOT add a cursor-follow ring (89% pattern). A tiny gold sparkle may appear briefly where the user clicks (ripple-ish, very subtle), nothing more. - **AVOID:** CTA-heavy layouts, pricing tables, stat counters, testimonial card-grids, photo heroes, glassmorphic frosted panels, warm peach gradients, hand-drawn doodles, monospace type, and parallax-everything. This is an immersive narrative scroll, not a landing funnel. - Performance/accessibility are explicitly out of scope here — bias every decision toward atmosphere, weight, and the glint of gold in the dark. ## Uniqueness Notes Differentiators from the corpus: 1. **Art Deco luxury treatment of a mystical theme** — the divination/tarot/astrology space is overwhelmingly hand-drawn-cottagecore-warm; doing it as black-marble-and-gilt Deco theatre (luxury-premium, ~0% in corpus; art-deco only 6%) is a sharp, near-untaken angle. 2. **Cool obsidian-and-gold palette in a sea of warm gradients** — 98% of designs go warm; this one is deliberately cold-noir with gold as the only warmth, used sparingly so it actually glints. 3. **No monospace, no hand-drawn, no glassmorphism, no photography** — actively abstains from the four most saturated traits (mono 94%, hand-drawn 96%, glassmorphism 78%, photography 98%) in favour of engraved gold-on-black SVG vector work and a fully serif type system (Cinzel / Cormorant Garamond / EB Garamond / Marcellus). 4. **"Tarot spread" vertical chamber structure with strict mirror symmetry and a single literal central spine** — rejects the 90%-common card-grid; the only grid is the three-card reading, which is itself a thematic device, not a layout default. 5. **Restraint in motion** — skips cursor-follow (89%) and tilt-3d (27%); uses slow path-draw, card-flip, and tracking-expansion instead, tuned for ceremony rather than zip. Chosen seed/style: **art-deco ornate luxury** (from seeds.json; no Planned Seed was supplied in the assignment, so selected per the fallback rule — art-deco is underused at 6% and luxury-premium at ~0%, and unmapped to other mystical-themed sites). Avoided patterns flagged by frequency analysis: hand-drawn (96%), photography (98%), warm palette (98%), gradient palette (95%), mono typography (94%), parallax (92%), card-grid (90%), cursor-follow (89%), glassmorphism (78%), pastoral-romantic tone (35%), tilt-3d (27%).