# Design Language for munj.uk ## Aesthetics and Tone munj.uk is the digital strongroom of **The Munj Telegraphic & Cipher Bureau** — a fictional 1924 transatlantic message house that once relayed coded cables between London, Bombay, and New York, and now exists only as a meticulously preserved archive of its own machinery, ledgers, and ciphered traffic. The aesthetic is **high Art Deco rendered as a working bureau, not a jazz poster** — the geometry of the Chrysler crown and the Cunard liner's first-class lounge, but applied to filing-cabinet brass, telegraph keys, code-wheels, and onionskin message slips. The mood is **opulent yet clerical**: lacquered black surfaces, brushed-gold inlay, the hush of a private records vault where every drawer is engraved. Tone is `opulent-grand` crossed with the precision of a `professional` archivist — confident, ceremonious, faintly secretive. Nothing is "for sale"; the site is a guided descent through six chambers of a bureau that closed a century ago, where the visitor is handed a numbered access slip at the door and walked past the relay racks, the cipher room, the pneumatic-tube manifold, the ledger gallery, the recording wax, and finally the sealed dead-letter cabinet. The emotional register is the quiet thrill of being *let in* — a velvet rope lifted, a brass key turned, the smell of machine oil and India ink. ## Layout Motifs and Structure The site is a **single vertical descent of six lacquered chambers**, each one a full-viewport "elevator stop" that locks into place with a soft mechanical settle. Composition follows a strict **sunburst-and-stepped-frame Deco grid**: every chamber is bordered by a 3-step zigguratted frame (think elevator-door inlay), and content sits inside on an asymmetric two-track layout — a **narrow left "index rail"** (engraved chamber number in Deco numerals, a vertical hairline, a one-line brass plaque) and a **wide right "exhibit field"** holding the chamber's artifact and its catalogue prose. The vertical rhythm is metronomic: each chamber is exactly one screen tall, separated by a 2px brushed-gold seam that animates a tiny "floor indicator" lamp as you cross it. There is **no top navigation, no hamburger, no logo cluster, no footer, no sidebar of links** — wayfinding is a single right-edge **elevator panel**: six small inlaid buttons (I–VI in Deco numerals) stacked vertically, the current floor lit warm amber, the rest dark brass; pressing one glides the page with an easing curve that mimics a counterweighted lift. Negative space is treated as *lacquer* — large unbroken fields of near-black with a single artifact floating in a pool of low directional light, never crowded, never gridded into cards. The only "grid" anywhere is the **code-wheel chamber**, where a radial 12-segment sunburst layout briefly takes over the exhibit field. Diagonal stepped corners (45° Deco chamfers) appear on every framed element. Scroll is `immersive-scroll` with snap, layered with subtle `parallax`: the stepped frame sits slightly forward of the artifact, which sits forward of a faint blueprint-grid backdrop. ## Typography and Palette **Type system (Google Fonts only):** - **Deco display face:** `Poiret One` — used for chamber titles and the bureau wordmark, set in wide tracking (`0.18em`), uppercase, hairline weight; its near-circular geometry and elongated terminals are pure 1920s elevator-plate lettering. - **Secondary display / numerals:** `Limelight` — used only for the large Roman chamber numbers (I, II, III…) and the engraved-plaque headings; heavy, theatrical, marquee-grade. - **Body & catalogue prose:** `Cormorant Garamond` (weights 300/400/500, plus italic) — the archivist's voice; warm old-style serif with high contrast, set generously leaded for "vellum-page" calm. - **Machine / metadata face:** `Cutive Mono` — used for cable timestamps, cipher fragments, access-slip numbers, and the floor-indicator readout; typewriter-flavoured monospace standing in for the telegraph register. **Palette (minimum three; six core):** - `#0B0B0D` — Lacquer Black (primary ground, every chamber) - `#1A1B1F` — Graphite Inlay (frame steps, recessed panels) - `#C8A24B` — Brushed Brass Gold (rules, engraving, the wordmark, active lamp) - `#E8DCC0` — Onionskin Cream (catalogue prose, message-slip artifacts) - `#7C6A3A` — Tarnished Bronze (inactive elevator buttons, hairlines, shadow-side of metal) - `#5BA8A0` — Verdigris Teal (single accent — patina on old brass; used only for hover lamps and the code-wheel's live segment) Optional deep accent: `#3A0E12` — Sealing-Wax Maroon (used once, on the dead-letter cabinet's wax seal). ## Imagery and Motifs **One hero artifact per chamber, drawn as crisp SVG line-and-fill in brass-on-black — no photography:** - **Chamber I — The Lobby Plate:** an engraved Deco doorplate, sunburst fan above the bureau name, two stylized lightning bolts (telegraph) crossing beneath; a small "ACCESS SLIP No. ____" tears off and the visitor's randomly-generated slip number types into it. - **Chamber II — The Relay Hall:** a row of seven telegraph relays as stepped brass towers, thin connecting wires that draw themselves left-to-right (`path-draw-svg`), faint electrical pulses traveling the wires on a loop. - **Chamber III — The Cipher Room:** a 12-segment **code-wheel** (concentric Deco rings of letters/numbers) that the cursor can nudge to rotate; one segment glows verdigris as the "key of the day." - **Chamber IV — The Pneumatic Manifold:** a fan of brass tube-mouths arranged in a Deco sunburst; a single message capsule whistles up one tube on scroll-in and clicks home. - **Chamber V — The Ledger Gallery:** an open ruled ledger with Cormorant-italic entries, a brushed-gold corner-rule, and a thin reading-lamp ellipse of light that follows the active line. - **Chamber VI — The Dead-Letter Cabinet:** a tall black filing cabinet with stepped Deco pulls; the bottom drawer bears a maroon wax seal stamped "M"; on the final scroll it does *not* open — it just gleams, and the slip number reappears as a tiny tag tied to the handle. **Recurring decorative motifs:** stepped ziggurat frames, radiating sunburst fans (top of every chamber title), 45° chamfered corners, hairline double-rules in brass, a faint repeating "blueprint micro-grid" backdrop at 4% opacity, Deco "lightning chevron" dividers between prose paragraphs, and a persistent **floor-indicator lamp** in the top-right that lights I→VI as you descend. ## Prompts for Implementation Build munj.uk as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The page is a roughly 90-second guided descent through six chambers of a shuttered 1924 cipher bureau. There is **no CTA, no pricing block, no stat grid, no testimonials, no email capture, no contact form, no FAQ, no logo wall, no newsletter, no cookie banner, no pop-ups**. The only interactive chrome is the right-edge six-button **elevator panel** and the cursor-nudged code-wheel in Chamber III. **Storytelling structure (vertical, scroll-snap, mechanical easing):** 1. **Chamber I — Lobby & Access Slip.** Lacquer-black field; the engraved doorplate fades up; `Poiret One` wordmark tracks open letter-by-letter; a `Cutive Mono` "ACCESS SLIP No. 41203-MUNJ" types into the tear-off (number freshly randomized each visit); one line of Cormorant prose welcomes the visitor and explains they are descending, not browsing. 2. **Chamber II — Relay Hall.** Seven brass relay towers `stagger`-rise from the floor seam; connecting wires `path-draw-svg` themselves; looping electric pulses crawl the wires; prose describes the bureau's busiest night (the 1926 cable storm). 3. **Chamber III — Cipher Room.** The code-wheel assembles ring-by-ring; cursor proximity rotates the outer ring with `spring` momentum; one segment holds steady glowing `#5BA8A0` as "key of the day"; a short cipher fragment in `Cutive Mono` "decodes" character-by-character into a Cormorant sentence. 4. **Chamber IV — Pneumatic Manifold.** Sunburst of tube-mouths draws open; a capsule whistles up on scroll-in (CSS transform + a faint motion-blur smear) and clicks home with a tiny scale-bounce; prose on how a message physically traveled the building. 5. **Chamber V — Ledger Gallery.** The ruled ledger unfolds; a soft reading-lamp ellipse (`radial-gradient` mask) glides down the entries as the visitor scrolls, each newly-lit line `fade-reveal`-ing its Cormorant-italic text; prose on the clerks who kept it. 6. **Chamber VI — Dead-Letter Cabinet.** The black cabinet rises; stepped pulls catch a gold edge-light; the maroon wax seal `pulse`-glints once; the access-slip number reappears as a luggage tag on the bottom handle; final Cormorant line: the bureau closed in 1931, the drawer was never opened, you may leave your slip on the desk. Then a single hairline brass rule and the wordmark, small, at center. End. **Motion language:** everything moves like brass machinery — `spring`/`elastic` settles, never linear; the elevator-panel transitions use a counterweight ease (`cubic-bezier(.7,0,.2,1)`); the floor-indicator lamp animates on each chamber crossing; `parallax` depth of 3 planes (frame / artifact / blueprint backdrop); respect `prefers-reduced-motion` by snapping instead of animating. Sound is **not** used. Bias hard toward the full-screen narrative descent — every screen is one chamber, one artifact, one paragraph, one pool of light. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Art Deco rendered as a *working bureau*, not a Gatsby party.** Where the few other Deco-adjacent sites lean theatrical/luxury-glamour, munj.uk's Deco is clerical and mechanical — telegraph relays, code-wheels, pneumatic tubes, ledgers — geometry in service of *records*, not revelry. It pulls the rare `art-deco-display` typography (3%) and `gold-black-luxury` palette (2%) into a `professional`/archival tone instead of `opulent-grand` decadence. 2. **The "elevator" as the only navigation.** No top nav, no hamburger, no card grid (avoiding the 90% `card-grid` and 84% `centered` conventions) — wayfinding is a six-button inlaid elevator panel and the page literally descends floor by floor with counterweighted easing. Each "page section" is an elevator stop, not a scroll block. 3. **A persistent generated "access slip."** A randomized `Cutive Mono` slip number is issued in Chamber I, follows the visitor as a quiet metadata thread, and returns as a luggage tag on the final cabinet — a tiny continuity device almost no other site in the corpus uses. 4. **Near-black lacquer ground with single-spotlight artifacts.** Rejects the corpus-dominant warm/gradient palettes (98% `warm`, 96% `gradient`) for flat lacquer black + brushed brass + one verdigris accent, lit by directional pools rather than mesh gradients. No photography, no glassmorphism (78%), no hand-drawn (96%) — only crisp brass-on-black SVG line work. **Chosen seed/style:** `art-deco ornate luxury` — interpreted as *aesthetic: art-deco, layout: immersive-scroll, typography: art-deco-display, palette: gold-black-luxury, patterns: spring, imagery: line-illustration, motifs: sharp-angles, tone: opulent-grand*. **Avoided patterns from frequency analysis:** glassmorphism (78%), hand-drawn (96%), photography (98%), card-grid (90%), centered (84%), warm palette (98%), gradient palette (96%), cursor-follow-as-default (89%) — used only the deliberate code-wheel nudge — and the pastoral-romantic/warm-inviting tone cluster.