# Design Language for marble.day ## Aesthetics and Tone marble.day is a visual meditation on marble as material, metaphor, and cultural artifact -- a site that celebrates the veined, luminous stone that has been the medium of emperors, sculptors, and architects for millennia. The aesthetic is luxury-premium crossed with art-deco sensibility, evoking the lobby of a 1930s Italian palazzo where polished Carrara walls catch the light of brass chandeliers. Every surface in the design suggests weight, permanence, and the quiet authority of stone. The tone is elegant-sophisticated and opulent-grand -- not in a commercial luxury-brand way, but in the manner of a museum curator who speaks softly because the objects speak loudly. The writing is spare, measured, and precise, letting the visual materials dominate. Think "the Pantheon's interior at golden hour, translated into a web experience." ## Layout Motifs and Structure **Primary layout: magazine-spread with layered-depth and split-screen sections** The site uses a wide-format magazine layout where each section occupies a full viewport and is composed as a carefully balanced spread. The primary structural device is the "slab" -- each section is a thick visual band (100vh) separated by thin gold rules (2px, #c4a35a), suggesting stacked layers of marble. **Section architecture:** 1. **The Quarry (viewport 1):** A full-bleed marble texture background (CSS-generated using layered radial-gradients in whites, grays, and faint veins of gold). The word "marble" appears in the center using ultra-thin serif letterforms, barely visible against the stone -- a whisper, not a shout. A slow zoom-out animation (3% over 10s) reveals more of the texture. 2. **The Vein Map (viewport 2):** A split-screen layout with 60/40 proportion. The larger side shows a close-up marble vein pattern rendered as animated SVG curves (slow Bezier paths that drift like rivers). The smaller side contains a short text passage about the geology of marble formation, set in a narrow column with extreme line-height. 3. **The Gallery of Stones (viewport 3-5):** A masonry grid of marble type specimens -- Carrara, Calacatta, Statuario, Emperador, Nero Marquina -- each displayed as a square swatch with its name in gold monospace below. Hovering over a swatch causes it to expand to fill 70% of the viewport with a smooth morph transition, revealing the full vein pattern and provenance text. 4. **The Sculptor's Hand (viewport 6):** A single section with a large art-deco-framed quotation from Michelangelo ("I saw the angel in the marble and carved until I set him free") rendered in display serif with the frame drawn by path-draw-svg animation. 5. **The Ruin (viewport 7/footer):** The marble texture from viewport 1 returns but now with subtle CSS cracks and aging effects (darker vein clusters, slight yellowing overlay at 0.05 opacity), suggesting that even marble ages. The footer text reads simply: "All stone remembers." ## Typography and Palette **Typography:** - **Display / Titles:** "Cormorant Garamond" (Google Fonts) -- a high-contrast serif with refined, sharp serifs that evoke classical Roman inscription letterforms. Used at clamp(3rem, 7vw, 6rem), weight 300 (Light) for the ethereal quality of thin strokes against stone. Letter-spacing 0.15em, uppercase for titles. - **Body / Descriptions:** "Libre Baskerville" (Google Fonts) -- a traditional book serif with excellent readability and a dignified character. Weight 400, line-height 2.0, 17px base. The generous line-height creates the visual rhythm of chiseled text on a stone surface -- each line given its own breathing room. - **Labels / Specimen Names:** "DM Mono" (Google Fonts) -- a clean geometric monospace for marble type names, dimensions, and technical metadata. Weight 400, 12px, letter-spacing 0.1em, uppercase, rendered in gold (#c4a35a) against dark backgrounds or charcoal (#2a2a2e) against light surfaces. **Palette:** | Role | Color | Hex | |------|-------|-----| | Marble white (primary bg) | Warm white | #f7f5f0 | | Veins (subtle) | Cool gray | #b8b0a8 | | Deep marble | Charcoal | #2a2a2e | | Gold accent | Antique gold | #c4a35a | | Warm stone | Travertine | #e8dcc8 | | Dark stone (Nero) | Obsidian | #1a1a1e | | Rose marble | Dusty pink | #c9a8a0 | | Green marble | Verde antique | #4a6b5a | This is a muted, high-contrast palette built around the natural colors of marble itself. The gold-black-luxury combination (#c4a35a against #1a1a1e) provides the primary accent system, while the marble whites and warm stones create a tactile, mineral warmth distinct from the clinical whites of minimalist design. ## Imagery and Motifs **Core Visual Motifs:** 1. **CSS-Generated Marble Textures:** The primary visual surface is procedurally generated marble using layered CSS gradients. Each section uses a different marble recipe: Carrara (white base with thin gray veins via repeating-linear-gradient at varied angles), Nero Marquina (near-black base with white vein streaks), Emperador (warm brown base with cream veins). No image files are needed -- pure CSS creates the stone surfaces. 2. **Gold Filigree Lines:** Thin (1px) gold (#c4a35a) SVG paths that serve as decorative borders, section dividers, and ornamental frames. These are drawn with art-deco geometric patterns: chevrons, fan shapes, stepped pyramids, and interlocking circles. All animate on scroll entry using path-draw-svg. 3. **The Vein Rivers:** Animated SVG Bezier curves that mimic marble veining. These curves drift slowly (transform: translateX with 30s CSS animation cycles), creating living vein patterns that shift subtly over time. They appear as background decorations at low opacity (0.1-0.2). 4. **Marble-Classical Frames:** Ornamental borders around key content blocks styled after architectural marble molding profiles -- ogee curves, torus rings, and flat fasciae rendered as CSS border-image or SVG clip-paths. 5. **Dust Particle Float:** A subtle canvas overlay of tiny white particles (1-2px) that drift downward very slowly, suggesting marble dust in a sculptor's studio. Maximum 30 particles, opacity 0.15, to avoid distraction. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport marble texture. The background is built from three overlapping CSS gradients: a base of #f7f5f0, a set of thin gray veins (repeating-linear-gradient at 137deg and 43deg), and a subtle warm overlay (radial-gradient from center, transparent to #e8dcc80a). The text "marble" fades in at center over 2s using Cormorant Garamond Light at 6rem, with letter-spacing animating from 0.5em to 0.15em (letters converging). A gold horizontal rule draws itself beneath the text (width 0 to 200px, 1s delay). **Scroll transitions:** Each section-to-section transition uses a slide-reveal effect where the next section slides up from behind the current one, creating the illusion of lifting a stone slab to reveal the one beneath. This is achieved with CSS position: sticky on each section and a z-index stacking system. **Gallery interaction:** The marble specimen grid uses CSS grid with gap: 2px (the thin gold lines show through as the gap color via background-color on the container). Hover triggers a morph animation: the hovered tile's grid-area expands via CSS animation to span multiple rows and columns over 500ms, while other tiles shrink proportionally. The specimen detail text fades in with a 200ms delay after the expansion begins. **The Sculptor's Hand section:** The art-deco frame draws itself completely before the quotation text fades in. The frame uses four corner SVG elements with synchronized path-draw animations (2s total), followed by the text appearing word by word (progressive-disclosure pattern, 100ms per word). AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No e-commerce patterns. The site is a material study, not a marble sales page. Bias toward full-screen immersive sections where the marble textures themselves are the primary content, with text as a secondary, contemplative layer. ## Uniqueness Notes **Differentiators from other designs:** 1. **CSS-only marble texture generation:** No other design in the portfolio generates its primary visual material procedurally from CSS gradients. The entire stone-surface aesthetic is code, not image, making it infinitely scalable and uniquely generative. 2. **marble-classical motif as structural principle:** The marble-classical motif (at 0% frequency in the portfolio) is not just decorative but structural -- molding profiles become borders, slab stacking becomes scroll transitions, and vein patterns become animated background art. 3. **Gold-black-luxury palette with mineral naturalism:** While gold-black-luxury is used in 11% of designs, marble.day grounds it in geological reality. The gold is antique (#c4a35a, not bright), and every other color comes from actual marble varieties, giving the luxury palette an organic foundation. 4. **Slab-stacking scroll mechanics:** The sticky-position section stacking creates a physical metaphor (lifting stone slabs) that no other design employs. Scroll interaction literally mimics the archaeological experience of excavating layers. 5. **Living vein animations:** The slow-drifting SVG Bezier curves that simulate marble veining create an experience of stone as a living material, challenging the static perception of marble and making the site feel organic despite its architectural formality. **Chosen seed/style:** art-deco ornate luxury **Avoided overused patterns:** corporate aesthetic, gradient-heavy palette, mysterious-moody tone, counter-animate as primary animation, centered-only layout **Preferred underused elements:** marble-classical motif (0%), gold-black-luxury palette, art-deco-display typography, elegant-sophisticated tone, magazine-spread layout