# Design Language for miko.cam ## Aesthetics and Tone miko.cam is **a hand-bound darkroom journal for a pinhole photographer who works only with paper negatives, sunlight, and patience**. The "cam" is not a webcam and not a video feed — it is a *camera obscura*: a sealed cardboard box with a 0.3mm hole punched in foil, exposures measured in minutes, images that arrive soft, grainy, and slightly wrong. The site should feel like you have been handed someone's working notebook — pages thickened with fixer stains, gummed-tipped contact prints taped at the corners, marginalia in pencil, a faint smell of acetic acid implied by the color of the paper itself. It is **wabi-sabi**: the beauty here is the dust speck on the negative, the light-leak crescent across one corner, the print that is a half-stop too dark and was kept anyway. Nothing is crisp. Nothing is centered for "balance." The tone is **zen-contemplative** — unhurried, low-voiced, the opposite of a content feed. There is no urgency, no metrics, no "latest." Just exposures, in the order they were made, each one given as much empty paper around it as it asks for. If most photography sites are bright lightboxes shouting "look how sharp," miko.cam is a quiet table by a north window where prints are laid out to dry. ## Layout Motifs and Structure The governing principle is **ma — the active emptiness between things** (`ma-negative-space`, 11% in the corpus, but here taken to an extreme rarely seen). The page is a single long vertical scroll, but it is composed like a Japanese hand-scroll *emakimono*: long stretches of nothing, then a single image, then nothing again. **No grid. No card-grid. No card anything.** Each photographic plate sits alone on the page, never two abreast, separated from the next by 70–140vh of warm blank paper. The plates are *not* aligned to a column — each one is nudged off-axis: one drifts left, the next sits low-right, the next is nearly centered but rotated 1.4°, as if laid down by hand and never straightened. Margins are generous and asymmetric — the left margin might be 18vw, the right 9vw, then they swap on the next plate. Structure, top to bottom: 1. **The aperture** — opens on near-empty paper; in the upper-left, in small caps, "miko.cam" and beneath it, smaller, "a paper-negative notebook." Centered low on the first screen, a single 0.3mm dark dot — the pinhole — which the cursor can approach (see Prompts). 2. **Exposure log** — 7 to 11 plates, each with a pencil-margin caption: a location, an exposure time ("4 min 20 s, overcast"), and one line of observation. Plates are paper-aged photograms and pinhole frames (see Imagery). 3. **The contact sheet** — a single interruption mid-scroll: a sheet of 12 thumbnail frames, slightly skewed, three of them ringed in red china-marker. This is the only place multiple images touch. 4. **Process margin** — a short hand-written column on how a paper negative is made and contact-printed; set narrow, ragged-right, drifting down the left third of the page. 5. **Colophon** — at the very bottom, after a final long emptiness: the box's dimensions, the foil gauge, the paper stock, the developer dilution, in tiny caps. No newsletter. No links out. The page simply ends, like a notebook running out of pages. Sticky chrome: none. Navigation: none, beyond the scroll itself. ## Typography and Palette **Fonts (Google Fonts only):** - **EB Garamond** — the body and caption voice (`garamond-classic`, 2% in the corpus). Used at a generous 19–21px, line-height 1.75, color never pure black. Its old-style figures and slightly uneven color on the page read like letterpress on uncoated stock. Captions use EB Garamond *italic* at 15px, as if pencilled. - **Cormorant Garamond** — display only, for "miko.cam" and the few section words ("exposure log", "contact sheet", "process"), set large (clamp 2.4rem–4rem), weight 300, letter-spacing +0.16em, all lowercase. Thin, high-contrast, almost evaporating — like a title scratched into the emulsion. - **JetBrains Mono** — used *sparingly* and small (12–13px), only for the technical strings in the colophon and the exposure times (e.g. `f/177 · 4m20s · ISO 6`). The single concession to "machine"; everything else is hand and paper. **Palette (warm, muted, deliberately desaturated — `muted-vintage`):** - `#EBE3D2` — **Fixer Paper**: the page ground. The color of fiber-based photographic paper that has been washed and dried — warm ivory with a grey undertone, never white. - `#1E1A14` — **Selenium Black**: the darkest value, a brown-black, never `#000`. Body text, the pinhole dot, the deepest shadows in the plates. - `#7A6E58` — **Acetic Sepia**: mid-tone for captions, hairlines, the duotone shadows of every photogram. A drab, soft brown-grey — the color of an underfixed print left in the light. - `#B98C5A` — **Gold-Toner Amber**: rare warm accent, used only for light-leak crescents and the gummed tape corners. Appears on maybe 4% of the page's area, never as a button. - `#9A2E22` — **China-Marker Red**: the *only* saturated color, used exclusively for the three ringed frames on the contact sheet and one or two pencil-margin underlines. Used once or twice. Never more. No gradients except the natural vignette inside each photographic plate (radial, Selenium Black at 0% center to 22% at the corners). ## Imagery and Motifs **All imagery is treated as `paper-aged` photographic prints** — there are no photos in the conventional sense, only *renderings of prints of photos*. Every plate is built as a layered composition: (1) a base monochrome image in a Fixer-Paper-to-Selenium-Black duotone, deliberately soft (no edge is fully sharp — pinhole optics have no plane of critical focus); (2) a fine film-grain layer (SVG `feTurbulence`, baseFrequency ~0.9, opacity 7%); (3) one or two dust specks and a hair, hand-placed, the same on every reload; (4) a single Gold-Toner Amber light-leak crescent bleeding in from one randomly-but-deterministically-chosen corner; (5) gummed tape corners (small Amber parallelograms with a torn top edge) at two of the four corners, never all four. Plates are bordered by a 2–3mm uneven Fixer-Paper bleed-edge — the brushed border of a hand-coated emulsion — never a clean rectangle. **Subjects of the plates lean botanical and domestic** (`leaf-organic` motifs, but rendered as *photograms* — leaves, ferns, lace, a key, a pair of scissors laid directly on the paper and exposed, leaving white silhouettes on dark ground — alternating with pinhole landscapes: a windowsill, a long-exposure tree with branches blurred by wind, an empty room with a streak where someone walked through the 6-minute exposure). **Recurring motifs:** - **The 0.3mm dot** — the pinhole itself, recurring as a section marker, a period, a bullet. Tiny, black, perfectly round, the smallest thing on the page yet the thing everything passes through. - **Pencil marginalia** — short Garamond-italic notes set at slight angles in the wide margins: "—too long, kept anyway", "wind picked up", "third sheet of the day". - **The drying line** — between the contact sheet and the process margin, a hairline string crosses the page at a shallow angle with two tiny clothespin shapes; nothing hangs from it. A breath of suggested space. - **Sprocket-free edges** — because paper negatives have no sprockets; the absence is the motif. Edges are torn, brushed, or taped — never perforated, never machined. ## Prompts for Implementation Build miko.cam as **one static HTML file, one CSS file, one small JS module (no framework, no bundler, ≤7KB JS)**. External assets: the Google Fonts link, plus 3–4 inline or referenced SVGs for the photogram plates and the grain/turbulence filter. Total page weight target under 130KB excluding fonts. No build step, no analytics, no service worker, no tracking, no cookies. This is a **full-screen narrative scroll**, not a CTA page. There are no buttons, no pricing, no stat-grids, no testimonial cards, no "get started." The story is: *you have opened a photographer's working notebook and you turn its pages slowly, one exposure at a time.* Bias every decision toward stillness and the dignity of empty paper. Animation philosophy — **`blur-focus`** (7% in the corpus), used as the page's signature gesture and almost the only motion: - **Plates arrive out of focus.** As each photographic plate scrolls into the viewport, it begins at `filter: blur(14px)` and very low opacity, and over ~900ms (a slow `cubic-bezier(0.22, 0.61, 0.36, 1)`, no bounce, no overshoot) it *resolves* — blur to ~1.5px (it never reaches perfect sharpness; pinhole images can't), opacity to 1. This is the developing-tray reveal: the image surfacing in the chemistry. Driven by `IntersectionObserver`, `prefers-reduced-motion` disables the blur and just fades. - **The pinhole dot, on the opening screen, sharpens what is near it.** A `mousemove` handler: the closer the cursor is to the 0.3mm dot, the more a faint surrounding patch of the otherwise-blurred opening text comes into focus (a radial `backdrop-filter` or mask trick) — as if the cursor is a loupe and the pinhole is the only truly sharp point on the page. Subtle: full effect radius ~140px, eases off completely beyond that. Touch devices: the patch sits permanently focused around the dot, no interaction needed. - **Captions develop after their plate.** Each pencil-margin caption fades up ~250ms *after* its plate has resolved, as if the photographer is writing the note once the print is dry. - **Paper breathes.** The page ground has an almost-imperceptible warm vignette that shifts 1–2% over ~20s on a sine loop — the light through the north window changing. Nothing else moves. - **Scroll is the only navigation.** No scroll-jacking, no snap. The long empty stretches are *intentional pacing* — do not be tempted to fill them. The emptiness is the design. - **The contact sheet** is the one moment of density: 12 small frames, each blurred-then-resolved with a 60ms stagger, three of them then getting a hand-drawn China-Marker-Red ellipse stroked on via SVG `path` `stroke-dashoffset` animation (the `path-draw-svg` technique, used once, here, only). Type and color must never go fully black or fully white. Every shadow is brown-black, every light is paper-warm. Treat hairlines as Acetic Sepia, never grey. ## Uniqueness Notes Differentiators from the other designs in this batch: 1. **An anti-feed photography site.** Where ~98% of the corpus uses `photography` imagery as bright, sharp, full-bleed lightbox content, miko.cam refuses sharpness entirely — every image is a *soft pinhole paper negative rendered as an aged print*, vignetted, grained, light-leaked, taped down. The imperfection is the point. No image gallery grid, no lightbox, no masonry. 2. **`ma-negative-space` taken past the point most sites dare.** 70–140vh of blank warm paper between single, off-axis plates. No card-grid, no centered column, no full-bleed stacked sections — the three layouts that together cover ~86–89% of the corpus are all explicitly rejected. The emptiness is load-bearing. 3. **`blur-focus` as the entire motion vocabulary.** No parallax, no cursor-follow trails, no spring/magnetic/tilt-3d, no counter-animate — the four-to-five patterns that dominate 80%+ of the corpus are absent. The only gesture is *coming into focus*, used literally as a darkroom-development metaphor, plus one single `path-draw-svg` china-marker ring on the contact sheet. 4. **A Garamond-only voice with `garamond-classic` + Cormorant Garamond display** — sidestepping the `mono` (94%) and `humanist` (51%) corpus defaults; JetBrains Mono appears only at 12px for exposure data, as the deliberate single "machine" intrusion. 5. **`muted-vintage` palette with exactly one saturated color** (China-Marker Red, used once or twice) on a never-white ground — opposing the `warm` (98%) + `gradient` (96%) saturated-gradient default with a desaturated, ungradient, brown-black-on-fixer-paper scheme. 6. **Documented chosen seed/style:** `aesthetic: wabi-sabi · layout: ma-negative-space · typography: garamond-classic · palette: muted-vintage · patterns: blur-focus · imagery: paper-aged · motifs: leaf-organic · tone: zen-contemplative` — fully committed, with `wabi-sabi` rendered specifically as *darkroom imperfection* (dust, light-leaks, kept-anyway prints) rather than the more common ceramic/textile reading, and `leaf-organic` realised as photogram silhouettes rather than illustrated botanicals. 7. **Frequency-avoided patterns:** explicitly steers clear of overused `hand-drawn` (96%), `glassmorphism` (74%), `parallax` (94%), `cursor-follow` (89%), `spring` (86%), `magnetic` (80%), `stagger` (77% — used only in a 60ms micro-form on the contact sheet), `card-grid` (88%), `full-bleed` (89%), `centered` (86%), and the `warm`/`gradient` palette pair (98%/96%).