# Design Language for miko.pet ## Aesthetics and Tone miko.pet is a **cyberpunk** marble gallery — an imagined retro-future curation of digital companions, exhibited as if in a museum hall on the 142nd floor of an ornate, half-melted tower. The aesthetic collides two registers that rarely sit together: cyberpunk's hard chrome geometry, scanlines, and rain-on-glass, against the cold classical grandeur of marble veining and ionic engraving — *Akira* meets the Capitoline Museum. The tone is **bold-confident**, almost imperial: pets are not "products" here, they are exhibits with curator labels, runtime classifications, and pedigree numerals. Visual inspiration draws from the title cards of *Blade Runner 2049*, the marble-and-neon hybrid posters of Greg Bunbury, the lottie-driven kineticism of Studio Wolf Olins, and the high-contrast monochrome of Helmut Newton's late editorials. Visiting feels like walking into a hushed neon-lit rotunda where each plinth holds something alive. ## Layout Motifs and Structure The architecture is a **portfolio-grid** — sixteen exhibit cards arranged in a 4×4 master grid with one cell at random promoted to a 2×2 "featured plinth" position on each visit. Cards are tall (9:16 aspect) and framed with thin gold-foil hairlines on three sides only (top, left, right) — the bottom side is open, with a serif curator label suspended in space below. The grid sits centered on the page with a maximum width of 1320px, surrounded by deep black marbled gutters. A floating right-margin index lists all sixteen pets vertically using Playfair Display italic at 14px tracked +80, doubling as anchor links. The page does scroll, but only slightly — two viewport lengths total — and each card animates open into a full-screen Lottie sequence when clicked, treating the gallery as a launcher into immersive companion vignettes. A thin marble-veining SVG runs vertically along both edges of the viewport, never the same on any two visits. ## Typography and Palette **Typography** is led by Playfair Display (the **playfair-elegant** brief), used in a fully classical register: Playfair Display Black 96pt for the lockup "miko.pet" with italic flourish on the period, Playfair Display Italic 32pt for the curator labels under each card, and Playfair Display 18pt Regular for the body. A secondary face, Inter at 11px tracked +200 uppercase, handles classification tags ("LIVING", "MYTHIC", "RUNTIME 04.2.18") with the cold air of a museum vitrine label. Numerals are oldstyle figures in Playfair to feel hand-engraved. **Palette** is **high-contrast** — black, white, gold, and a single electric blue accent: - `#0A0A0C` — total marble black (page ground) - `#F4F1EA` — bone-marble white (card ground) - `#171821` — deep slate (card shadow, secondary surface) - `#D4B26A` — antique gold (hairline frames, curator labels, accent text) - `#04E0FF` — cyber azure (single neon accent — used only for hover-state hairlines and Lottie highlights) - `#85797A` — marble vein grey (veining SVG line color) - `#FFFFFF` — pure white (rare emphasis ratio) - `#1F1419` — wine-purple-black (deep card shadows on featured plinth) The cyber azure appears exactly once per card on hover — a single accent in an otherwise classical register. ## Imagery and Motifs Imagery is built around **3d-render** — each pet is a hyper-detailed 3D-rendered creature (a chrome fox, a marble-skinned hare, a translucent jellyfish-cat, a hovering paper-crane drone) shown as a still PNG on the card, with the implication that the click loads a full Lottie animation of the creature moving. Lighting on every render is consistent: a single hard rim-light from upper-left and deep cyan fill from below, replicating the Newton-on-Blade-Runner mood. **Marble-classical** motifs appear in the surround furniture: ionic column dividers between grid rows, a frieze of small Greek-key motifs along the bottom border of the page, and the marble-veining SVGs running vertically down both edges of the viewport (procedurally regenerated each visit). No real photographs — every "image" is a rendered exhibit. Curator labels include a small embossed-gold catalog mark like "MK-VII / 002 — *limited edition of one*." ## Prompts for Implementation Build a portfolio-grid gallery with classical framing and cyberpunk highlights. Use CSS Grid `grid-template-columns: repeat(4, 1fr)` and `gap: 32px`, with one cell elevated to `grid-row: span 2; grid-column: span 2` chosen via a small JS random on load. Each card has three SVG hairlines (top, left, right) drawn 1px in `#D4B26A` with `box-shadow: 0 0 0 0.5px #D4B26A` for crispness. The signature interaction is **lottie-animation**: on click, the card scales up to 100vw / 100vh in a 800ms cubic-bezier(0.65, 0, 0.35, 1) transition, then plays an inline Lottie JSON of the pet moving (8s loop) overlaid with a thin cyan scanline pattern at 0.18 opacity. The marble-veining SVGs running down both edges are generated client-side via a noise function so each visit gets a different vein pattern. Curator labels suspended below cards use Playfair Italic and animate in with a 200ms `letter-spacing` reveal (`+200` to `+80`). Hover state replaces the gold hairlines with cyber-azure `#04E0FF` and adds a 0.6s glow flicker — the only neon moment per card. Avoid CTA blocks, pricing tables, signup ladders, stat grids — this is a museum hall, not a marketplace. The footer is a single line of Playfair Italic: "miko.pet — exhibits open by appointment, Hall 14B." ## Uniqueness Notes - **Differentiator 1:** Deliberate collision of cyberpunk + marble-classical — extremely rare to pair `high-contrast` palette with `marble-classical` motifs and `3d-render` imagery in the registry. - **Differentiator 2:** Marble-veining SVGs procedurally regenerated each visit — a living per-load detail almost no other design includes. - **Differentiator 3:** Cards framed on only three sides with curator labels suspended below — a deliberately open-bottom frame, not a closed product card. - **Differentiator 4:** Featured-plinth cell randomly promoted on each load — a small interactive curation gesture. - **Differentiator 5:** Lottie animation used as a full-screen takeover, not as a tiny icon hover wiggle — narrative use of motion. - Planned seed: aesthetic=cyberpunk, layout=portfolio-grid, typography=playfair-elegant, palette=high-contrast, patterns=lottie-animation, imagery=3d-render, motifs=marble-classical, tone=bold-confident. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.