# Design Language for yome.cam ## Aesthetics and Tone yome.cam ("yome" 嫁 = a cherished partner / homemaker; .cam = a camera, a window, a frame) is reimagined as **a sun-drenched glass conservatory at the edge of a soft countryside morning** — a place where someone you love is lining up jars on a windowsill, holding a Polaroid up to the light, and the dawn is doing the rest of the work. The aesthetic is **glassmorphism poured over a pastoral-romantic mood**: imagine frosted-glass cards drifting across a meadow seen through a fogged greenhouse pane, with aurora light bleeding through chiffon curtains and pollen drifting through the lens. It is intimate, slow, and unmistakably cottage — but the surfaces are hyper-modern: brushed acrylic, blurred bokeh, lensed reflections. The voice is a **handwritten letter clipped to a clothesline**: tender, idle, full of small specific nouns (linen, stonefruit, pillow-talk, rain-in-the-eaves) and never selling anything. The site behaves like flipping through a stack of glass slides on a sun-warmed table — each scene is a moment, not a feature. There is no urgency, no scarcity timer, no "trusted by 10,000 brides." Where most "cam" sites lean voyeuristic and night-lit, yome.cam is **diffuse, daylit, and consensual** — the camera is always inside the warm room, never outside the window. The dominant feeling is **late-spring afternoon at 4:47 p.m. in a wooden cottage with all the windows open**: aurora-colored curtains breathing, mason jars catching the light, a slow horizontal panorama you push with two fingers and a drowsy smile. ## Layout Motifs and Structure The page is governed by an **infinite horizontal panorama** — the entire site scrolls **sideways like a long film strip held up to a sunlit window**. Vertical scrolling is suppressed (`overflow-y: hidden` on ``); the content river runs left-to-right across roughly six "viewports" (≈ 600vw on desktop), each viewport a new room of the cottage in a new hour of the same long afternoon. The layout is built on a **layered-depth diorama** of seven parallax planes, drifting at staggered speeds as the panorama scrolls: - **Plane 0 (back):** an aurora-gradient sky wash, drifting at 0.05× scroll speed. - **Plane 1:** a soft watercolor meadow horizon (SVG blob-shapes), 0.18×. - **Plane 2:** linen curtain panels (blurred white acrylic strips), 0.35×. - **Plane 3:** **the glass cards themselves** — frosted glassmorphism panels carrying the actual content. 1.0× (locked to scroll). - **Plane 4:** a fogged windowpane overlay with dust motes (CSS-animated `radial-gradient` particles), 1.15×. - **Plane 5:** loose petals and pollen drifting through the lens (SVG abstract shapes), 1.4×. - **Plane 6 (front):** a faint vignette + chromatic-aberration ring, simulating the camera lens. The glass cards are not a grid — they are a **freeform horizontal mantelpiece**, irregularly placed at varying y-offsets and z-rotations (`-4deg` to `+4deg`), like Polaroids someone has just laid down side-by-side and not yet straightened. Each card is `backdrop-filter: blur(24px) saturate(140%);` over the aurora plane, with a 1px hairline border in `rgba(255,255,255,0.42)` and a long, soft inner shadow (`inset 0 1px 0 rgba(255,255,255,0.55)`) to mimic curved glass. **The signature interaction is card-flip.** Every glass card is a two-sided object: the front shows a single image-and-caption (a moment); the back shows a longer handwritten paragraph and a single quiet link. Flipping is triggered by clicking, by `mouseenter` after a 320 ms hover, or — uniquely — by the cards **automatically flipping in slow waves as you horizontally scroll past them** (so the panorama feels alive, like wind turning pages). Flips use `transform: rotateY(180deg)` with `transform-style: preserve-3d`, easing on `cubic-bezier(0.22, 1, 0.36, 1)` over 720 ms — slow enough to feel deliberate, fast enough not to stall. Six rooms (panorama sections), left-to-right: 1. **The Doorway** (full-bleed wordmark "yome.cam" in oversized display, glass-etched, on aurora dawn). 2. **The Windowsill** (5 small glass cards holding still-lifes: jars, pears, a thimble, a folded letter). 3. **The Linen Room** (3 large vertical cards with portrait-orientation moments — a hand on linen, steam from a cup, hair caught in light). 4. **The Garden** (a wide single horizontal card containing a soft-focus meadow gif, with a flipped poem on the reverse). 5. **The Letterbox** (a grid of 8 tiny square cards — postcards, with the back of each carrying a single sentence). 6. **The Goodbye** (one final glass card centered, fading aurora to dusk, with a single line: "see you tomorrow at the same window"). There are **no buttons, no CTAs, no pricing, no stat-grids, no "as featured in"**. There is a single soft horizontal indicator at the bottom — a thin progress filament that lights up like a sunbeam tracking across the floor. Mobile: the parallax planes collapse from 7 to 3 (sky, glass, lens-vignette), the panorama becomes a horizontal swipe-snap of one card per viewport, and oversized display drops one tier but stays oversized. ## Typography and Palette **Typography (all from Google Fonts):** - **Oversized Display / Wordmark:** **"Fraunces"** (Google Fonts) at weight 300, optical-size axis `opsz: 144`, with the `SOFT` axis pushed to `100` and `WONK` axis to `1` for a slightly off-kilter, hand-romantic flourish. Used for the wordmark "yome.cam" at a calm and confident `clamp(7rem, 16vw, 18rem)`. Letter-spacing `-0.04em`. The wordmark is rendered with `background-clip: text` over the aurora gradient and overlaid with a 1px-inset `text-shadow` simulating glass etching: `text-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 -1px 0 rgba(70,40,90,0.18);`. - **Section Headings ("rooms"):** **"Cormorant Garamond"** (Google Fonts) at weight 300 italic, `clamp(2.4rem, 4vw, 4.2rem)`, letter-spacing `0.005em`. These name each room ("the windowsill", "the linen room") in lowercase, like chapter titles in a soft novel. - **Body / Card captions:** **"Inter"** (Google Fonts) at weight 350 (variable), 16.5px / 1.7 line-height, letter-spacing `0.005em`. Cool, neutral, lets the display fonts do the singing. - **Handwritten card-backs:** **"Caveat"** (Google Fonts) at weight 400, 19px / 1.55, color `#3B2A4A` at 0.86 opacity. This is the only place handwriting appears — the secret-side of the glass. - **Filament / progress / metadata:** **"JetBrains Mono"** (Google Fonts) at 11px, weight 300, `letter-spacing: 0.18em`, all-caps. Used only for the bottom filament label ("4:47 p.m. — room 3 of 6") and the time-stamp in the corner. **Palette — "Aurora through Linen at 4:47 p.m.":** - `#F7EFE6` — **Linen Bone** (the warm cottage base; the underlying canvas behind the aurora). - `#F2D7E0` — **Quince Blush** (the first aurora band, lower-left). - `#E9C7E8` — **Wisteria Mist** (the second band, blooming through curtains). - `#C9D6F2` — **Periwinkle Glass** (the third band, the "cool" of the aurora). - `#A8E0D0` — **Sage Frost** (the fourth band, where the meadow leaks in). - `#FFE4A6` — **Honey Pollen** (drifting petals + filament accent). - `#3B2A4A` — **Plum Dusk** (primary text, never pure black — bruised plum keeps the warmth). - `#7A6585` — **Lilac Shade** (secondary text, hairline shadows). - `rgba(255,255,255,0.42)` — **Glass Edge** (the universal glassmorphism border). - `rgba(255,255,255,0.18)` — **Glass Fill** (the panel translucency over aurora). Aurora gradient (the master backdrop, painted across the full 600vw panorama): ``` background: linear-gradient( 108deg, #F2D7E0 0%, #E9C7E8 22%, #C9D6F2 48%, #A8E0D0 71%, #FFE4A6 92%, #F7EFE6 100% ); ``` The aurora subtly drifts (`background-position` animated over 90 s) so even when scrolling pauses, the sky is breathing. ## Imagery and Motifs **Imagery is exclusively soft-focus, daylit, and abstract-shape-forward — never photographic faces, never product shots.** The visual vocabulary is built from five recurring abstract motifs: 1. **Blob-leaves** — large, hand-drawn SVG meadow shapes with `feTurbulence` watercolor edges. Used as horizon fragments on Plane 1. 2. **Polaroid stones** — irregular rounded rectangles with a tiny imperfect hand-curve (`clip-path: polygon(...)` with one corner subtly off), serving as the silhouette for every glass card. No two cards share the same exact silhouette. 3. **Pollen / dust motes** — 60 to 90 small `` elements, randomized opacity, drifting via `@keyframes` along the panorama's velocity vector with a slight lateral wobble. They are honey-pollen yellow against the aurora. 4. **Linen weave** — a tileable 220×220 SVG noise pattern (`` with cross-hatched short strokes at 12 % opacity), applied as a `mix-blend-mode: multiply` overlay on every glass card. It gives the glass a subtle cloth-on-glass texture, as if the panes had been wiped with a linen cloth. 5. **Petals** — 7 hand-drawn SVG petal shapes (a quince-blush family), 12–48 px, occasionally tumbling across the front Plane-5 layer. **Iconography:** there are no UI icons in the conventional sense. Where an icon would normally appear (e.g., "next," "info"), it is replaced by a **drawn ideogram in single-stroke SVG**: a tiny windowpane glyph, a tiny envelope glyph, a tiny petal glyph. Each is 14×14 px, stroke `1.25px`, color `#7A6585`. **The lens motif** — Plane 6, the frontmost plane, carries a faint circular vignette with very gentle chromatic-aberration ring (a 0.5 px red-shift on the left edge, 0.5 px cyan on the right). This single detail ties the entire site to its `.cam` name without ever showing a real camera. **Card-back motifs** — each flipped card-back carries a small hand-drawn corner ornament: a sprig of rosemary, a folded ribbon, a stitched X, a pressed daisy, a teaspoon. These are hand-inked in `#7A6585` and never repeat across the site. **Cursor:** a custom CSS cursor — a 22 px soft-blurred dot in `Honey Pollen` (#FFE4A6) with 38 % opacity, leaving a trailing afterimage for ~280 ms. As you horizontal-scroll, the cursor visibly elongates into a streak, like a long exposure. ## Prompts for Implementation - **Build the site as a single horizontally scrolling panorama**, NOT a vertical stack. Hijack vertical wheel input on desktop (`wheel.deltaY` → `scrollLeft`), preserve native trackpad swipe and touch swipe on mobile. Use `scroll-snap-type: x mandatory` only at mobile breakpoint; on desktop, free-float horizontal scroll with smooth easing (~0.12 lerp). - **Implement seven parallax planes** (back to front: aurora sky, watercolor horizon, linen curtains, glass cards [content], fogged window, petals/pollen, lens vignette) with staggered scroll multipliers (0.05, 0.18, 0.35, 1.0, 1.15, 1.4, 1.0). On mobile, collapse to three planes for performance. - **Every content panel is a glass card** with `backdrop-filter: blur(24px) saturate(140%);`, `background: rgba(255,255,255,0.18);`, `border: 1px solid rgba(255,255,255,0.42);`, `border-radius: 22px 26px 20px 24px / 24px 22px 26px 20px;` (asymmetric, hand-drawn feel), and a long inner highlight `inset 0 1px 0 rgba(255,255,255,0.55), 0 30px 60px -20px rgba(122,101,133,0.18)`. - **Cards are flippable** via `transform-style: preserve-3d` + `rotateY(180deg)` on `.flipped`. Triggers: click (toggle), hover-after-320ms (auto-flip while hovered), and a panorama-scroll-driven wave where cards flip and unflip as their viewport-x crosses the 0.4–0.6 horizontal range. - **Animate the aurora gradient** subtly drifting `background-position` over a 90-second loop. Animate dust motes/petals as drifting SVG layers with `requestAnimationFrame`, NOT CSS-only — they should respond to scroll velocity. - **Lead with full-bleed narrative scenes** — the wordmark in oversized "Fraunces" weight 300 must be the entire first viewport. No nav bar at top. Navigation, if any, is the bottom filament progress bar with six small named dots ("doorway · windowsill · linen · garden · letterbox · goodbye"). - **The site must read like a slow film, not a product page.** Emphasize storytelling: each card carries one specific small noun on the front (a jar, a thimble, a folded letter) and one handwritten paragraph on the back. No bullet-point feature lists. No CTAs. No "Sign up." No pricing. No stat-grids. No testimonials. - **AVOID:** hero CTA buttons, three-column feature grids, pricing tiers, stat counters, logo walls, "as seen in," dark-mode toggles, hamburger menus, sticky headers, modal popups, cookie banners with stylized illustrations, any neon-on-black, any cyberpunk, any brutalist hard edges, any 3D mesh hero, any live-streaming-cam imagery. - **Custom cursor** is a soft Honey Pollen dot with a 280 ms trail; it elongates with horizontal scroll velocity. - **Sound** (optional, default OFF, toggle on the filament): a 14-second loop of a distant wood-pigeon, a kettle, and rustling linen — never music. - **Easing language:** `cubic-bezier(0.22, 1, 0.36, 1)` for card flips and large transforms; `cubic-bezier(0.4, 0, 0.2, 1)` for small UI; durations skew slow (520–860 ms). - **Reduced-motion:** if `prefers-reduced-motion: reduce`, collapse panorama to a 6-section vertical stack, kill parallax, kill auto-flip waves, keep glass and palette intact. ## Uniqueness Notes 1. **Horizontal panorama as a daylit cottage film strip** — most "cam" sites are dark, vertical, and voyeuristic; yome.cam is the opposite: a sideways-scrolling sunlit conservatory where the camera is *inside* the warm room. No other design in the registry is built as a 600vw left-to-right panorama with seven layered-depth parallax planes. 2. **Glass cards that flip in waves as you scroll** — the card-flip pattern here is not click-only; cards auto-flip in a slow horizontal wave as their viewport-x crosses the center, so the panorama itself "turns its own pages." This couples the card-flip pattern to the horizontal-scroll layout in a way no prior design has used. 3. **Aurora-gradient as a 90-second-breathing master backdrop**, painted across the entire 600vw panorama and visible *through* every glass card via `backdrop-filter` — turning every panel into a different colored slice of the same sky. Not a stamped gradient; a living one. 4. **Oversized "Fraunces" wordmark with the WONK + SOFT axes pushed**, anchoring the first viewport at `clamp(7rem, 16vw, 18rem)` with glass-etched `text-shadow` — distinct from every prior site that used Cormorant, Playfair, or sans-serifs at display size. 5. **Pastoral-romantic tone with zero CTAs, zero pricing, zero stat-grids** — six rooms, one final line ("see you tomorrow at the same window"), and a bottom filament instead of a nav bar. The whole site reads as a letter, not a landing page. 6. **Layered-depth diorama at seven planes** including a frontmost lens-vignette + chromatic-aberration ring that subtly references `.cam` without ever showing a webcam. **Chosen seed (per assignment):** aesthetic: glassmorphism · layout: horizontal-scroll · typography: oversized-display · palette: aurora-gradient · patterns: card-flip · imagery: abstract-shapes · motifs: layered-depth · tone: pastoral-romantic. **Avoided patterns from frequency analysis:** hexagonal-honeycomb grids, gold-on-black "luxury" palettes, monospace-only typography, dark-mode-first themes, blobitecture night pavilions, broadcast-control-room aesthetics, vertical scroll-jacked single-page narratives, terminal/CLI motifs. yome.cam deliberately moves to **daylight, horizontal, glass, and pastoral** — under-used directions in the corpus.