# Design Language for yami.party ## Aesthetics and Tone yami.party is an **after-hours private archive** rendered as a website that has half-corrupted itself on purpose — a glitch-aesthetic invitation to a party you missed, transmitted on warm beige cardstock that someone has fed through a malfunctioning fax machine. The Japanese word "yami" (闇) here is read as "the unseen room behind the lit one"; the "party" is not celebratory pop — it is closer to the quiet, conspiratorial hum of a salon at 3am, drinks finished, conversations turning sincere. The whole site reads as if a 1972 private members' club printed program had been scanned, lightly damaged in transit, and partially overwritten by a polite computer. The mood is **mysterious-moody but warm-lit, never neon, never gothic** — honeyed lamplight bleeding through static, not horror. Inspirations are very specific: the muted ochre and bone of vintage Japanese matchbooks; the pale-yellow stains of aged onionskin paper; the controlled, almost shy chromatic-aberration smear seen on early VHS dubs of jazz-fusion concerts; the typographic restraint of Helmut Schmid's Tokyo period; and the ritual quietness of an empty traditional tearoom photographed at dusk. The voice that speaks through the site is dry, low-volume, and slightly amused — an unseen host who keeps the guest list short on purpose. Critically, the glitch is **slow and selective**, not chaotic. Datamosh is a flavor, not a flood. Letters drift one or two pixels and then settle, like a bell that has just been struck. The site never screams. ## Layout Motifs and Structure The composition is a **honey-room bento** — a deliberate seven-cell asymmetric bento-box partition that fills the viewport edge-to-edge with no global header, no centered hero, no top navigation bar. The seven cells are sized using a *non-Fibonacci, intentionally lopsided* ratio set (7 / 11 / 4 / 9 / 13 / 6 / 5 column-tracks across a 32-track grid) so the eye never finds a comfortable repeating rhythm. Cells share a 1px hairline divider in #6E5A3A (toasted-rye line), and every divider has a roughly 14px gap at one randomly chosen end — a "broken seam" — never both ends, never the middle. **The seven cells, fixed positions:** 1. **The Invitation Card (top-left, large, 11 tracks wide × 60vh tall):** carries the wordmark `yami.party`, set in heavy grotesque-neo lowercase, slightly oversized, with a subtle horizontal RGB-split that drifts every 7 seconds and snaps back via spring physics. Below it: a single sentence of program copy, no more. 2. **The Door Number (top-center, narrow, 4 tracks):** a gigantic numeral — the current "session number" — set in light-weight grotesque-neo, occupying the full vertical of the cell. The numeral changes (with a glitch slice transition) on every page reload. 3. **The Programme Strip (top-right, 9 tracks):** a vertically running list of program "items" set in small caps with leader-dots, like a typewritten cocktail menu. Items rest, but on hover one item gently shudders 2px left/right with a damped spring. 4. **The Mesh Aperture (mid-left, large, 13 tracks × 50vh):** an ambient gradient-mesh "window" — a slow, drifting honey-and-bone-and-aubergine warm-cool mesh, partially veiled by a 32% opacity scanline texture. This is the only large image surface on the page; everything else is type and line. 5. **The Footnote Cell (mid-right, 6 tracks, short):** a single block of tightly-set body copy in a humanist-grotesque, max-measure 48ch, reading like a footnote that wandered out of an essay. 6. **The Ledger (bottom-left, 5 tracks, tall):** a vertical list of dates and rooms in tabular figures, right-aligned, with one row crossed out with a horizontal honey-ink stroke that wasn't there a second ago. 7. **The Sigil Cell (bottom-right, large, balances cell 1):** a single hand-cut geometric mark — see Imagery — sitting alone in honeyed-cream space with no caption and no link. There is **no scroll**. The entire experience fits in one viewport on desktop (min-height: 100vh, overflow hidden) and reflows to a strict vertical stack of the same seven cells on mobile, in the same numeric order. No carousels, no modals, no overlays. ## Typography and Palette **Typography (Google Fonts only):** - **Wordmark + display headers:** **Space Grotesk** (Google Fonts), weight 700 for the wordmark and weight 300 for the door-number — the mark is set lowercase with `letter-spacing: -0.04em` and a slight horizontal scale of 102% to produce the squarish, slightly "machined" feel of a grotesque-neo. The grotesk is intentionally chosen for its open apertures and humanist warmth despite its neo-grotesk skeleton — it disagrees with itself the same way the site does. - **Body + footnote + ledger:** **Inter** (Google Fonts), weight 400 for body at 15px / line-height 1.6, weight 500 for the small-caps programme list (`font-feature-settings: "smcp"`, `letter-spacing: 0.18em`), and **Inter** with `font-variant-numeric: tabular-nums` for the ledger's dates and room numbers. - **One ornament face:** **DM Mono** (Google Fonts), weight 400, used *only* for the four-character session sigil under the wordmark and for the single timestamp at the corner of the Mesh Aperture. This is the *only* monospaced text on the entire site — a deliberate violation of the dominant 79% mono norm in the corpus. - All running text uses optical-size kerning (`font-kerning: normal`) and a calculated `text-rendering: geometricPrecision` to keep the glitch transforms crisp. **Palette — Honeyed Neutral (warm-restrained, no neon, no pastel):** - `#F4E9D1` — **honeyed bone**: the dominant background. Like beeswax on raw paper. - `#E8D5A8` — **lamplit cream**: cell-fill for cells 4 and 7, a half-step warmer. - `#3A2E1F` — **roasted-bean** (foreground/text): a deep brown, never black. - `#6E5A3A` — **toasted-rye**: hairline dividers, secondary text, leader-dots. - `#9E2B25` — **lacquer-red** (the only saturated accent, used in single small marks: the strikethrough on the ledger, the wordmark's split-fringe on hover). - `#48364E` — **aubergine-shadow**: only inside the gradient-mesh, never as text. - `#C8B98A` — **tatami-gold**: ambient highlight inside the mesh and on the sigil's inner stroke. - `#FAF6EC` — **paper-light**: 5% lighter than honeyed bone, used for mobile cell backs to reduce eye-load. The palette is **anti-gradient** at the page level — flat fields only, with the single exception of the gradient-mesh window which is the formal counterweight to all the flatness. There is no #000 and no #FFF anywhere. Black and white are forbidden. ## Imagery and Motifs - **The Sigil:** a single hand-cut geometric mark in cell 7, composed of three primitives — a 1.5pt stroked open-bottom hexagon, a 1pt vertical line bisecting it, and a small filled circle resting on the line. It is rendered as inline SVG in `#3A2E1F` with a `#C8B98A` inner glow at 25% opacity. The sigil rotates exactly 12 degrees clockwise on first paint via a 1.4s spring (overshoot 8%, settle, no looping). It never animates again. This sigil is the closest thing the site has to a logo and it appears nowhere else. - **Geometric-shapes vocabulary:** the only decorative shapes permitted on the page are **open hexagons, half-discs, single hairlines, dotted leader rules, and tabular bullet squares**. No circles-as-filled-disks (other than the sigil's pebble), no triangles, no organic blobs, no illustrations of objects, no photography, no avatars, no icons-from-an-icon-set. Each cell is allowed *at most one* decorative shape. - **Gradient-mesh aperture (cell 4):** a 4-stop radial-mesh gradient using honeyed-bone, lamplit-cream, tatami-gold, and aubergine-shadow, running on a 24-second slow drift via CSS `@property` and animated custom properties (no canvas, no GLSL). The mesh is *overlaid* with a 32%-opacity SVG scanline pattern (1px lines at 3px pitch, color `#6E5A3A`) and a separate 8%-opacity grain made from a tiled SVG `` static — together producing the specific quality of a warm window behind aged plastic film. - **Glitch motif — Slow Drift, Snap-Back:** the only "glitch" motion on the site. Once every 7 seconds, the wordmark's red and aubergine channels separate by 3px horizontally over 80ms, hold for 200ms, then return on a damped spring. No vertical jitter, no datamosh blocks, no green-channel split, no infinite stutter. The glitch obeys the room: quiet, brief, considered. Below 480px the glitch is disabled entirely — the wordmark sits still on mobile, because in a small room you do not gesture. - **Broken-seam hairlines:** every cell-divider has one missing 14px segment, placed at a deterministic-but-unrhythmic position (chosen by a hash of the cell index). This is the only "imperfection" pattern in the layout, and it never moves once placed. - **No photography. No iconography. No emoji. No brand-mark wall. No avatars.** The page is type, line, and one warm window. ## Prompts for Implementation - **Build the page as a single full-viewport HTML document with no scroll.** Use CSS Grid with `grid-template-columns: repeat(32, 1fr)` and seven explicitly-placed cells using `grid-column` / `grid-row` numeric assignments. Mobile (≤768px) collapses to a single-column flex stack in numeric cell order. No JS framework — vanilla HTML/CSS/JS, ES modules, no build step required. - **The bento layout is the structural soul of the site.** Do not flatten it into a card-grid (the corpus over-uses card-grid at 73% — this site explicitly rejects that). Cells must touch each other, share hairlines, and have visibly different sizes. Resist the urge to add gutters — the seam *is* the gutter. - **Storytelling shape:** treat the page as a printed program for a private gathering. The wordmark cell is the cover. The door-number is the current night. The programme strip is the running order. The mesh aperture is the room itself. The ledger is the guest history. The footnote is the host's whisper. The sigil is the seal that closes the envelope. Write the copy from this premise — every word should sound like it was set in lead and run off a small letterpress. - **Animation budget — extreme restraint, all spring-physics:** - Wordmark RGB-split: every 7s, 280ms cycle, damped spring (stiffness 240, damping 26). - Sigil first-paint: single 1.4s spring rotation, runs once. - Programme-strip item shudder on hover: 2px lateral wiggle, ~340ms damped spring, fires only on the hovered row. - Mesh-aperture color drift: 24s linear loop on CSS custom properties. - **No scroll-triggered animations.** No parallax. No fade-on-enter. No counter-animations. No typewriter effects. The page is already there when the visitor arrives. - All springs implemented with `cubic-bezier` approximations or a tiny (~30 LOC) spring solver in vanilla JS — no Lottie, no Framer, no GSAP. - **Type-setting rules:** - Wordmark: `clamp(72px, 11vw, 168px)`, weight 700, lowercase, tracking -0.04em. - Door-number: `clamp(120px, 18vw, 280px)`, weight 300, tabular figures, no leading. - Programme strip: 13px, weight 500, small-caps, tracking 0.18em, leader-dots between item and time. - Footnote body: 15px / 1.6 / max-measure 48ch. - Ledger: 14px tabular-nums, right-aligned columns (date, room). - The single mono session-sigil under the wordmark: 11px DM Mono, color toasted-rye, four uppercase characters separated by middle-dots. - **Color application:** - Cells 1, 3, 5, 6 — background `#F4E9D1` (honeyed bone). - Cells 2, 4, 7 — background `#E8D5A8` (lamplit cream). - All foreground text — `#3A2E1F` roasted-bean, never black. - Hairlines — `#6E5A3A` toasted-rye at 1px. - Lacquer-red `#9E2B25` appears in *exactly two places only*: the ledger strikethrough, and the wordmark's right-channel during the glitch event. Nowhere else on the page. - **AVOID (explicit):** card-grid layouts, centered hero, full-bleed photography, gradient backgrounds at the page level, dark-mode neon, monospace as primary face, scroll narratives, parallax, mouse-trailing cursors, modal overlays, CTA buttons, pricing tables, statistic grids, social-proof logo walls, hover-glow on everything, radial spotlights tracking the cursor, grain overlays at the page level (grain is permitted *only* inside the mesh aperture), marquee text, infinite-loop animations of any kind. - **Single-page narrative architecture, no routes.** The whole site is `index.html`. There are no subpages, no `/about`, no `/contact`. If more information must exist, it lives inside cell 5 (the footnote), set tight and small, and the visitor either reads it or doesn't. ## Uniqueness Notes **Differentiators from other designs in the corpus:** 1. **No-scroll seven-cell bento with broken-seam hairlines:** rather than the corpus's dominant card-grid (73%) or centered (66%) patterns, this site is a single-viewport, asymmetric seven-cell partition with deliberately lopsided 32-track ratios and one missing 14px segment in every divider. The "broken-seam" motif is unique to this design and would not exist in any card-grid or stacked-section layout. 2. **Honeyed-neutral palette at 0% corpus penetration:** the palette frequency report shows `honeyed-neutral` at 0%, while the corpus is dominated by warm (84%) and gradient (60%) palettes that lean caramel-bright or sunset-saturated. yami.party's specific honey-bone-aubergine triad with lacquer-red as a *two-touch* accent has no neighbor in the corpus. 3. **Restrained, slow, snap-back glitch (anti-glitch glitch):** glitch aesthetic at 8% in the corpus typically means full-page datamosh, RGB chaos, or pixel-sorting textures. yami.party's glitch is a single 280ms RGB-split on the wordmark every 7 seconds, returning on a spring — closer to a clock chime than a malfunction. This treatment treats glitch as a punctuation mark, not a wallpaper. 4. **Geometric-shapes motif at 0% corpus penetration, used minimally:** open-hexagon-plus-line-plus-pebble sigil sits alone in cell 7, hand-cut, with one rotation event for its entire lifetime. The corpus has 0% adoption of geometric-shapes as a primary motif — most sites lean tech/nature/futuristic/circuit. This is a hard differentiator. 5. **Grotesque-neo display + Inter body + DM Mono accent — inverted typography hierarchy:** the corpus runs 79% mono-dominant; yami.party uses DM Mono in *exactly two places*, four characters total, and lets Space Grotesk and Inter carry the page. Grotesque-neo at 1% corpus usage with this specific tracking and weight choice is a deliberate inversion of the prevailing rhythm. 6. **Spring-physics-only motion budget, no scroll-triggered/parallax:** scroll-triggered (33%) and parallax (29%) dominate the corpus. yami.party prohibits both and runs four total motion events on the entire page — all spring-driven, all damped, all under 1.5 seconds of cumulative motion per minute. 7. **Mysterious-moody tone routed through warmth, not darkness:** mysterious-moody at 26% in the corpus reads as gothic, cyberpunk, or noir-dark by default. yami.party renders the same emotional tone in honeyed paper-light — proving the tone need not equal the color temperature. **Chosen seed (from assignment):** aesthetic: glitch, layout: bento-box, typography: grotesque-neo, palette: honeyed-neutral, patterns: spring, imagery: gradient-mesh, motifs: geometric-shapes, tone: mysterious-moody. **Frequency-driven avoidances applied to this design:** - AVOIDED card-grid (73%), centered (66%), warm/generic-gradient palette (84% / 60%), playful aesthetic (70%), mono-as-primary typography (79%), scroll-triggered (33%), parallax (29%), tech motif (20%), full-bleed default (30%). - PREFERRED bento-box (9%), honeyed-neutral (0%), grotesque-neo (1%), geometric-shapes (0%), spring (8%), gradient-mesh (rare), mysterious-moody (26%, reframed warm).