# Design Language for matchumnews.com ## Aesthetics and Tone matchumnews.com channels the rational idealism of the Bauhaus school -- not as museum-piece nostalgia, but as a living system where form follows function with unyielding clarity, then detonates that clarity with dopamine-saturated neon interventions that feel like highlighter ink scrawled across a Kandinsky composition. The aesthetic is **Bauhaus Neon Dispatch**: the geometric rigor of Dessau-era design language (circles, triangles, rectangles as irreducible compositional atoms) married to the sensory overload of fluorescent news tickers, pulsing accent bars, and type that materializes letter by letter as though hammered out on a teletype machine broadcasting from the future. The mood is a late-night newsroom in a parallel 1929 where Moholy-Nagy had access to LED arrays and Walter Gropius designed digital interfaces. There is seriousness without stuffiness -- the conversational warmth of a trusted correspondent who respects your intelligence. Headlines arrive with the deliberate cadence of a typewriter. Color detonates in controlled bursts: a neon magenta rule beneath a headline, a chartreuse pull-quote border, an electric cyan dateline. The background remains austere -- deep graphite, warm charcoal, or stark bone-white -- so that every neon accent carries information weight. Nothing glows without reason. The tone is **conversational** in the truest sense: it speaks directly to the reader as an equal, uses plain structure to convey complex ideas, and trusts silence (negative space) as much as speech (content). There is no corporate polish, no breathless excitement, no performative authority. Just clear, geometric frames holding luminous fragments of information that the reader assembles into meaning through the act of scrolling. ## Layout Motifs and Structure The layout is built on a **parallax-sections** architecture where each viewport-height section functions as an independent Bauhaus composition plate -- a self-contained arrangement of geometric primitives (rectangles, circles, diagonal rules) that holds a single story, headline, or thematic cluster. As the user scrolls, sections slide over one another at differential speeds, creating the optical illusion of **layered depth** -- foreground text planes gliding over mid-ground geometric shapes over background color fields. **Section Architecture:** - **Section 0 (Masthead):** Full viewport. The domain name "matchumnews" is set in Cormorant Garamond at 7vw, letterspaced at 0.15em, aligned to a strict left margin at 8vw from the viewport edge. A neon magenta horizontal rule (4px tall, 40vw wide) sits precisely beneath the baseline. Below: a single-line dateline in DM Mono at 0.8rem, with a typewriter animation that spells out "dispatches from the intersection of form and function." A large circle (diameter: 35vw) in translucent chartreuse (#CCFF00 at 12% opacity) hovers at the top-right quadrant, partially clipped by the viewport edge, drifting slowly on parallax. A smaller triangle (equilateral, 12vw) in electric cyan outline floats at the lower-left, rotating at 0.02deg/frame. - **Section 1-N (Story Sections):** Each story section is a full-viewport parallax plate. The layout follows a strict **three-column Bauhaus grid** (columns at 8vw | 52vw | 32vw on desktop) where: Column 1 holds a vertical category label (rotated -90deg, set in DM Mono uppercase, letterspaced 0.3em, colored in the section's accent neon). Column 2 holds the headline and body text. Column 3 holds a geometric "illustration" -- not a photograph, but a composed arrangement of CSS-drawn shapes (circles, rectangles, triangles) in the section's neon accent color against the dark background, evoking nature elements abstractly: a circle-cluster suggesting tree canopy, stacked triangles suggesting mountain ridgelines, concentric rings suggesting water ripples. - **Parallax Layering:** Three depth planes. Plane 0 (background): solid color field (#1A1A1E or #F2EDE6) with a single large geometric shape at 10% opacity, scrolling at 0.3x speed. Plane 1 (mid-ground): accent color geometric shapes (borders only, no fill) scrolling at 0.6x speed. Plane 2 (foreground): text content scrolling at 1x (normal) speed. This creates a persistent sense of spatial depth without relying on 3D transforms or WebGL. - **Inter-Section Transitions:** As one section scrolls away and the next enters, a brief moment of overlap occurs where the departing section's background geometric shapes align momentarily with the arriving section's shapes, creating an accidental-seeming geometric harmony -- like two Bauhaus posters overlapping on a bulletin board. - **No Navigation Bar:** There is no persistent header or navigation. Instead, a small neon circle (12px diameter, fixed at top-right, 2vw from edge) pulses gently. Clicking it reveals a geometric overlay menu: story titles listed vertically in Cormorant Garamond Italic, each preceded by a small colored circle matching that section's accent neon. ## Typography and Palette **Typography:** - **Headlines / Display:** "Cormorant Garamond" (Google Fonts) -- weight 600 (SemiBold) for headlines, weight 300 (Light) italic for pull-quotes and section subtitles. This is an elegant serif with sharp, high-contrast strokes that echo the precision of Bauhaus geometric principles while maintaining the organic warmth of classical letterforms. Set at 3rem-6rem for headlines, with `letter-spacing: 0.04em` and `line-height: 1.05` for a dense, poster-like presence. Headlines are always sentence case. The interplay between the serif's delicate hairlines and the neon accent colors beneath creates visual tension: old-world craft illuminated by new-world energy. - **Body Text:** "Source Serif 4" (Google Fonts) -- weight 400 (Regular) for body copy, weight 600 for inline emphasis. Set at 1.05rem with `line-height: 1.72` and `letter-spacing: 0.01em`. The generous leading gives each line room to breathe, reinforcing the Bauhaus principle that space is a material. Paragraph max-width is capped at 38em to maintain optimal reading rhythm. Color: #D4D0CB (warm silver) against dark backgrounds, or #2A2A2E (near-black) against light backgrounds. - **Monospace / System:** "DM Mono" (Google Fonts) -- weight 400 for datelines, category labels, metadata, and the typewriter-effect text. Set at 0.8rem-0.9rem with `letter-spacing: 0.08em`, always uppercase. This font provides the mechanical, dispatch-like quality of a teletype or wire service ticker. Used sparingly: only for structural/navigational elements, never for body text. **Palette:** The palette is **dopamine-neon** -- a system of five high-saturation accent colors deployed against neutral ground tones. Each story section is assigned one accent neon from the rotation. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Ground Dark | Obsidian | #1A1A1E | Primary dark background for most sections | | Ground Light | Bone Linen | #F2EDE6 | Alternate light background (every 3rd section) | | Ground Mid | Warm Graphite | #2E2E33 | Card surfaces, overlay menu background | | Text Primary (dark bg) | Silver Ash | #D4D0CB | Body text on dark backgrounds | | Text Primary (light bg) | Near Black | #2A2A2E | Body text on light backgrounds | | Neon Accent 1 | Magenta Flare | #FF2D7B | Headlines, rules, first-section accent | | Neon Accent 2 | Chartreuse Shock | #CCFF00 | Geometric shapes, second-section accent | | Neon Accent 3 | Electric Cyan | #00E5FF | Datelines, third-section accent | | Neon Accent 4 | Ultraviolet | #BF5FFF | Pull-quotes, fourth-section accent | | Neon Accent 5 | Atomic Tangerine | #FF6F3C | Category labels, fifth-section accent | The neon accents never appear as large filled areas (no neon backgrounds). They are deployed as: thin rules (2-4px), text color for labels and headlines, border-only geometric shapes, and small solid circles (pulsing indicators). This discipline ensures the dopamine hit comes from contrast and scarcity, not saturation fatigue. ## Imagery and Motifs **Nature Elements as Geometric Abstractions:** matchumnews.com uses no photographs. Instead, every visual element is a **geometric abstraction of nature** -- the Bauhaus approach to natural forms, where a tree becomes a vertical rectangle crowned by a circle, a mountain becomes a triangle, water becomes concentric arcs, the sun becomes a perfect circle with radiating lines. These nature-element abstractions are rendered purely in CSS (using `border-radius`, `clip-path`, `transform: rotate()`, and layered `box-shadow`) in the section's neon accent color against the dark ground. **Specific Nature-Element Compositions:** 1. **Tree Canopy:** Three overlapping circles (radii: 8vw, 6vw, 5vw) in neon accent at varying opacities (15%, 25%, 40%), stacked above a thin vertical rectangle (0.5vw x 15vh) representing the trunk. The circles drift subtly on parallax, separating from the trunk at different scroll speeds to create a breathing, layered effect. 2. **Mountain Range:** Four triangles (`clip-path: polygon(50% 0%, 0% 100%, 100% 100%)`) of decreasing size, overlapping, each in a different opacity of the accent color. The rearmost triangle scrolls slower, the foremost faster, creating parallax depth. A single horizontal line at the base represents the horizon. 3. **Water Ripples:** Five concentric circles (border-only, 2px stroke) expanding from a central point, each at a different opacity. On scroll, the outer rings drift upward while the inner rings remain anchored, suggesting surface tension and movement. 4. **Sun/Moon:** A perfect circle (20vw diameter) with a radial gradient from the accent neon at center (60% opacity) fading to transparent. Eight thin lines (1px, accent color) radiate outward at 45-degree intervals, extending beyond the viewport edge. The entire composition rotates imperceptibly slowly (360deg per 120 seconds via CSS animation). 5. **Leaf Spiral:** A sequence of small rotated ellipses arranged in a Fibonacci spiral pattern, each ellipse slightly larger and more opaque than the last, all in the accent neon. The spiral unfurls progressively as the section scrolls into view. **Motif: Layered Depth** Every section reinforces the layered-depth motif through three mechanisms: (1) parallax scroll speed differentials between background shapes, mid-ground geometric elements, and foreground text; (2) opacity gradients where elements further "back" are more transparent; (3) subtle `filter: blur(1px)` on background-plane shapes to simulate atmospheric perspective. The cumulative effect is a sense of looking through stacked glass plates, each etched with geometric forms, with neon light bleeding through the layers. **Typewriter Ticker:** A persistent thin bar (height: 2rem) at the very bottom of the viewport displays a continuously typing line of text in DM Mono -- short dispatches, datelines, or aphoristic fragments ("form follows function follows form" ... "the grid remembers what the eye forgets") that type out character by character, pause, erase, and begin again. The text color cycles through the five neon accents. This bar has a `backdrop-filter: blur(12px)` and a semi-transparent dark background (#1A1A1E at 85% opacity), floating above all content layers. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as a vertical scroll through a sequence of Bauhaus-inspired composition plates. There is no traditional page structure -- no header, no footer, no sidebar, no card grid. Each viewport-height section is a complete visual statement. The scroll is the only interaction verb (aside from the hidden geometric navigation menu). **Typewriter Effect Implementation:** The primary animation pattern is the **typewriter effect**, applied to three contexts: 1. **Section Headlines:** When a section scrolls into view (detected via `IntersectionObserver` at 0.3 threshold), the headline text types out character by character at 45ms per character, with a blinking cursor (neon accent color, 530ms blink interval) that disappears 800ms after the final character. Use a `` per character with `opacity: 0` toggled to `1` sequentially via JavaScript `setTimeout` chain. Do not use CSS `steps()` animation on width -- it clips descenders and looks cheap. 2. **Dateline Text:** The DM Mono dateline beneath each headline types at 30ms per character, starting 200ms after the headline completes. 3. **Bottom Ticker:** Continuous typewriter loop in the persistent bottom bar. Types at 50ms/char, pauses 2000ms at end of phrase, erases at 25ms/char (reverse), pauses 500ms, types next phrase. **Parallax Scroll Implementation:** Use `transform: translateY()` driven by scroll position (via `requestAnimationFrame` polling of `window.scrollY`, NOT scroll event listeners which jank). Each parallax plane has a speed multiplier: Plane 0 = 0.3, Plane 1 = 0.6, Plane 2 = 1.0. Elements are absolutely positioned within their section containers. Sections use `overflow: hidden` to clip shapes that drift beyond bounds. **Geometric Shape Rendering:** All nature-element abstractions are pure CSS -- no SVG, no images, no canvas. Use `div` elements with `border-radius`, `clip-path`, `transform`, and `box-shadow`. Accent colors are applied via CSS custom properties (`--accent: #FF2D7B`) set per section, so the same shape markup can be reused with different colors by simply changing the custom property on the section wrapper. **Color Section Rotation:** Each story section receives a neon accent from the five-color rotation. Implement via a `data-accent` attribute on each section element, with CSS rules: ```css [data-accent="magenta"] { --accent: #FF2D7B; } [data-accent="chartreuse"] { --accent: #CCFF00; } [data-accent="cyan"] { --accent: #00E5FF; } [data-accent="ultraviolet"] { --accent: #BF5FFF; } [data-accent="tangerine"] { --accent: #FF6F3C; } ``` **Responsive Adaptation:** On viewports below 768px, the three-column grid collapses: Column 1 (rotated category label) moves to a horizontal position above the headline. Column 3 (geometric nature composition) shrinks to 30vw and positions behind the text at 8% opacity as a watermark-like background element. The parallax speed differentials are reduced by half (0.65, 0.8, 1.0) to prevent motion discomfort on touch devices. The typewriter effect speed increases to 30ms/char for headlines (faster on mobile where attention is shorter). **AVOID:** CTA buttons, pricing blocks, stat-grids, testimonial carousels, hamburger menus with slide-in panels, hero images with overlaid text, gradient backgrounds, card-based layouts, social media icon rows, cookie consent banners as design elements. **BIAS TOWARD:** Full-viewport compositions, geometric abstraction over representational imagery, neon-as-information (every neon element encodes meaning), type-driven storytelling, mechanical animation cadences (typewriter, not spring/bounce), silence and negative space as structural elements. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus Aesthetic at 0% Frequency:** No other design in the portfolio uses the Bauhaus aesthetic vocabulary. This is a completely unoccupied design territory. The combination of geometric rationalism (circles, triangles, rectangles as primary visual vocabulary) with systematic color deployment (neon accents as information carriers, not decoration) creates a visual language that has zero overlap with the dominant playful/editorial/corporate aesthetics in the collection. 2. **Nature Abstracted Through Geometry:** While nature-elements imagery exists at only 3% frequency, it is always deployed as organic, representational nature (leaves, trees, landscapes). matchumnews.com inverts this: nature is rendered through pure geometric abstraction -- a tree is a circle atop a rectangle, a mountain is a triangle, water is concentric arcs. This Bauhaus reductionism applied to natural forms is entirely unique in the portfolio and creates a visual tension between the organic subject and the geometric rendering. 3. **Typewriter as Primary Animation Language:** The typewriter-effect pattern exists at only 3% frequency and is typically used as a one-off novelty. Here, it is elevated to the primary animation vocabulary: every text element that enters the viewport types in character by character. This creates a consistent temporal rhythm across the entire experience -- the cadence of a teletype machine, mechanical and deliberate -- that contrasts sharply with the dominant spring/elastic/stagger animations used elsewhere in the collection. 4. **Dopamine-Neon as Information System:** The dopamine-neon palette (7% frequency) is typically used for blanket high-energy saturation. matchumnews.com disciplines neon into an information-encoding system: each of five accent colors maps to a section, neon is deployed only on thin rules, text, and geometric borders (never as fills or backgrounds), and the dark/bone ground ensures every neon element carries functional weight. This is neon-as-signal, not neon-as-spectacle. 5. **No Photography, No Illustration, No SVG:** The site uses zero photographic or illustrated imagery. Every visual element is a CSS-rendered geometric primitive. This radical constraint -- unique in a portfolio where 94% of designs use minimal imagery and 72% use photography -- forces visual storytelling through pure form, color, and spatial composition, which is the foundational Bauhaus thesis. **Chosen Seed/Style:** `aesthetic: bauhaus, layout: parallax-sections, typography: elegant-serif, palette: dopamine-neon, patterns: typewriter-effect, imagery: nature-elements, motifs: layered-depth, tone: conversational` **Avoided Overused Patterns:** - Avoided `playful` aesthetic (95% frequency) -- chose `bauhaus` (0%) instead - Avoided `centered` layout (99%) -- chose `parallax-sections` with left-biased three-column grid - Avoided `mono` typography dominance (99%) -- DM Mono is relegated to labels only; display and body use elegant serif families - Avoided `warm` palette as primary system (100%) -- palette is dopamine-neon on neutral grounds - Avoided `scroll-triggered` as primary animation (97%) -- typewriter-effect is the primary animation language - Avoided `minimal` imagery (94%) -- chose nature-elements rendered as geometric abstractions - Avoided `vintage` motifs (81%) -- chose layered-depth as the structural motif - Avoided `friendly` tone (98%) -- chose conversational, which is direct and respectful without being chummy