# Design Language for miris.tech ## Aesthetics and Tone miris.tech is a technology platform named after the Miris — a high-altitude ridge where cold air pools and the world below disappears into cloud. The site carries that elevation: spare, unhurried, certain of itself. No chest-thumping. No gradient announcements. Just clean surfaces, deliberate spacing, and the quiet confidence of something that does not need to explain itself. The aesthetic is **minimalist mountain glass**: think a modernist alpine shelter — raw concrete corners, expansive windows, frost light diffusing through them. Glassmorphic cards float like ice panels suspended in fog. The monochrome palette ranges from off-white cirrus to near-black slate, with a single controlled accent of glacial steel-blue that appears only where something genuinely deserves the eye. Tone is conversational, not corporate. Sentences are short. Words earn their place. The page talks to the visitor the way a thoughtful guide briefs you before a summit attempt — calm, precise, no filler. ## Layout Motifs and Structure The primary structure is a **restrained card-grid**: three columns on desktop, two on tablet, one on mobile. Cards are the primary storytelling unit — not navigation items, not marketing blocks. Each card is a window into one idea, product facet, or moment. They do not stack haphazardly; they align to an 8 px baseline grid with 32 px gutters. Cards have perceptible depth — frosted glass panels with a subtle 1 px border in translucent white and a diffuse backdrop blur of 12–18 px. The hero occupies the full viewport minus the header. It is not a banner. It is an establishing shot: a field of monochrome gradient (near-black to slate) with the logo mark centered and the cards beginning to scroll up from below the fold as the user arrives, staggered into view one by one from the bottom. Spatial logic: - **Macro:** Full-viewport hero → scrollable card-grid body → minimal footer - **Meso:** Within the card-grid, cards cluster by theme via whitespace only — no dividers, no labels breaking the surface - **Micro:** Card interior uses a strict two-zone split: icon/visual on top one-third, text on bottom two-thirds Negative space is structural, not decorative. The margins surrounding the grid are proportional to the card size: at least 1.5 card-widths of whitespace on each lateral edge, creating a deliberate framed feeling, like looking through a viewfinder. ## Typography and Palette **Type system:** - **Display / Hero:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans) — weight 300 (light), tracking +0.04 em. Used for the domain name and primary headings. Its gentle rounded terminals echo the softness of diffuse alpine light without being playful. - **Body / Card text:** [Inter](https://fonts.google.com/specimen/Inter) — weight 400/500, size 15–17 px, line-height 1.65. Clinical clarity for descriptive copy. - **Accent / Label:** [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) — weight 400, 11 px, letter-spacing +0.1 em, all-caps. Used for category tags, timestamps, version strings. Gives cards a precise, instrument-panel quality without leaning into terminal aesthetic. **Palette — monochrome with glacial accent:** | Role | Name | Hex | |------|------|-----| | Background | Obsidian slate | `#0d0f12` | | Surface (card base) | Deep ash | `#161a1f` | | Card glass tint | Frost veil | `rgba(255,255,255,0.04)` | | Card border | Ice edge | `rgba(255,255,255,0.08)` | | Primary text | Cirrus white | `#e8eaed` | | Secondary text | Mist gray | `#8a9099` | | Accent (single use) | Glacial blue | `#5f9ecf` | | Subtle highlight | Snow flare | `#c8d6e8` | The glacial blue accent appears in exactly two places: the active navigation indicator and inline links within card body text. Nowhere else. ## Imagery and Motifs The visual language is built around **mountain landscape as abstraction**. No photography, no stock images. All imagery is generated through CSS and SVG: - **Hero backdrop:** A multi-layered CSS gradient simulating mountain silhouettes — three overlapping ridge shapes in progressively lighter shades of slate (`#1a1e24`, `#222831`, `#2e3542`), rendered as `clip-path: polygon()` shapes that shift subtly on scroll via parallax (0.15x scroll factor), suggesting depth without motion sickness. - **Card glass panels:** Each card uses `backdrop-filter: blur(14px)` with a thin `box-shadow: 0 4px 24px rgba(0,0,0,0.4)` and a `1px solid rgba(255,255,255,0.08)` border. On hover, the blur increases to 20px and the border brightens to `rgba(255,255,255,0.15)`, as if a cloud momentarily clears. - **Icon set:** Thin-stroke SVG icons at 24×24 px, stroke-width 1.25, no fill, color `#5f9ecf`. Iconography draws from mountain/terrain vocabulary: horizon lines, elevation markers, waypoint circles, ridge outlines. These are not decorative — each icon anchors a card's conceptual identity. - **Scroll-triggered fog layer:** A fixed-position `` element renders a slow-moving Perlin noise field in near-black tones behind the card-grid. The fog density responds to scroll position — denser near the top (higher altitude), clearing as the user descends. This is the primary atmospheric depth device. - **Motif: the ridge line.** A single SVG polyline runs the full width of the page between the hero and the card-grid: a jagged mountain silhouette in `#1e2530` — barely visible against the background, but tactile. ## Prompts for Implementation This is a single-page narrative about elevation, clarity, and technology that does not shout. Every implementation decision should reinforce stillness broken by precise, meaningful motion. **Hero sequence:** The page opens on near-black. The mountain ridge shapes are already in place — three CSS `clip-path` polygons, static. After 600 ms, the domain name fades in at 0% opacity → 100% over 900 ms using `ease-out`. After the name settles, the tagline types itself in using a typewriter effect at 55 ms per character with a blinking `|` cursor in `#5f9ecf`. After the tagline completes (around 2.4 s), the cards below begin their stagger entrance. **Card stagger entrance (scroll-triggered):** Use an `IntersectionObserver` with `threshold: 0.1`. When a card enters the viewport, it transitions from `opacity: 0; transform: translateY(28px)` to `opacity: 1; transform: translateY(0)` over 520 ms with `cubic-bezier(0.16, 1, 0.3, 1)` (a fast spring). Cards in the same row stagger by 80 ms per card. This feels like stones settling into place, not confetti. **Fog canvas animation:** Initialize a `` filling the viewport behind the card-grid. Use a simplex noise function (`simplex-noise` via CDN) to generate a 2D noise field. Every frame: advance the noise offset by 0.0008 (extremely slow drift), render a `512×512` noise texture scaled to fill canvas, composite at `globalAlpha: 0.06` over the background. This barely registers consciously but removes the flatness of a pure CSS background. **Glassmorphic card hover:** On `mouseenter`, transition: - `backdrop-filter` from `blur(14px)` → `blur(20px)` over 300 ms - `border-color` from `rgba(255,255,255,0.08)` → `rgba(255,255,255,0.18)` over 200 ms - `box-shadow` from `0 4px 24px rgba(0,0,0,0.4)` → `0 8px 40px rgba(95,158,207,0.15)` over 300 ms - `transform: translateY(-4px)` over 250 ms On `mouseleave`, all properties return in 400 ms. The faint blue glow in the shadow is the only moment the accent color bleeds into the spatial layer. **Mountain parallax:** The three ridge polygon elements are wrapped in a `position: fixed` container behind the hero. On `scroll`, read `window.scrollY` and apply `transform: translateY(scrollY * 0.12)` to the foreground ridge, `translateY(scrollY * 0.07)` to the mid ridge, and `translateY(scrollY * 0.03)` to the background ridge. This gives the illusion the camera is rising above the peaks as the user descends the page. **No CTAs, no pricing tables, no stat counters.** The cards tell the story by their arrangement and content alone. Navigation is a single horizontal strip: logo left, three text links right, no buttons, no backgrounds, no borders. **Footer:** two lines of 12 px Roboto Mono in `#8a9099` on `#0d0f12`. Domain + year. Nothing else. ## Uniqueness Notes 1. **Mountain landscape as CSS-only geometry** — the ridge silhouettes are `clip-path: polygon()` shapes, not images, not SVG files. They are pure CSS and respond to scroll via JavaScript without any canvas overhead. This approach is rare and fully scalable. 2. **Fog atmosphere via composited canvas** — using a persistent `` at `globalAlpha: 0.06` behind the content creates depth that no CSS gradient or static image can replicate. Most glassmorphism implementations skip atmospheric depth entirely and rely solely on blur. 3. **Accent discipline** — the glacial blue `#5f9ecf` appears in exactly two places site-wide. Most designs treat accent colors as recurring decoration; here it functions as a precision instrument, which makes every appearance feel earned. 4. **Typewriter hero with terminal cursor in accent color** — the combination of Nunito Sans (soft, light-weight) and a blinking Roboto Mono cursor creates a tension between softness and precision that mirrors the miris.tech identity: a technical tool that presents itself with restraint. 5. **Card hover that bleeds into the shadow layer** — the hover state's `box-shadow` contains the accent color at very low opacity, making the glow feel like light leaking from inside the card rather than a surface effect. This is a depth-layer interaction not present in standard glassmorphism tutorials. Chosen seed: `aesthetic: minimalist, layout: card-grid, typography: frutiger-clean, palette: monochrome, patterns: scroll-triggered, imagery: glassmorphic-cards, motifs: mountain-landscape, tone: conversational` Avoided overused patterns: `grotesque-neo` (5%), `oversized-display` (5%), `futura-geometric` (5%), `sans-grotesk` (5%), `art-deco-display` (5%). Typography uses `frutiger-clean` (4%) as the seed specifies, complemented by Inter and Roboto Mono for functional clarity.