# Design Language for marble.works ## Aesthetics and Tone marble.works approaches marble from the opposite direction of polished luxury -- this is a site about the labor, the chisel marks, the quarry dust, and the slow transformation of raw stone into sculpted form. The aesthetic is wabi-sabi meets workshop documentary: celebrating the beauty of imperfection, tool marks, unfinished surfaces, and the visible evidence of human hands working against geological time. Think "a stonemason's workshop in Pietrasanta, Italy, captured on 35mm film with natural window light." The tone is raw-authentic and grounded-earthy -- the voice of a craftsperson who knows the stone intimately and speaks about it with quiet reverence but no pretension. The site uses simple, direct language. No marketing polish. Every surface shows its making. ## Layout Motifs and Structure **Primary layout: organic-flow with stacked-sections and asymmetric composition** The site abandons rigid grids in favor of an organic layout where elements are placed with the deliberate casualness of tools on a workbench. Text blocks sit at irregular margins. Images are cropped imprecisely. White space is not uniform but varies like the gaps between stones in a dry-stack wall. **Section architecture:** 1. **The Block (viewport 1):** A single massive rectangle of CSS-generated rough stone texture fills 80% of the viewport, slightly off-center to the left. The word "works" is carved into it -- rendered with CSS text-shadow layers that create a chiseled, recessed appearance. No smooth fade-in; the block is simply there when you arrive, as stone would be. 2. **The Quarry Face (viewport 2-3):** An asymmetric two-column layout (65/35) where the wider column contains a long-form narrative about marble quarrying -- how stone is cut from the mountainside, the wire saws, the diamond-tipped chains. The narrow column holds technical annotations: stone density figures, formation ages (millions of years), quarry coordinates. The two columns are not aligned at the top; the narrow column starts 4rem lower, creating visual tension. 3. **The Workshop (viewport 4-6):** A process timeline showing the stages of marble work: rough cutting, shaping, carving, finishing, polishing. Each stage is a horizontal band (30vh) with a left-aligned process name in bold slab-serif, a center description, and a right-side visual element (CSS-rendered texture showing the stone surface at that stage -- from rough to smooth). The bands have visible borders that look like chisel scores (2px dashed lines in warm gray). 4. **The Imperfections Gallery (viewport 7-8):** A loosely arranged set of square tiles showing different marble "flaws" that are reframed as features: fossil inclusions, iron oxide staining, crystalline veining, natural fractures. Each tile uses a different CSS gradient recipe to simulate the flaw. Tiles are not perfectly aligned; they have 1-3px random offsets to suggest hand-placement. 5. **The Dust (footer):** The page ends with a gradual fade to pure white -- as though the marble dust has settled over everything. The final text, "stone endures," appears in light gray barely distinguishable from the white background. ## Typography and Palette **Typography:** - **Display / Process Names:** "Bitter" (Google Fonts) -- a slab-serif with sturdy, grounded proportions that feel hewn rather than drawn. Used at clamp(2rem, 4vw, 3.5rem), weight 700. Its thick slabs and squared terminals evoke industrial signage and workshop labels. All lowercase to avoid pomposity. - **Body / Narrative:** "Lora" (Google Fonts) -- a transitional serif with roots in calligraphy, providing warmth and readability for the long-form quarrying narrative. Weight 400, line-height 1.85, 17px base. Its subtle brush-influenced curves add humanity to the technical content. - **Annotations / Technical Data:** "Fira Mono" (Google Fonts) -- a monospace with a slightly humanist feel, used for coordinates, measurements, geological ages, and stone density data. Weight 400, 13px, in the warm gray annotation color. **Palette:** | Role | Color | Hex | |------|-------|-----| | Rough stone (primary bg) | Warm off-white | #edead8 | | Chisel marks (primary text) | Quarry dark | #36342e | | Dust (secondary bg) | Pale limestone | #f5f2e8 | | Iron oxide (accent warm) | Rust stain | #a05a3c | | Fossil (accent organic) | Bone beige | #c4b090 | | Tool steel (accent cool) | Slate blue | #5a6672 | | Fracture line | Deep crevice | #4a4640 | | Weathered surface | Lichen green | #7a8a6e | This is an earth-tones palette drawn from the actual colors encountered in a working marble quarry: the warm white of freshly cut stone, the rust of iron deposits, the gray-blue of steel tools, and the green of lichen on weathered surfaces. No golds, no blacks, no luxury signifiers. The palette is deliberately muted-vintage. ## Imagery and Motifs **Core Visual Motifs:** 1. **Chisel-Mark Typography:** The hero text uses layered CSS text-shadow to create a carved/recessed effect -- multiple shadow layers at fractional pixel offsets in slightly different shades create the illusion of depth, as though letters have been chiseled into stone. This is the signature visual treatment of the site. 2. **Rough-Cut Texture Gradients:** CSS-generated stone surfaces using noise-like patterns created from many overlapping radial-gradients at low opacity (0.02-0.05 each), producing a granular, mineral texture. Different sections use different "stone grades" -- rougher textures for early process stages, smoother for later ones. 3. **Dashed Chisel Borders:** All horizontal rules and section dividers use border-style: dashed with custom dash lengths (border-image with a repeating SVG pattern) that look like chisel score lines rather than graphic design elements. These reinforce the handmade, workshop quality. 4. **Dust Particles:** A very sparse particle system (CSS-only, using @keyframes on positioned pseudo-elements) that drifts white specks across the viewport. Maximum 8 particles, very slow movement (20-40s cycle), opacity 0.08. Suggests stone dust floating in workshop light without being distracting. 5. **Imperfection Offsets:** A consistent design pattern where elements are deliberately misaligned by 1-4px using small CSS transform: translate values. Nothing on the page sits in pixel-perfect alignment. This wabi-sabi principle makes the design feel handcrafted and organic. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with no animation, no fade-in, no loading sequence. The stone block is already there -- position: relative, margin-left: 8%, width: 82%, height: 80vh, background composed of CSS gradients. The word "works" sits inside it with the chisel-text-shadow effect (6 layers of text-shadow from 0.5px to 3px, in shades ranging from #d4d0c0 to #36342e). The immediate presence of the block, without theatrical entrance, is itself a statement about stone's permanence. **Scroll behavior:** Sections use simple fade-reveal on scroll (opacity 0 to 1, translateY 20px to 0, 800ms ease-out). The transitions are deliberately slow and undramatic -- stone does not hurry. No parallax effects; the scroll is honest and direct. Each section simply appears when its time comes. **Process timeline:** The workshop bands use CSS grid with grid-template-columns: 200px 1fr 200px. The left column (process name) uses Bitter Bold with transform: rotate(-2deg) for a slight hand-labeled tilt. The center column holds the narrative description. The right column holds the texture swatch -- a fixed-size div (180x180px) with the appropriate CSS stone-texture gradient. **Imperfections gallery:** Uses CSS grid with grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) and each tile has a randomized (but fixed) transform applied via nth-child selectors: nth-child(1) gets translate(2px, -1px), nth-child(2) gets translate(-1px, 3px), etc. Hover effect: the tile straightens to translate(0,0) and scale(1.02) over 300ms -- imperfection temporarily corrected by attention. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No e-commerce. No "contact us for a quote." The site is a material essay about craftsmanship, not a marble contractor's portfolio. Bias toward full-screen sections where each viewport documents one phase of the stone-working process, creating a journey from mountain to studio. ## Uniqueness Notes **Differentiators from other designs:** 1. **Wabi-sabi imperfection as design system:** While marble.day celebrates polished luxury, marble.works deliberately introduces imperfections -- misaligned tiles, rough textures, dashed chisel borders. The pixel-offset pattern (nth-child transforms) is a systematic approach to controlled imperfection unique in the portfolio. 2. **No entrance animation:** The site breaks the near-universal convention of animated hero reveals. The stone block is simply present on load, making a philosophical statement about permanence that doubles as a design choice. This is the only site in the batch with a zero-animation opening. 3. **Process-as-structure narrative:** The site's sections literally follow the stone from quarry to finish, using the stages of marble work as its information architecture. This 1:1 mapping between content theme and structural organization is distinct from decorative uses of marble imagery. 4. **Muted-vintage earth-tones palette:** The palette (at 0% frequency in existing designs) uses no black, no gold, no saturated color -- only the actual colors of a working quarry. This positions marble.works as the anti-luxury marble site, finding beauty in the raw material state. 5. **Chisel-mark CSS typography:** The multi-layer text-shadow technique creating carved/recessed letterforms is a technical approach not used elsewhere. Text appears to sink into the surface rather than sitting on top of it. **Chosen seed/style:** wabi-sabi imperfect ceramic **Avoided overused patterns:** corporate aesthetic, gradient palette, mysterious-moody tone, counter-animate animation, centered layout, luxury signifiers **Preferred underused elements:** muted-vintage palette (0%), raw-authentic tone, organic-flow layout, wabi-sabi aesthetic, slab-serif typography, grounded-earthy tone