# Design Language for double-standard.org ## Aesthetics and Tone double-standard.org is **a bilateral botanical conservatory where two opposing climates share a single glass spine** — a Victorian-era *Wardian case* split exactly down its middle by a brass meridian, with one half cultivating a temperate Mediterranean herbarium of measured restraint and the other half cultivating a hothouse equatorial *kunstkammer* of ornamental excess. The thesis is that a "double standard" is not a hypocrisy to be exposed but **a comparative botany of social judgment**: two ecosystems of expectation, both verifiable, both flourishing, both casting shadows on each other through the same glass. The site is the scientific catalog of that conservatory — precise, beautiful, and quietly devastating in the symmetries it lays down side by side. The tone is **elegant-sophisticated** in the unfashionable original sense — not luxury-brand minimalism nor deep-burgundy "premium" tropes, but the patient sophistication of a 19th-century **comparative ethnobotany monograph**: a book that takes 600 pages to demonstrate, through 47 paired plate engravings, that the same fern is poisonous in one valley and sacred in the next. Imagine *Maria Sibylla Merian's Metamorphosis Insectorum Surinamensium* (1705) re-imagined as a critique of social measurement — every plate splits down the middle, every species rendered twice, the captions composed in the slow declarative cadence of a curator who has all the time in the world and none of the patience for cant. There is no anger on this site, and no irony either; the *evidence is so completely gathered* that anger becomes redundant. The mood is **cool, daylit, taxonomic, and faintly heartbroken** — the heartbreak of a botanist who has counted, under glass, every leaf on both sides of a wall that should not have been there. Inspirations explicitly named: the *Code de la Nature* hand-coloured plates of Pierre-Joseph Redouté (the rose engravings, c. 1817–1824); the **bilateral plate compositions** of Ernst Haeckel's *Kunstformen der Natur* (1899–1904) where radiolarians mirror across a vertical axis; the **doubled herbaria of the Schlumberger Collection** (Strasbourg, 1882) where each specimen sheet contains a wild and a cultivated variant of the same species; the *small-multiples comparative chartwork* of William Playfair's *Commercial and Political Atlas* (1786) — but rendered in jewel-toned ink on cream rag paper rather than the customary copper-plate black. The emotional reference is the closing chapter of W.G. Sebald's *Rings of Saturn* read aloud in a humid orchid house at dusk: gentle, encyclopaedic, mournful, formally exact. ## Layout Motifs and Structure The structural commitment is **split-screen at 2% in the registry** — a deliberately underused layout that this site claims as load-bearing rather than decorative. The viewport is partitioned by a single fixed-position vertical brass rule at exactly 50vw, 1.5px wide, occupying 100vh and persisting through every scroll position. This rule is the **conservatory's meridian** — not a divider, but a *measuring instrument*. Every section of the document reads as a paired plate: identical structural geometry on both sides, divergent content. A claim on the left, its mirror claim on the right; a specimen on the left, the same species under inverted social conditions on the right; a data series on the left, its bilaterally-judged counterpart on the right. The viewer's eye is trained, within the first three scrolls, to read **horizontally across the meridian before reading vertically** — the entire reading pattern is rotated 90° from web convention, which is the editorial argument the site is making. The page is composed of **seven paired plates** and one terminal coda, in this order: 1. **Plate I — Wordmark and Meridian.** The two halves of the wordmark, "double" and "standard.", are set on opposite sides of the brass rule at clamp(72px, 9.4vw, 156px). The period belongs to "standard." — a quiet typographic asymmetry that admits the rule is never quite even. 2. **Plate II — The Etymological Herbarium.** Eight specimen cards arranged 4-on-each-side, paired across the meridian: *judgment*, *measure*, *worth*, *standing* — each rendered as a pressed-flower specimen card on the left in temperate cool tones, and as the same word's flowering equivalent on the right in hothouse warm jewel-tones. The right-hand specimen is always 1.04× larger than the left, a deliberate non-equivalence the site never resolves. 3. **Plate III — The Bilateral Data Garden.** A dual small-multiples grid of nine data-viz panels per side (3×3), rendered as ink-drawn botanical plates. Each panel is a comparative chart — a Playfair-style time series, a Sankey of judgment flow, a chord diagram of expectations — and each *left* panel has a *right* twin showing the inverted condition. This is the **imagery: data-viz at 6% — claimed**. 4. **Plate IV — The Cultural Cartouche.** Four ornamental cartouches drawn from four cultural traditions (Persian *toranj* medallion, Bengali *kantha* embroidery motif, Yoruba *adire eleko* indigo stencil, Hellenistic Anthemion frieze) — each cartouche appears mirrored across the meridian and rotated 180°, reading right-side-up on one side and inverted on the other. This is the **motifs: cultural at 5% — claimed**. 5. **Plate V — The Comparative Voice.** A long-form bilingual reading column on each side, set in the serif body face at 17px / 1.62 line-height, where the left column narrates a judgment from one social vantage and the right column narrates the opposite vantage of the *identical* event. The columns scroll-lock to the same vertical rate but have different rhythms; their paragraph breaks deliberately misalign by one or two lines, which the eye registers as quiet dissonance. 6. **Plate VI — The Plate of Hands.** A single full-bleed engraving spanning both halves: two human hands, drawn in the manner of an 1840s anatomical atlas, each holding the same cut flower at different heights. This is the only moment the meridian is overrun — the engraving crosses it, and the brass rule is rendered briefly transparent. 7. **Plate VII — The Index.** A bilateral hand-numbered index of every comparative claim made above, set as a two-column folio table-of-evidence in the manner of a 19th-century botanical monograph's *Index Plantarum*. Each row is a paired claim with citation slots; the citations themselves are deliberately omitted (only the slot numerals remain) — the claim that the evidence is gathered, not displayed, is itself part of the design. 8. **Coda.** A single signed colophon line, centered on the meridian, in the smallest size on the page (11px): "*Catalogued under glass.*" The grid arithmetic is **golden-section across the meridian**: each side is internally divided by a vertical line at 0.382 from its outer edge, yielding two narrow margin columns and two wider reading columns — the four-column rhythm reads as a folded folio when the eye crosses. Vertical rhythm is fixed at a 28px baseline, every element snaps. There is no card-grid (80% in the registry — explicitly avoided), no full-bleed scrolling hero (92% — avoided except for Plate VI which earns its violation), no centered single-column composition (80% — avoided), and no asymmetric break (53% — *the entire premise rejects asymmetry; this site is symmetric to a fault, and the fault is the point*). ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Cormorant Garamond`** (weights 300, 400, 500, 600, 700; italic at 400 and 500). This is the principal display and body face, claiming the **typography: serif-classic at 2% — claimed**. Cormorant is Christian Thalmann's 2015 reinterpretation of Claude Garamont's 1530s romain — an unusually delicate revival, drawn deliberately too thin for body text in most uses, which is *exactly* why it suits a botanical monograph: the strokes read as engraved hairlines rather than printed letterforms. Used for the wordmark at clamp(72px, 9.4vw, 156px) in weight 500 italic, for plate titles at clamp(28px, 2.4vw, 42px) in weight 400 small-caps via OpenType `smcp`, and for body reading at 17px / 1.62 line-height in weight 400. The italics are used liberally for Latin specimen binomials (*Paris quadrifolia*, *Mimosa pudica*) and never for emphasis. - **`EB Garamond`** (weights 400, 500; italic at 400). The secondary serif, used only for footnote-class caption text in the data-viz plates and the *Index Plantarum* table — set at 13px / 1.5 line-height with `font-feature-settings: 'onum' 1, 'liga' 1` for old-style figures and proper ligatures. Choosing EB Garamond against Cormorant gives a **dual-serif system** where the captions read as a slightly more historically grounded voice than the display — a small typographic argument that the captions speak with older authority than the headings. - **`Cormorant Unicase`** (weight 500). A single specialty cut used only for the bilingual cartouche labels in Plate IV — Cormorant Unicase blends uppercase and lowercase letterforms at the same height, giving the cultural-motif labels an *ethnographic plate* feeling that distinguishes them from the rest of the typography without introducing a foreign typeface family. No mono face. No grotesk. The typographic stack is consciously narrow — three cuts of two related Garamond revivals — because a **comparative botanical monograph has one voice, two registers, and never raises it.** **Palette — jewel-tones at 3% in the registry, claimed and held:** Jewel-tones are typically rendered web-cliché as oversaturated emerald/sapphire/ruby gradients on dark backgrounds. This site refuses that. Jewel-tones here are the **mineral pigment palette of 19th-century scientific illustration** — the actual ink-and-watercolour pigments used in Pierre-Joseph Redouté's plates and in the Banks Florilegium — which are jewel-toned not because they reference gemstones but because they were *ground from the same mineral sources as gemstones*: malachite, lapis, vermilion, Indian yellow, terre verte. The colours sit on cream rag paper, not black ink: - `#F4ECDC` — **Cream Rag Paper** — the page substrate. A warm uncoated-paper tone, biased slightly yellow, sampled from a 1799 first-edition Redouté plate. - `#1F2D3D` — **Lapis Vein** — the body-text colour and the right-side hothouse data ink. A dense indigo-leaning navy, never pure black; ink, not pixel. - `#274E36` — **Malachite Bed** — the left-side temperate data ink. A deep, slightly grey-shifted emerald sampled from ground malachite pigment under daylight. - `#7B1F2B` — **Vermilion Sealing Wax** — the meridian rule's accent and the wordmark's terminal period. A muted oxblood, not a fashion red. - `#B07A2A` — **Indian Yellow** — the rare highlight pigment, used only for the Indian ochre cartouche border in Plate IV and the index numerals. (Historical Indian yellow was made from cow urine and is now banned; the colour stands as a quiet ethical reminder.) - `#5A4A6E` — **Tyrian Mauve** — the secondary jewel accent for the right-side hothouse cartouches and for visited links. A grey-shifted aubergine, not bright purple. - `#8E9C8F` — **Sage Verdigris** — the hairline rules and small-caps tracking, the colour of oxidised brass instruments left in a humid greenhouse. - `#3D2418` — **Walnut Ink** — the engraving lines in Plate VI's hands and in all illustration linework. A warm dark-brown that reads as iron-gall-and-tannin, never as pure black. The palette is **deliberately not a gradient (97% in registry — refused).** Every colour is a flat ink on cream paper, applied as if by a hand-coloured engraving plate. Where gradient appears (rarely, and only inside the data-viz plates), it is a *stippled* hand-tooling effect — not a CSS `linear-gradient`, but a procedurally generated dot pattern that interpolates between two ink colours via a fine-grained noise texture, evoking aquatint rather than Photoshop. ## Imagery and Motifs **Imagery substrate: data-viz, claimed at 6% in the registry — and rendered as botanical engraved plates rather than as dashboard chartwork.** The eighteen panels of Plate III are not d3.js dashboards; they are *Playfair-style hand-drawn comparative engravings*, generated as inline SVG with: ink-stroke paths (1.2px stroke-width, miter joins, slight `pathLength` randomisation to suggest a quill rather than a Bézier), aquatint stipple fills (procedural dot patterns at 6–11px density), hand-lettered axis labels in `Cormorant Garamond` italic, and a fine cross-hatched border drawn from a `` of crossed hairlines at 4° rotation. The chart types are deliberately archival: time-series ribbons, comparative bar-pairs, divergence ribbons, Sankey flows hand-routed as river deltas, and one *coxcomb* (Florence Nightingale's polar area diagram, 1858) per side as the centerpieces. **Each chart is paired across the meridian with a structural twin; the y-axes are mirrored.** The data is real-feeling — invented from plausible distributions of social-judgment phenomena (the comparative arrest rates of jaywalkers in 1962, the comparative dress-code citations in 1987, the comparative parental-leave durations across municipalities in 2014) — but every chart's caption ends with a small italic note: *"figures reconstructed from comparative records."* **Motifs: cultural at 5% — claimed and committed across four traditions.** Each tradition is rendered with research, not as a decorative loan: 1. **Persian *toranj* medallion** (Plate IV, top-left). The almond-shaped central medallion of Safavid carpet design, rendered as an SVG path with Tyrian-mauve linework on cream ground. The medallion's interior contains a hand-drawn *boteh* (paisley) in malachite green. Inscription in `Cormorant Unicase` at 11px around the cartouche border reads: *"the same garden, two soils."* 2. **Bengali *kantha* embroidery motif** (Plate IV, top-right). A running-stitch *naksha* pattern reproduced as a dashed SVG stroke at 1px, rendering the lotus-and-fish quilting motif of rural West Bengal in indigo on cream. The kantha tradition is a women's textile practice of *recycling* old saris into new quilts — the design's structural premise of "comparative re-evaluation of the same fabric" is deliberately resonant. 3. **Yoruba *adire eleko* indigo stencil** (Plate IV, bottom-left). A stencil-resist motif from southwestern Nigeria's *adire* cloth tradition, specifically the *Olokun* (sea-goddess) pattern, drawn as a tiled SVG of repeated lapis-blue stylised fish-eyes on cream ground. The *adire* tradition's history of women cooperative-makers selling cloth into colonial markets is the cultural specificity here — not a generic "African pattern." 4. **Hellenistic Anthemion frieze** (Plate IV, bottom-right). The honeysuckle-and-palmette frieze from the Erechtheion's east porch (Athens, c. 421 BCE), drawn as an iron-grey continuous SVG path with walnut-ink linework. Used because the Anthemion is the *original Western botanical motif of comparative pairs* — every honeysuckle blossom is paired with a palmette, alternating, mirrored. Each cartouche appears mirrored and rotated 180° across the meridian, which produces a deliberately uncomfortable reading: the cultural motif on the left is "right-side-up" by the convention of its tradition, and on the right it is inverted. *No tradition is privileged with the upright orientation across all four cartouches* — the privileged orientation rotates clockwise through the four plates, so that all four traditions take a turn being right-side-up and inverted. This is the design's most quiet and most load-bearing argument. **Decorative pattern system: hand-drawn *Penrose-style* hatching reservoirs.** All shaded fills (the cartouche backgrounds, the data-viz aquatint, the meridian rule's interior) use a single procedural SVG `` of crossed hairlines drawn at 4°, 47°, 89° rotations layered with `mix-blend-mode: multiply` — the fills are *engraved*, never *flat*. Where blocks would be pure colour in a modern web design, here they are dense hand-hatching. This is deliberately laborious and refuses the dopamine-flat aesthetic. **Decorative *fauna*: a single moth.** A small pale moth (drawn from *Saturnia pavonia*, the Emperor Moth) is the cursor's resting state — see the implementation prompt for the cursor-follow logic. ## Prompts for Implementation Build double-standard.org as **one HTML document, one CSS file, one ES module, no framework, no build step.** The asset budget is: `meridian.svg` (the brass rule and its paired vermilion seal at top, 2kb), `cartouches.svg` (the four cultural medallions as a single sprite-sheet, 38kb), `plates.svg` (the eighteen data-viz panels as inline-or-symbol-referenced SVG, 64kb total), `hands.svg` (Plate VI's anatomical-atlas hands, 22kb), `moth.svg` (the cursor moth, 4kb), and `paper-noise.png` (a 256×256 tiling cream-rag-paper texture at 4% opacity for substrate, 3kb). Three Google Fonts via a single `` element. No analytics, no third-party widgets, no CTA banners, no pricing, no testimonials, no statistics-grid, no hero video, no signup form. **The site is a monograph; it does not convert, it catalogues.** **The cursor-follow pattern (claimed at 81% — but rendered as a load-bearing botanical metaphor, not as a generic magnetic glow).** Cursor-follow on this site is a **moth tracking ambient light**. A pale `Saturnia pavonia`-style moth, drawn in walnut-ink linework at 24×18px, is rendered above the cream paper. Its position is a critically-damped spring (mass 1.0, stiffness 120, damping 18) lagging the cursor by ~140ms — the moth never quite catches up. Its wings beat at a slow 0.6Hz CSS keyframe `transform: scaleX()` oscillation. **The moth's specific behaviour:** when the cursor crosses the meridian, the moth pauses for 240ms at the brass rule before crossing — it perceives the rule. When the cursor is stationary for >2s, the moth lands on the nearest specimen card and folds its wings (scaleX → 0.6, opacity → 0.85). When the cursor enters a data-viz plate, the moth's wing-beat speeds to 1.4Hz — it senses the data. When the cursor leaves the viewport, the moth flies to the nearest meridian point and rests there. The moth is not a pointer; it is **the only living thing in a glass conservatory**, and it follows the visitor because it is curious. There is one moth, ever — never a swarm, never a particle effect, never a parallax field. **Animation budget — patient, never perky.** All transitions use `cubic-bezier(0.22, 1, 0.36, 1)` (a slow-out ease) at 480–820ms durations. There are no springs that overshoot, no bounces, no elastic, no shake. Section transitions on scroll fade-reveal at `opacity: 0 → 1` with a 12px upward translate over 720ms, staggered across the meridian by 80ms (left side leads, right follows — the only asymmetry the design admits, because reading is left-to-right). The meridian rule itself is the *only* element that animates on initial load: it draws from top to bottom over 1.6s using SVG `stroke-dasharray` / `stroke-dashoffset`, after which it locks and is never animated again. **Storytelling architecture.** The visitor is positioned, from the first plate, as a **reader of a 19th-century monograph on comparative judgment**. There is no marketing voice. The copy is composed in slow declarative cadence, in the present tense, with measured Latin specimen binomials. Sample voice: *"Plate III. Comparative arrest records, two municipalities, 1962. Left: jaywalking citations issued in District A, sorted by the dress of the cited party. Right: the same data, sorted by the property value of the citation address. The reader is invited to compare. The figures are reconstructed from comparative records."* No exclamation points. No second-person commands. No "discover," "unleash," or "transform." The reader is *catalogued alongside*, not addressed. **Bias toward full-screen narrative experience.** The visitor's natural reading rhythm should be ~7–9 minutes of unhurried scroll, with the moth following them through the seven plates. There is no signup, no gate, no email capture. The terminal coda — "*Catalogued under glass.*" — is the only conclusion. Below it is the colophon and nothing else. **The page does not loop, does not autoplay, does not lazy-load infinite content.** It ends, exactly, on a meridian-centered period. **The split-screen, technically.** The 50vw meridian is implemented as a `position: fixed; left: calc(50vw - 0.75px); top: 0; width: 1.5px; height: 100vh; z-index: 4;` brass-gradient SVG rule, with a small vermilion sealing-wax dot at its top and bottom (3px diameter). All `
` elements are flex containers `display: flex; flex-direction: row;` with two `
` children of `flex: 0 0 50%`, each independently scrolling within the document flow but visually paired by 28px-baseline grid snapping. **At narrow viewports (<860px), the meridian rotates to horizontal** — the two halves stack, the meridian becomes a horizontal brass rule between them, and the moth's "crossing pause" applies vertically. This is the only responsive concession; below 480px the design degrades gracefully to a single column with a small footnote that "*the bilateral plates are catalogued for landscape viewing.*" **No CTA-heavy layouts. No pricing blocks. No statistic-grids. No testimonial carousels.** The site is *a closed monograph*. Its only quiet exit is a small mailto link in the colophon, set in 11px Cormorant italic, that opens a fresh email to the curator with a pre-filled subject line: "*Re: Plate __, comparative observation*." ## Uniqueness Notes This design commits to differentiators chosen explicitly to avoid duplication with other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **Split-screen at 2% — claimed as a load-bearing meridian, not as a "before/after" or "left-nav/right-content" layout.** Among the 2% of CMassC sites that have used split-screen, the convention is hero-A/hero-B comparison or a content/sidebar arrangement. double-standard.org instead treats the split as a fixed *measuring instrument* — a brass rule that persists through every scroll position and across which paired plates are read horizontally before vertically. The reading pattern is rotated 90° from web convention. No other site in the registry can claim split-screen as load-bearing comparative monograph layout without duplicating this. 2. **Jewel-tones at 3% rendered as 19th-century mineral pigment palette on cream rag paper, not as oversaturated gradient on dark mode.** The jewel-toned web cliché is emerald/sapphire/ruby on `#0a0a0a` with neon accents. This site refuses dark mode entirely (dark-mode 11% — explicitly avoided), refuses gradient (97% — avoided), and instead grounds jewel-tones in the *historical ink-and-mineral pigments of botanical engraving plates* — malachite, lapis, vermilion, Indian yellow, Tyrian mauve, walnut ink — all flat-applied on a single cream paper substrate `#F4ECDC`. The palette is a botany monograph's pigment box, not a gem store's window display. 3. **Cultural motifs (5%) committed across four named traditions with rotational symmetry.** Most sites that claim "cultural" motifs default to a single decorative loan (a "Japanese" wave, an "Aztec" sun-pattern). double-standard.org instead deploys *four* specifically-named cultural motifs — Persian *toranj*, Bengali *kantha*, Yoruba *adire eleko*, Hellenistic Anthemion — each researched to its specific historical and political context, and each rotated through the privileged-upright position so that no tradition is privileged across all four cartouches. The rotation is the design's structural ethics. 4. **Botanical aesthetic (21%) as monograph rather than as cottage/garden/floral decor.** The 21% of CMassC sites that have used botanical aesthetic reach for one of three things: cottagecore-floral-prettiness, terrarium-houseplant-warmth, or watercolour-garden-blogginess. double-standard.org instead commits *taxonomically* to the botanical mode — the site is a working comparative monograph in the lineage of Redouté and Haeckel, with engraved plates, Latin specimen binomials, an *Index Plantarum* terminal table, and a single moth following the reader. No floral decor; no flower arrangement; no springtime watercolour. Botany as a method of judgment, not as a colour scheme. 5. **Cursor-follow (81% — heavily overused) reframed as a moth tracking light.** Cursor-follow is the second-most-used pattern in the registry. This site claims it but reframes it: a single `Saturnia pavonia`-style moth with critically-damped lag, crossing-pause at the meridian, wing-folding rest behaviour, and quickened wing-beats over data plates. The moth is **the only living thing in the conservatory**, and it transforms a generic glow-follower into a load-bearing botanical metaphor for the reader's presence under glass. No swarm, no particle field, no magnetic-tile distortion. 6. **Data-viz (6%) as Playfair/Nightingale-era hand-engraved plates, not as dashboard widgets.** The 6% of sites with data-viz default to dashboard cards or d3.js demos. double-standard.org instead renders eighteen comparative charts as *aquatint-stipple SVG engravings* with hand-lettered axis labels in italic Cormorant, ink-stroke pathLength randomisation, and cross-hatched borders — Playfair's *Commercial and Political Atlas* (1786) and Nightingale's coxcomb (1858) as the explicit visual ancestors, not Tableau or Looker. 7. **Serif-classic typography (2%) committed as a dual-Garamond system.** Most sites that nominally use serif-classic deploy a single Playfair or Lora cut. double-standard.org instead operates a *two-Garamond-revival* system — Cormorant Garamond for display and body, EB Garamond for footnote-class captions — so that the captions speak in a slightly older typographic register than the headings. A small typographic argument that the evidence is *quoted from older authority* than the present voice. 8. **Elegant-sophisticated tone (2%) executed without luxury-brand minimalism.** Among the 2% of sites that have claimed elegant-sophisticated, the default is dark-burgundy + gold-foil + extra-light-sans in the manner of fashion-house landing pages. This site refuses that entirely — the elegance here is a 19th-century scientific monograph's quiet certainty, not a luxury brand's curated emptiness. There is no foil, no shimmer, no premium gradient. The sophistication is *evidentiary*, not *aspirational*. **Documented chosen seed (from assignment):** aesthetic: botanical, layout: split-screen, typography: serif-classic, palette: jewel-tones, patterns: cursor-follow, imagery: data-viz, motifs: cultural, tone: elegant-sophisticated. **Avoided patterns from frequency analysis (explicitly refused on this site):** hand-drawn aesthetic (96% — refused; this is engraved, not hand-drawn), photography (98% — zero photos, all SVG), full-bleed (92% — refused except in Plate VI), card-grid (80% — refused; the layout is paired plates), centered (80% — refused; everything is bilateral across the meridian), gradient (97% — refused; all colour is flat ink), warm palette (96% — partially refused; the substrate is warm cream but the inks are cool malachite and lapis), parallax (95% — refused; only the meridian draws on load), spring overshoots (80% — refused; all easings are slow-out), stagger (75% — minimally claimed only for left-leads-right by 80ms across the meridian), magnetic (72% — refused), mono typography (96% — refused; no monospace anywhere), humanist sans (46% — refused; serif-only system), warm-inviting tone (25% — refused; the tone is cool-evidentiary), dark mode (11% — refused; cream substrate throughout), hero-dominant (8% — refused; no hero, only Plate I). **This site claims its uniqueness through restraint and specificity, not through visual novelty.** The bilateral monograph is the differentiator; the cream paper and the brass meridian are the proof.