# Design Language for miris.studio ## Aesthetics and Tone miris.studio channels the visual consciousness of a 1970s Italian leather atelier reimagined by a Zurich-trained graphic designer who spent a decade in Kyoto -- a space where hand-stitched saddle leather hangs from brass hooks beside concrete walls, where a Dieter Rams radio plays Ennio Morricone, and where every surface carries the deliberate imperfection of a craftsperson who knows that perfection is the enemy of character. The aesthetic is **avant-garde artisanal**: a collision of radical compositional experimentation with the deep material honesty of handcraft. This is not the safe avant-garde of fashion magazines -- it is the uncomfortable, rule-breaking avant-garde of El Lissitzky's Proun rooms and Neville Brody's early Face magazine layouts, filtered through the warmth and tactility of a Florentine pelletteria. The tone is **warm-inviting** but never saccharine -- the warmth of aged leather and amber light, not the warmth of greeting cards. It is the feeling of being welcomed into a private workshop where extraordinary things are being made with quiet intensity. There is confidence without arrogance, intimacy without familiarity. Every element communicates: "We care deeply about what we make, and we trust you to see that." The emotional register sits between the contemplative stillness of a museum's restoration room and the crackling energy of a design studio at 2 AM the night before a show. ## Layout Motifs and Structure The layout rejects conventional grid symmetry entirely, embracing instead an **immersive-scroll** architecture that unfolds like a leather-bound folio being opened page by page. The experience is a single unbroken vertical descent, but each "folio page" (100vh section) presents a radically different compositional arrangement, as if the designer tore apart the grid and reassembled it with an artisan's intuition rather than a mathematician's precision. **Compositional System:** The underlying structure uses a 16-column grid at max-width 1400px, but columns are treated as suggestions rather than rules. Content blocks are positioned using deliberate, asymmetric placements that follow a visual rhythm inspired by the Japanese concept of "fukinsei" (asymmetric balance): - **Folio 1 (Hero):** Text occupies columns 2-7, pushed hard left with a 15vh top offset. A large leather texture swatch bleeds from column 10 to beyond the right viewport edge, cropped by the screen itself. The imbalance is intentional -- the eye is pulled rightward toward the unseen, creating tension and curiosity. - **Folio 2 (Manifesto):** A single oversized text block sits dead-center but rotated 2.5 degrees counterclockwise, occupying 70% of viewport width. Surrounding negative space is vast and intentional. Below the rotated block, a thin horizontal rule (1px, #5C3A1A) extends from column 1 to column 16, grounding the composition. - **Folio 3 (Process):** Three unequal panels arranged in a staggered step pattern -- panel 1 at columns 1-5 (top-aligned), panel 2 at columns 6-10 (offset 20vh down), panel 3 at columns 11-15 (offset 40vh down). Each panel contains a different content type (text, image, abstract form), creating a diagonal cascade that the user scrolls through like descending a staircase. - **Folio 4 (Gallery):** A single full-bleed leather texture background with text elements punched through as negative space (CSS mix-blend-mode: difference), creating a visual inversion where the background becomes the primary visual and text becomes the window through which the background is seen. - **Folio 5 (Contact):** Minimal -- a single line of text at 30% from the top, aligned to column 3. An email address. Nothing else. The restraint is the statement. **Transition Philosophy:** Between folios, content does not simply scroll into view. Each folio "catches" at 50vh like a soft snap-point (CSS scroll-snap-type: y proximity), creating a physical feeling of pages turning. The transitions between sections use opacity shifts that take 600ms with a cubic-bezier(0.16, 1, 0.3, 1) easing -- a slow inhale followed by a quick reveal. ## Typography and Palette **Typography:** - **Display / Headlines:** "Libre Baskerville" (Google Fonts) -- weight 700, italic variant. This typeface carries the literary gravitas and warm serifs of traditional bookmaking, but its slightly wider proportions and generous x-height make it feel contemporary rather than antique. Used at 3rem-5.5rem for folio titles and primary headings. Letter-spacing set to -0.02em for a slightly compressed, intimate feel. Line-height at 1.05 for dense, sculptural text blocks. - **Body / Narrative:** "Source Sans 3" (Google Fonts) -- weight 300 (Light) for body text, weight 400 (Regular) for emphasis. This humanist sans-serif was designed for readability at all sizes, and its calligraphic underpinnings (visible in the subtle stroke modulation of letters like 'a' and 'g') make it feel hand-shaped rather than machine-generated. Set at 1.05rem with line-height 1.75 and letter-spacing 0.01em. Max line-length constrained to 60ch. - **Accent / Labels:** "Instrument Sans" (Google Fonts) -- weight 600, all-uppercase with letter-spacing 0.14em. Used at 0.7rem-0.85rem for section labels, navigation hints, and metadata. The geometric precision of this face contrasts with the warmth of Libre Baskerville, creating a tension between the handmade and the engineered that mirrors the site's broader aesthetic tension. - **Monospace Accent:** "DM Mono" (Google Fonts) -- weight 300, used sparingly for dates, version numbers, and technical annotations. Set at 0.8rem with letter-spacing 0.04em. Applied only where the content genuinely requires a fixed-width treatment (measurements, coordinates, catalog numbers). **Palette:** The palette is derived from the actual color spectrum of vegetable-tanned leather at various stages of aging, sampled from photographs of Tuscan pelletteria workshops: | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Dark | Espresso Hide | #2C1810 | The deepest brown of freshly oiled bridle leather -- near-black with warm undertones | | Primary Mid | Saddle Tan | #8B5E3C | The rich, honeyed mid-brown of a well-worn saddle -- the heart of the palette | | Primary Light | Vachetta Blush | #C9A882 | The pale golden-pink of untreated vachetta leather before it develops patina | | Accent Warm | Burnished Sienna | #A0522D | A deep reddish-brown that appears at leather edges where friction creates heat patina | | Accent Cool | Stitching Linen | #D4C5A9 | The off-white of waxed linen thread used for hand-stitching -- warm, never pure white | | Background | Parchment | #F2EBE0 | The color of old carta fiorentina (Florentine marbled paper) -- warm ivory with a whisper of pink | | Text Primary | Ink Walnut | #3A2A1C | Dark walnut-brown for body text -- warmer and softer than black, easier on the eyes | | Text Secondary | Patina Grey | #7A6B5C | A warm grey-brown for secondary text, captions, and metadata | | Highlight | Brass Buckle | #B8860B | The color of solid brass hardware -- used extremely sparingly for interactive elements and key accents | **Color Application Rules:** - Background is always #F2EBE0 -- never pure white, never dark - Body text is always #3A2A1C -- never pure black - #B8860B (Brass Buckle) is used only for: underline-draw animations, active states, and a single accent element per folio - Large color fields use #2C1810 or #8B5E3C only -- never the lighter tones at scale - Gradients are forbidden. Color transitions happen through layering and opacity, not blending ## Imagery and Motifs **Leather Texture as Primary Visual Language:** The dominant imagery mode is **leather-texture** -- not as a skeuomorphic gimmick but as a genuine material study. Every visual element draws from the vocabulary of leatherworking: 1. **Grain Patterns:** CSS backgrounds use repeating SVG patterns that simulate different leather grain types -- pebbled grain (small, irregular circles at 40% opacity), full grain (subtle horizontal striations), and suede (a fine noise texture). These are applied as barely-visible background textures at 8-15% opacity over the #F2EBE0 parchment base, creating depth without distraction. The patterns shift between folios, each section having its own "leather type." 2. **Stitch Lines:** Decorative borders are rendered as dashed lines styled to resemble saddle-stitching -- 4px dashes with 6px gaps, colored #D4C5A9 (Stitching Linen), with tiny circular "needle holes" (3px dots) at each dash endpoint. These stitch-line borders are used instead of conventional dividers between content blocks. 3. **Burnished Edges:** Elements that receive focus or hover states develop a "burnished" effect -- a 2px border that transitions from transparent to #A0522D over 400ms using the underline-draw animation pattern, as if friction is slowly revealing the leather's true color underneath. 4. **Brass Hardware Accents:** Interactive elements (links, buttons) incorporate brass-colored (#B8860B) details -- a small circular "rivet" (6px filled circle) appears at the start of link text, and underlines draw from left to right in brass color on hover. Clickable elements have a subtle "buckle click" feel achieved through a 1px downward transform on :active state. **Retro Pattern Motifs:** The secondary motif layer is **retro-patterns** -- specifically, patterns drawn from 1960s-70s Italian design (Gio Ponti tiles, Emilio Pucci geometric prints, Fornasetti architectural fragments): - **Geometric Tile Borders:** Section dividers feature a narrow band (24px height) of repeating geometric patterns -- interlocking hexagons, stacked chevrons, or nested diamonds -- rendered in #8B5E3C on #F2EBE0. These bands evoke the floor tiles of Milanese ateliers. - **Corner Ornaments:** Each folio section has a single decorative corner element in the top-right -- a small (40px) geometric rosette rendered in SVG, using only #2C1810 and #B8860B. The rosette design changes per section, creating a subtle "folio numbering" system. - **Background Micro-Patterns:** At extreme low opacity (3-5%), retro geometric patterns tile behind text blocks, visible only when the user pauses and looks closely -- a hidden layer of ornamentation that rewards careful attention. ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The entire site must be built as a continuous immersive-scroll narrative. There is no traditional navigation header, no hamburger menu, no footer with links. The domain name "miris.studio" appears once in the hero folio, set in Libre Baskerville Italic at 4.5rem, positioned at column 2-7, and is the only persistent branding element. The user's sole mode of interaction is scrolling downward through the folio pages. **Scroll-Snap Architecture:** Use CSS `scroll-snap-type: y proximity` on the main container, with each folio section set to `scroll-snap-align: start`. The "proximity" value (not "mandatory") ensures the snap feels like a gentle suggestion rather than a mechanical lock -- the user can still scroll freely through mid-points, but the folios naturally settle into full-viewport positions when the user pauses. **Underline-Draw Animation System:** The primary interactive pattern is **underline-draw** -- a hand-drawn-feeling underline that extends beneath text elements. Implementation: - Links and interactive text have a pseudo-element `::after` with `height: 2px`, `background: #B8860B`, `transform: scaleX(0)`, `transform-origin: left`. - On hover, `transform: scaleX(1)` with `transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`. - The underline should not be perfectly straight -- apply a subtle `skewY(0.5deg)` to the pseudo-element to give it a hand-drawn imperfection. - For section headings that enter the viewport, trigger the underline-draw via Intersection Observer at threshold 0.3, with a 200ms delay after the text itself fades in. **Leather Texture Implementation:** Create three SVG tile patterns (pebbled, full-grain, suede) as inline SVG `` elements. Apply them as CSS `background-image` on section containers. Animate the opacity from 0% to their target opacity (8-15%) as the section scrolls into view, timed to begin 300ms after the scroll-snap settles. **Folio Transition Choreography:** As the user scrolls from one folio to the next: 1. Current folio content fades to 0 opacity over 400ms 2. A 200ms pause (content invisible, background leather texture visible) 3. New folio content fades in from 0 over 600ms with a 10px upward translate 4. The underline-draw animation for the new section's heading triggers 200ms after the content fade-in completes 5. All timing uses `cubic-bezier(0.16, 1, 0.3, 1)` -- a custom easing that starts slow and finishes decisively **Stitch-Line Dividers:** Implement decorative stitch lines as SVG elements, not CSS borders. Each stitch is a `` element with `stroke-dasharray: 4 6` and `stroke: #D4C5A9`. At each dash boundary, place a `` element to simulate needle holes. The entire stitch line animates via `stroke-dashoffset` from full length to 0 over 800ms when it enters the viewport, creating the illusion of thread being pulled through leather. **Retro Pattern Tile Bands:** Implement the geometric tile divider bands as inline SVGs with `` definitions. Each band contains a single repeating geometric unit (hexagon, chevron, or diamond) tiled horizontally. The band enters the viewport with a subtle left-to-right wipe reveal (clip-path animation from `inset(0 100% 0 0)` to `inset(0 0 0 0)` over 600ms). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, newsletter signup forms, social media icon rows, cookie consent modals styled as primary UI elements. This is a portfolio presence, not a conversion funnel. **Performance Note for Textures:** All leather grain SVG patterns should be defined once in the document head and referenced via `url(#pattern-id)`. Do not duplicate SVG pattern definitions. Keep pattern tile sizes small (under 100x100px equivalent) for rendering efficiency. ## Uniqueness Notes **Differentiators from other designs:** 1. **Avant-Garde Compositional Logic:** The aesthetic category "avant-garde" has 0% frequency in the current portfolio -- it has never been used. miris.studio introduces genuinely experimental composition (rotated text blocks, asymmetric staggered panels, negative-space text punching) drawn from constructivist and post-punk graphic design traditions. This is not decorative eccentricity; it is a systematic rejection of conventional web layout grammar applied with artisanal precision. 2. **Leather-Texture as Material System (Not Skeuomorphism):** The imagery category "leather-texture" sits at 1% frequency. Unlike typical leather textures in web design (which tend toward skeuomorphic buttons and stitched panels), miris.studio treats leather as a color and pattern source -- grain textures at near-invisible opacity, color palettes derived from actual tanning processes, stitch-line dividers as structural elements. The leather is abstracted into a design vocabulary rather than literally replicated. 3. **Immersive-Scroll Folio Architecture:** The layout "immersive-scroll" has 0% frequency -- no other design uses it. The scroll-snap folio structure creates a physical, book-like navigation experience that is fundamentally different from the continuous-scroll or section-based layouts that dominate the portfolio. Each folio is a self-contained compositional statement, connected by choreographed transitions. 4. **Italian Retro-Pattern Heritage:** The motif "retro-patterns" is drawn specifically from 1960s-70s Italian design vocabulary (Ponti, Pucci, Fornasetti) rather than the generic "retro" that appears at 10% frequency in aesthetics. This cultural specificity grounds the decorative elements in an actual design tradition rather than vague nostalgia. 5. **Earth-Tones Palette Derived from Material Reality:** The "earth-tones" palette at 2% frequency is here derived not from abstract color theory but from the actual chromatic progression of vegetable-tanned leather -- from fresh vachetta (#C9A882) through saddle tan (#8B5E3C) to espresso (#2C1810). Every color has a material origin and a name that references leatherworking. This material grounding prevents the palette from feeling arbitrary. 6. **Warm-Inviting Tone Without Sentimentality:** The "warm-inviting" tone at 3% frequency is achieved through material warmth (leather, brass, linen thread) and compositional intimacy (close-reading text sizes, generous white space, personal-feeling asymmetry) rather than through friendly copy, emoji, or illustrative warmth. The warmth is architectural, not linguistic. **Documented Seed:** aesthetic: avant-garde, layout: immersive-scroll, typography: humanist, palette: earth-tones, patterns: underline-draw, imagery: leather-texture, motifs: retro-patterns, tone: warm-inviting **Avoided Overused Patterns:** - playful aesthetic (94%) -- replaced with avant-garde (0%) - centered layout (99%) -- replaced with immersive-scroll (0%) and aggressive asymmetry - minimal imagery (94%) -- replaced with leather-texture (1%) as a rich material system - photography imagery (72%) -- no photographs; all visuals are texture, pattern, and typography - vintage motifs (82%) -- replaced with retro-patterns, which are culturally specific rather than generically "vintage" - friendly tone (98%) -- replaced with warm-inviting (3%), which is warmer but more restrained - gradient palette (90%) -- explicitly forbidden; color transitions use layering and opacity only - scroll-triggered patterns (97%) -- present but secondary to the primary underline-draw (6%) pattern - mono typography (99%) -- not used; the system is built on humanist (38%) and serif typefaces