# Design Language for cosplay.bar ## Aesthetics and Tone cosplay.bar is **a 1957 corner cocktail lounge whose patrons all came in costume tonight** — a single warm-inviting room imagined as the back room of a small mid-century neighborhood bar that, every Thursday, becomes the unofficial after-hours green room for working performers, character actors, masquerade dancers, theatrical wig-makers, foley artists, and weekend convention cosplayers from the nearby playhouse and television studio. The site is not a costume shop. It is not an anime fandom landing. It is not the cyan-and-magenta convention-floor splash that nearly every other domain in this registry would default to for the word *cosplay*. It is a **mid-century cocktail bar reframed as a sanctuary for people who put on characters professionally and amateurly**, photographed on aged hotel stationery the morning after, with the navy-metallic monogram of the bar embossed in the corner. The mood is the soft, conspiratorial warmth of a room where everyone has just taken off the wig and is sitting down to a low rocks-glass with the makeup half-removed — still partly someone else, partly themselves, and entirely welcome. The character of the place is **mid-century modern (10% in the registry — actively claimed)**, specifically the 1955–1962 American-bar idiom of low brass-rail counters, walnut-veneered booths, frosted clerestory windows, hand-blocked cocktail menus on heavy ivory cardstock, and a single back-bar mirror engraved with the house monogram in a fine *guilloché* of crossed lines. There is no neon. There is no holographic foil. There is no kawaii rendering. The lounge is dimmed but not dark; the navy of the upholstery and the brushed-nickel of the brass rail catch the single warm tungsten pendant overhead and the page glows the way an *actual* cocktail menu glows on a navy-leather banquette at 11:47 p.m. on a Thursday. The tone is **warm-inviting (23% in the registry)** — but with a specific mid-century editorial inflection lifted from late-period *Holiday* magazine and the 1958 Knoll showroom catalogues: the warmth of an honest concierge greeting addressed to a person who has been working hard at being someone else all day. The voice writes in low full sentences, never barks, never sells, and treats the reader as a guest who has just hung up a heavy wool coat. The warmth is grounded in **paper-aged (2% in the registry — actively claimed)** texture: every surface in the page has the slight foxing, the gentle right-edge sun-fade, and the faint typewriter-ribbon offset of a real piece of mid-century hotel stationery that was tucked into a coat pocket and forgotten until morning. The aged-paper substrate is not a Photoshop filter. It is **the entire physical metaphor of the site** — the bar exists on this single sheet of cream stationery, and every piece of content is something written, sketched, or stamped onto it by someone who was there. The site refuses three registry clichés that would normally dominate the word *cosplay*: the **anime-explosion gradient** (vaporwave, holographic, dopamine-neon — all rejected), the **convention-floor card-grid product catalog** (rejected — there are no products here), and the **kawaii hand-drawn 96% aesthetic** (rejected, even though it dominates the registry — the room is for adults at the end of a long shift). What replaces them is a quiet mid-century interior in **navy-metallic (2% in the registry — actively claimed)** where the only motion is the slow drift of a single cursor-driven warm tungsten light across an aged-paper menu, lighting up one entry at a time as the reader's hand moves over it. The page does not shout. It pours. ## Layout Motifs and Structure The structural commitment is **full-bleed (91% in the registry — accepted, then specifically inflected)**. Full-bleed here does not mean the conventional edge-to-edge hero photograph. It means the **entire viewport is one continuous unbroken sheet of cream hotel stationery**, with the navy banquette wall visible only as a 12-pixel deep navy-metallic shadow band along the inside of every viewport edge — as though the stationery is lying flat on the navy-leather seat and the camera is directly above it. There is no horizontal banding. There is no card grid. There is no hero-then-features-then-cta layout. The page is **a single sheet of paper, viewed from above, scrolled vertically as the cocktail menu is unfolded section by section**. The page is governed throughout by the underused motif **grid-lines (2% in the registry — actively claimed)**. The grid is not a CSS layout grid in the visible sense; it is the **printed grid of the stationery itself** — a faint navy 8mm × 8mm graph rule, printed at 7% opacity on the cream paper background, that the reader perceives only at the edges of attention. Every element on the page snaps to this graph rule. Every paragraph break, every monogram, every hand-drawn glyph, every section divider sits exactly on a grid intersection. The grid is the silent structure; the *content* is the warmth that floats inside it. This is the inversion of the typical "grid-lines" treatment in the registry, which uses grid lines as a futurist data-viz overlay. Here grid-lines are **reading-paper grid-lines** — the kind printed on accountant's ledger pads and 1958 cocktail-menu underpapers — and they organize a quiet mid-century interior, not a HUD. The vertical structure of the unfolded sheet, top to bottom, follows the order of how a real mid-century cocktail menu was actually laid out: 1. **The Letterhead Band (0–18vh).** The navy-metallic monogram **C·B** in a fine engraved guilloché of crossed lines, set 32mm from the top-left corner of the paper, with the establishment name *cosplay.bar* hand-set beneath it in small humanist caps. To the right of the monogram, on the same baseline, three small pieces of hand-typed metadata: the night (THURSDAY), the room (THE BACK ROOM), and the hour (FROM ELEVEN). No navigation bar. No CTA button. No hamburger. The letterhead is the navigation: every section of the menu is reachable by the table of contents printed in tiny 7pt humanist type along the right gutter, justified, the way a real menu's index is. 2. **The Greeting (18–32vh).** A single hand-typewritten paragraph, set in humanist roman at 16px / 28px line-height, addressed to the reader as a guest who has just sat down. The greeting is offset 24mm from the left rule of the paper and ends with a small navy fountain-pen flourish — a single hand-drawn underline that animates **only on cursor approach**, drawing itself from left to right in 1.4 seconds with a soft spring easing. 3. **The House Aperitifs (32–55vh).** Six entries listed in a quiet two-column hand-set arrangement, *not* a card grid. Each entry is a four-line block: the name of the drink in humanist small caps, a one-line description in humanist roman italic, the year the recipe entered the house book in tiny humanist tabular figures (1956, 1958, 1961, 1962, 1959, 1957), and a single hand-drawn glass icon at 18px next to the name. The drinks are not products to buy. They are **portraits of the regulars** — *The Stagehand* (rye, dry vermouth, lemon oil), *The Wig-Maker* (gin, chamomile, beeswax tincture), *The Foley Artist* (mezcal, salt rim, dry sherry), *The Understudy* (champagne, Aperol, single sugar cube), *The Convention Cosplayer* (rum, ginger, lime cordial — the only one with a wedge), and *The Quick-Change* (vodka, espresso, no garnish, served in 90 seconds). 4. **The Costume Coat-Check (55–72vh).** A single horizontal section with a hand-drawn navy line-illustration of a brass coat-rack from which seven costume silhouettes are hung in faint pencil shading: a kabuki sleeve, a Victorian bustle, a 1965 Trek tunic, a wig stand with a long blonde wig, a ballet tutu on a hanger, a samurai *jinbaori*, and an empty hanger waiting for whoever has not arrived yet. Each silhouette, on cursor approach, lights up under the warm tungsten pendant — a soft circular pool of #F4D9A8 at 22% opacity blooms beneath the cursor and travels with it across the rack. 5. **The Back Bar (72–88vh).** A single horizontal hand-drawn navy line-elevation of the back-bar mirror at 1:50 scale, with the bottle silhouettes drawn in fine 0.5pt navy strokes against the cream paper. This is a *reference drawing*, like an architect's elevation of the back wall. There is no commerce here, no shop link, no "order now." It is a quiet inventory of what is on the shelf tonight: forty-two bottle silhouettes, hand-drawn, named in tiny humanist type underneath. The reader's cursor, moving along the elevation, casts a warm tungsten highlight across the bottles in sequence — and this is the only place on the page where the cursor-follow pattern (78% in the registry — accepted, but reframed as *the bartender's eye following the guest*) is visible at meaningful scale. 6. **The Hours and the House Rules (88–98vh).** Three short paragraphs in humanist roman, set in a single justified column 96mm wide, centered on the page. The rules are warm and short: *Costumes welcome. Photographs by request only. Last call quietly observed. The piano is for those who can play it.* No accordion. No FAQ. No expand/collapse. Everything is visible, everything is read in one sitting. 7. **The Bottom Edge (98–100vh).** A 12mm strip of paper-edge below the last text, slightly torn, slightly foxed, with the navy-metallic monogram repeated very small at lower-right and a tiny hand-typed *— please leave the menu when you go —* at lower-left. There are no parallax sections. There are no scroll-snap stops. There is no horizontal scroll. The reader scrolls straight down through one continuous sheet of paper, and the only motion in the entire page is the warm tungsten pool that follows the cursor and the spring-eased fountain-pen underline that draws itself when the cursor approaches the greeting. Asymmetric, full-bleed, single-sheet, gridded — and entirely quiet. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Mulish`** (variable, wght 200–1000) — the principal humanist sans of the page, serving the **humanist (45% in the registry)** typography mandate. Mulish is a contemporary humanist grotesk drawn by Vernon Adams and Cyreal in the lineage of Edward Johnston's 1916 Underground type and the warmer 1950s humanist sanses (Optima, Pascal). It is used here at three sizes: 14px / 22px for body and menu entries, 11px / 16px for the index gutter and metadata, and 22px / 28px for section openers in small caps. The variable weight axis is used sparingly — body text sits at wght 380, section openers at wght 620, the monogram at wght 880. Mulish is chosen specifically *against* the registry default of Inter and Space Grotesk: it has open apertures, a low x-height, slightly inked terminals, and a warm humanist axis that reads on cream paper the way Optima reads on a hotel-stationery letterhead — never cold, never corporate, never tech. - **`Cormorant Garamond`** (variable, wght 300–700, italic axis) — the secondary face, used only in two specific places: the italic line of each cocktail description (one line per drink, italic, 14px / 22px), and the hand-typewritten greeting paragraph at the top of the page (regular, 16px / 28px, with a slight letter-spacing of 0.012em to imitate the gap-widening of a 1957 Royal Quiet De Luxe ribbon). Cormorant is a Garamond revival drawn by Christian Thalmann, and at small italic sizes it carries the exact warm, slightly inked feel of mid-century menu copy. It is used **nowhere else** — never as a heading, never as display, never as a flourish. Its restraint is deliberate. - **`IBM Plex Mono`** (regular, 400) — the tabular face, used only for the year columns next to each cocktail (1956, 1958, 1961, 1962, 1959, 1957), the closing-time metadata (FROM ELEVEN), and the very small lower-right monogram repeat. Mono at 11px in tabular figures gives the *ledger-paper* feel without ever turning the page into a terminal interface — the way a real 1958 cocktail-bar accounts book uses tabular numerals only for the columns that need to align. There are exactly three typefaces. There is no fourth display face. There is no handwritten font (handwritten is 31% in the registry — explicitly avoided here, since the site already has hand-drawn elements at the SVG level and a fourth handwritten typeface would tip the page into kitsch). There is no oversized hero display. The largest type on the page is the section-opener small caps at 22px. The smallest is the index gutter at 11px. The page is **deliberately quiet typographically**, in the mid-century editorial tradition where the typography frames the content rather than performing it. **Palette — `navy-metallic` (2% in the registry — actively claimed):** The eight-color palette is built around a single navy-metallic anchor and a warm cream-paper field, with two warm-tungsten accents and one foxed-edge brown. Every color on the page has a specific physical referent in the mid-century cocktail bar: - `#0F1B36` — **Banquette Navy.** The deep navy of the leather-upholstered banquette wall. Used as the body text color (the page reads navy-on-cream, *not* black-on-cream — this is the single most important palette decision). Also used for the 12-pixel inner shadow band at the viewport edge and for the printed grid-lines at 7% opacity. - `#1F3160` — **Banquette Navy, Lit.** A slightly lifted navy used only for the navy under the warm tungsten pendant pool — the navy of leather that has caught a single tungsten highlight. Used for the cursor-driven pool's outer edge and for the small navy fountain-pen flourish under the greeting. - `#8A9CB8` — **Brushed Nickel Rail.** The cool-warm grey of the polished brass-and-nickel bar rail. Used for the engraved guilloché lines of the monogram (a fine SVG cross-hatch at 0.5pt strokes), for the 0.5pt rule lines that separate cocktail entries, and for the back-bar bottle silhouette outlines. This is the *metallic* component of the navy-metallic palette: a cool brushed grey that sits between navy and cream and gives the page its mid-century sheen. - `#C8B58A` — **Brass Pendant.** The warm brass of the single tungsten pendant fixture above the page. Used for the monogram itself (filled brass, with a 1pt navy outline), for the small cocktail-glass icons next to each drink name, and for the index-gutter accent dots. The color is a desaturated 1957 brass — never gold, never yellow. - `#F4D9A8` — **Tungsten Pool.** The warm circular pool of light cast by the pendant, which follows the cursor at 22% opacity. Used only as the cursor-driven highlight gradient (a 240px radial gradient from `#F4D9A8` at 22% center to transparent at edge). Also used at 6% opacity as the warm wash applied to the costume silhouettes when cursor-lit. - `#F2EAD6` — **Cream Stationery.** The base color of the entire page — the cream of mid-century hotel stationery, slightly warmer than ivory, slightly cooler than buttermilk. The 7% navy grid-lines are printed onto this. The full-bleed background is this color, edge to edge. - `#E8DCC0` — **Foxed Edge.** A slightly browned warm cream used along the right and bottom edges of the paper to suggest age and sun-fade — applied as a 24mm soft gradient from page-edge inward, at 30% opacity over the cream base. Also used for the two paper-fold creases that run vertically at 33% and 67% of the page width, drawn as 1px gradient seams that animate (very slowly, 0.04 opacity oscillation over 12 seconds) to suggest that the paper has been folded and refolded. - `#6B4A2E` — **Foxing Brown.** The deep warm brown of cocoa staining and tobacco-fingerprint along the bottom-right corner. Used very sparingly — for the four small foxing spots scattered across the page (each a hand-drawn SVG blob at 14% opacity), for the torn bottom edge, and for the typewriter-ribbon offset on the greeting paragraph (a 0.5px shadow in this color, set at 8% opacity, displaced 0.5px to the right of the navy text — to imitate a slightly worn 1957 Royal ribbon). The palette is intentionally **warm-grounded** rather than the cool-blue corporate navy that dominates `midnight-blue` (7% in the registry) or the chrome-cool `chrome-metallic` (10% in the registry). Navy here is leather-warmed, never digital. Metallic here is brushed nickel and aged brass under tungsten, never chromed and never cold. The palette is the single largest carrier of the **warm-inviting** tone — it does the work that the registry typically asks photography to do. ## Imagery and Motifs The visual world is built from four motif families, all hand-composed from SVG, CSS gradients, and one tiling **paper-aged** PNG. **Zero photography (98% in the registry — its exclusion is the largest single deviation).** Zero 3D. Zero stock. Zero anime line-art. Zero kawaii. Zero convention-floor product photography. **1. Paper-aged stationery substrate (imagery: paper-aged, 2% in the registry — actively claimed).** The single PNG asset for the entire site is `stationery.png`, a 1024×1024 tiling cream-paper texture with: (a) the subtle 7% navy 8mm × 8mm grid-lines printed across the entire surface; (b) very faint chain-laid paper striations every 24mm running vertically; (c) two warm foxing spots, one upper-right and one lower-left, at 12% opacity in `#6B4A2E`; (d) a barely visible right-edge sun-fade gradient that becomes more pronounced toward the right margin; (e) two vertical paper-crease lines at 33% and 67% of the tile width, drawn as 0.5px gradient seams that suggest a thrice-folded sheet. The PNG is approximately 38kb and tiles invisibly across any viewport. Every other surface in the page sits *on top of* this substrate and is composited with `mix-blend-mode: multiply` at 92% opacity, so that the cream paper bleeds through every navy line and every brass fill. This is the entire physical metaphor of the site enforced at the rendering level: nothing on this page is digital — everything is printed, hand-stamped, or hand-drawn onto cream paper. Paper-aged is at 2% in the registry; here it is the substrate for every pixel. **2. The Engraved Monogram (motif: grid-lines, 2% in the registry — actively claimed).** A single SVG file, `monogram.svg`, contains the C·B house monogram drawn as a **fine guilloché of crossed grid-lines** — 64 navy 0.5pt strokes at brushed-nickel grey `#8A9CB8`, intersected at precise 11.25-degree increments to form the engraved-metal pattern that the back-bar mirror at every 1957 hotel cocktail bar in Manhattan actually used. The monogram appears at three scales: 48×48 in the upper-left letterhead, 18×18 along the index gutter at every section opener, and 14×14 at the bottom-right. The C and the B are interlocked, with the bowls of the letters formed by the densest concentration of crossed grid-lines and the whitespace formed where the lines thin. **Grid-lines (2% in the registry) are not decorative here — they are the literal construction of the mark itself.** This is the inversion of the registry's usual grid-lines treatment, where lines are a sci-fi data overlay. Here grid-lines are *engraving*. **3. The Costume Silhouettes (imagery: line-illustration, 2% in the registry).** Seven hand-drawn navy line-silhouettes of costume pieces, drawn at 0.75pt strokes in `#0F1B36`, each occupying a 96×144 SVG. The silhouettes are not anime characters. They are not character poses. They are **empty costumes hung on a coat rack** — the costume *waiting* for its wearer. The kabuki sleeve hangs from a hanger, the Victorian bustle is folded over a chair-back, the 1965 Trek tunic is on a wooden valet, the wig stand carries an empty long blonde wig in pencil shading, the ballet tutu is on a wire hanger with the ribbons drooping, the samurai *jinbaori* is folded square on a tatami silhouette, and the seventh hanger is empty. The silhouettes are the **emotional core** of the page — they are what makes cosplay.bar a sanctuary rather than a costume shop. Each silhouette has a soft warm-tungsten lighting layer (a `#F4D9A8` fill at 0% opacity in resting state) that crossfades to 22% opacity when the cursor is within a 180px radius — the warm pendant has just swung over to that costume, and now we can see what shape was hanging there. **4. The Back-Bar Elevation (motif: grid-lines, refracted into architectural drawing).** A single wide SVG file, `backbar.svg`, contains the hand-drawn navy-line elevation of the back-bar mirror at 1:50 scale. Forty-two bottle silhouettes are drawn in fine 0.5pt navy strokes against the cream paper. Each bottle is named beneath in 9pt Mulish humanist small caps. The composition is set out on the printed grid of the page — every bottle sits exactly on a grid intersection, every label baseline runs exactly along a grid line. This is **architectural drafting language applied to a cocktail bar**, in the manner of the 1956 *Architectural Forum* showroom drawings of Florence Knoll's interiors. The elevation does not animate. The cursor passing over it casts the warm tungsten pool from above — and the pool's path along the bottles is the *bartender's eye following the guest's hand*. This is the cursor-follow pattern (78% in the registry) reframed: cursor-follow is not a gimmick here, it is **the gaze of an attentive host**. **Decorative grammar — what is consistent across all four families:** Every line is hand-set on the printed grid. Every fill respects the cream-paper substrate via multiply blending. Every stroke is either banquette-navy `#0F1B36`, brushed-nickel `#8A9CB8`, or brass `#C8B58A`. There are no drop-shadows in the conventional CSS sense — every shadow is a 0.5px navy ribbon-offset (the typewriter-ribbon ghost) at 8% opacity. There are no gradients in the conventional CSS sense — gradient (97% in the registry) is **entirely absent from the surface treatment**, except in two places: the warm tungsten pool that follows the cursor (a single radial gradient), and the right-edge sun-fade printed onto the stationery PNG. The page is otherwise **flat-fill mid-century printing**, the way an actual 1957 letterpress cocktail menu was actually printed: solid ink, solid paper, no gradient, no shadow, no glow, no halo. ## Prompts for Implementation Build cosplay.bar as **one HTML document, one CSS file, one ES module, and three asset files**: `stationery.png` (1024×1024 tiling paper-aged texture, ~38kb), `monogram.svg` (the engraved C·B guilloché), and `backbar.svg` (the wide back-bar elevation with forty-two bottle silhouettes). The seven costume silhouettes and the six cocktail-glass icons are inlined as SVG in the HTML — not loaded externally — because they need to receive the warm-tungsten cursor-pool fill through a single shared CSS variable. No framework. No bundler. No Lottie. No WebGL. No canvas. No video. No webfont self-host (use Google Fonts CDN). The whole experience is **static SVG composition + one tiling paper PNG + a single cursor-driven CSS custom property + one IntersectionObserver for the section-opener spring underlines**. Bias every implementation decision toward **stillness, warmth, and the physical fact of a single cream sheet of stationery on a navy-leather banquette under a single warm tungsten pendant**. Refuse every implementation decision that would make the page feel like a SaaS landing, a convention catalog, an anime fan site, a cocktail-shop e-commerce, or any other registry default. There are no CTAs. There are no buttons. There are no pricing blocks. There are no stat-grids. There are no testimonial carousels. There are no product cards. There are no "trusted by" logos. The page is a **menu read in one sitting**, and the only interaction is the cursor moving across it. **Storytelling through scroll.** The reader's vertical scroll is the unfolding of the cocktail menu, top to bottom. As the reader passes each section threshold (letterhead → greeting → aperitifs → coat-check → back-bar → hours → bottom edge), an IntersectionObserver fires a single spring-eased animation **on the section opener's hand-drawn navy fountain-pen underline** — the underline draws itself from left to right in 1.4 seconds with `cubic-bezier(0.34, 1.56, 0.64, 1)` (a soft overshoot spring of about 6%). No fade-ins. No slide-ins. No translate-ups. The text is *already there* — only the underline animates, the way a host's pen draws under the next item on the bill as the meal proceeds. The spring (78% in the registry) is used exactly **once per section**, not on every element; this is the inversion of the registry's typical per-element stagger. **Cursor-driven warm tungsten pendant.** The single most important interaction. Two CSS custom properties are bound to the cursor: `--cursor-x` and `--cursor-y` (in viewport pixels, updated with `requestAnimationFrame` throttling at 60fps with a 0.18 lerp coefficient — *not* 1.0; the pendant has weight, it lags behind the cursor by about 80ms with a soft trailing ease, the way an actual swinging tungsten pendant trails behind a moving hand below it). A single full-viewport fixed `
` carries a 240px-radius radial gradient from `#F4D9A8` at 22% opacity center to transparent at edge, positioned at `(--cursor-x, --cursor-y)` with `mix-blend-mode: multiply` over the cream paper. The pool is the warm pendant. It is the only motion on the page besides the section underlines and the very slow 12-second oscillation of the paper-fold creases. The pool **does not appear over body text** — body text sits at z-index above the pool — only over the costume silhouettes and the back-bar bottles. This is the cursor-follow pattern (78% in the registry) reframed as **the bartender's pendant following the guest's hand across the menu** rather than as a generic glowing trail. **Costume coat-check interaction.** When the cursor is within 180px of any one of the seven costume silhouettes, that silhouette's inner `` fades from opacity 0 to 0.22 over 320ms with `cubic-bezier(0.4, 0, 0.2, 1)`. The lit fill is `#F4D9A8`. Only one silhouette is lit at any given moment — the closest one to the cursor wins. This is computed in the shared rAF loop, not with per-element listeners, so the cost stays at one event per frame. The interaction is **read as "the pendant has just swung over that costume,"** not as "this card is hovered." The seventh hanger (the empty one) has no lit layer — it stays cool navy, because no one has hung anything there yet, and that is the small open emotional door of the page. **Back-bar elevation hover.** The forty-two bottle silhouettes in `backbar.svg` each have a `` with a `` of `#F4D9A8` at opacity 0. As the cursor traverses the elevation, the rAF loop computes the cursor's horizontal position in elevation-coordinates and sets opacity 0.22 on the nearest bottle, with a 60px falloff to neighbors. The result is a single warm pool walking along the back-bar, lighting bottles as it passes — exactly the path a bartender's eye traces when surveying the shelf for the right pour. **Fountain-pen flourish under the greeting.** Below the greeting paragraph is a single SVG `` of length ~340 units, drawn as a 1.5pt navy stroke. On first scroll into view (IntersectionObserver, threshold 0.6), the path animates `stroke-dashoffset` from 340 to 0 over 1.4 seconds with the soft-overshoot spring easing. After that, the path remains drawn. There is no second animation. The flourish is a *signature*, drawn once. **Paper-fold seam oscillation.** The two vertical paper-crease lines at 33% and 67% of the page width are not animated by JavaScript. They are CSS-animated with a 12-second linear `opacity` keyframe oscillating between 0.04 and 0.07 — slow enough that no reader will consciously notice, present enough that the page feels *alive in the hand*, the way an actual folded sheet of paper subtly breathes when set down on a banquette. This is the **only background animation on the page**. **Multiply blend mode discipline.** The entire page uses `mix-blend-mode: multiply` against the cream stationery PNG, applied at the section level with 92% opacity. This forces every navy line, every brass fill, every nickel rule to *bleed through the paper* the way real ink bleeds through real paper. It is the single technical decision that does the most work for the mid-century-print feeling. Test it carefully — multiply on a cream substrate is the difference between *a printed menu* and *a webpage with a paper background*. **Type rendering discipline.** Mulish at 14px on cream paper at 92% multiply opacity needs `text-rendering: geometricPrecision` and `-webkit-font-smoothing: antialiased`, but **not** `font-smoothing: subpixel-antialiased` — subpixel AA on a multiplied cream substrate produces a faint warm color fringe that reads as *cheap inkjet*. The page must read as *letterpress*: clean navy edge, no fringe. **Refusals — what this page must never become.** No carousel. No modal. No popup. No accordion. No tabs. No sticky header. No floating CTA. No "back to top." No cookie banner styling that breaks the paper metaphor (if a banner is required, render it as a small navy bar along the bottom edge in the same Mulish humanist small caps — never a centered modal). No emoji. No lucide-icons. No font-awesome. No anime-line-art. No convention-floor product cards. No "Buy Now." No "Subscribe." No "Get Early Access." The site does not sell anything. It is **a sanctuary**, not a funnel. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **Cosplay reframed as the after-hours quiet of working performers, not as convention floor or anime fandom.** Every other treatment of the word *cosplay* in this registry would default to one of three things: the dopamine-neon convention-card-grid, the kawaii hand-drawn anime-mascot, or the cyber-glitch holographic. cosplay.bar refuses all three. The site is **a 1957 mid-century cocktail bar where costume professionals and amateurs come to take the wig off and have a quiet drink**. The word *cosplay* is read as *cos·play* — the play of the costume, the work of being someone — and the room honors the people who do that work. This is the single largest semantic differentiator in the site, and every other design decision (palette, typography, palette, motif, voice) flows from it. 2. **Mid-century aesthetic at 10% in the registry, claimed without nostalgia kitsch.** Mid-century is at 10% — meaningfully present but not crowded. The cliché trap of mid-century is *Mad Men* nostalgia: orange and avocado palettes, oversized Cooper Black headlines, atomic-age starbursts. cosplay.bar refuses every one of those clichés. It claims mid-century instead through the *quiet editorial idiom* of the period — the Knoll showroom catalogues, late *Holiday* magazine, the Florence Knoll back-bar elevations, the warm-humanist Optima-lineage typography, the brushed nickel and aged brass under tungsten. The mid-century here is the **mid-century of the working bar after midnight**, not the mid-century of the suburban cocktail-party cliché. 3. **Navy-metallic at 2% — claimed warmly, not corporately.** Navy-metallic in the registry's prior uses tilts toward chrome-cool corporate fintech or sci-fi-hud. cosplay.bar grounds navy-metallic in **leather-warmed banquette navy and brushed-nickel-and-aged-brass-under-tungsten**, never digital, never cold. The palette anchor is navy-on-cream, not navy-on-black, and the metallic is brushed (warm) rather than mirrored (cold). This single inversion — warm-grounded navy-metallic — is what allows the palette to carry the **warm-inviting** tone without slipping into the corporate-fintech default. 4. **Paper-aged at 2% — claimed as the entire physical metaphor of the site, not as a decorative filter.** Paper-aged in the registry's prior uses is almost always a Photoshop overlay on top of an otherwise-digital design. cosplay.bar inverts this completely: **the entire page is a single sheet of cream stationery**, and every element is composited via `mix-blend-mode: multiply` onto that paper. Paper-aged is not a filter on top of the design; paper-aged is the *substrate for which the design is composed*. Every navy line bleeds through the paper. Every brass fill bleeds through the paper. The page would not exist without the paper. This is the strongest formal commitment in the design. 5. **Grid-lines at 2% — claimed as printed reading-paper grid, not as sci-fi data overlay.** Grid-lines in the registry's prior uses are almost always futurist HUD overlays or tech-aesthetic data-grid backgrounds. cosplay.bar reads grid-lines as **the printed graph rule on accountant's ledger pads and 1958 cocktail-menu underpapers** — visible only at 7% opacity, organizing the page silently the way real paper grid silently organizes real handwriting. The same grid then *constructs* the engraved monogram itself: the C·B mark is a guilloché of crossed grid-lines. Grid-lines as quiet structure, then grid-lines as engraving — neither use exists elsewhere in the registry at this depth. 6. **Cursor-follow at 78% — claimed as the bartender's pendant following the guest's hand, not as a generic glowing trail.** Cursor-follow is one of the most overused patterns in the registry. cosplay.bar accepts the pattern but **reframes it semantically**: the cursor pool is not a trail, not a sparkle, not a glow. It is a single warm tungsten pendant pool that lags 80ms behind the cursor with rAF lerp easing — the way an actual swinging pendant trails the hand below it — and it lights costume silhouettes and back-bar bottles in the path of the gaze, *as the host's eye lights what the guest is looking at*. The pattern is the same; the meaning is entirely different. 7. **Full-bleed at 91% — claimed as a single sheet of paper, not as an edge-to-edge hero photograph.** Full-bleed almost always means a giant photograph. cosplay.bar uses full-bleed to mean **the entire viewport is one continuous unbroken sheet of cream stationery, viewed from directly above, scrolled vertically as the menu is unfolded**. There is no hero. There is no banner. There are no banding sections. The page is *one page*, top to bottom, and the navy banquette beneath it is visible only as a 12-pixel inner shadow at the viewport edge. 8. **Photography at 98% in the registry — entirely refused.** Zero photography. Zero stock. Zero 3D. Zero anime line-art. The exclusion of photography is the largest single deviation from the registry, and it is a load-bearing decision: the site is *printed*, not photographed. The mid-century cocktail menu was printed by letterpress on cream stock. The site is the same. 9. **Humanist typography at 45% — claimed via Mulish, not Inter.** The registry default for humanist is overwhelmingly Inter. Mulish is a deliberate alternative — warmer, lower x-height, slightly inked terminals, in the Optima-lineage humanist tradition — and it carries the warm-inviting tone in a way that Inter cannot. Cormorant Garamond as a single italic accent and IBM Plex Mono as a single tabular accent complete a tight three-typeface system that refuses the registry default of Inter + Space Grotesk. 10. **Warm-inviting tone at 23% — claimed as an honest concierge greeting, not as a marketing hug.** Warm-inviting in the registry sometimes slips into saccharine SaaS ("Welcome friend!"), or into pastoral-romantic which is a different tone entirely. cosplay.bar grounds warm-inviting in **the voice of a mid-century concierge addressing a guest who has just hung up a heavy coat at 11:47 p.m.** — low full sentences, no exclamation marks, no second-person sales, treats the reader as someone who has been working hard and is welcome here. **Chosen seed (from assignment):** aesthetic: mid-century · layout: full-bleed · typography: humanist · palette: navy-metallic · patterns: cursor-follow · imagery: paper-aged · motifs: grid-lines · tone: warm-inviting. **Avoided patterns from frequency analysis:** photography (98%, refused entirely), gradient (97%, used only for the cursor pool and the right-edge sun-fade — nowhere in surface treatment), parallax (95%, refused entirely — the page is one flat sheet), mono typography (96%, used only for tabular figures, never as the body face), warm palette generic (96%, claimed specifically as warm-grounded navy-metallic rather than as warm-earthy or warm-honeyed), card-grid (77%, refused — the menu is set in two-column hand-set arrangement, not cards), centered (82%, refused — the layout is offset to the printed grid of the paper, never centered), magnetic (68%, refused — there is no magnetic snap, only soft pendant-lag), stagger (75%, refused — section underlines fire once per section, never per-element), Inter (registry default for humanist, refused — Mulish carries the warmer humanist axis required for mid-century print).