# Design Language for pmt.report ## Aesthetics and Tone pmt.report is conceived as **The Herbarium of Public Thought** — a nineteenth-century botanical archive reimagined as a living scholarly journal. The visual world draws from the tradition of hand-pressed specimen collections: crisp white pages, careful botanical illustration, meticulous marginalia, and the quiet authority of a researcher who has spent decades in the field. Every element feels as though it has been gathered, pressed, catalogued, and placed with intention. The tone is **scholarly-intellectual**: unhurried, precise, and deeply curious. The site does not announce itself. It opens like a well-worn field guide — the reader understands immediately that serious intellectual work happens here. There is no marketing language. There is no urgency. There is only the patient accumulation of observed knowledge. The dominant mood is **luminous quietude**: the specific quality of afternoon light through tall windows in a university herbarium, falling across pressed leaves and annotated index cards. Coastal mist softens the palette — nothing is harsh. Colors are drawn from sea-glass, lichen, aged vellum, and the particular blue-grey of Atlantic fog. The bokeh background treatment — soft, out-of-focus botanical forms dissolving into shallow-depth-of-field halos — creates a sense of depth without clutter, as though the reader is seated at a specimen table while the rest of the herbarium recedes into soft focus. Typography is spare and purposeful, combining a humanist clean sans-serif in the Frutiger tradition (for navigation, captions, and metadata) with a classical scholarly serif for body text — the same combination found in the best monograph imprints of the twentieth century. The result reads as neither academic stiffness nor tech-industry flatness, but as something genuinely rare: **considered scholarly communication that also looks beautiful**. ## Layout Motifs and Structure The layout follows a **Z-pattern reading path** embedded in a rigorous editorial grid — the reading eye moves: upper-left anchor (site identity / dominant headline), sweeps diagonally to upper-right (a specimen plate or bokeh botanical photograph), drops diagonally to lower-left (first substantial text block or pull-quote), then arrives at lower-right (secondary content or navigational continuation). This Z-path is not incidental — it is the compositional skeleton of every major viewport. The structure is organized around three spatial registers: 1. **The Specimen Layer** (background): Soft-focus botanical forms — pressed leaves, seed pods, cross-section illustrations — rendered at low opacity (8–14%) as a luminous field texture. These forms drift at 0.3× parallax speed as the user scrolls, creating the sensation of looking through glass at a pressed collection below. 2. **The Table Layer** (mid-ground): The primary editorial content — large typographic headers, scholarly body text, pull-quotes in wide outer margins, and annotated specimen plates framed in thin 1px hairline rules. The table is the reader's working surface. 3. **The Margin Layer** (foreground): Metadata, cross-references, footnotes, and small botanical vignettes arranged in a generous left or right margin column (280px at desktop width). The margin is active, not decorative — it carries the intellectual apparatus of the text. **Grid:** 12-column, 1280px max-width container, 32px gutters, 64px outer margins. At the macro level, primary content occupies columns 1–8 and the scholarly margin occupies columns 9–12. The Z-pattern is executed by alternating the weight of text and imagery across the composition: a full-bleed botanical photograph (columns 7–12) in the first module anchors the upper-right; the headline and introduction (columns 1–7) anchors the upper-left. The diagonal axis between these two elements is the site's primary reading vector. **Section rhythm:** Each thematic section opens with a full-viewport **specimen header** — a slow cross-fade from deep coastal fog to the section's focal botanical image, with the section title set in large display weight against the image. Sections breathe: 120px of vertical space between major divisions, 48px between sub-sections. **No sticky navigation bar.** The reader navigates by scrolling. A minimal progress indicator — a single 1px vertical line on the far right edge, growing downward as the page scrolls — is the only persistent chrome. ## Typography and Palette **Typography:** The Frutiger-clean tradition is honored through **Nunito Sans** (Google Fonts), used for navigation labels, metadata, captions, specimen taxonomy lines, and pull-quote attributions. Nunito Sans carries the humanist warmth of the Frutiger lineage — rounded terminals, open aperture, legible at small sizes — without the corporate coldness of Helvetica or the tech-world ubiquity of Inter. Weights used: 300 (captions, metadata), 400 (navigation, labels), 600 (subheadings, specimen headers). Scholarly body text is set in **Lora** (Google Fonts) — a contemporary serif with calligraphic roots, optimized for screen reading. Lora's moderate x-height and bracketed serifs carry the intellectual authority of a monograph without the heaviness of Times New Roman. Weights: 400 (body), 500 italic (pull-quotes, botanical annotations), 700 (display headers in combination with Nunito Sans). Display headlines (the large Z-pattern anchors) are set in **Cormorant Garamond** (Google Fonts), weight 300–400, wide tracking (+0.04em), creating an elegant tension between the expansive coastal palette and the precision of scholarly naming. **Type scale (fluid, clamp-based):** - Display: clamp(3.2rem, 6vw, 6.4rem) — Cormorant Garamond 300 - H1: clamp(2.2rem, 4vw, 3.6rem) — Cormorant Garamond 400 - H2: clamp(1.4rem, 2.4vw, 1.8rem) — Nunito Sans 600 - Body: clamp(1rem, 1.2vw, 1.1rem) — Lora 400, line-height 1.75 - Caption/Metadata: 0.8rem — Nunito Sans 300, letter-spacing +0.08em **Palette — Coastal Blend:** - `#F4F1EC` — **Vellum Shore**: the primary page background, a warm white with a barely-perceptible cream undertone, recalling pressed paper and coastal light - `#2C3E50` — **Slate Tide**: primary text color, a deep blue-grey that reads as near-black without the harshness of pure black; the color of a storm-lit sea surface - `#7B9E9A` — **Sea Glass**: the dominant accent — a muted, dusty teal drawn from tumbled coastal glass; used for links, hover states, section dividers, and botanical vignette fills - `#A8BFC4` — **Coastal Mist**: secondary accent, a lighter blue-grey for decorative elements, inactive states, and the bokeh halo fills - `#D4C5A9` — **Pressed Sand**: warm mid-tone for borders, specimen frame lines, and the margin column background tint; reminiscent of damp sand at low tide - `#4A6741` — **Herbarium Green**: the botanical accent — a muted, olive-leaning green drawn from dried specimen leaves; used sparingly for botanical illustration line work and category tags - `#8B7355` — **Archive Umber**: for footnote markers, marginalia numerals, and aged-paper texture overlays; the color of a water-stained field notebook cover **CSS custom properties:** ```css --vellum-shore: #F4F1EC; --slate-tide: #2C3E50; --sea-glass: #7B9E9A; --coastal-mist: #A8BFC4; --pressed-sand: #D4C5A9; --herbarium-green: #4A6741; --archive-umber: #8B7355; ``` ## Imagery and Motifs **The Bokeh Background System:** The defining visual technique is a full-screen bokeh field generated from botanical elements — actual botanical photographs (leaves, flowers, seed heads) shot at f/1.4, creating large soft circles of blurred light against deep coastal-fog backgrounds. At desktop, this bokeh field is rendered as the site's base layer: a high-resolution image (or CSS-generated radial gradient field) with opacity 0.18, always present but never intrusive. As the user scrolls, the bokeh field shifts at 0.4× parallax, creating the sensation of depth and slow motion — as though the reader is observing specimens through a glass-topped cabinet while the light slowly changes. **Specimen Plates:** Each major section features one specimen plate — a botanical illustration rendered in the tradition of nineteenth-century scientific publishing (pen-and-ink style, precise, annotated). These plates are framed in thin hairline rules (`--pressed-sand` 1px), with taxonomy labels in Nunito Sans 300 set below in small caps. The plates appear in the Z-pattern's upper-right and lower-left positions, anchoring the diagonal reading axis. **Leaf-vein Motif:** The site's primary decorative system uses the geometry of leaf venation — the branching, hierarchical network of a botanical vein structure — as an SVG path motif. These vein networks appear as: section dividers (a single frond of five veins, 40px tall, `--sea-glass` 60% opacity), margin ornaments, and loading state animations (veins drawing themselves in from center outward, 0.8s ease). **Zoom-Focus Interaction Pattern:** On hover over any specimen plate or botanical image, a zoom-focus lens effect activates: the image scales to 110% (CSS transform scale, 400ms ease-out) while a circular mask appears (border-radius: 50%, width: 180px) centered on the cursor position, revealing a sharper version of the image beneath a blurred outer ring. This mimics the experience of examining a specimen through a jeweler's loupe. The interaction reinforces the scholarly-examination metaphor at every image encounter. **Book-Scholarly Motifs:** Drop-cap initials in Cormorant Garamond 300, 4× body height, at the opening of each major section. Footnote numbering in superscript, `--archive-umber` color. A running header in Nunito Sans 300 8px on the upper margin showing the current section title and page equivalent. Section numbers in Latin (I, II, III...) set in Cormorant Garamond 300, wide-tracked, in `--pressed-sand`. **Coastal Iconography:** A minimal set of 6 SVG icons, all drawn in the style of hand-engraved navigation instruments: a compass rose for navigation, a tide chart wave for section breaks, a seed pod for content categories, a field notebook for articles, a magnifying glass (botanical loupe) for search, and a specimen tag for metadata labels. ## Prompts for Implementation Build pmt.report as **a single-scroll scholarly journal experience** — a living herbarium where each section is a pressed specimen in an ongoing investigation of public thought. The reader arrives through the Z-pattern landing viewport and descends through a sequence of specimen stations, each opening with a full-bleed botanical bokeh header before settling into a focused, marginated reading experience. **Opening Viewport (the Z-pattern anchor):** Upper-left: Site logotype in Cormorant Garamond 300, 52px, `--slate-tide`, beneath it in Nunito Sans 300 tracking+12, 11px: "A scholarly journal of public record". Upper-right: A full specimen botanical photograph (1200×800px) with bokeh treatment, edges dissolving into `--vellum-shore` via a radial gradient mask — so the image appears to float on the page surface rather than sitting in a box. The photograph fills columns 7–12, bleeds to the top edge. Lower-left diagonal: A large display headline (Cormorant Garamond 300, 4.8rem) in `--slate-tide` with a one-sentence description beneath in Lora 400 1.1rem. Lower-right: A secondary specimen thumbnail (200×260px, portrait) in a hairline frame, with taxonomy-style caption, serving as the entry point to the first article. **Bokeh Background Implementation:** CSS: A fixed-position `::before` pseudo-element on `body`, containing a `background-image` built from 8–12 radial gradient circles of varying sizes (80px–320px radius), colors drawn from `--coastal-mist` at 30–60% opacity, positioned at irregular intervals. This simulates the bokeh light-circle field without requiring an actual image. On scroll, apply `transform: translateY(calc(var(--scroll-y) * -0.4))` for parallax depth. **Leaf-Vein Section Dividers:** Each section transition uses an SVG `` element drawing a botanical vein structure. On scroll into view (Intersection Observer, threshold 0.3), the path animates via CSS `stroke-dashoffset` from full length to 0, over 800ms with `cubic-bezier(0.4, 0, 0.2, 1)` easing. The vein color is `--sea-glass`, stroke-width 1.5px, no fill. **Zoom-Focus Lens on Specimen Plates:** ```javascript // On mousemove over .specimen-plate const lens = document.querySelector('.lens-overlay'); lens.style.left = `${e.offsetX - 90}px`; lens.style.top = `${e.offsetY - 90}px`; // Inner image scaled 2× relative to lens position ``` The lens overlay is a 180px circle with `backdrop-filter: blur(0)` inside and `backdrop-filter: blur(4px)` as a box-shadow ring outside, creating the loupe illusion without requiring duplicate image assets. **Typography Rendering:** Load Cormorant Garamond (weights 300, 400, 700), Lora (400, 500 italic, 700), and Nunito Sans (300, 400, 600) from Google Fonts with `font-display: swap`. Apply `text-rendering: optimizeLegibility` and `-webkit-font-smoothing: antialiased` globally. Drop caps implemented with `::first-letter` pseudo-element: font-size 4.2em, float left, Cormorant Garamond 300, line-height 0.85, padding-right 0.12em, color `--herbarium-green`. **Scholarly Margin Column:** At viewport ≥1280px, the margin column (columns 9–12, 280px) is always visible. It contains: cross-reference links in Nunito Sans 300 10px, `--archive-umber`; footnote text (same size); small botanical vignettes (SVG, 48×64px); and occasionally a pull-quote that has "overflowed" from the main text into the margin — set in Lora 500 italic, 0.9rem, with a 2px left border in `--sea-glass`. At viewport <1280px, the margin collapses and its content folds into the flow. **Scroll Behavior:** `scroll-behavior: smooth` globally. Each major section has `scroll-margin-top: 48px`. The progress indicator — a 1px vertical line on the right viewport edge, height transitioning from 0% to 100% as the page scrolls — is implemented as a fixed `::after` on `body`, `background: --sea-glass`, `height: calc(var(--scroll-progress) * 100vh)`. **AVOID:** Hero CTA buttons with gradient fills. Pricing tables. Stat-grids with large numbers and metric labels. Newsletter popup modals. Cookie consent banners styled as marketing elements. Sticky navigation bars. Animated counters. Any element that breaks the herbarium quietude. ## Uniqueness Notes **Differentiators from the existing corpus:** 1. **Bokeh-background as architectural layer, not decoration.** The frequency analysis shows `bokeh-background` is rare in the corpus. pmt.report makes the bokeh field the foundational spatial layer — a soft-focus botanical depth field that the entire site sits within, not a hero-image background treatment applied to one section. The bokeh is always present, always moving slowly at parallax, creating a living atmospheric environment. 2. **Z-pattern as explicit compositional grammar.** Most sites in the corpus use implicit or incidental layout patterns. pmt.report treats the Z-pattern as a named, structural rule enforced at every major viewport — the grid is literally designed around the Z diagonal, with upper-right and lower-left specimen plates anchoring the reading axis. This makes the layout legible as a system, not just as a convention. 3. **The scholarly margin column as primary content surface.** The corpus relies on conventional sidebar or below-fold footnote treatments. pmt.report elevates the margin column to co-equal status: it carries intellectual apparatus, overflow pull-quotes, cross-references, and botanical vignettes that are genuinely part of the reading experience, not supplementary chrome. This is drawn from the tradition of the best scholarly monographs (Tufte's books, the Loeb Classical Library) rather than from web design convention. 4. **Frutiger-clean + Cormorant Garamond as a deliberate tension pair.** The frequency analysis shows `frutiger-clean` at only 4% — an underused typography register. Pairing a humanist sans (Nunito Sans, in the Frutiger tradition) with a calligraphic Renaissance serif (Cormorant Garamond) creates the specific typographic voice of a contemporary scholarly publisher — neither purely academic nor purely digital-modern. No other design in the corpus uses this exact combination in this register. 5. **Zoom-focus loupe interaction on specimen plates.** The zoom-focus pattern from the seed is implemented not as a generic zoom-on-hover but as a **botanical loupe** — a circular magnification lens centered on cursor position, with a blurred outer ring to simulate shallow depth of field. This interaction is specific to the site's herbarium metaphor and reinforces the scholarly-examination motif at every image encounter. **Chosen seed:** aesthetic: botanical, layout: z-pattern, typography: frutiger-clean, palette: coastal-blend, patterns: zoom-focus, imagery: bokeh-background, motifs: book-scholarly, tone: scholarly-intellectual **Avoided patterns from frequency analysis:** photography (87% — overused; replaced with bokeh-treated botanical imagery and specimen illustrations), vintage (37% — overused aesthetic register; coastal-botanical occupies a distinct register), tech/circuit motifs (overused in corpus; explicitly excluded from this design).