# Design Language for MasqueradeProtocol.com ## Aesthetics and Tone MasqueradeProtocol.com is a **botanical herbarium of stolen faces** — a nostalgic-retro field guide pretending to be a 1968 Venetian botany monograph that has been left in a sun-dried terracotta courtyard for fifty-eight summers. The premise is structural, not decorative: every "protocol step" of the imagined masquerade ceremony is rendered as a *pressed botanical specimen*, complete with collector's tag, latitude/longitude coordinates, and brittle paper edges. The mask is the flower; the flower is the mask. Carnival of Venice meets Linnaean taxonomy meets a mildly-warped paperback edition of *Il Carnevale Delle Maschere Botaniche* discovered in a Trieste used-book stall. The mood is **wistful, dusty, slightly conspiratorial**. Imagine running your finger across an iron-gall-ink illustration of a *Bauta-flower* and feeling the ghost of a 1789 procession. The site never shouts. It hums in the lower octave of a harmonium, in the language of catalog numbers and faded ribbon-binding. Where peer designs go either lush-tropical or austere-modernist, MasqueradeProtocol commits to **brittle, cataloged warmth** — a dossier-of-the-secret-garden tone, where every interaction is the act of *unfolding a folded specimen page*. The "Protocol" is not software; it is a forgotten ceremonial procedure for botanically ranking masks by their floral analogue. The "Masquerade" is not a party; it is a centuries-old taxonomic conspiracy between gardeners and disguise-makers. The site reads like the conspiracy's archive index, leaked. ## Layout Motifs and Structure The page commits to a strict **F-pattern as the literal anatomical drawing of a leaf** — the F is not eye-tracking shorthand; it is a botanical illustration. A persistent cream parchment background carries a thick rust-colored hand-drawn F-shape (drawn as an SVG path with deliberate ink-bleed `feTurbulence` noise) anchored top-left. The vertical stem of the F is the **midrib of the page-as-leaf**; the two horizontal bars are the **lateral veins** along which all primary content is staged. Secondary content nestles in the negative space like leaf parenchyma between veins. - **Top horizontal bar (the upper vein, 0–18% viewport height)**: The wordmark *Masquerade Protocol* set in expressive variable serif, accompanied by a botanical specimen number (`Spec. №47/MMXXVI`) and a hand-drawn ribbon date-stamp. The bar terminates at 64vw with a dried-pressed pansy SVG that doubles as a navigation toggle. - **Vertical stem (the midrib, 0–100% height, fixed at left 14vw)**: A continuous list of "Protocol Articles" — eleven numbered ceremonial instructions, each rendered as a pressed-flower index card stacked vertically. These cards do not scroll-jack; they remain within the F's left column and the user reads downward as one reads a real F. - **Lower horizontal bar (the secondary vein, 52–66% viewport height)**: The "Mask-as-Specimen" gallery — three to five horizontally arranged botanical plates, each pairing a Venetian mask silhouette with its floral analogue (Bauta = *Verbena officinalis*, Volto = *Anemone coronaria*, Moretta = *Atropa belladonna*, etc.). - **Negative parenchyma (the white-ish space between veins)**: Marginalia. Floating fragments of liturgical Italian, hand-numbered footnotes, sketched stamens and pistils, occasional iron-gall ink blotches that drift on a 0.003Hz spring oscillation. There is no scroll-jacking, no parallax sections, no full-bleed video. The layout is a **single-spread botanical plate** approximately 1.6 viewport heights tall — the entire F must be apprehensible without scrolling, and the user descends only to read the deeper Articles of the Protocol. The right edge of the page (16% width) is left as a **deliberate untouched margin**, mimicking the unbound deckle-edge of an antique folio. No content shall ever cross into that margin; only the occasional fern-frond drifts in. This is a deliberate departure from the dominant `full-bleed` and `centered` patterns in the batch, and a deliberate avoidance of `card-grid` and `dashboard`. The F-pattern in this design is **load-bearing botanical anatomy**, not a reading-flow metaphor. ## Typography and Palette **Typefaces (Google Fonts only):** - **Fraunces** (variable: opsz 9–144, wght 100–900, SOFT 0–100, slnt -10–0). This is the *expressive-variable* commitment. Used for the wordmark at clamp(96px, 12vw, 196px) with `font-variation-settings: 'opsz' 144, 'wght' 320, 'SOFT' 88, 'slnt' -4` to evoke the swooning soft-italic of 18th-century engraved botanical labels. As the cursor approaches the wordmark within 200px, `wght` springs from 320 → 720 and `slnt` from -4 → -9, as if the letters are leaning toward the reader to confess. Article headings use Fraunces opsz 24, wght 480, SOFT 50 at 32px. The variable axes are **animated continuously** at 0.04Hz on the wordmark, breathing between two presets so the title feels alive, like ink swelling on damp parchment. - **EB Garamond** (400 italic, 500). The body voice. Used at 17.5px / 1.62 line-height for the eleven Protocol Articles, set with optical-style ligatures and small-caps for Latin specimen names. Italic by default for marginalia footnotes, roman for the imperative "thou shalt" article body. - **DM Mono** (400, 500). The cataloger's hand. Reserved exclusively for catalog numbers, latitude/longitude tags, taxonomic prefixes ("subsp.", "var.", "f."), and the bottom-of-page collation footer. 12px, letter-spacing 0.04em, color always shifted to a faded `#7A4528`. Note: Fraunces is *not* shared with any other batch design's commitment. Sibling designs leaned on Bebas Neue, Cormorant, Inter, Space Grotesk; Fraunces with full variable-axis exploitation is this site's exclusive territory. **Palette — terracotta-warm, eight tones, sun-faded gradient:** - `#E8D9C0` — *Carta Vergata*, the parchment ground. The dominant 62% surface tone. - `#C66B3D` — *Cotto Veneziano*, the load-bearing terracotta for the F-shape itself, ribbon stamps, and Article numerals. - `#9A3A1F` — *Iron-Gall Rust*, used for botanical line-art strokes and the vertical midrib outline. - `#3F2418` — *Cinder Bistre*, the body-text ink. Never pure black. - `#D8A66B` — *Saffron Ochre*, the highlight tint for hovered Article cards and pressed-petal undersides. - `#6E7A4A` — *Verde Erbario*, the only cool tone. Used sparingly (≤6% of pixels) for leaf-stem strokes, fern fronds, and the single accent dot in the navigation pansy. - `#F2E8D5` — *Crema Pagina*, the slightly-lighter card surface for the eleven Articles, with a subtle inner-shadow to imply pressed-paper depth. - `#7A4528` — *Sepia Catalogo*, used only for DM Mono catalog numerals. The palette deliberately omits any pure white, any pure black, and any blue. The single "cool" accent is muted herbarium green, never sky or water. This avoids the gradient/muted/warm trifecta that dominates the batch by committing instead to a **pigmented, opaque, dye-from-roots palette** with no gradient interpolation anywhere. ## Imagery and Motifs **Imagery substrate: noise-texture, deliberately and entirely.** Every surface — parchment, card, ribbon, even the F-shape itself — is procedurally textured with a layered SVG `feTurbulence` filter tuned to evoke *foxed paper*: tan-spotted, sun-bleached, occasionally water-rippled at the margins. The recipe: - baseFrequency 0.62 (fine paper grain) layered with baseFrequency 0.018 (slow continental foxing blooms), `numOctaves` 3, then `feColorMatrix` clamping to the terracotta palette so the noise never breaks the warm-earthen tonal contract. - Foxing blooms appear at four fixed points on the page (top-right corner, lower-left margin, behind Article VII, and at the spine of the lower horizontal vein) and **slowly migrate** at 0.001Hz — imperceptible to a casual viewer, but visible as drift to a careful one over a 16-minute reading. - A faint *ink-bleed halo* surrounds every glyph and every botanical line: a 1.5px Gaussian blur at 22% opacity in `#9A3A1F`, simulating iron-gall ink's slow capillary spread on rag paper. **Motifs — cultural, specifically Venetian-Botanical hybrid taxonomy:** The site's iconography is a wholly invented **Mask-Flower Concordance**. Eight original SVG plates, each ~280×360px, hand-drawn in the visual idiom of an 1850s *flora illustrata* — single hairline contours, hatching for shadow, stippling for texture, no fills: 1. **Bauta-Verbena** — the ghostly white Bauta mask shown as the calyx of a verbena, with the Bauta's projecting chin rendered as the flower's nectar-spur. 2. **Volto-Anemone** — the full-face Volto becomes the corona of *Anemone coronaria*; six tepals radiate from the eye-holes. 3. **Moretta-Belladonna** — the silent black servant-mask shown as the dark berry of *Atropa belladonna*, lethal and mute. 4. **Colombina-Columbine** — the half-mask half-flower; *Aquilegia vulgaris* whose nectar-spurs become the mask's feather plumage. 5. **Medico della Peste-Foxglove** — the plague-doctor's beak as the bell of *Digitalis purpurea*, rendered as a cautionary specimen with toxicity glyph. 6. **Arlecchino-Harlequin Tulip** — diamond-patterned petals of a broken-tulip, virused and beautiful in the Dutch tulip-mania sense. 7. **Pantalone-Pomegranate** — the avaricious mask grafted onto the seeded chambers of a halved pomegranate. 8. **Zanni-Zinnia** — the simple servant mask as a humble zinnia, the floral commoner. Each plate is signed with a fictional botanist's monogram (`L.V. del.`) and dated to a year between 1789 and 1923. Each plate carries a four-corner specimen tag listing fictional collection coordinates in Venetian latitude (always 45°26′N, varying minutes) and a Linnaean three-part name with deliberately-awkward fictional epithets. **Decorative borders:** Hand-inked corner *fleurons* in the four page corners, drawn as twining ivy with one tiny carnival-mask hidden in each — the user must hover or lean in to find them. A fifth hidden mask-flower exists in the foxing bloom behind Article VII; finding it triggers the entire palette to *very subtly* desaturate by 4% for 12 seconds, as if the page has held its breath. **No photography. No 3D renders. No gradient meshes. No glassmorphism. No neon. No glow.** ## Prompts for Implementation Build this as a **single-document botanical folio** — one HTML file, one CSS, one JS, no framework dependencies. The page is approximately 1.6 viewport heights tall; the user finishes the experience in roughly 90–120 seconds of slow reading. There is no hero video, no pricing block, no statistic grid, no testimonial carousel, no CTA banner. There is one quiet button at the very bottom of the F's vertical stem labeled "*Apporre il sigillo*" (Affix the seal) which, when pressed, plays a 1.4-second wax-seal animation and reveals the eleventh and final Protocol Article in a slow paper-unfolding spring. **Animation directives — the spring pattern as botanical respiration:** The site commits to **spring physics as the only motion language**. No linear easing, no cubic-bezier curves elsewhere. Every motion uses an underdamped spring with stiffness ~120, damping ~14, mass ~1, producing a *living-paper* settle of 1.6 oscillations before rest. Specifics: - **Wordmark variable-axis breathing**: 0.04Hz sine modulation between `wght 320 / SOFT 88` and `wght 420 / SOFT 60`. The breathing is NOT a spring but a steady respiration; it is the page's heartbeat. - **Article cards**: each pressed-specimen card on the vertical midrib enters with a stagger (140ms apart) on a spring. They do not fade or slide in; they **press downward** from above as if a curator's hand had just laid each one onto the page, with a 12px overshoot and 1.4 settle oscillations. - **Cursor-proximity Fraunces wght/slnt shift**: as the cursor enters a 200px radius around any heading, the variable axes spring (not lerp) toward the leaning preset. As the cursor leaves, they spring back, overshooting once. - **Botanical plate hover**: each Mask-Flower plate, on hover, rotates -1.4° on a spring with a 220ms delay (as if a finger lifted the corner of a tipped-in print), and a 22% opacity rust-colored *catalog tag* springs out from beneath the lower-right corner. - **Foxing bloom drift**: the four foxing blooms drift on independent springs around their anchor points with stiffness ~6, damping ~2.4 — extremely slow, almost imperceptible, completing one orbital pass every ~9 minutes. - **Wax-seal reveal**: pressing "*Apporre il sigillo*" triggers a 1.4-second sequence: ribbon unfurls (spring), wax drops (spring with bounce), monogram impresses (scale spring 1.18 → 1.0). Article XI fades in beneath with a slow 700ms paper-unfolding spring on `clip-path`. **Storytelling spine:** The user encounters, in order: (1) the wordmark and specimen number, (2) the eleven Articles of the Protocol — each a single sentence in EB Garamond italic, e.g., *"Article III: No mask shall be assigned to a flower whose petals exceed seven, save by dispensation of the Council of Hortus Maximus,"* (3) the Mask-Flower Concordance gallery on the lower vein, (4) the marginalia footnotes scattered in the parenchyma (numbered 1–23, each one a single-line botanical fact or carnival rumor), (5) the wax-seal final reveal. The narrative is **the slow unfolding of a fictitious botanical-conspiratorial dossier**, not a marketing funnel. **Content tone for written copy:** - All Article body text in archaic-formal English with occasional Italian phrases. Imperative mood. No exclamation marks. Use of long em-dashes encouraged. - All catalog numerals in DM Mono, formatted `Spec. №47/MMXXVI · 45°26′07″N · 12°20′12″E`. - All footnotes signed with fictional initials in DM Mono. - No present-day vocabulary. No words like "users", "platform", "solution", "experience", "scalable". The site never acknowledges it is software. **AVOID (per frequency analysis):** - **AVOID** photography (90% saturation in the batch — this site uses zero photographic imagery). - **AVOID** parallax (80% saturation — the F-pattern here is static; only the foxing blooms drift). - **AVOID** gradient palettes (90% saturation — this design uses flat, opaque, pigmented terracotta tones). - **AVOID** mono-typography as the dominant face (70% saturation — DM Mono is reserved exclusively for catalog numerals, ≤4% of glyphs on the page). - **AVOID** full-bleed and centered layouts (70% / 60% saturation). - **AVOID** hand-drawn aesthetic as the *primary* aesthetic claim (70% saturation in the batch; this site's claim is **botanical**, with hand-inked plates as a *secondary* technique, not the headline aesthetic). - **AVOID** CTA-heavy stacks, pricing tiers, statistic grids, testimonial walls, feature comparison tables, marketing newsletters. ## Uniqueness Notes This design commits to specific choices that no other site in the batch may duplicate: 1. **F-pattern as literal leaf anatomy, not eye-tracking metaphor.** The F is a load-bearing botanical illustration drawn in iron-gall rust. Its vertical stem is the page's midrib; its horizontal bars are lateral veins; the white space between is parenchyma. No other batch design treats F-pattern as anatomy. 2. **Botanical aesthetic committed taxonomically, not decoratively.** The site is a fictional herbarium with eight invented mask-flower hybrid species, each given Linnaean three-part names, fictional collector monograms, and Venetian collection coordinates. Other "botanical" treatments in the wider design ecosystem are decorative; this one is structural. 3. **Terracotta-warm palette without any gradient.** The batch is 90% gradient-palette; this site uses flat opaque terracotta dyes with zero color interpolation. The single cool accent (Verde Erbario `#6E7A4A`) is constrained to ≤6% of pixels. 4. **Expressive-variable typography exploited on all four Fraunces axes.** The wordmark animates `opsz`, `wght`, `SOFT`, and `slnt` continuously at 0.04Hz, plus springs to a leaning posture on cursor proximity. No other batch design exploits four variable-axes simultaneously, and Fraunces is not the committed face anywhere else. 5. **Spring physics as exclusive motion language.** The batch uses spring 50% of the time but always alongside fade, parallax, or stagger as competing primaries. This site uses **only** underdamped springs (stiffness 120, damping 14, mass 1) for every interaction, plus one slow continuous respiration on the wordmark. No fade-reveal, no parallax, no scroll-trigger. 6. **Noise-texture as the entire imagery substrate.** The batch uses noise/grain at 20% saturation as a flavor; this site uses procedural foxed-paper noise as the **entire ground**, with four migrating foxing blooms anchored to specific narrative points. The blooms drift at 0.001Hz so the texture is *alive but glacial*. 7. **Cultural motif specifically Venetian-Carnival × Linnaean-botany hybrid.** The Mask-Flower Concordance is an invented taxonomy (Bauta-Verbena, Volto-Anemone, Moretta-Belladonna, etc.) — eight named hybrid specimens, each a hand-drawn SVG plate signed by a fictional 19th-century Venetian botanist. The "cultural" motif in the batch is generic; here it is a precise two-tradition fusion. 8. **Nostalgic-retro tone executed as 1968-found-1789-monograph layered patina.** The site never directly quotes "retro"; instead it commits to a *triple-aged* narrative — a real 18th-century Venetian protocol, recorded in an 1850s botanical monograph, photographed in 1968, scanned today. Every visual decision derives from this layered patina. 9. **Page reads as a folio, not as software.** No vocabulary of present-day digital products. No "platform", "users", "experience". The Italian phrase "*Apporre il sigillo*" is the only call-to-action, and it triggers a wax-seal reveal of one final article — a sealed-letter mechanic, not a button-click. 10. **Single hidden 4% desaturation easter-egg.** Hovering the hidden fifth mask-flower in the foxing bloom behind Article VII triggers a 12-second 4% palette desaturation — as if the page itself held its breath. No other batch design includes a *negative* color event (most use color flares; this uses a color withdrawal). **Chosen seed (from assignment):** `aesthetic: botanical, layout: f-pattern, typography: expressive-variable, palette: terracotta-warm, patterns: spring, imagery: noise-texture, motifs: cultural, tone: nostalgic-retro`. **Frequency-aware avoidances:** photography (90% in batch), parallax (80%), gradient palette (90%), mono-as-dominant-typography (70%), full-bleed (70%), centered (60%), card-grid (40%), hand-drawn-as-primary-aesthetic (70%). This design positions itself in the underused quadrant: f-pattern (untouched), botanical (untouched as committed aesthetic), spring-as-sole-motion (50% co-occurrence reduced to 100% sole), noise-texture-as-substrate (10% in batch, here at 100%), cultural motif (10% in batch, here as Venetian × Linnaean fusion).