# Design Language for MasqproT.com ## Aesthetics and Tone MasqproT.com — read aloud as "Masque Pro T," the working shorthand for the **Masquerade Protocol** — is staged as a benign-looking technical specification for an absurd ceremony: a network handshake disguised as a Venetian carnival, a mask exchange written in RFC dialect. The aesthetic is **editorial**, the way an old issue of *Whole Earth Catalog* or a Métahaven monograph is editorial — long-form, footnoted, generous with margins, suspicious of headlines, in love with the apparatus of citation. Every page reads like the pre-print of a paper nobody asked for, signed by an anonymous committee that prefers to remain anonymous. The mood is **whimsical-creative**: studious but never solemn. Picture a postdoc who has filed their thesis and is now writing the appendix as a bedtime story. The protocol is real; the diagrams are real; the worked examples are real; but the diagrams are also drawn by a generative plotter that has decided every state machine deserves a tiny tassel, every sequence diagram needs a domino mask in the margin. Footnotes argue with the body text. Captions are funnier than they need to be. A figure label reads "Figure 3 — Bow Tied. See also: shoelace, boa constrictor." Inspirations: the *MIT Press* design vernacular of the 1970s (squared serifs, vast white space, schematic plates pasted on tissue overlays); the **printed RFC** form factor (numbered sections, ASCII diagrams, the Internet-Draft watermark); Saul Bass's storyboards for *Vertigo*; the early Bell Labs internal memoranda; lace pattern cards from a Jacquard loom; *Codex Seraphinianus* taxonomy plates; and the algorithmic ink pieces of Vera Molnár and Manfred Mohr, where the ruler is the pen and the pen has opinions. The result should feel like opening a textbook and finding it whispering. The tone never panics, never sells, never closes — it discloses, slowly, one footnote at a time, with the air of a friend who genuinely thinks identity protocols are the funniest thing ever invented. ## Layout Motifs and Structure The whole site is a single **immersive-scroll** monograph: one continuous vertical reading lane, eleven chapters deep, no horizontal navigation, no sticky header chrome, no hamburger menu. Scrolling is the only navigation gesture. The reader is reading a paper. The page is built on a strict **editorial 14-column grid** — but only 7 of the columns carry primary text. The remaining 7 are an asymmetric **margin gutter** on the right: a 38-vw wide channel reserved for footnotes, schematic diagrams, generative ornaments, and the masquerade itself. The body lane sits at columns 1–7 (max-width 62ch); the apparatus lane sits at columns 9–14. Column 8 is permanently empty — a 4vw "moat" that the eye reads as silence. Structure of the eleven chapters: 1. **Frontispiece** — full viewport, 90% empty. A single domino mask drawn in 1px circuit-board strokes, rotating one degree per scroll-line. Title: "MASQUERADE PROTOCOL / A Specification for the Polite Withholding of Identity / Internet-Draft / Expires: never." 2. **Abstract** — single column, justified, hyphenated, three paragraphs. Marginal note: a generative ribbon being tied in real time. 3. **Status of This Memo** — pastiche of the IETF boilerplate, but the boilerplate slowly becomes self-aware over four scrolls. 4. **§1 Introduction: On Pseudonymity as Manners** — the body text begins. Footnotes start asserting themselves in the margin, with little circuit-board borders that draw themselves on viewport entry. 5. **§2 Definitions** — a glossary set as a *progressive-disclosure* card stack: each term collapsed to its name; clicking or scrolling past unfurls the definition with a fold-out animation as if a tab is being lifted on a paper toy. 6. **§3 The Mask State Machine** — full-bleed schematic. A circuit-trace diagram of the three masquerade states (CLEAR → MASKED → REVEALED-WITH-CONSENT) drawn in animated SVG, paths self-routing as scroll progresses. 7. **§4 Wire Format** — ASCII byte-diagram, monospaced, with a margin sidebar of generative-art "wax seals" that bloom one per packet field. 8. **§5 Worked Example: The Carnival** — a long inline narrative where two anonymized parties (Alice-with-feathers, Bob-with-beak) exchange tokens. Dialogue is interleaved with hex dumps. Margin holds animated silhouettes mid-bow. 9. **§6 Security Considerations** — written as a list of polite warnings. Each warning is a card that *only* discloses its body when you scroll past — until then it shows only its title and a redacted black bar that erodes into circuit lines as it disappears. 10. **§7 Acknowledgements** — fictional contributors with plausible-sounding names; each name is a hover-revealed cipher. 11. **Colophon / Errata** — typographic specimen, last commit hash, generative seed of the day, and a tiny "thank you for reading this far" set in italic. Between chapters, a **circuit-trace divider** draws across the full width: a 1px line that begins at the left margin, encounters obstacles (a comma, a footnote anchor) and routes around them like a PCB autorouter. The divider is the only "section break" visual; no big numbers, no parallax hero images. Reading rhythm: long body sets, sudden full-bleed schematic, return to long body. The eye is asked to *read*, not to *graze*. Average chapter length: 600–900 words of actual prose. This is unapologetically a reading site. ## Typography and Palette **Typefaces — Google Fonts only.** - **Newsreader** (variable, weight 200–800, optical size axis) — primary body. Set at 18px, leading 1.62, optical size 18 for body and 36 for chapter heads. Newsreader's variable optical size is exploited so that pull-quotes set in 32px don't feel like a different font, only a different breath. Body is justified with hyphenation, in the editorial tradition. - **JetBrains Mono** (variable, weight 100–800) — every numeric, every code block, every byte diagram, every footnote anchor numeral, every state-machine label, every URL. Mono is the *protocol's* voice. Set at 15px in body, 13px in margins. Italic mono is reserved for hex literals and pseudo-RFC keywords (MUST, SHOULD, MAY in §1.2 sense). - **Fraunces** (variable, weight 100–900, soft and wonky axes) — display only, used exactly four times in the entire monograph: title, the four roman-numeral act-breaks. Fraunces is dialed soft +50, wonky +30 at chapter heads, returning to soft 0, wonky 0 by mid-paragraph — a barely-perceptible sobering. - **Caveat** (handwritten, weight 400) — used once, only in a single hand-written marginal note in §5 ("the carnival is over by sunrise"). One use. The scarcity is the point. **Palette — gradient, eight stops, two ramps that converge:** - `#0E0B14` ink-violet (deepest body text on light, deep background on dark) - `#2A1F3D` plum-shadow (margin notes, subdued chrome) - `#5B3A8A` electric-iris (footnote markers, link underline base) - `#A26AF0` carnival-lilac (mid-gradient pivot, ribbon accents) - `#F0BFD6` masquerade-rose (highlight wash, generative-art glow) - `#FFE9C5` champagne-paper (paper background of the document) - `#FAFAF6` gallery-bone (alt page surface, modal overlays) - `#5DE4C7` circuit-mint (the *one* signal-green, used only on live circuit traces and active scroll progress; never decorative, always semantic) Two gradient ramps: - **Ribbon Ramp** (chapter dividers, hover states): `#0E0B14` → `#5B3A8A` → `#A26AF0` → `#F0BFD6` at fixed stops 0% / 35% / 70% / 100%, applied as a 1px-thick conic gradient *on the stroke* of dividers — so the line itself looks like a tied silk ribbon catching light. - **Aurora Margin** (the right-hand apparatus column): a near-imperceptible vertical gradient `#FFE9C5` → `#FAFAF6` → `#F0BFD6` at 0% / 60% / 100%, only 4% saturated. The page surface is not flat; it has a sunrise. The **circuit-mint** is the discipline of the palette: it appears nowhere except where the protocol is *live* — the active scroll-progress line, a token that is currently being transmitted in the §5 worked example, the cursor in a code block. Everything else is the warm violet-to-paper gradient. ## Imagery and Motifs The visual language is **generative-art** anchored to a single motif: the **circuit**. Not circuits as decoration, but circuits as the actual structural grammar of the page. Every divider, every footnote bracket, every margin ornament is generated at page-load by a small autorouting algorithm that lays 1px traces between predefined "pads." The result is the same site every time in *content*, never the same in *ornament* — like a printed book where the dingbats are recut for each copy. Specific generative elements: - **The Frontispiece Mask**: a domino mask whose silhouette is filled with a Voronoi tessellation; each cell of the Voronoi is a tiny circuit, traces routing pad-to-pad inside the cell. Scroll rotates the mask one degree per 100px and re-routes 3% of traces at random — the mask is breathing. - **Circuit Dividers**: between every chapter, a 1px trace drawn left-to-right. The trace has to navigate around the chapter number (set in Fraunces) and the inline footnote anchor (set in JetBrains Mono). Watching the trace solve the routing in 800ms is the chapter break. - **Wax-Seal Bloom**: in §4 (Wire Format), a generative "wax seal" blooms in the margin for each packet field. Each seal is built from radially-arranged circuit traces forming a rosette, stamped in carnival-lilac with a 14% noise-texture overlay (SVG `feTurbulence`, baseFrequency 1.4, single octave). No two seals identical. Twelve fields, twelve seals. - **Tassel & Ribbon Ornaments**: at the head of each chapter, a generative tassel: 18–32 strands of 1px line, each strand a Bezier curve with random end-jitter ±4px, hanging from an anchor point. The tassel sways ±2° in response to cursor X-position within a 240px radius — a magnetic flirt, never aggressive. - **Mask Marginalia**: every fifth footnote in the margin column is decorated with a tiny domino mask glyph (12px), each generated with a different Voronoi seed. The masks are watching the reader read. They never animate, but they are watching. - **The Carnival Silhouettes (§5)**: Alice-with-feathers and Bob-with-beak are drawn as 1px line silhouettes — a feathered tricorn and a plague-doctor profile — both built from the same circuit grammar as the dividers. They face each other across the margin. As §5 progresses they bow, lift masks, exchange a token (a mint-green dot animating from one silhouette to the other), and resume position. - **Noise Skin**: a 3% grain overlay is rendered once per session (SVG noise, regenerated on reload, fixed during scroll) over the entire page surface — the paper is *paper*, not screen. - **No photography. No 3D renders. No icons from a kit.** Every visual artifact is either type or generated 1px line. The motif vocabulary repeats: domino mask, ribbon, tassel, wax seal, circuit trace, footnote bracket, hex byte, bow. These eight elements alone carry the entire visual load. The constraint is the design. ## Prompts for Implementation Build this as a single static HTML document, one long scroll, no SPA, no router. The reader arrives, reads, leaves with ink on their fingers. **Opening**: the frontispiece is the only viewport for the first 100vh. The Voronoi-circuit mask sits centered, 60vh tall, at 18% opacity climbing to 92% over a 600ms entrance fade. The title types itself in JetBrains Mono — `MASQUERADE PROTOCOL` — at 240ms per character with a 1-frame backspace-and-correct on character 7 (the "E" of "MASQUERADE" is briefly typed as "Æ" before correcting itself; this is the only moment of overt whimsy in the opening). The subtitle in Newsreader italics fades in last. There is no CTA, no scroll cue, no arrow. The page knows you will scroll. **Scroll mechanics**: native CSS scroll, no scroll-jacking. Use `IntersectionObserver` (or scroll-driven animations with `animation-timeline: view()`) to fire reveal events. Every reveal is **progressive-disclosure**: the body text of any section is visible from the moment you scroll near it, but the *apparatus* (footnotes, circuit dividers, marginalia, schematic ornaments) is built up one layer at a time as the section enters view. By the time you reach the bottom of a section, the page has *finished writing itself*. Scroll back up: nothing un-renders. The page accumulates. **The progressive-disclosure card stack (§2 Definitions)**: each glossary entry is a single line — term in Fraunces, ellipsis in JetBrains Mono. Hover reveals the full definition in Newsreader, with a `clip-path` polygon animating from a thin horizontal slit to full reveal in 320ms cubic-bezier(0.2, 0.9, 0.3, 1). On touch devices, scroll-into-view triggers the reveal one by one with a 80ms stagger, like dominoes being knocked. **Circuit autorouter**: implement a simple grid-based autorouter in vanilla JS (no library). Place pads at fixed coordinates per divider; the router walks an A* over a 4px grid, prefers straight runs, allows up to two 90° elbows per trace, and renders the path as an SVG `path` element with `stroke-dasharray` animating from 0 to total length over 800ms ease-in-out. On viewport entry, dividers route. On viewport exit, dividers stay routed (do not un-draw). The same algorithm draws the Voronoi-mask interior on load and re-routes 3% of cells per scroll-tick at a maximum 60ms cadence — quiet, never frantic. **Footnote behavior**: footnote anchors in body text are JetBrains Mono superscript numerals (`[1]`). On hover, the anchor draws a 1px circuit-mint trace from itself across the moat (column 8) to the actual footnote in the margin column, which gently lifts 4px and gains a 1px circuit-mint border on its left edge for the duration of the hover. The trace un-draws on hover-out. This is the most expensive interaction on the page; it is also the most rewarding, and is documented in the colophon. **Tassel sway**: each chapter-head tassel reads `mousemove` only when within a 240px radius. Outside the radius, sway returns to a slow ambient ±0.6° at 0.08Hz so the page is never fully still. Use `requestAnimationFrame` and bound to 30fps — this is a reading site, not a game. **Worked example §5 animation**: when the §5 paragraph containing "Alice extends a token" scrolls into view, the silhouettes' bow animation plays once (1.2s, ease-in-out), the mint-green token dot travels from Alice to Bob (700ms cubic-bezier(0.4, 0, 0.2, 1)), Bob's silhouette tips its tricorn (200ms). On scroll-up and re-entry, the animation does *not* replay — once witnessed, always witnessed. **Type animation rules**: Newsreader body is *never* animated. Display Fraunces only animates its variable axes (soft +50 → 0, wonky +30 → 0) on chapter-head entry, over 1.4s. JetBrains Mono is *only* animated where it represents live state — the typing frontispiece, the §5 hex dump streaming in over 600ms, the footer commit-hash incrementing once per minute. Body type is sacred. **Color choreography**: at the very top of the page, the surface is `#FFE9C5` champagne-paper. As the reader scrolls past §6 (Security Considerations), the page background gradually rotates 35deg through the Aurora Margin gradient, ending at `#FAFAF6` gallery-bone by the colophon. Total color travel: 8% chroma shift across 11 chapters. Most readers will not consciously notice. They will feel it. **Cursor**: replace cursor with a 14×14 SVG: a tiny domino mask outlined in 1px circuit-mint, only on `:hover` of footnote anchors, definitions, and the §5 silhouettes. Default cursor everywhere else. Never gimmicky. **No CTA layouts. No pricing blocks. No stat grids. No testimonials. No "Get Started." No "Learn More."** The single act this site asks of the reader is: read to the end and witness one ribbon being tied. The colophon's last line is `EOF — thank you for the masquerade.` set in italic Newsreader. There is no nav back to top. If they want the top, they can scroll. They have the time. The protocol implies it. Performance targets are not the priority; visual fidelity and narrative pacing are. Inline the SVG. Inline the noise. Self-host the noise seed in a `data-seed` attribute. Build it once, deliver it once, let the reader linger. ## Uniqueness Notes Three-plus differentiators this design commits to and other CMassC sites should not duplicate: 1. **The page as a printed RFC, not a landing page.** The structural grammar is `Status of This Memo`, `Abstract`, numbered sections, IETF-style boilerplate played as deadpan comedy. No other CMassC site adopts the Internet-Draft form factor as its skeleton; this is the load-bearing conceit of MasqproT.com and would be plagiarism if copied. 2. **A live circuit autorouter as the page's only ornamental engine.** Every divider, every margin trace, every Voronoi mask cell is drawn at runtime by a small in-browser A* router solving 4px-grid pad-to-pad routing. No CSS borders, no SVG fills imported from Figma — the ornament is *computed* per visit. The routing visibly *thinks* before it draws (800ms of trace-laying per divider). This pairs `motifs: circuit` with `imagery: generative-art` in a way that is mechanically specific, not decorative. 3. **Progressive-disclosure as the *editorial* device, not the UX device.** The site does not hide a marketing CTA behind a click. It hides *footnotes*, *definitions*, *circuit traces*, and *the silhouettes' bow* behind the act of scrolling past them. The reward for scrolling is more reading material, not more buttons. This is the seed `patterns: progressive-disclosure` (currently 0% used in the corpus) executed as bibliographic apparatus rather than collapsible UI chrome. 4. **A whimsical-creative tone delivered through scholarly form.** The jokes are in the footnotes, the captions, the contributor names, and exactly one handwritten Caveat marginalia in §5. The body text never winks. This pairs `tone: whimsical-creative` with `aesthetic: editorial` in a way no other CMassC site has attempted — the corpus has playful sites and editorial sites, none that deliver play *through* editorial restraint. 5. **The Carnival Silhouettes interaction in §5.** Alice-with-feathers and Bob-with-beak — anonymized parties from the protocol's worked example — are rendered as 1px circuit-line silhouettes who bow and exchange a mint-green token *once per session*. Witnessed once, never re-played. No other site in the corpus has a witness-once interaction tied to a narrative beat in body copy. 6. **Mono typography deployed semantically, not aesthetically.** JetBrains Mono is used everywhere a *protocol* speaks (numerals, code, hex, footnote anchors, packet fields) and *nowhere else*. This refuses the corpus-default of mono as "techy decoration" (mono is at 70% saturation in the frequency analysis). Here mono carries meaning: *this glyph is part of the wire format, that glyph is part of the prose.* The reader learns the distinction in the first chapter. **Chosen seed (from assignment):** aesthetic: editorial, layout: immersive-scroll, typography: mono, palette: gradient, patterns: progressive-disclosure, imagery: generative-art, motifs: circuit, tone: whimsical-creative. **Frequency-analysis avoidances** (per `tools/design/frequency.sh` snapshot at design time): - **Avoided** `imagery: photography` (90% saturated in corpus) — replaced entirely with generative 1px line art. - **Avoided** `aesthetic: hand-drawn` (70%) and `glassmorphism` (50%) — neither sketch nor frosted glass appears anywhere in the design. - **Avoided** `palette: muted` and `palette: warm` (both 70%) as the dominant tone; the gradient ramp is intentionally *cool-to-warm* across violet→rose→champagne, not flat-warm. - **Avoided** `patterns: parallax` (80%) — the page uses no parallax depth offsets at all; depth is implied only by the editorial 14-column grid and the moat column. - **Avoided** `layout: full-bleed` (70%) and `centered` (60%) as the default; the layout is *asymmetric editorial* with a permanent right-hand apparatus margin. - **Leaned into** the underused: `patterns: progressive-disclosure` (0% prior), `motifs: circuit` (0% prior), `tone: whimsical-creative` (0% prior), `imagery: generative-art` (10% prior). - **Leaned into but recontextualized** `typography: mono` (70% prior, but here used *semantically* for protocol speech only, not as decorative tech-flavor).