# Design Language for miko.cam ## Aesthetics and Tone miko.cam is a surrealist field-camera diary — half cinematographic, half oneiric — chronicling photographs that were never developed in a forest darkroom that may not exist. The aesthetic is **surreal** in the Magritte sense: real objects in impossible adjacencies, scale violations, gentle wrongness. The tone is **pastoral-romantic**, the same hush as the moment after rain in a cedar plantation: warm green air, ferns dripping, a single deer that may or may not be there. Visual inspiration draws from Petros Koublis' Greek mountain photographs, the dream-still-frames of Apichatpong Weerasethakul, the colored ink washes of Tove Jansson, and the sharp-angled type experiments of Karl Nawrot — sharp paper edges floating through wet green air. The result feels less like a website and more like a haunted forest journal turned inside out. ## Layout Motifs and Structure The architecture is an **organic-flow** layout — content arranges itself like leaves drifting on a pond rather than tiles on a grid. There is no rectangular grid at all; instead a Voronoi-like field of irregular cells positions each entry on the canvas using polar coordinates relative to a slowly rotating "compass-stone" anchor at the page center. Each cell holds one abstract-shape composition with a date stamp and a single sentence of caption text in romantic prose. The page is taller than tall — 12 viewports of slow vertical wander — and as the user scrolls, the compass-stone rotates 360° while cells reposition around it, producing the sensation of walking around a clearing rather than scrolling a page. Sharp-angled paper-cut shapes intrude diagonally from the right margin, slicing across the green wash like fallen branches. A subtle "skeleton-loading" shimmer plays on cells before they enter the viewport, giving the impression that the page is still developing the image even as you arrive. ## Typography and Palette **Typography** is led by Anybody Variable (the **kinetic-animated** brief), used at multiple optical sizes and width axes with subtle continuous animation: Anybody 56pt with `font-variation-settings: 'wdth' 200, 'wght' 700` for cell titles, gently breathing between wdth 180 and wdth 220 over a 6-second cycle. Body and date stamps use Source Serif 4 at 16px / 1.65, italic 320 — a soft, romantic serif. Caption microcopy uses Geist Mono 12px tracked +60. The kinetic title behavior is constant but minute: only readers who linger will notice the letters quietly inhale and exhale. **Palette** is **forest-green**, pulled from the deepest hours of a Hokkaido cedar plantation: - `#0E1A14` — moss-shadow black (page ground) - `#1F3A2C` — wet cedar (primary surface tint) - `#3D6E50` — fern verdant (secondary, cell strokes) - `#7BA889` — sage mist (typography on dark, caption hue) - `#C9D8B8` — lichen pale (accent text, dates) - `#E2B85F` — fox-fur amber (single warm accent — used only on sharp-angled motifs) - `#091210` — total dark (vignette and full-bleed transitions) - `#F5F1E6` — bone wash (rare cell highlight) Amber appears no more than once per viewport — it is the only warm color in the entire forest. ## Imagery and Motifs Imagery is built from **abstract-shapes** — irregular paper-cut polygons and ink-washed organic forms, never photographs. Each cell holds one composition built from three layers: (1) a soft watercolor-edge polygon in fern verdant, (2) an inked sharp-angled paper-cut shape in amber that "cuts" across the polygon, and (3) a thin Anybody numeral stamping the cell's date in the corner. The **sharp-angles** motif (per planned seed) appears specifically as Karl Nawrot-style angular display marks — broken arrows, scissor wedges, severed triangles — placed asymmetrically against the soft organic forms to create the surreal collision. Recurring iconography: a hand-drawn compass-rose stone at page center, a single deer silhouette repeated three times at intervals at viewport-page positions, dripping ink trails that connect non-adjacent cells across the canvas, and a faint contour-line map suggesting topography no one charted. No stock imagery is ever used. ## Prompts for Implementation Build a surreal, scroll-driven organic-flow forest diary. The page background is a slow continuous gradient cross-fade between `#0E1A14` and `#1F3A2C`, never static. The compass-stone at center rotates linearly with scroll progress (1° per 8px scrolled), and cells reposition around it using polar coordinates `transform: translate(calc(var(--r) * cos(var(--theta))), calc(var(--r) * sin(var(--theta))))` with theta tied to scroll. Cells display a **skeleton-loading** shimmer (a 40deg linear-gradient sweep across `#1F3A2C` -> `#3D6E50` -> `#1F3A2C` at 0.8s ease-in-out) before their content fades in via a 600ms `filter: blur(12px)` -> `filter: blur(0)` reveal, mimicking a film image developing. Anybody titles continuously breathe via CSS `@property --wdth` interpolation — never stop animating, but stay slow enough that one notices only on the second look. Sharp-angled amber paper-cut motifs slide diagonally from off-canvas into their cell positions with `cubic-bezier(0.16, 1, 0.3, 1)` for 1.2s. Avoid CTA stacks, pricing tables, social proof rows, stat grids, FAQ accordions — this is a haunted forest journal, not a product. The footer is a single Source Serif italic line: "miko.cam — the photographs that did not develop, a forest log." ## Uniqueness Notes - **Differentiator 1:** Layout is true polar-organic — Voronoi-style cells reposition around a rotating center stone driven by scroll — extraordinarily rare versus the registry's grid/card defaults. - **Differentiator 2:** Imagery is paper-cut and ink-wash abstract shapes only — zero photography, sidestepping the 89% photography saturation noted by frequency. - **Differentiator 3:** Kinetic typography is implemented as a permanent slow breath rather than the typical on-hover wiggle — a contemplative kinesis. - **Differentiator 4:** Forest-green palette with a single amber accent enforces a strict warm-cool ratio that no other design in the registry adopts. - **Differentiator 5:** Skeleton-loading is reframed as "film developing" — narrative use, not utilitarian. - Planned seed: aesthetic=surreal, layout=organic-flow, typography=kinetic-animated, palette=forest-green, patterns=skeleton-loading, imagery=abstract-shapes, motifs=sharp-angles, tone=pastoral-romantic. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.