# Design Language for miris.dev ## Aesthetics and Tone miris.dev is a developer tools studio that refuses to be either a sterile corporate dashboard or a garish hacker playground. The aesthetic is **isometric naturalism** — the rigorous geometry of isometric projection applied not to machines or infrastructure diagrams, but to *living, growing things*: honeycombs, mycelium networks, seed-pod cross-sections, coral lattices, lichen colonies. The site belongs to a brand that names its tools after Miridae — the plant bugs, the capsid bugs, tiny jewel-colored insects that live inside flower buds — and has the same dual nature: precise, predatory, beautiful in miniature. The tone is **edgy-rebellious in the naturalist register**, not the punk register. It does not scream or break its own grid. Instead it holds a single, perfect hexagonal frame on a screen and dares you to look at its geometry the way you'd look at a cut geode: quietly violent. The rebellion is in the subject matter — tools named after insects, documentation rendered as field-guide specimens, API references laid out like botanical plates — deployed against the convention of SaaS sites that pretend nature does not exist. Mood references: a field entomologist's notebook scanned at 600 DPI; a Victorian apiarist's cabinet with brass fittings; Haeckel's *Kunstformen der Natur* plates recolored in amber and umber; a Rust crate README that somehow contains a pressed flower between its type specimens. The rebellion is calm. The geometry is absolute. The nature is precise. ## Layout Motifs and Structure The structural logic of the entire site is the **hexagonal honeycomb** — but used with restraint, never as decoration. Hexagons are the structural unit, not the aesthetic motif. **Primary layout system:** A modular hexagonal grid built in CSS with `clip-path: polygon()` cells. Each hexagonal cell is a self-contained content block, sized at 320px flat-to-flat on desktop. Cells tessellate in offset rows (every second row shifted 160px right) forming a honeycomb membrane across the viewport. The grid is not full-bleed wallpaper — it is a **specimen tray**: a 3×4 cell arrangement centered with deliberate voids (empty cells) breaking regularity, as if cells are missing from a prepared slide. **Isometric projection depth:** Key cells are rendered with CSS 3D transforms that simulate a 30° isometric view, giving a slight depth impression to the honeycomb slab — as if the tray has physical thickness. Active/hover cells rise 12px in the Z-axis using `transform: translateZ(12px) rotateX(2deg)` within the isometric context. This is geometry, not gimmick. **Navigation:** Single horizontal bar at top, monochromatic, no drop shadows. Seven items max, set in small caps. Shrinks to a hamburger on mobile that opens as a hexagonal radial menu (six items around a center, seventh is the active item in center). **Scroll behavior:** Not parallax. Not scroll-triggered fireworks. The page is a **single long specimen sheet** that scrolls linearly. The honeycomb grid enters from below, section by section, with each row of cells arriving with a 40ms stagger. The only animation that competes for attention is the skeleton-loading reveal used on first paint — cells load as shimmering amber-on-umber silhouettes before their content settles in, exactly like resin specimens becoming visible as resin cures and clears. **Breakpoints:** - Desktop (≥1200px): 3-column hex grid, full isometric depth - Tablet (768–1199px): 2-column hex grid, isometric depth halved - Mobile (<768px): Single-column stacked cards with clipped hexagonal top and bottom edges only ## Typography and Palette **Typography (Google Fonts only):** - **Display — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)**, weights 300/500/700, italic variant used for specimen labels, set at 64–96px on hero, tracked at -1.5%. This is the serif-classic backbone. Its extreme contrast between thick and thin strokes mirrors the contrast between the hard hexagonal geometry and the soft organic subject matter. Use the italic for all pull-quotes and specimen labels; upright for section headers. - **Body — [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville)**, weight 400/700, set at 16–18px, line-height 1.7. Baskerville is bookish without being archaic; it reads like a well-printed field guide. Justified alignment on desktop within hexagonal cells (the narrow cell width makes justification work correctly), ragged-right on mobile. - **Code / Monospaced — [Inconsolata](https://fonts.google.com/specimen/Inconsolata)**, weight 400/700, set at 13–15px. Used exclusively for code blocks, CLI examples, version badges, and the terminal-style API reference cells. Small caps for variable names in inline code. - **Labels / Caps — Cormorant Garamond** small caps at 11–12px, letter-spacing +8%, used for category labels, specimen classification tags, and navigation items. **Palette (honeyed-neutral, edgy accent):** - `--amber-wax` `#C8923A` — primary amber, the color of fresh beeswax, used for hex cell borders, active states, the skeleton-loading shimmer - `--umber-deep` `#2E1F0E` — near-black brown, the color of dark forest soil, primary text and background of dark sections - `--parchment` `#F2E8D5` — warm off-white with a slight grain undertone, primary background - `--honeycomb-mid` `#D4A855` — mid amber, lighter than wax, used for hex fill on hover, gradient midpoint - `--bark-muted` `#7A5C38` — dusty mid-brown, secondary text, captions, metadata, specimen classification labels - `--chitin-black` `#1A1208` — deepest tone, almost black with a brown warmth, used for code blocks, terminal cells - `--pollen-accent` `#E8C84A` — sharp yellow-gold, the one accent that breaks the neutrals, used for error states, warnings, and the single hover-spark on interactive cells. Maximum 4% coverage across the design. - `--wing-translucent` `rgba(200, 146, 58, 0.12)` — amber at 12% opacity, used for hex cell ghost states, skeleton shimmer base **Color usage rules:** The palette reads like dried specimens in amber resin. Never use pure black (#000) or pure white (#fff). The background is always `--parchment` or `--umber-deep`, never a neutral gray. `--pollen-accent` appears in only one cell per viewport to avoid dilution. ## Imagery and Motifs **No stock photography. No UI screenshots. No abstract gradient meshes.** Imagery is exclusively **nature-elements** rendered as inline SVG: 1. **Hexagonal micro-cross-sections.** Each content cell carries a subtle SVG background element: a cross-section of a honeycomb cell wall, a pollen grain facet, a beetle-wing vein pattern, a mushroom gill structure — all rendered as fine-line SVG at 0.5px stroke width in `--amber-wax` at 30% opacity. These never compete with content; they are the grain of the paper. 2. **Specimen silhouettes.** Full-bleed cells (empty honeycomb slots) contain large-scale SVG silhouettes of Miridae species, rendered as solid `--bark-muted` shapes at 80% opacity with a `mix-blend-mode: multiply` so they interact with the parchment background. Six species max, each corresponding to a product in the suite. 3. **Organic-blob morphology.** The organic-blob motif is not used as background decoration — it is the shape language for **non-hexagonal content zones**: testimonials, callouts, and the "about" fragment. These zones use CSS `border-radius` curves that reference the body segments of insects: not smooth spheres but articulated, slightly irregular ovals with one edge flatter than the other. Defined by a single `border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%` base that is animated slowly (8s ease-in-out infinite) on desktop. 4. **Field-guide caption system.** Every cell carries a classification label in the bottom-left corner — small Cormorant Garamond italic in `--bark-muted` — formatted as: *Genus species* · Common Name · Year. For product cells: *Miridae capsid* · Tool Name · v2.1. This is the primary personality gesture of the site. 5. **Skeleton-loading as specimen curing.** On first paint, all hexagonal cells render as pure `--wing-translucent` fills with a `--amber-wax` shimmer animation (a diagonal gradient that sweeps left-to-right over 1.4s, `animation-timing-function: linear`, looping) until the real content resolves. The effect reads as amber resin that is still liquid becoming transparent — the specimen inside emerging from the curing process. This is functional loading state *and* the site's primary narrative metaphor deployed in its most functional moment. ## Prompts for Implementation Treat miris.dev as a **single specimen sheet** that a field researcher prepared over a career. The visitor's task is not to convert, subscribe, or sign up — it is to *examine*. Every cell rewards close reading. The site has a story to tell at two scales: the overall honeycomb pattern at scroll distance, and the individual cell label at reading distance. **Macro structure (single vertical scroll, no routing, no SPA):** 1. **Section I — The Sheet.** Full-viewport hexagonal grid, 3×4 cells, 4 cells empty (random voids), all cells loading as skeleton shimmer simultaneously on entry. As resin "cures" (staggered 0ms–600ms delay per cell), content reveals. Header: "Tools that live inside the work" in Cormorant Garamond 96px italic, split across two cells. The first viewport establishes the entire visual language. 2. **Section II — The Specimens.** Six product cells, each containing a Miridae SVG silhouette at 60% cell coverage, a tool name in Cormorant Garamond 48px, a one-line description in Libre Baskerville 16px, and a field-guide classification label. On hover: cell rises 12px in isometric Z, silhouette shifts from `--bark-muted` to `--amber-wax`, label animates from hidden to visible via a `clip-path` reveal (0.25s ease-out). No CTAs — just specimen labels with version numbers. 3. **Section III — The Field Notes.** Prose section in a single wide cell (two hexagonal columns merged) with Libre Baskerville body text. This is the "about" narrative. Uses a drop capital (Cormorant Garamond 96px, 3-line drop, `float: left`) and marginal annotations (right-column labels in small caps, 11px). The organic-blob border-radius is active here — the merged cell has the articulated-oval shape instead of hex clip-path. 4. **Section IV — The Reference Grid.** API/documentation cells. Terminal-style cells (`--chitin-black` background, `--amber-wax` text, Inconsolata 13px) tessellated at smaller scale (200px flat-to-flat). Each cell contains a command, its description, and an example. Skeleton-loading is used again here for progressive disclosure — cells below the fold load only when scrolled into view. 5. **Section V — The Archive.** Footer as a honeycomb row, full-width, `--umber-deep` background. Four cells: contact (email only, no form), changelog (three most recent, Libre Baskerville italic, dated in small caps), license notice, and a single large Miridae silhouette in `--amber-wax` at 100% opacity. No social links. No newsletter signup. **Implementation specifics:** - Build hexagonal grid entirely in CSS using `clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)` and CSS Grid with negative `margin-top` for offset rows. No canvas, no WebGL. - Skeleton loading via CSS `@keyframes shimmer` with a moving `linear-gradient` background-position. Triggered by `IntersectionObserver` on each cell. The `.cell--loading` class is applied until content loads, removed on `DOMContentLoaded` with per-cell stagger via `setTimeout`. - Isometric depth via CSS custom properties: `--iso-depth: 12px`. Apply `transform: translateZ(var(--iso-depth))` on `.cell:hover` within a `perspective: 1200px` parent. Use `will-change: transform` only on `.cell:hover` to avoid compositing cost on all cells. - The organic-blob animation: `@keyframes blob-breathe { 0%, 100% { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; } 50% { border-radius: 44% 56% 54% 46% / 36% 60% 40% 64%; } }`. Duration: 8s. `animation-play-state: paused` on `prefers-reduced-motion: reduce`. - Color tokens as CSS custom properties on `:root`, never hardcoded. - No JavaScript frameworks. Vanilla ES modules only. Total JS budget: 12KB uncompressed. **Avoid:** - Any parallax effect - Auto-playing video or lottie animations - Gradient mesh backgrounds - CTA buttons with shadows and hover scale effects - Pricing grids - Testimonial carousels - "Trusted by N companies" stat blocks - Any layout that does not reference the hexagonal structural unit ## Uniqueness Notes **Differentiators from the 271-design corpus:** 1. **Isometric naturalism as the primary aesthetic mode.** The corpus shows `isometric` at 6% — but all existing isometric designs in the corpus deploy it for tech/infrastructure diagrams (server racks, database cubes, network nodes). miris.dev is the **first isometric design applied to organic subject matter**: honeycombs, insect morphology, botanical cross-sections. The isometric discipline is used to *classify* nature, not to diagram machines. 2. **Skeleton-loading as narrative metaphor.** The corpus shows `skeleton-loading` at 3%, and in all cases it is pure UX scaffolding with no semantic content. miris.dev repurposes the skeleton shimmer as the site's **primary narrative gesture** — "amber curing over a specimen" — making a functional loading state into the opening scene of the design story. No other design in the corpus treats a UX pattern as storytelling. 3. **Honeyed-neutral palette with zero warm/gradient contamination.** `honeyed-neutral` appears at 3% in the corpus. More importantly, miris.dev achieves a fully warm palette without using `gradient` (78% corpus overuse) or defaulting to the `warm` broadband category (91% corpus overuse). The palette is warm because it references *amber resin and beeswax*, not because it uses warm-leaning gradient stops. Every color has a specific material referent. 4. **Field-guide classification as the primary UI chrome.** The site's personality is delivered through a consistent 11px Cormorant Garamond italic label affixed to every single cell: "Genus species · Common Name · Version." This is not decorative; it is the navigation system, the taxonomy, and the brand voice unified in one repeating micro-gesture. No other corpus design uses a naturalist classification system as UI chrome. 5. **No CTAs, no conversion architecture.** The design explicitly avoids all CTA-heavy patterns, pricing grids, and stat blocks that dominate the corpus. It is a specimen sheet, not a funnel. The rebellion is structural: a developer tools site with zero "Get Started" buttons and zero hero-section metrics. **Chosen seed:** aesthetic: isometric, layout: hexagonal-honeycomb, typography: serif-classic, palette: honeyed-neutral, patterns: skeleton-loading, imagery: nature-elements, motifs: organic-blobs, tone: edgy-rebellious **Avoided from frequency analysis:** - hand-drawn (61%) — corpus saturated, replaced with isometric SVG precision - editorial (52%) — avoided in favor of specimen-sheet structural logic - centered/full-bleed (87%/71%) — replaced by hexagonal specimen-tray composition - warm/gradient palette (91%/78%) — replaced by specific material-referent palette - parallax pattern (78%) — deliberately excluded; linear scroll only - stagger (53%) — used minimally (skeleton-loading reveal only, not decorative) - photography (90%) — replaced entirely by SVG nature-elements and Miridae silhouettes - vintage motifs (42%) — replaced by naturalist/entomological motifs