# Design Language for yami.cam ## Aesthetics and Tone yami.cam is a **skeuomorphic darkroom apparatus** rendered in cold monochrome marble -- a single-page artifact built like a piece of analog photographic equipment that has been carved from a slab of black-veined stone and dragged into the browser. The aesthetic merges **skeuomorphic** physicality (raised bezels, recessed wells, stitched leather light-seals, knurled metal rims, embossed serial plates) with **edgy-rebellious** punk-darkroom energy: the surfaces look expensive but the labels are spray-stenciled, the tone is contraband. "Yami" (闇 -- darkness, shadow, underground) sets the mood: this is the kind of camera one buys in a back-alley camera shop in Shinjuku at 2am, exchanged in cash, no receipts. The whole interface should feel like *handling an object* -- weight, depth, drag, recoil -- rather than browsing a page. Mood is hushed, defiant, and slightly menacing: half precision instrument, half confiscated evidence. There is no marketing voice here, only the silent authority of a tool that knows what it does. ## Layout Motifs and Structure **Centered** column of stacked physical panels, max-width 720px, perfectly centered on a marble countertop background that bleeds beyond the viewport on both sides. The column reads top-to-bottom as a single piece of equipment composed of distinct physical modules, each one a separate skeuomorphic plate bolted onto the central spine: 1. **Top plate (hero):** A heavy embossed faceplate. The domain `yami.cam` is engraved into the marble in massive Bebas Neue caps, with an inset shadow simulating chiseled stone (CSS `text-shadow` stack: `0 -1px 0 rgba(255,255,255,0.04), 0 1px 1px rgba(0,0,0,0.9), 0 2px 0 rgba(0,0,0,0.8)`). A small brass serial plate is screwed into the top-right corner showing a fake unit number stamped in Space Mono. 2. **Lens-well plate:** A circular recessed well 280px across, drawn purely in CSS with nested radial gradients to simulate a deep cylindrical cavity descending into the marble. At the bottom of the well, a single crystalline shard glints, rotating imperceptibly (one full rotation per 90 seconds). 3. **Manifest plate:** A leather-textured panel with stitched perimeter, holding the body manifesto -- two short paragraphs of edgy declarative text. The leather is faked with subtle noise + inset border-shadow. 4. **Toggle bank plate:** Four physical toggle switches (pure CSS), each with a knurled metal handle. Each toggle reveals or conceals a different micro-section of plain-spoken text (frame counter, light meter, exposure log, contraband notice). Toggles click into position with a 0.18s spring transition. 5. **Knurled bezel footer:** A horizontal strip of fine vertical scoring (CSS `repeating-linear-gradient` at 1px intervals) with the year and a fake city stamped in tiny Space Mono. No links. No social. The page ends in metal. Each plate is separated by a 4px-thick recessed groove drawn with inset box-shadows (`inset 0 2px 4px rgba(0,0,0,0.7), inset 0 -2px 4px rgba(255,255,255,0.03)`). The whole apparatus appears to sit *on* the marble surface, casting a tight ground shadow beneath itself (`box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9), 0 8px 16px -4px rgba(0,0,0,0.7)`). On scroll, the apparatus stays put while the marble slab beneath subtly drifts at 0.4x parallax, reinforcing that the device is a real object resting on a moving surface. Mobile: the column collapses to 92vw, but the lens-well, leather panel, and toggle bank remain visually complete (toggles stack 2x2 instead of 1x4). No section is sacrificed -- the apparatus must remain readable as a single physical object on a phone. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / engraved domain / plate headings:** `Bebas Neue` (Google Fonts) -- weight 400, the only weight available, used at `clamp(4rem, 14vw, 9rem)` for the hero and `clamp(1.5rem, 3.5vw, 2.4rem)` for plate labels. Letter-spacing `0.04em` on hero, `0.18em` uppercased on labels. Bebas Neue is the perfect mid-century cinema-marquee condensed sans for stone-engraving simulation -- tall, narrow, blade-edged, and entirely unique in this collection at 0% prior usage. - **Body manifesto:** `Inter` (Google Fonts) -- weight 500 at `1rem/1.7`. Tight, neutral, refuses to perform; lets the marble and Bebas Neue do all the dramatic work. - **Stenciled / serial / metadata:** `Space Mono` (Google Fonts) -- weight 700 at `0.78rem`, all-caps, letter-spacing `0.16em`. Used for the brass serial plate, frame counter, exposure log, and footer city stamp. Reads like rubber-stamp ink on gear. **Palette (monochrome, no warmth, no saturated accent):** - `#0a0a0b` -- Obsidian Black (page void / deepest recess shadows) - `#13131a` -- Carbon (lens-well interior, leather panel base) - `#1c1c22` -- Slate Mid (plate body neutral) - `#2a2a32` -- Marble Vein Mid (mid-grey marble base) - `#3d3d46` -- Marble Vein Light (raised bezel highlight) - `#5a5a64` -- Polished Steel (knurled bezel, toggle handle) - `#9b9ba3` -- Light Engraving (Bebas hero stroke catching the simulated overhead light) - `#d6d6dc` -- Crystalline Glint (single crystal shard at the bottom of the lens well, the brightest pixel on the page) There is **no chromatic accent**. The brightest element is the lens-well crystal at `#d6d6dc`. Every "color" decision is a tonal step on a single grey ramp. This is the chromatic discipline of black-and-white film stock and is what gives `yami.cam` its edge -- the absence of color is itself the rebellion against the gradient-warm-friendly default of the wider collection (84% warm, 60% gradient). ## Imagery and Motifs **Marble-texture surface (foundation):** The page background is a rendered marble slab built entirely in CSS without raster images: a base of `#2a2a32` overlaid with three layered `radial-gradient`s and one `conic-gradient` at low opacity to simulate veining, plus a 0.06-opacity SVG turbulence noise filter (``) to break the gradient banding. The veins are diagonal, asymmetric, and clearly *carved* rather than printed -- light catches certain veins more than others via inset highlights. This is a deliberately underused imagery direction (marble-classical sits at 1%) reinterpreted as cold industrial slab rather than warm Italian luxury. **Crystalline shard (focal motif):** A single sharp-faceted crystal sits at the bottom of the lens well. It is drawn as a CSS `clip-path: polygon(...)` octahedral shape with inner facets created by overlapping translucent triangles. It rotates one full revolution every 90 seconds via `@keyframes`. On hover over the lens well, the crystal accelerates briefly to a 4-second rotation -- the only "playful" gesture on the entire page, and it feels like prodding a sleeping object. **Knurled metal patterns:** Repeating-linear-gradients at 1px frequency render the knurled rims of the bezels and toggle handles. Subtle, mechanical, tactile. **Stitched leather panel:** The manifesto background is a `#13131a` leather simulation: dark base + radial speckle noise + dashed inset border (the "stitching") drawn 6px inside the panel edge with `border: 1.5px dashed #3d3d46`. **Engraved domain:** The `yami.cam` hero is not a font drop -- it is treated as if chiseled into the marble. Multi-layer text-shadow stack: dark interior shadow (depth), warm-zero highlight on top edge (catching simulated overhead light), and a hairline dark ridge on the bottom edge. **Brass serial plate:** A small rectangular plaque in upper-right of the hero, drawn in CSS with a 1px-inset bevel and the fake serial `YAMI/CAM-04ε7` stamped in Space Mono. The single concession to material warmth -- a *very* desaturated almost-grey-bronze tint (`#3a3530`). **Toggle handles:** Each toggle is a 56x28px capsule: a recessed channel (inset shadow well) with a sliding knurled chrome handle. Click triggers a 0.18s spring animation -- the handle slides, recoils microscopically, then settles. The associated content section then slides open beneath with the same easing. ## Prompts for Implementation Build `yami.cam` as a **single-page skeuomorphic apparatus**, not a website with sections. Every container is a *physical object*, not a div. The build philosophy: **CSS-only physicality**. No raster imagery, no images, no SVG illustrations, no canvas, no WebGL. The marble, the lens well, the leather, the knurling, the engravings -- all must be constructed from gradients, box-shadows, clip-paths, pseudo-elements, and SVG noise filters. This constraint is the design. Layout the body as a single centered column (`max-width: 720px; margin: 0 auto`) of vertically stacked plate divs. Each plate is its own elevation context with its own shadow stack. The body background is the marble slab, full-bleed, parallaxing at 0.4x via a `transform: translateY(calc(var(--scroll) * -0.4))` pattern updated on `scroll` (throttled to `requestAnimationFrame`). The **micro-interactions** pattern (currently at 1% in the collection) is the primary interaction language and should appear at every touchable surface. Reserve large animations for nothing -- everything is small, weighted, mechanical. Specific micro-interactions to implement: - **Toggle switches:** spring slide + recoil (0.18s ease-out + 0.06s ease-in micro-rebound) on click; content panel slides open below with `max-height` transition. - **Lens-well crystal:** 90s baseline rotation; hover over the well speeds rotation to 4s for as long as hover persists, then decelerates back over 1.2s. - **Brass serial plate:** on hover, the plate "presses in" by 1px (translateY(1px) + shadow reduction), as if you pushed it. - **Hero engraving:** on scroll past, the `text-shadow` warms by 1 step (the "overhead light" angle changes) to suggest the slab is being tilted slightly. - **Toggles unset state:** every 30 seconds, one random toggle handle wiggles 2px and settles -- the apparatus is impatient. - **Cursor on marble:** custom cursor only over the marble (not over plates) -- a small crosshair drawn in CSS. - No hover lift, no scale, no glow. All interactions are *small, weighted, and mechanical*. Use `IntersectionObserver` to trigger plate entrance: each plate enters with a 6px upward translation and fade from 0.5 → 1 opacity, staggered by 80ms. The whole apparatus should feel like it is being assembled in front of the viewer, plate by plate, on first load. Typographically, Bebas Neue should always be uppercased and locked in tight tracking; Inter never gets larger than 1rem; Space Mono never gets larger than 0.78rem. The hierarchy is enforced by *weight and case*, not size, except for the hero which is enormous. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, card grids, hero photography, gradient meshes, glassmorphism, warm palettes, color accents, chromatic gradients, parallax sections (no, only the slab parallaxes -- no full-height parallax sections), bento boxes, sidebars, dashboards, dark-mode-with-neon-accent, friendly tone, marketing voice, social links, footers with menus. Bias toward an experience of **handling a confiscated piece of black-market camera equipment in a private room.** The page should feel weighted, slightly cold, and entirely indifferent to whether the visitor stays. ## Uniqueness Notes 1. **CSS-only marble slab carved with a black-market camera apparatus on top.** The whole page renders without a single raster image -- every surface, vein, knurl, stitch, and shard is constructed from gradients, shadows, and clip-paths. Marble-classical sits at 1% and has only been used as warm Italian luxury elsewhere; this reinterpretation as cold industrial contraband slab is unique. 2. **Bebas Neue at 0% prior usage** -- this design is the first in the collection to introduce the cinema-marquee condensed sans, used as simulated stone engraving rather than its usual poster context. 3. **Skeuomorphic toggle bank as the entire navigation.** Skeuomorphic aesthetic at 1% combined with micro-interactions at 1% creates a tactile mechanical interaction layer (toggle springs, plate presses, crystal rotation, idle handle wiggles) that no other design in the collection currently builds. 4. **True monochrome with a single crystal as the brightest pixel.** Monochrome (7%) executed with chromatic discipline -- no warm tints, no neon accent, no duotone -- with a single crystalline glint as the focal point. The brightest element on the page is one crystal shard, deliberately rebellious against the 84% warm / 60% gradient norm. 5. **No CTAs, no marketing, no menu, no footer-with-links.** The page ends in a knurled metal strip with a city stamp and a year. There is nothing to click except the toggles, and the toggles reveal more declarative text, not external destinations. The apparatus is the message. 6. **Idle-state mechanical impatience.** Every 30 seconds a random toggle handle wiggles -- the apparatus performs its own small acts of unrest while the user reads. This is edgy-rebellious tone (7%) expressed not in copy but in object behavior. [Seed: skeuomorphic centered bebas-bold monochrome micro-interactions marble-texture crystalline edgy-rebellious] [Avoided: card-grid (73%), photography (82%), warm palette (84%), gradient palette (60%), playful aesthetic (71%), dark-mode-with-accent (30% + neon variants), tech motifs (20%), hover-lift, scale-hover, fade-reveal as primary motion, mysterious-moody as default tone (26%) -- this design substitutes precise mechanical edginess for atmospheric mystery.]