# Design Language for miris.dev ## Aesthetics and Tone miris.dev is a developer portfolio that feels like staring through a rain-spattered window at a city made of concrete and light. The aesthetic is **grainy-textured** -- every surface carries the particulate haze of analog film stock, the kind of grain you see in Tri-X 400 pushed two stops in Rodinal. This is not nostalgic grain; it is present-tense grain, the visual noise of a mind actively processing information, the static between signals. The site belongs to the tradition of Swiss International Style as filtered through the lens of 1990s Emigre magazine: rigorous grid structures made human by texture, by imperfection, by the warm crackle of photographic noise laid over hard geometric forms. The tone is **minimal** -- not minimalism as trend, but minimalism as discipline. Every element earns its place or it does not exist. There are no decorative flourishes that serve only beauty. Text communicates. Color signals. Space breathes. The voice is that of a developer who speaks in precise sentences, who values clarity over charm, who finds elegance in reduction. The emotional register is quiet confidence: no exclamation points, no calls to action, no persuasion. The work is presented; the viewer decides. The overall mood sits at the intersection of a darkroom print drying on a wire and a terminal window displaying clean output -- analog grain meeting digital precision. ## Layout Motifs and Structure The layout is built on a **masonry** grid system that breaks the monotony of row-aligned card layouts. Content blocks of varying heights and widths pack together like stones in a dry-laid wall -- no mortar, just gravity and geometry holding everything in place. The masonry grid operates on a base unit of 80px with a 16px gutter, and columns flex between 2 (mobile), 3 (tablet), and 4 (desktop). Critically, the masonry does not repeat the Pinterest waterfall cliche; instead, blocks are grouped into semantic clusters that represent different facets of the developer's work (projects, writings, experiments, tools), and each cluster has its own internal rhythm. **Layered-depth** is the structural motif that distinguishes this layout from flat masonry implementations. Content exists on three distinct visual planes: 1. **Background plane (z-0):** A full-viewport field of animated grain -- a CSS noise texture generated via SVG filters (`feTurbulence` + `feDisplacementMap`) that shifts subtly on a 4-second loop, producing a living, breathing surface. This plane is always visible behind everything else. 2. **Content plane (z-1):** The masonry grid of cards, text blocks, and project showcases. These elements sit 4-8px above the background with a diffused box-shadow (`0 4px 24px rgba(0,0,0,0.08)`) that gives them a paper-on-table quality. Each card has its own grain overlay at reduced opacity (0.03-0.06), creating a visual echo of the background texture at a finer scale. 3. **Interaction plane (z-2):** Hover states, expanded views, and modal overlays occupy the topmost layer. When a masonry card is activated, it morphs upward and forward, scaling to 1.02x and gaining a sharper shadow (`0 8px 32px rgba(0,0,0,0.15)`), as if the viewer is leaning closer to examine a print. Navigation is nearly invisible: a single line of text at the top-left corner displaying "miris.dev" in the primary typeface, and a cluster of three small navigation tokens (work / words / info) right-aligned. No hamburger menu, no sticky header. On scroll, the navigation fades to 40% opacity and returns on hover, keeping the masonry field the permanent center of attention. ## Typography and Palette **Typography:** - **Primary / Headlines:** "Space Grotesk" (Google Fonts) -- a grotesque-neo typeface with distinctive single-story 'a', geometric 'o', and slightly squared terminals that read as both technical and approachable. Used at weights 500 and 700 for headlines and navigation. Display sizes range from 2.5rem to 5rem. Letter-spacing is set tight at `-0.02em` for headlines, reinforcing the density of the masonry layout. Line-height at 1.05 for display sizes to create compact, monumental text blocks. - **Body / Reading:** "Inter" (Google Fonts) at weight 400 and 450 (using variable font axis). Inter's open apertures and tall x-height make it exceptionally legible at small sizes (0.875rem to 1rem) against the grainy background texture. Line-height at 1.65 for body text to give generous vertical breathing room. Color: always the secondary text color (#A3A3B0) against dark backgrounds, never pure white, never pure black. - **Accent / Code / Labels:** "JetBrains Mono" (Google Fonts) at weight 400. Used exclusively for code snippets, metadata labels (dates, tags, version numbers), and the navigation tokens. Set at 0.75rem with letter-spacing `0.04em` and uppercase for labels; natural case at 0.85rem for inline code. The monospace creates a visual bridge between the developer identity and the design language. **Triadic Palette:** The palette is built on a triadic color harmony with three anchor hues spaced 120 degrees apart on the color wheel, tempered by desaturation to maintain the quiet, grainy mood: | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Base | Charcoal Indigo | `#1A1A2E` | Primary background, deepest layer | | Surface | Slate Smoke | `#24243A` | Card backgrounds, content plane | | Triadic Anchor A | Muted Violet | `#6B5CE7` | Primary accent, links, active states | | Triadic Anchor B | Teal Signal | `#3DC8B8` | Secondary accent, tags, success states | | Triadic Anchor C | Amber Grain | `#E7A83C` | Tertiary accent, highlights, warnings | | Primary Text | Silver Ash | `#E8E8F0` | Headlines, primary body text | | Secondary Text | Pewter Haze | `#A3A3B0` | Body text, descriptions, metadata | | Grain Overlay | Warm Noise | `#F5F0E8` | SVG noise texture fill at 2-4% opacity | | Divider | Glass Edge | `#2E2E48` | Borders, separators, card edges | The three triadic anchors (#6B5CE7 violet, #3DC8B8 teal, #E7A83C amber) never appear simultaneously at full intensity. At any given moment, one anchor dominates while the other two appear at 40-60% opacity or in smaller typographic details. This creates a color rhythm across the masonry grid where different clusters lean toward different hues: project cards favor violet accents, writing cards favor teal, and experimental/tool cards favor amber. ## Imagery and Motifs **Grain as Primary Visual Identity:** The defining visual motif is grain -- not as a filter applied to photographs, but as a foundational material. The entire site surface is covered in a living noise texture generated through SVG `feTurbulence` with `baseFrequency="0.65"` and `numOctaves="4"`, composited over the background via `feBlend mode="overlay"` at 6-8% opacity. This grain is not static; it regenerates on a staggered 4-second CSS animation cycle (`@keyframes grain-shift`) that subtly repositions the turbulence seed, producing the visual impression of film stock advancing through a gate. The grain is coarser at the viewport edges and finer toward the center, achieved by layering two turbulence patterns at different frequencies. **Layered-Depth Through Shadow and Grain Density:** Each masonry card carries its own micro-grain overlay -- a smaller-scale version of the background texture at 3% opacity, but with a slightly different `baseFrequency` (0.85 vs 0.65). This creates a parallax-like depth effect where the background grain and card grain drift at different rates during the animation cycle, giving the eye a sense of two distinct surfaces even though the z-separation is only a few pixels. Hover states increase the card grain to 5% and shift it to a warmer tone (#F5E6D0 at 5%), as if the card is being pulled into a pool of amber light. **No Photography, No Illustration:** The imagery category is **minimal** by intent. There are no hero images, no project screenshots rendered as glossy mockups, no stock photography. Project cards display only: the project title in Space Grotesk 700, a one-line description in Inter 400, a cluster of tag pills in JetBrains Mono uppercase, and a single accent-colored line (2px) along the left edge whose color (violet, teal, or amber) categorizes the work. The absence of imagery forces the typography and color to carry all communicative weight, which aligns with the developer-as-craftsperson ethos: the work is in the code, not in the picture of the code. **Geometric Punctuation:** Small geometric marks appear throughout the masonry grid as visual punctuation: circles (6px diameter, stroke only, 1px) mark the beginning of text blocks; horizontal rules use a custom pattern of dashes (`2px dash, 8px gap`) rather than solid lines; and the three triadic colors appear as tiny filled squares (4px) at the intersection points of the masonry grid, visible only at desktop widths, creating a subtle grid-registration-mark effect that reinforces the print-production aesthetic. ## Prompts for Implementation **Full-Screen Narrative Entry Sequence:** The site opens to a full-viewport field of animated grain on the `#1A1A2E` background -- nothing else. After a 600ms pause, the domain name "miris.dev" morphs into view using an SVG path animation where each letterform draws itself from center-outward, stroke-first, then fills. The drawing animation lasts 1200ms with eased timing (`cubic-bezier(0.22, 1, 0.36, 1)`). The typeface for this animation is Space Grotesk at `6vw` (desktop) / `12vw` (mobile), centered both horizontally and vertically. As the name completes its draw-in, the grain texture subtly increases in intensity from 4% to 8% over 800ms, creating a sense of the surface "waking up." After another 400ms pause, the masonry grid begins to populate from the top-left corner in a stagger pattern -- each card fading from 0 to 1 opacity and translating 20px upward, with a 60ms stagger delay between cards. The total entry sequence is approximately 3.5 seconds. **Morph Transitions:** All interactive state changes use **morph** animations rather than cuts, fades, or slides. When a masonry card is clicked/tapped, it does not open a new page or pop up a modal in the traditional sense. Instead, the card itself morphs: it expands smoothly from its masonry position to fill 80% of the viewport width and 90% of the viewport height using CSS `View Transitions API` or a FLIP animation fallback. The surrounding cards compress and fade to 20% opacity. The expanding card's grain overlay intensifies to 6%, its background shifts from `#24243A` to `#1E1E34` (slightly deeper), and its content re-flows from the compact card layout to a detailed project page layout. The morph animation duration is 500ms with spring easing. Closing reverses the morph exactly. This creates a seamless, single-surface experience where the user never "leaves" the masonry grid -- they zoom into it. **Grain Interaction Layer:** The grain texture responds to cursor proximity on desktop. Using a `mousemove` event listener throttled to 60fps, the grain `baseFrequency` in a 200px radius around the cursor shifts from 0.65 to 0.45 (coarser grain), creating a subtle "wake" effect as if the cursor is disturbing the surface. This is achieved by layering a second SVG filter with a radial gradient mask that follows the cursor. The effect is intentionally subtle -- visible only if you look for it, but contributing to the alive quality of the surface. **Masonry Load and Scroll Behavior:** New masonry items load via intersection observer as the user scrolls, appearing with the same fade-up-stagger pattern as the initial load (opacity 0 to 1, translateY 20px to 0, 400ms duration, spring easing). The masonry grid recalculates on each batch load to maintain optimal packing. Scroll position is preserved during recalculation using a layout-shift compensation technique. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images, gradient backgrounds, sticky navigation bars, cookie banners styled as design elements, "above the fold" optimization thinking. This site scrolls at its own pace. **Color Animation on Scroll:** As the user scrolls through the masonry grid, the dominant triadic accent shifts gradually. The top third of the page favors violet (#6B5CE7) accents; the middle third shifts toward teal (#3DC8B8); the bottom third warms to amber (#E7A83C). This is not a hard transition but a gradual cross-fade applied to accent-colored elements (left-edge lines on cards, tag pill backgrounds, geometric punctuation marks) using scroll-linked opacity values. The effect creates a chromatic journey through the portfolio without the user consciously registering a "section change." ## Uniqueness Notes **Differentiators from other designs:** 1. **Living Grain as Architectural Material:** No other design (0% frequency for grainy-textured aesthetic) uses animated SVG noise as a foundational surface material. While other designs may apply grain as a post-processing filter or overlay, miris.dev builds its entire spatial logic around grain: background grain, card grain, cursor-reactive grain, and grain-density-as-depth-cue. The grain is not decoration; it is the building material of the site, analogous to concrete in brutalism or paper in Japanese design. 2. **True Triadic Color Harmony:** At only 1% frequency, triadic palettes are nearly absent from the design corpus. The three-anchor system (violet/teal/amber) with scroll-linked chromatic shifting creates a color experience that has no precedent in the existing designs. Most designs default to warm monochrome, gradient, or muted palettes (68-100% frequency). The triadic approach provides visual variety without requiring imagery, and the scroll-linked shift makes the color itself a narrative device. 3. **Morph-Based Navigation Without Page Changes:** While morph animations appear at 10% frequency, they are typically used for micro-interactions. Here, morph is the primary navigation paradigm: content cards expand and contract within a persistent masonry surface. There are no page transitions, no route changes visible to the user. The entire site exists as a single, continuously morphing surface -- a fundamentally different interaction model from the page-based or section-based approaches that dominate the corpus. 4. **Masonry as Semantic Architecture:** The 5% frequency of masonry layouts means this structural approach is rare, but miris.dev goes further by using masonry not as a uniform grid but as a system of semantically clustered zones, each with its own chromatic lean (violet for projects, teal for writing, amber for experiments). The masonry becomes a map of the developer's practice rather than a gallery of thumbnails. 5. **Zero-Imagery Portfolio:** In a corpus where 94% of designs use minimal imagery and 72% use photography, miris.dev takes minimalism to its logical conclusion: there are no images at all. No screenshots, no avatars, no decorative photography. The entire visual identity is carried by typography, color, grain texture, and geometric punctuation. This is a portfolio that trusts language and structure over visual spectacle. **Chosen Seed:** aesthetic: grainy-textured, layout: masonry, typography: grotesque-neo, palette: triadic, patterns: morph, imagery: minimal, motifs: layered-depth, tone: minimal **Avoided Overused Patterns:** playful aesthetic (94%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (97%), friendly tone (98%), vintage motifs (82%), photography imagery (72%), gradient palette (90%). Every seed dimension was chosen from the underused end of the frequency spectrum.