# Design Language for yami.party ## Aesthetics and Tone *Yami* (闇 — "the dark", the moonless dark, the dark you are not supposed to be in) plus *.party*. So: **a party that takes place inside total darkness, and the only currency in the room is light.** The site is a pitch-black space — not "dark mode dark", but ink-black, lights-off, the back room of a building that doesn't appear on any map. Somewhere in that black there are people, music, a long table, drinks that glow faintly from the inside. You can only see what you yourself illuminate. The cursor is your light source — a soft cone, a held candle, a phone torch with its brightness turned almost all the way down — and as it sweeps across the page, things become briefly visible: a face, a hand raising a glass, a strip of phosphorescent paint someone ran along the wall hours ago and which is still slowly dying. The aesthetic is **surreal**, leaning on the logic of dreams rather than the logic of brochures: scale is wrong on purpose (a moth the size of a coat), text floats untethered, the "floor" is sometimes the ceiling, a doorway opens onto another doorway. It is moody and a little illicit — *mysterious-moody*, with an undertone of warmth, because despite the dark this is a *party*: it is friendly to those who found the door. Think of glow-in-the-dark constellation stickers on a bedroom ceiling at 3am; UV body-paint under blacklight; the green afterglow of a watch dial; bioluminescent tide; the dim ember of a cigarette passed in a circle. The mood word is *invited-into-the-dark*: secret, intimate, slightly hallucinatory, never grim. Anti-goal: this is not a goth landing page, not a crypto "dark neon" dashboard, not a horror site. There are no skulls. The black is a *room*, not a *threat*. The glow is the warmth of company, found by hand. ## Layout Motifs and Structure Skeleton: **immersive-scroll** (~16%) realised as **a single continuous walk through an unlit space** — you are not scrolling a document, you are moving deeper into a building, room by room, and the scrollbar is hidden because in the dark you can't see how far you've come. Crossed with **layered-depth** (~14%) and **organic-flow** (~6%): content sits at many z-distances inside the black, some elements near (sharp, bright when lit), some far (small, blurred, barely catching the light), and they're arranged not on a grid but the way furniture and people end up arranged in a room — clustered, off-axis, with wide empty dark between clusters. Explicitly avoids the corpus defaults: no card-grid (~93%), no centered hero (~79%), no full-bleed banded sections (~84%). - **The Threshold (intro):** Pure black, edge to edge. A single line of dim phosphorescent text near the bottom — *you found the door · move to see the room* — and a faint rectangle of slightly-less-black where a doorway is. The cursor-light is small and weak here. Moving it across the door makes the door's edges glow; "entering" (click / scroll) and the light gets a little stronger, as eyes adjust. - **Rooms instead of sections.** Each scroll-region is a *room* — a dark volume with a few things in it, positioned organically: in the first room, a coat rack of strange coats and a low table; in another, a long banquet table seen end-on receding into black; in another, a wall someone painted with a glowing message; in another, a window with city-dark outside and moths against the glass. The "content" (whatever the page is actually about) is written *on* and *around* these objects — on a name-tag pinned to a coat, on a place-card at the table, in chalk-glow on the wall. - **The light is rationed and it changes.** Cursor-light cone has a radius that *breathes* (slowly grows/shrinks ±10%) and slowly dims the longer you hold still — keep moving to keep seeing. Some objects hold a faint self-glow even unlit (the drinks, the wall paint, a string of constellation stickers) so the dark is never *fully* empty; it has landmarks. - **The Long Table (the closest thing to a "main" room):** banquet table in one-point perspective, receding to a vanishing point in the black. Place-cards down both sides — each card a focal item — and as you scroll the camera slides *along* the table, place-cards drifting past your light one by one (a horizontal drift inside a vertical scroll). - **The After (footer):** the light goes out entirely — black, then a single line fades up in afterglow-green: *the party was here · it's somewhere else now*, and a faint trail of footprints (glow, fading) leading off the edge. Re-lights softly on hover. No CTA bar, no link farm. - **No traditional nav.** A tiny held-light icon, fixed corner; clicking sweeps the light fast through the rooms like running a torch down a hallway, stopping at room edges. ## Typography and Palette **Typefaces — Google Fonts only, three families:** - **Big Shoulders Stencil Display** — the display / wordmark face. A tall, narrow stencil — letters with the bridges cut out, like a name spray-stencilled on a crate or a warehouse door, or a glow-tape sign. Used for the wordmark *yami.party* and room titles, set large, wide-tracked, and treated as if **lit from one side** (a hard light-gradient runs across the glyphs; the un-lit half drops nearly into the black). The stencil cuts read perfectly as "light leaking through". - **Spectral** — the body / reading face. A graceful, slightly literary serif with real low-light legibility (open counters, generous x-height in its lighter weights). Used for paragraphs, place-card text, the name-tag captions — set in a dim parchment-grey on black, never pure white (pure white on black is a hole burned in the dark; we want *paper catching candlelight*). - **Reenie Beanie** — the handwriting face. A thin, loose ballpoint scrawl. Used *only* for the things people in the dark scribbled: the chalk-glow message on the wall, names on place-cards, an arrow drawn on a coat tag, the footer footprints' caption. Rendered in the phosphor-green or UV-violet, slightly wobbling, as if written by feel without looking. **Palette — black room, rationed glow:** - `#05060A` — **Lights-Off Black** — the room. Everything sits on this; it is 70–85% of every screen. - `#0C1118` — **Shadow Furniture** — barely-lighter near-black for objects "in the dark but present" (the table, walls, coats) so they have silhouette even unlit. - `#E8E0C8` — **Candle-Paper** — warm dim cream; the colour of paper / skin / cloth *when your light touches it*. The "reading" colour. Never #FFFFFF. - `#7CF5B6` — **Phosphor Green** — glow-in-the-dark sticker green; the afterglow colour, the wall-paint, the dying-luminescence trail. Cool, slightly sickly, beloved. - `#B98CFF` — **Blacklight Violet** — UV body-paint violet; the second glow, used for handwriting and for things that fluoresce only directly under the cursor-light. - `#F2A65A` — **Held Ember** — warm amber, the colour of the cursor-light's *core* and of the glowing drinks; the only truly warm hue, deployed in tiny doses as the "company / warmth" accent. - Light cones are radial gradients from `#F2A65A`→`#E8E0C8`→transparent; phosphor surfaces use `#7CF5B6` at 8–25% opacity with a `blur()` halo. ## Imagery and Motifs **Primary imagery: vector-art + line-illustration** (~4% / ~17%) — *no photographs.* The whole room is inline SVG and CSS: hand-drawn single-weight contour drawings (1.5px) of party-in-the-dark things — strange coats on hooks, a banquet table in perspective, glasses with a glowing fill, a string of star/moon stickers, moths, a doorway, a hand with a lit match, footprints. Rendered in *near-black* line on black (visible only as a slightly-darker drawing) **except** where the cursor-light passes, where the line brightens to Candle-Paper and any "glow" fills (drink interiors, sticker stars, wall scrawl) bloom in phosphor-green / violet. **Recurring motifs:** - **The light cone** — the cursor as a soft amber-to-cream radial cone with a faint outer flicker; the page's one persistent UI element and its protagonist. - **Phosphorescence that dies** — anything that has been "charged" (a sticker, wall paint, a footprint, an afterimage where the light recently was) holds green glow and fades over 2–6 seconds. The dark is full of slowly-dimming traces. - **Constellation stickers** — childhood glow-in-the-dark stars/moons stuck on the "ceiling" of each room; the one thing always faintly visible; double as section anchors. - **The long banquet table** receding to a vanishing point — the central spatial image. - **Moths** — drawn to your light. A few line-drawn moths drift toward the cursor cone and bump softly around its edge. - **Doorways within doorways** — the surreal recursion motif at room transitions. - **Glow-fill drinks** — glasses whose contents luminesce faintly green from within, the "everyone's here" warmth-marker. ## Prompts for Implementation Build yami.party as **a single static page** — `index.html`, `style.css`, one small JS module (`dark.js`, ~7KB) — with the Google Fonts link the only external dependency. No images, no icon fonts, no framework, no build step. Everything below is achievable with CSS custom properties, radial-gradient masks, `mix-blend-mode`, inline SVG, `IntersectionObserver`, and a couple of `pointermove`/`scroll` listeners. Bias hard toward a full-screen narrative experience — *a guided walk through an unlit party* — not a marketing page. No CTA stacks, no pricing tables, no stat-grids. - **The room is black; light is a mask.** Body background `#05060A`. A fixed full-viewport overlay (`.dark`, `pointer-events:none`, `mix-blend-mode: multiply` or a `mask-image`) sits *above* the content and lets through only a radial-gradient "hole" centred on the cursor — radius ~clamp(120px, 18vw, 260px), feathered. Update its position with `pointermove` via a CSS variable; on touch, the hole follows the scroll-centred point and is a bit larger. Content is authored at *full brightness* underneath; the dark overlay does all the hiding. Result: you genuinely cannot see the page except where you point. - **The light breathes and dims.** Animate the hole radius ±10% on a slow ~6s ease loop. Add a `--ember` brightness variable that decays toward 0.4 over ~2s of cursor stillness and snaps back to 1.0 on movement — drives both the hole's core opacity and a subtle flicker. Reward motion; punish stillness gently. - **Afterglow trail.** On `pointermove`, occasionally drop a small absolutely-positioned `.glow` dot (phosphor-green, blurred) at the cursor; CSS-animate it from opacity ~0.5 to 0 over 3–5s then remove. The dark behind the cursor stays faintly luminous for a moment — the room remembers where you looked. - **Self-glowing landmarks.** Constellation stickers, drink fills, and wall-scrawl text get a permanent low-opacity (8–20%) phosphor-green glow + `filter: blur()` halo so they're visible *through* the dark overlay even unlit — the dark has stars. Everything else (line drawings, body text) is drawn in `#0C1118`-ish near-black and only becomes readable inside the light hole. - **Rooms = scroll-snapped 100vh+ sections**, each a dark volume with 2–5 absolutely-positioned, organically-placed objects (no grid). On `IntersectionObserver` entry, a room's objects do a soft staggered settle (translateY 12px → 0, slight scale, 600ms spring-ish ease) — like the room "becoming present" as you step in. Doorway-to-doorway transition between rooms: the next room's doorway SVG nests inside the current one and zooms through. - **The Long Table:** SVG banquet table in one-point perspective. As the section scrolls, translate the table's place-card layer horizontally (`scroll`-linked) so cards drift past the light one by one; the currently-lit card lifts slightly and its Spectral text brightens. This is the closest thing to a content list — each card = one item — but it reads as walking the length of a table in the dark. - **Moths to the flame:** 3–5 inline-SVG moths with a tiny JS steering loop — each lerps toward the cursor position with jitter and a minimum orbit distance, wings flapping via CSS `scaleX` keyframes. Cheap, uncanny, delightful. Disable if `prefers-reduced-motion`. - **Wordmark, lit from one side:** `yami.party` in Big Shoulders Stencil Display, huge; apply a `linear-gradient` text-fill (`background-clip:text`) running from Candle-Paper on one edge to near-black on the other, angle driven slowly by cursor X — the wordmark turns its face into and out of the light. The stencil bridge-cuts make this read instantly as illumination. - **Reduced-motion / no-pointer fallback:** if `prefers-reduced-motion` or coarse pointer with no movement, fall back to a single gently-pulsing central light, no moths, no decaying trail, scroll-snap still works, all text reaches readable brightness as its room enters view. The story survives without the cursor game. - **Footer:** light fully extinguishes (overlay goes opaque black for ~800ms), then one Reenie Beanie line fades up in phosphor-green — *the party was here · it's somewhere else now* — above a short trail of glowing footprints leaving the frame. Hovering re-lights it dimly. End on absence, not an ask. ## Uniqueness Notes Differentiators, each chosen against the frequency analysis: 1. **The page is literally unlit and you reveal it with a light you carry.** `cursor-follow` is near-ubiquitous (~89%) but always as a *cosmetic* dot/lag — here it is the *only way to see the site at all*: a feathered radial mask hole over a pitch-black overlay. No other site in the archive makes visibility itself the interaction. (Distinct from `blur-focus` ~10% and `zoom-focus` ~1%: this is darkness vs. light, not blur vs. sharp.) 2. **A `surreal` (~8%) dreamscape built as walk-through rooms, not banded sections.** Combines `immersive-scroll` (~16%) + `layered-depth` (~14%) + `organic-flow` (~6%) into a "moving deeper into an unlit building" model — doorways within doorways, wrong scale, a banquet table in one-point perspective — explicitly rejecting `card-grid` (~93%), `centered` (~79%) and `full-bleed` (~84%). 3. **A glow-in-the-dark / blacklight palette with decaying phosphorescence.** Lights-Off black `#05060A` + phosphor-green `#7CF5B6` + UV-violet `#B98CFF` + a single ember-amber `#F2A65A`, with afterglow trails that *fade over seconds*. Against a corpus that is ~98% `warm` palettes and ~92% `gradient`, this is a near-black room where light is rationed and remembered — not "dark mode", a *dark room*. 4. **Typography treated as illumination, not decoration.** `Big Shoulders Stencil Display` (~0% in the corpus) with a cursor-driven light-gradient text-fill so the wordmark physically turns toward/away from the light; `Spectral` body in candle-paper cream, never pure white; `Reenie Beanie` only for things scribbled-by-feel-in-the-dark in glow ink. 5. **Avoided patterns:** no `glassmorphism` (~85%), no `hand-drawn`-as-overall-aesthetic (~94% — line-drawing is used here, but as near-invisible contour art *inside* a surreal black room, not a cute doodle skin), no `dashboard`/stat-grid, no CTA-heavy layout, no photography (~98%), no `parallax`-banded marketing scroll. The only "stagger" is rooms becoming present as you enter them. [Documented chosen seed/style: "surreal dreamscape promo"]