# Design Language for makiya.studio ## Aesthetics and Tone makiya.studio is a creative workshop portfolio embracing wabi-sabi -- the Japanese philosophy of finding beauty in imperfection, impermanence, and incompleteness. The site presents creative work not as polished products but as artifacts of a process: unfinished sketches alongside completed pieces, visible erasure marks, rough edges left intentionally unsmoothed. The aesthetic channels a ceramicist's atelier: raw clay surfaces, kiln-fired color variations, the quiet presence of handmade objects that bear the marks of their making. The tone is zen-contemplative and grounded-earthy, evoking the patience of waiting for glaze to dry and the reverence for materials that comes from working with your hands. Every design element embraces asymmetry, texture, and the honest beauty of things that are slightly irregular, slightly worn, slightly incomplete -- because that is where life lives. ## Layout Motifs and Structure **Primary layout: ma-negative-space with organic-flow** The site is defined by what is NOT there as much as what is. Generous negative space (ma, the Japanese concept of meaningful emptiness) surrounds every content element. The viewport is divided into a loose two-column structure on desktop (55/45 split), but columns are never filled simultaneously -- when one column holds content, the other holds empty space, creating a breathing rhythm. On mobile, the single column retains the same generous spacing, with 40px minimum margins. **Content Blocks:** Each piece of work is presented in a simple rectangular frame with no border -- only a hairline shadow (0 2px 8px rgba(0,0,0,0.06)) that suggests the object is resting on a surface rather than attached to a screen. Frames are aligned to a 4px baseline grid but offset from the column center by 8-24px in seemingly random (but consistent) directions, preventing mechanical alignment. **Vertical Rhythm:** Sections are separated by enormous vertical gaps (200-300px on desktop) filled only with the background texture. These pauses are intentional -- they create moments of rest that mirror the silence between musical notes. Within each section, content elements have 40-60px gaps, maintaining the airy feeling. **Navigation:** A vertical text label running along the left edge of the viewport (CSS writing-mode: vertical-rl), reading "MAKIYA STUDIO" in the label font, serves as the persistent identity mark. Below it, three horizontal lines (navigation links) appear only on hover over the left 60px margin, sliding out from the edge with a 300ms ease-out transition. The navigation is almost invisible until needed, respecting the ma principle. **Scroll Behavior:** Smooth scroll with no snapping. Content reveals itself slowly -- elements have large Intersection Observer thresholds (0.6) before triggering their entrance, meaning the user must scroll an element well into view before it responds. This deliberate slowness encourages mindful viewing. ## Typography and Palette **Typography:** - **Display / Project Titles:** "Cormorant Garamond" (Google Fonts) -- a refined, high-contrast serif with delicate hairlines and elegant proportions that evoke calligraphic brushwork. Used at clamp(2rem, 5vw, 4.5rem), weight 300 (Light). The extreme thinness of the Light weight creates fragile letterforms that embody wabi-sabi impermanence. Letter-spacing: 0.08em. - **Body / Descriptions:** "Karla" (Google Fonts) -- a humanist grotesque sans-serif with slight irregularities in its letter shapes that prevent mechanical perfection. Weight 400, 16px base, line-height 1.85 (extra generous for reading comfort). The slightly loose fit of the typeface complements the spacious layout. - **Captions / Process Notes:** "Spectral" (Google Fonts) -- a text serif with warm, organic shapes that reference traditional printing. Used at 13px, weight 400 italic, for image captions, material descriptions, and process notes. The italic creates a handwritten quality appropriate for studio annotations. - **Labels / Navigation:** "DM Sans" (Google Fonts) -- a geometric sans-serif with optically balanced forms. Weight 500, 11px, uppercase, letter-spacing: 0.2em. Used for sparse navigation labels and category tags. The wide letter-spacing creates quiet, unobtrusive text elements. **Palette:** | Role | Color | Hex | |------|-------|-----| | Kiln White | Primary background | #f7f3ee | | Wet Clay | Warm mid-tone | #b5a08e | | Raw Earth | Deep warm ground | #6b5b4f | | Ash Charcoal | Text / dark accent | #3a3530 | | Celadon Glaze | Cool accent | #93a895 | | Rust Oxide | Warm accent | #a0644b | | Bone Dry | Light tone | #e8e0d5 | The palette is rigorously earth-tones, drawn entirely from the ceramics workshop: kiln-fired whites, raw clay browns, iron-oxide rusts, celadon glaze greens. No saturated colors, no pure blacks, no bright accents. Every color has a warm undertone. Celadon Glaze serves as the sole cool note, used sparingly for interactive hover states and active links, providing gentle contrast without disrupting the warm envelope. ## Imagery and Motifs **Core Visual Motifs:** 1. **Clay Texture Background**: The Kiln White background is not a flat color but carries a subtle paper/clay texture -- a CSS background using a tiny repeating SVG pattern of organic speckles (2-4px irregular dots) at 0.03 opacity in Wet Clay. This texture is almost invisible on quick glance but becomes apparent on sustained viewing, rewarding patience. On large screens, the texture density decreases slightly toward viewport edges, creating a natural vignette. 2. **Kintsugi Highlight Lines**: Where content sections meet empty space, thin golden lines (1px, linear-gradient from transparent through Rust Oxide to transparent, 200px wide) appear at 0.2 opacity, referencing kintsugi -- the art of repairing broken ceramics with gold. These lines are not borders but floating decorative elements positioned near content edges, suggesting that the empty spaces are beautiful fractures rather than omissions. 3. **Imperfect Circles**: Throughout the site, hand-drawn circle shapes (SVG paths that approximate circles with 8-12 control points, each slightly off from perfect circular arc) appear as section markers and decorative elements. Circles are rendered as 1px strokes in Wet Clay or Celadon Glaze with no fill. Their imperfection is the design intention -- they reference enso, the Zen practice of drawing a circle in a single brushstroke that is deliberately left unclosed. 4. **Grain Film Overlay**: A full-viewport fixed-position overlay of animated film grain (CSS background with a 200x200px noise texture tile, repositioned via CSS animation every 100ms across 4 position offsets) at 0.02 opacity. This extraordinarily subtle layer adds a sense of age, warmth, and analog tactility to the digital surface. It is nearly imperceptible but contributes to the overall feeling of handmade warmth. 5. **Process Strip**: Below each portfolio piece, a horizontal strip shows 3-4 small square thumbnails (80x80px) of process images -- early sketches, material tests, in-progress states. These thumbnails have a slight sepia tint (CSS filter: sepia(0.15)) and rounded corners (4px). On hover, a thumbnail scales to 1.1 and its sepia filter reduces to 0, revealing the original color. This strip tells the story of making and positions process as equal to outcome. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site loads into Kiln White with the clay texture already present. There is no loading animation, no dramatic reveal -- the site simply appears, as if it has always been there. After 600ms of stillness, the vertical "MAKIYA STUDIO" label fades in along the left edge (opacity 0 to 1, 1200ms, ease-in -- deliberately slow). After another 400ms, the first portfolio piece fades in at its offset position (opacity 0 to 1, translateY: 16px to 0, 800ms). Each subsequent element requires scrolling to discover. **Scroll-Triggered Content Revelation:** Portfolio pieces enter the viewport with extreme subtlety: opacity transitions from 0 to 1 over 600ms, with a simultaneous translateY from 16px to 0 (not 30px or 50px -- just 16px, barely perceptible). The high Intersection Observer threshold (0.6) means the element is already mostly visible before it starts transitioning, creating the impression that it materialized rather than animated. There are no spring effects, no overshoots, no bounces. Everything arrives gently and settles into place. **Hover Responses:** Interactive elements respond with restraint. Portfolio cards on hover gain a barely perceptible elevation change (box-shadow blur increases from 8px to 16px over 400ms). The Celadon Glaze accent color appears only on active hover states for links and navigation items (color transition 300ms). The cursor does not change to pointer on portfolio cards -- instead, a small text label "view" in DM Sans appears near the cursor position via a following tooltip (position updated on mousemove, 60px below cursor). **Empty State Contemplation:** If the user scrolls past all content to the absolute bottom of the page, they encounter 400px of pure Kiln White with only a single imperfect circle (enso) at center, 120px diameter, drawn via SVG path animation (stroke-dashoffset from full to 0 over 2 seconds, ease-in-out) when it enters the viewport. The circle is left unclosed (path covers ~340 degrees). Below it, a single line in Spectral italic: "the space between." **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, neon accents, dramatic animations, overshooting spring physics, photography-heavy hero sections, gradient overlays, decorative maximalism, loud typography. **EMPHASIZE:** Negative space as active design element, texture as warmth substitute, extreme animation restraint, reverence for materials and process, the courage to leave things empty, asymmetry as intention not accident. ## Uniqueness Notes **Differentiators:** 1. **Ma (negative space) as structural principle**: No other design in the portfolio treats empty space as the primary design material. The 200-300px gaps between sections, the single-column-at-a-time layout, and the deliberately sparse navigation create a spatial experience fundamentally different from content-dense approaches. 2. **Wabi-sabi imperfection as deliberate system**: The imperfect SVG circles, off-center content alignment, kintsugi reference lines, and grain overlay form a coherent system of intentional imperfection. Other designs aim for polish; this one aims for honesty. 3. **Extreme animation restraint**: While other designs use spring physics, stagger sequences, and complex entrance animations, this design limits all transitions to simple opacity/translate fades under 16px of movement and 800ms duration. The restraint itself becomes a distinctive stylistic signature. 4. **Enso as terminal scroll reward**: The hand-drawn circle at the bottom of the page, animated with a single brushstroke, creates a contemplative endpoint that transforms reaching the bottom of the scroll into a meditative moment rather than a dead end. 5. **Process strip as equal to portfolio piece**: Showing raw sketches and material tests alongside finished work challenges the convention that portfolios only display polished outcomes. This transparency about creative process is architecturally embedded rather than optional. **Chosen seed/style:** wabi-sabi imperfect ceramic **Avoided overused patterns:** corporate aesthetic, centered-only layout, gradient palette, photography-heavy imagery, counter-animate patterns, mysterious-moody tone, full-bleed sections, split-screen layouts **Preferred underused elements:** ma-negative-space layout, wabi-sabi aesthetic, earth-tones palette, flowing-curves motifs, grounded-earthy tone, grain-overlay imagery, organic-flow layout, humanist typography, zen-contemplative tone