# Design Language for pmt.report ## Aesthetics and Tone pmt.report draws from the visual language of a 1962 Saul Bass title sequence projected onto a smoke-filled jazz lounge -- a collision of mid-century graphic rationalism and late-night defiance. The aesthetic is **mid-century modern pushed through a rebel filter**: not the cheerful Eames chair catalog version, but the dangerous side -- the Cold War graphic design of political pamphlets, the confrontational cover art of Blue Note records, the sharp geometry of protest posters silk-screened in basement print shops. Think of a beautifully bound leather portfolio left behind in a bar that smelled of bourbon and ink, its pages filled with typeset manifestos and geometric diagrams that diagram something you were never supposed to see. The tone is **edgy-rebellious** -- not in the loud, juvenile sense of punk, but in the quiet, knowing way of someone who has read too much and decided the establishment's design language can be weaponized against itself. There is an undercurrent of intellectual subversion: the formalism of mid-century modernism is deployed with a snarl. Serif typefaces are set with the authority of a Supreme Court brief but say things that would make the justices uncomfortable. The overall mood is the visual equivalent of Miles Davis playing "So What" -- technically perfect, emotionally cutting, dressed in a tailored suit while breaking every rule in the book. ## Layout Motifs and Structure The layout is built on a **split-screen** architecture -- the viewport is divided into two persistent vertical panels that function as a diptych. This is not a responsive sidebar pattern; it is a deliberate compositional choice drawn from mid-century editorial spreads where the left page and right page engaged in dialogue. **Split-Screen Structure:** - **Left Panel (The Spine):** Occupies exactly 38.2% of the viewport width (the golden ratio's lesser portion). This panel has a fixed position and serves as the persistent anchor. It is flooded with a deep oxblood leather texture (#4A1A2E tinted, rendered as a CSS background with subtle grain noise overlay at 8% opacity). The domain name, primary navigation (if any), and a single rotating pull-quote live here. Text is always light-on-dark in this panel. The left panel scrolls independently from the right, but at 0.6x the speed, creating a subtle parallax divorce between the two halves. - **Right Panel (The Manifesto):** Occupies the remaining 61.8% of the viewport. This is the content stream -- a single flowing column of text, imagery, and typographic moments. The background is a warm ivory parchment (#F2E8D5) with a faint leather-grain texture at 3% opacity. This panel scrolls normally. Content blocks within it are separated by horizontal rule elements styled as thick, imperfect ink strokes -- not clean CSS borders but SVG paths with hand-tremor noise applied, each one unique. **Panel Interaction:** When the user scrolls the right panel, the left panel responds with a **magnetic** drag effect -- content elements in the left panel are pulled toward the scroll direction with spring-based easing (tension: 180, friction: 24), creating the sensation that the two panels are connected by invisible rubber bands. This magnetic coupling is the primary animation pattern: elements don't snap or ease linearly; they pull, resist, and settle with organic tension. **Structural Grid:** Within the right panel, content follows a 6-column subgrid with 24px gutters. Text blocks occupy 4-5 columns, allowing one column of breathing space on alternating sides (left-heavy, then right-heavy, alternating per section). This staggered asymmetry within the right panel prevents the split-screen from feeling rigid. Imagery breaks the subgrid entirely -- photographs and texture blocks bleed to the full width of the right panel, sometimes crossing the split-screen boundary to overlap the left panel by 40-60px, creating layered depth where content literally transgresses its boundaries. **No Hero Section:** There is no hero block. The site opens mid-thought, as if you walked into a conversation already in progress. The first visible content is a sentence fragment in the right panel, set in large serif type, that begins with a lowercase letter and an em-dash. The left panel's pull-quote responds to it. The effect is immediate immersion without fanfare. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- weight 900 for primary headings, weight 400 italic for sub-headings. This is the serif-revival workhorse: its high stroke contrast and sharp wedge serifs evoke 18th-century Baskerville letterforms while maintaining modern optical precision. Headlines are set between 2.8rem and 5.5rem, always in sentence case. Letter-spacing is tightened to -0.03em at display sizes, creating dense, authoritative blocks of type that feel engraved rather than rendered. Headlines in the left panel are set in #F2E8D5 (ivory) against the dark leather background; headlines in the right panel are set in #2B1A0E (near-black espresso). - **Body Text:** "Source Serif 4" (Google Fonts) -- weight 400 for running text, weight 600 for emphasis. Set at 1.125rem/1.72 for comfortable long-form reading. Source Serif 4 is chosen for its robust ink traps and open apertures, which maintain legibility against textured backgrounds. Body text in the right panel is #3D2B1F (dark walnut) on ivory; body text in the left panel is #D4C4A8 (dusty parchment) on oxblood. - **Accent / Captions:** "IBM Plex Mono" (Google Fonts) -- weight 400, set at 0.8rem with letter-spacing +0.06em, all-caps. Used for datelines, metadata, category labels, and navigational markers. The monospace accent against the serif body creates a deliberate anachronism -- typewriter pragmatism interrupting typeset elegance. Color: #8B6F4E (tarnished brass) in both panels. - **Pull-Quotes:** "Cormorant Garamond" (Google Fonts) -- weight 300 italic, set at 2rem/1.45. Pull-quotes appear exclusively in the left panel, set in #C4973B (aged gold) with a 1px left border in the same color. The extreme thinness of Cormorant at weight 300 against the leather texture creates a fragile, almost threatened quality -- beautiful words that might vanish. **Color Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Primary Dark | #2B1A0E | Espresso | Right panel headlines, deepest shadows | | Primary Light | #F2E8D5 | Aged Ivory | Right panel background, left panel text | | Leather Base | #4A1A2E | Oxblood | Left panel background base | | Leather Shadow | #2E0F1A | Bordeaux Night | Left panel darkened edges, vignette | | Text Body | #3D2B1F | Dark Walnut | Right panel body copy | | Text Secondary | #D4C4A8 | Dusty Parchment | Left panel body copy, muted elements | | Accent Warm | #C4973B | Aged Gold | Pull-quotes, links, interactive highlights | | Accent Metal | #8B6F4E | Tarnished Brass | Captions, metadata, monospace text | | Divider | #6B3A4A | Dried Rose | Horizontal rules, subtle borders | | Highlight | #A65D3F | Burnt Sienna | Hover states, active indicators | This is a **muted-vintage** palette -- no pure whites, no pure blacks, no saturated hues. Every color looks as if it has been sitting in indirect sunlight for forty years. The warmth is restrained, like a room lit by a single incandescent bulb behind a parchment shade. ## Imagery and Motifs **Leather Texture (Primary Imagery Layer):** The dominant visual texture is leather -- not the glossy, stamped leather of luxury goods marketing, but the cracked, patinated, lived-in leather of a 1950s briefcase found in a thrift store. The leather texture is implemented as a layered CSS background: 1. Base layer: solid #4A1A2E 2. Middle layer: a CSS `radial-gradient` pattern creating subtle pore-like dimples (tiny circles of #2E0F1A at 2px, spaced 8px apart, at 15% opacity) 3. Top layer: a repeating noise texture generated via SVG `feTurbulence` filter (baseFrequency="0.65", numOctaves="4") composited at 6% opacity in multiply blend mode 4. Vignette: a large `radial-gradient` from transparent center to #2E0F1A at edges, creating depth The right panel uses the same leather grain at dramatically reduced opacity (3%) over the ivory base, so the texture is felt rather than seen -- a subliminal tactile quality. **Vintage Motifs -- Subverted:** The vintage motif vocabulary is present but deliberately twisted: - **Starbursts** from mid-century advertising appear, but they are rendered as SVG paths with intentionally broken strokes -- lines that stop short, gaps where rays should be, as if the optimism of the atomic age has been partially erased. These broken starbursts serve as section markers between content blocks. - **Boomerang shapes** (the quintessential mid-century decorative form) appear as CSS clip-path elements on images, giving photographs irregular, angled crops instead of rectangles. No image on the site has a straight rectangular boundary. - **Atomic orbital patterns** (overlapping ellipses) are rendered as thin SVG strokes in #6B3A4A (Dried Rose) and used as decorative backgrounds behind pull-quotes in the left panel. They rotate slowly (one full rotation per 120 seconds) to provide barely perceptible motion. **Ink Stroke Dividers:** Every horizontal rule is a unique SVG path that mimics a single brush stroke made with a dry, almost-empty pen. The paths are generated with randomized control points so no two are alike. Stroke color is #6B3A4A, stroke width varies from 1.5px to 3px along the path using `stroke-dasharray` and `stroke-dashoffset` animation. On scroll, each divider draws itself into existence over 0.8 seconds. **Photographic Treatment:** Any photographs are treated with a CSS filter chain: `sepia(25%) contrast(1.05) brightness(0.95) saturate(0.8)`. This strips modern digital crispness and replaces it with the tonal quality of a 1960s darkroom print. Photos are never full-color; they exist in the same tonal universe as the palette. ## Prompts for Implementation **Full-Screen Split Narrative Experience:** The site loads with both panels visible immediately -- no loading screen, no animated entrance. The left panel is already there, dark and leather-textured, with the domain "pmt.report" set in Playfair Display 900 at 1.8rem, positioned 15% from the top, left-aligned with 2rem padding. Below it, the first pull-quote fades in over 1.5 seconds in Cormorant Garamond italic. The right panel displays the opening sentence fragment immediately, no delay. The user is dropped into the middle of something. **Magnetic Scroll Interactions:** The primary interaction pattern is magnetic coupling between the two panels. As the right panel scrolls, elements in the left panel respond with spring physics -- they are pulled in the scroll direction with a 200ms delay and settle back with damped oscillation. This creates a living, breathing relationship between the panels. Implementation uses CSS `scroll-timeline` where supported, with a JavaScript `requestAnimationFrame` fallback that reads `scrollTop` and applies transforms with spring interpolation. **Typography as Architecture:** Headlines in the right panel should be treated as architectural elements -- they occupy space with physical authority. Large headlines (4rem+) should have negative top margins that pull them into the preceding section's space, overlapping the ink-stroke divider by 8-12px. This creates the impression that the type is so heavy it sinks through the page structure. Body paragraphs following headlines should begin with a drop cap (first letter set in Playfair Display 900 at 3.5em, floated left, color #C4973B) but only for the first paragraph of each major section. **Hover and Interaction States:** Links are styled with no text-decoration by default. On hover, an underline draws itself from left to right using `background-size` animation (from `0% 2px` to `100% 2px` at `background-position: 0 100%`). The underline color is #A65D3F (Burnt Sienna). Simultaneously, the link text color transitions from #C4973B to #A65D3F over 300ms with a cubic-bezier(0.25, 0.46, 0.45, 0.94) easing. In the left panel, hover effects on interactive elements cause a magnetic pull -- nearby text elements shift 2-4px toward the cursor using `transform: translate()` driven by mousemove event listeners. **Panel Boundary Transgressions:** Images and decorative elements should occasionally cross the split-screen boundary. This is achieved by giving elements in the right panel negative left margins or absolute positioning that extends them 40-80px into the left panel's territory. These transgressions create visual tension and prevent the split-screen from feeling like two separate websites. The overlapping elements cast a subtle `box-shadow` (0 4px 24px rgba(46, 15, 26, 0.3)) onto the left panel surface, reinforcing the sense of physical layering. **Scroll-Driven SVG Path Drawing:** The ink-stroke dividers between sections are initially invisible (stroke-dashoffset equals total path length). As each divider enters the viewport (Intersection Observer with threshold 0.3), the dashoffset animates to 0 over 0.8 seconds, drawing the stroke from left to right. Each stroke has a slightly different duration (0.7-1.0s) and easing to prevent mechanical uniformity. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, cookie-cutter SaaS patterns. This is a narrative space, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **True Split-Screen Diptych Architecture:** At only 1% frequency, split-screen layouts are nearly absent from the portfolio. This design does not merely divide the page in half -- it creates two distinct environmental zones (dark leather vs. light parchment) with independent scroll behaviors and magnetic coupling between them. No other design establishes this kind of dual-panel dialogue. 2. **Serif-Revival Typography System:** At 1% frequency, serif-revival is one of the rarest typography approaches in the portfolio. The four-font system (Playfair Display, Source Serif 4, IBM Plex Mono, Cormorant Garamond) creates a typographic hierarchy with genuine historical depth -- spanning 18th-century Baskerville revival through mid-century rationalism to contemporary monospace. The interplay of Display 900 weight headlines with Cormorant 300 italic pull-quotes creates extreme contrast within the serif family. 3. **Leather Texture as Environmental Design:** At 2% frequency, leather-texture imagery is extremely rare. Rather than using leather as a decorative swatch or background image, this design builds the entire left panel as a leather environment -- layered CSS gradients, SVG noise filters, and vignetting create a material that feels physically present. The texture extends at reduced opacity into the right panel, unifying the diptych. 4. **Magnetic Interaction Physics:** While magnetic patterns exist at 9%, this design applies them uniquely -- as the coupling mechanism between two independent scroll regions. The magnetic effect is not applied to individual buttons or cards but to the entire spatial relationship between the two panels, creating a system-level interaction language rather than decorative flourish. 5. **Mid-Century Motifs Deconstructed:** The vintage/mid-century motifs (broken starbursts, boomerang clip-paths, atomic orbital backgrounds) are deliberately damaged or incomplete -- a critical commentary on the optimism they originally represented. This subversive approach to vintage motifs distinguishes the design from the 86% of designs that use vintage motifs in a celebratory or nostalgic mode. 6. **No-Hero Anti-Entry Pattern:** The site begins mid-sentence, without a hero section, without a title card, without an animated reveal. This confrontational opening -- dropping the viewer into content already in progress -- reflects the edgy-rebellious tone at the structural level, not just the visual level. **Chosen seed/style:** aesthetic: mid-century, layout: split-screen, typography: serif-revival, palette: muted-vintage, patterns: magnetic, imagery: leather-texture, motifs: vintage, tone: edgy-rebellious **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered as primary pattern (96%), minimal imagery (94%), friendly tone (98%). This design deliberately counters every dominant pattern -- it is dark where others are light, confrontational where others are welcoming, textured where others are clean, structurally asymmetric where others are centered.