# Design Language for haru.cam ## Aesthetics and Tone haru.cam is **the inside of a hand-stitched leather camera case, opened slowly under a low warm lamp, where every panel that lifts reveals one perfect frame of spring**. The domain reads two ways at once — *haru* (春, spring; also "day") and *.cam* (camera, the lens, the act of capturing) — and this design refuses both clichés. It is **not** a photo-sharing app (no upload buttons, no infinite masonry of strangers' brunches, no like-hearts) and it is **not** a webcam directory (no thumbnails-grid, no "online now" badges, no neon). Instead it is a **luxury-premium artifact**: a slow, deliberate, leather-bound *single object* you turn over in your hands, each surface giving way — sliding aside like a leather flap held by hidden magnets — to expose one luminous photograph of the season's first warmth. The tone is **warm-inviting** but in the register of *quiet expense* rather than friendliness. Think: the smell of new bridle leather, the weight of brass hardware, the sound of a heavy clasp clicking home. The page never shouts. It never sells. It behaves like a maître d' who has already set your table — nothing is asked of the visitor except attention. Where most sites in the registry chase pastoral-romantic softness or dopamine brightness, haru.cam is **tactile, grounded, and unhurried**: a warmth that is held, not given away. Mood references: a Hermès Kelly bag photographed with one shaft of late-afternoon sun across the grain; the title sequence of a film about a watchmaker; the inside cover of a 1960s Leica manual reprinted on uncoated cream stock; cherry blossoms seen through a slightly fogged viewfinder, then suddenly sharp. ## Layout Motifs and Structure The page is built as **one continuous vertical leather panel — a 5200px-tall strap of full-grain hide — divided into seven "flaps."** Each flap is a horizontal band of dark leather; as the visitor scrolls a flap into the centre of the viewport, it **slides open** — the leather surface translates laterally (alternating left and right, flap to flap) on a long ease, revealing the spring photograph it was covering. This is **slide-reveal** taken literally and physically: not a fade, not a parallax dolly, but a *flap sliding off a frame*, with a thin specular highlight raking across the leather edge as it moves, and a soft inner shadow cast onto the photograph beneath. The grid is **deliberately spare — minimal-navigation incarnate**. There is exactly one persistent element of chrome: a hairline brass index running down the extreme left edge of the viewport (24px wide), with seven tiny embossed tick-marks, one per flap; the active tick glows faintly warm. No top nav bar. No hamburger. No footer link-farm. No breadcrumbs. To move through haru.cam you scroll, or you click a tick — that is the entire interface. Each flap, when open, holds its content in a **single column biased to the optical centre**, max-width 660px, with generous leather margin on both sides so the photograph reads as *mounted*, not bled-to-edge. The composition relies on **sharp-angles** as its only geometric ornament: every flap's reveal edge is not square — it is cut at a precise **17° diagonal**, so the leather slides off in a slanted blade-line, and the photograph beneath is itself masked to a parallelogram leaning the same 17°. Stacked down the page, these slanted edges create a subtle zigzag spine — the one rhythmic gesture in an otherwise still layout. Type that sits on leather is set flush to these diagonal edges, never centred-and-floating. Section order (seven flaps): (1) **Title flap** — the word *haru* embossed blind into the leather, no photograph, the reveal here exposes only a deeper, lighter leather beneath, like a maker's mark; (2) **Aperture** — first spring frame, a single branch; (3) **Light** — golden-hour grain, almost overexposed then resolving; (4) **Stillness** — a quiet interior, a window, blossom shadow on a wall; (5) **Closer** — macro: one petal, the texture of it against leather; (6) **The whole season** — a wide frame, the only one allowed to nearly fill its flap; (7) **Clasp flap** — the leather slides shut again as you reach the bottom, a brass clasp drops into place, the page *closes*. ## Typography and Palette **Type — Google Fonts only, two families, strict assignment.** - **Archivo** (variable, weights 100–900) — the **grotesque-neo** voice. A precise, slightly mechanical neo-grotesque with squared terminals — it reads as *engineered*, like the engraving on a brass camera body. Used for the embossed title (weight 800, tracking +0.22em, set in small caps via `font-variant-caps`), for the flap labels (weight 600, +0.16em, 13px, uppercase), and for the brass index ticks (weight 700, 10px). On leather, Archivo is rendered as a **debossed letterpress impression**: text-shadow stacked as `0 1px 0 rgba(255,243,224,0.06), 0 -1px 1px rgba(0,0,0,0.6)` so the glyphs read as *pressed into the hide*, never printed on top. - **Newsreader** (variable, optical-size axis, weights 200–700, italic available) — the **warm-inviting** body voice. A literary, slightly old-style serif with a true italic; used for the running text that accompanies each spring photograph, set at 19px/1.7, weight 380, colour warm cream, with the italic reserved for the single line of "caption" floated against each flap's 17° edge. Newsreader's optical-size axis is pushed up at display sizes (the rare pull-quote, 44px) and down at body size, so the type feels *bound*, not pasted. No third typeface. No mono. No handwritten. The contrast in the page is **engraved-grotesque vs. bound-serif** — hardware and book — which is itself a quiet luxury gesture. **Palette — complementary, anchored on warm leather amber against a single cool counter-tone.** The complementary pair is **amber-tan ↔ slate-teal** — true opposites on the warm/cool axis, used at very unequal weight (≈85% leather, ≈15% teal accent) so the page reads warm overall with one cool note that makes the warmth legible. - `#7a4a22` — **bridle leather**, the dominant flap colour, the surface everything slides off of. - `#5c351a` — **deep welt brown**, the inner shadow cast under each opening flap, and the title-flap's debossed letters. - `#caa46a` — **brass hardware**, the left index, ticks, clasp, and the specular rake-line on sliding leather. - `#f3e6cf` — **uncoated cream**, the photograph mounts and all Newsreader body text. - `#fff7e8` — **warm highlight**, the lit edge of leather and Archivo's debossed top-highlight. - `#2f4a4d` — **slate-teal**, the lone complementary counter-tone: used only for the active index-tick glow, the thin keyline framing each photograph, and the closing-clasp's shadow. Never more than ~15% of any viewport. - `#1a120b` — **near-black hide**, the page background visible at the very top before the first flap, and behind the leather strap at its edges. Spring photographs themselves carry their own colour (blossom pink, sky, green) but are always **slightly desaturated and warmed in post** — a -12% saturation, +4% warmth grade — so they sit inside the leather world rather than fighting it. ## Imagery and Motifs **Two image families, both bespoke. No stock photography of leather. No 3D renders. No Lottie. No clip-art.** 1. **The leather surface itself** — authored as **one tileable 1280×1280 PNG of full-grain bridle leather** photographed flat under raking light, plus a 1280×1280 normal-style bump overlay (greyscale) used at low opacity with `mix-blend-mode: overlay` to give every flap real grain that catches the moving specular line. The 17° reveal edges are cut with CSS `clip-path: polygon(...)` — the leather's torn-open edge gets a 3px brass-coloured `border-image` so it reads as a *bound, hand-finished* edge, not a digital crop. A single **embossed maker's-mark SVG** (a small aperture-blade rosette, six straight leaves at sharp angles) sits debossed into the title flap and, at 40% scale, into the closing clasp. 2. **Seven spring photographs** — these are the *content*, the things being revealed. Each is a single restrained frame: a bare branch with three buds; an over-bright window; blossom shadow raking a plaster wall; a macro petal on a dark ground; a wide orchard line; etc. They are **always masked to the leaning-17° parallelogram**, mounted on `#f3e6cf` cream with a 1px `#2f4a4d` keyline and a soft `#5c351a` drop-shadow, so each looks *tipped-in* like a plate in an expensive monograph. No captions overlaid on the photo — the one caption line (Newsreader italic) lives on the leather beside it. Decorative motifs are minimal and all **sharp-angled**: the aperture-blade rosette (straight-edged, never round), the 17° zigzag spine formed by stacked flap-edges, the squared brass ticks, and a single recurring hairline — a 0.5px brass rule — that appears at the top of each flap's text column, always cut at the same 17°. There are **no rounded corners anywhere** on chrome; the only curves in the entire page belong to the photographs and the leather grain. The brass index on the left is the page's one piece of "UI jewellery": a vertical strip with a faint brushed-metal gradient, seven embossed ticks, and — when a flap is fully open — its tick fills with the slate-teal glow. The clasp at the very bottom is a small SVG of a turn-lock fastener that, on the final scroll, **rotates 90° and drops**, with a 0.5px teal shadow snapping under it — the page's only "completion" gesture. ## Prompts for Implementation Build haru.cam as **one HTML file, one CSS file, one small ES module, one 1280×1280 leather PNG, one 1280×1280 grain/bump PNG, one maker's-mark SVG, one clasp SVG, seven spring photographs (WebP), and one 7-tick brass-index SVG**. No framework, no router, no SPA shell, no build step. No GSAP, no Three.js, no canvas, no WebGL. The animation surface is **CSS transforms + transitions + one `IntersectionObserver`** — that is the whole engine. **Storytelling is the organizing principle.** This is not a landing page; it is an *object being opened*. The visitor's scroll is the hand. Every flap that slides reveals one frame, accompanied by 1–3 sentences of Newsreader prose (quiet, first-person-plural, never salesy: "We kept this one. The light was wrong, and then it wasn't.") plus one floated italic caption. Pace it slowly — generous vertical whitespace between flaps, long animation durations. **Animation specifics:** - *Flap slide-reveal:* when a flap enters the viewport (IntersectionObserver, ~35% threshold), its leather surface translates ±64% on the X axis (alternating direction per flap) over **1100ms `cubic-bezier(0.22, 1, 0.36, 1)`**; simultaneously a thin `linear-gradient` specular line (brass `#caa46a` → transparent, 6px wide) sweeps across the leather edge, and an inner `box-shadow` in `#5c351a` deepens onto the photograph beneath as it's exposed. Reverse the whole thing if the visitor scrolls back up — the flap slides closed. - *Photograph entrance:* the parallelogram-masked image starts at `transform: translateX(8px) scale(1.03)` opacity 0; as its flap finishes opening it settles to rest over **700ms**, a beat *after* the leather has cleared it. - *Brass index:* the active tick (matching the open flap) gets a `box-shadow: 0 0 12px 1px #2f4a4d` and its fill lerps to slate-teal over 300ms; clicking a tick smooth-scrolls to that flap. - *Title flap (top):* on load, the word *haru* is already debossed; after 600ms the title flap performs its own slide-reveal to expose the lighter maker's-mark leather beneath — the page's opening "breath." - *Clasp flap (bottom):* when the final flap is ~80% scrolled, the leather slides *shut* (both halves converge to centre over 1200ms) and the brass clasp SVG rotates 90° and drops 6px with a teal shadow snapping under — the book closes. - *Grain/specular:* the leather bump PNG sits at `mix-blend-mode: overlay`, opacity 0.5; a CSS `radial-gradient` "lamp" highlight is anchored to the viewport centre and never moves, so as flaps slide their grain catches the light differently — cheap, real-feeling specularity with zero JS. - *Reduced motion:* if `prefers-reduced-motion`, flaps are pre-opened (no slide), photographs are simply present, the index is static, the clasp stays open. **Hard constraints — what NOT to do:** No call-to-action buttons. No "Get started" / "Sign up" / "Contact us". No pricing tables, no plan cards, no tier comparison. No stat-grids or animated counters ("10M photos!", "99.9% uptime" — forbidden). No testimonial carousel. No feature-icon grid. No hamburger menu, no mega-nav, no sticky header bar. No hero with overlaid CTA. No newsletter modal. No cookie-banner styling work. The page sells nothing and asks nothing — it is a leather object containing seven frames of spring, and the only verb available to the visitor is *open*. ## Uniqueness Notes This design is engineered to occupy an **empty cell** in the registry's frequency map. Concrete differentiators from the existing 220 designs: 1. **luxury-premium aesthetic at 0% in the registry.** Not a single existing design claims luxury-premium — it is the rarest aesthetic in the entire vocabulary. haru.cam takes it literally: leather, brass, debossed type, tipped-in plates, the restraint of an expensive monograph. Where the registry overflows with hand-drawn (96%) and glassmorphism (65%), this is a hard turn into *material expense*. 2. **slide-reveal pattern (3%) implemented physically, not as a transition keyword.** Most of the 220 designs lean on parallax (95%), cursor-follow (86%), spring (85%), stagger (79%), magnetic (79%). haru.cam uses **none of those overused five**. Its only motion is leather *flaps physically sliding off frames* on a 17° blade-line — slide-reveal as a literal mechanical action with specular rake and inner shadow, not a CSS fade-with-offset. 3. **leather-texture imagery (3%) as the entire surface, paired with minimal-navigation (6%).** The few registry sites with leather-texture use it as an accent panel; here the leather *is the page*, 85% of every viewport. And the navigation is a single 24px brass index with seven ticks — no nav bar, no menu, no footer links — which almost nothing in the registry attempts. 4. **complementary palette (4%) at deliberately unequal weight.** Rather than balanced complementary (which reads as 1990s clip-art), haru.cam runs ~85% warm leather amber against ~15% slate-teal — one cool note that makes the warmth legible. Complementary palettes are at 4% in the registry; this asymmetric, almost-monochrome reading of one is unique. 5. **grotesque-neo type (3%) rendered as debossed brass engraving, against a bound-serif body.** Archivo set as letterpress impressions in leather + Newsreader's optical-size serif for prose — the "hardware vs. book" contrast. No mono anywhere, breaking the registry's 95% mono habit; no handwritten, breaking the 35% handwritten habit. 6. **sharp-angles motifs (3%) + warm-inviting tone (29%) in an unprecedented combination.** Every other warm-inviting site in the registry pairs warmth with soft/rounded/pastoral cues. haru.cam pairs warmth with a precise 17° blade-line, squared brass ticks, a straight-edged aperture rosette, and zero rounded corners on any chrome — *warmth held in a hard frame*. 7. **Chosen seed (from assignment):** aesthetic: luxury-premium, layout: minimal-navigation, typography: grotesque-neo, palette: complementary, patterns: slide-reveal, imagery: leather-texture, motifs: sharp-angles, tone: warm-inviting. 8. **Avoided per frequency analysis:** hand-drawn (96%), glassmorphism (65%), photography-as-imagery-default (99%), full-bleed (94%), card-grid (85%), centered (82%), parallax (95%), cursor-follow (86%), spring (85%), stagger (79%), magnetic (79%), mono typography (95%), gradient palette (97%), pastoral-romantic tone (36%). None of these appear in haru.cam.