# Design Language for miko.pet ## Aesthetics and Tone miko.pet is a love letter to the late-90s desktop era reimagined for a cat companion brand — think a Tamagotchi pixel pet that grew up, moved into a sun-warmed apartment, and started a tiny home goods label. The aesthetic is **90s pixel-art playful**: crunchy 8x8 sprite tiles, dithered gradients, hard-edged drop shadows, and the joyful clatter of a CRT desktop. But it is not ironic vaporwave nostalgia — it is sincere, cozy, hand-pixelled warmth. Everything looks like it was lovingly placed sprite-by-sprite in an imaginary 1998 paint program by someone who really, really loves their cat named Miko. The tone is whimsical, tactile, and a little bit silly. Cursors leave pixel-dust trails. Buttons depress with a 2px nudge and a chiptune blip. The site behaves like a friendly virtual pet that wants to show you its room. No sleek glass. No mesh gradients. No stock photography of golden-hour dogs. Instead: chunky pixels, scanlines you can almost feel, and the deep satisfaction of a UI that goes *click*. Avoid: glassmorphism, photographic hero imagery, warm gradient meshes, hand-drawn doodle illustration, parallax-heavy scroll cinema. Embrace: indexed-color palettes, nearest-neighbor scaling, sprite animation, and the visual grammar of an operating system that never existed. ## Layout Motifs and Structure The page is a **virtual desktop**, not a scrolling document. The base layer is a tiled pixel wallpaper (a repeating 32x32 motif of paw prints and yarn balls in two shades). Content lives inside **draggable-looking windows** — chunky chrome with a pixel title bar, an 8-bit close/minimize/maximize cluster (decorative), and a 3px bevelled border that catches "light" from the top-left. - **Window stacking, not card grids.** Sections are windows that overlap slightly at the edges, each rotated 0° (pixel-perfect, never skewed — rotation would alias the pixels). Z-depth comes from hard offset shadows (`4px 4px 0`), not blur. - **A persistent "taskbar"** pinned to the bottom: a START-style menu button (labelled with a pixel cat face), live "running programs" (Home / Story / Adopt-a-Friend / Guestbook), and a tiny pixel clock that actually ticks. - **The hero is a "Miko's Room" diorama** — an isometric-ish (but axis-aligned, pixel-snapped) scene of a cozy room rendered entirely in sprites: a sunbeam, a scratching post, a food bowl, and Miko itself, idle-animating (tail flick every 4s, blink every 6s, occasional stretch). - **Scrolling reveals more windows opening** with a quick scale-from-center "boot up" animation (3 frames, no easing curve — stepped). - Negative space is the wallpaper showing through. The grid is an invisible 8px baseline; every element snaps to it. No bento boxes. No diagonal sections. No full-bleed cinematic panels. The structure is: desktop → windows → sprites. ## Typography and Palette **Typography** (all available on Google Fonts): - **"Press Start 2P"** — the headline and title-bar face. True bitmap feel, used sparingly and at modest sizes (it is heavy), only-uppercase for labels and window titles. - **"VT323"** — body copy and longer text. A warm terminal monospace that stays legible at paragraph length and keeps the retro-computer voice. - **"Silkscreen"** — micro UI: button labels, taskbar text, tooltips, the pixel clock. Tight, tiny, crunchy. - Optional accent: **"DotGothic16"** for any "system message" callouts (dialog boxes), giving a softly different bitmap texture. Letter-spacing is generous on Press Start 2P (it needs air). Line-height for VT323 is loose (1.6) so the chunky glyphs breathe. **Palette** — an indexed, limited set, like a real 90s sprite sheet: - `#fdf0d5` — Bone Cream (the window interiors, the "paper" of every panel) - `#e8b4bc` — Miko Pink (Miko's nose, accent highlights, hover states) - `#5fa8d3` — Sky Tile (the wallpaper base, link text, the title-bar gradient start) - `#1b3a4b` — Deep Ink (all text, the 1px pixel outlines around every sprite) - `#f4d35e` — Sunbeam Yellow (the diorama light shaft, "active window" title bar, the START button) - `#7a9e7e` — Sage Plant (the houseplant sprites, success states, secondary buttons) - `#c1121f` — Alarm Red (used once, intentionally, for the "close" pixel button and error dialogs only) Shadows are never grey-with-alpha — they are a flat `#1b3a4b` at 100% opacity, offset hard. Dithering between Sky Tile and Bone Cream creates the only "gradients" on the page (a checkerboard ramp of pixels, never a CSS linear-gradient). ## Imagery and Motifs Everything is a **sprite**. No photos. No SVG line-art that looks vector. If it can't be drawn on a grid, it doesn't belong. - **Miko the cat**: a full sprite-sheet character — idle, blink, stretch, walk-across-the-taskbar, sleep (when the tab is unfocused, Miko curls up). Miko is the mascot, the cursor companion, and the loading indicator (a 4-frame "Miko chases its tail" spinner). - **Pixel iconography**: yarn ball, fish bone, paw print, food bowl, sunbeam, window curtain, houseplant, cardboard box (the "404" is Miko sitting in a box that says "this page got lost"). - **Decorative borders**: window chrome with the classic bevelled-pixel edge (light top/left, dark bottom/right). Section dividers are a 1px dashed line of alternating pixels. - **The wallpaper**: a seamless tile — diagonal rows of tiny paw prints over Sky Tile, with the occasional yarn ball "easter egg" tile every ~7 repeats. - **Cursor**: replaced with a pixel arrow; hovering interactive elements swaps to a pixel paw; clicking spawns 3-4 pixel "sparkle" particles that fall and fade in stepped frames. - **Sound-as-imagery**: tiny optional chiptune blips on click (toggleable via a pixel speaker icon in the taskbar) — the "image" of sound completes the desktop illusion. ## Prompts for Implementation Build this as an **immersive single-page virtual desktop**, not a marketing funnel. The story is: *you booted up Miko's computer, and Miko wants to give you a tour of its world.* - **Pixel rendering is law.** `image-rendering: pixelated` on every sprite. Scale sprites by integer factors only (×2, ×3, ×4) — never fractional, or you destroy the look. Build sprites at small native sizes and upscale via CSS. - **Stepped animation, always.** Use `animation-timing-function: steps(N)` for sprite-sheet animation. No `ease`, no `cubic-bezier`, no spring physics — those are smooth and smoothness breaks the spell. Idle loops, the spinner, the taskbar walk-cycle: all stepped. - **The desktop boot sequence**: on first load, show a 2-second "BOOTING MIKO OS..." screen with a pixel progress bar that fills in chunky increments, then windows pop open in sequence (scale 0→1 in 3 stepped frames each, staggered ~150ms apart). - **Windows feel alive**: title bars of the "active" window glow Sunbeam Yellow; hovering a window's title bar gives a tiny 1px lift; the close button (Alarm Red) shakes "no" if you click it (you can't actually close Miko's room). - **Miko follows the cursor lazily** — not magnetic, not instant. Miko's sprite ambles toward the cursor's general area with a stepped walk-cycle, pauses, sits, blinks. If the cursor is still for 8s, Miko sleeps where it sits. - **Scroll = opening more programs**: as you scroll, new windows (the Story window, the Adopt-a-Friend window, the Guestbook) "open" with the boot-pop animation. The page is finite — it ends with a "Thanks for visiting Miko's room :)" dialog box and a pixel sun setting in the diorama. - **The Guestbook** is a real retro guestbook UI (window with a textarea styled as a pixel input) — fun, lo-fi, communal-feeling. Even if it's decorative, it should *feel* like 1998 GeoCities. - **Accessibility note acknowledged but out of scope** — focus purely on the pixel-perfect aesthetic and the toy-like delight of interaction. - **AVOID**: CTA-stacked hero sections, pricing tiers, stat counters, testimonial carousels, "trusted by" logo walls, smooth parallax scenery, gradient-mesh blobs, glass cards. This is a *place to visit*, not a product page. ## Uniqueness Notes Differentiators from other designs in the corpus: 1. **Pixel-art rendering as a hard constraint** — `image-rendering: pixelated`, integer-only scaling, and `steps()` animation throughout. The frequency analysis shows pixel-art at only ~4% and dopamine/glitch nostalgia is everywhere; this is sincere, cozy 90s-desktop pixel craft, not ironic vaporwave. 2. **Virtual-desktop information architecture** — overlapping draggable-looking windows + a live taskbar + a START menu, instead of the near-universal card-grid / centered / full-bleed combo (88–89% of the corpus). No card grids at all. 3. **Hard flat offset shadows + dithered "gradients"** — zero `box-shadow` blur, zero CSS linear-gradients; the only gradient ramps are pixel-dithered checkerboards. This rejects glassmorphism (74%) and warm gradient palettes (96–98%) entirely. 4. **A living mascot as cursor companion, spinner, AND ambient creature** — Miko the cat sprite walks, blinks, sleeps when the tab blurs, and curls up on the taskbar. Animation is lazy and stepped, deliberately *not* the magnetic/spring/cursor-follow physics that 80–94% of designs use. 5. **Bitmap typography stack** — Press Start 2P / VT323 / Silkscreen / DotGothic16, against a 7-color indexed palette. No humanist sans, no warm serif revival, no hand-drawn script. Chosen seed/style: **90s pixel art playful** (from seeds.json). Avoided overused patterns per frequency analysis: hand-drawn (96%), glassmorphism (74%), photography imagery (98%), warm/gradient palettes (96–98%), card-grid layout (88%), parallax (94%), magnetic/spring/cursor-follow physics (80–94%).