# Design Language for matchoomnews.com ## Aesthetics and Tone matchoomnews.com channels the atmosphere of a private reading room inside a centuries-old library that has been converted into a contemplative news salon. The aesthetic is **zen-editorial** -- the deliberate stillness and spatial awareness of Japanese rock gardens applied to the cadence of news delivery. Rather than the frantic, notification-driven assault of modern news sites, matchoomnews.com presents information as objects of meditation: each story is a carefully placed stone in a karesansui, its position and weight considered, its relationship to adjacent stories creating meaning through proximity and silence. The tone is **authoritative** without being stentorian. It speaks with the quiet confidence of a broadsheet editor who has spent forty years at the desk -- someone who does not shout because the gravity of the words carries itself. There is no urgency theater, no breaking-news red banners, no clickbait animation. Instead, authority is communicated through material quality: the weight of the typography, the richness of the palette, the unhurried pacing of the layout. Think of the difference between a brass door knocker and a doorbell -- matchoomnews.com is the brass knocker, heavy and resonant. The visual inspiration draws from three specific sources: (1) the tokonoma alcove in traditional Japanese architecture, where a single scroll and a single flower arrangement command attention through intentional restraint; (2) the hand-marbled endpapers of 18th-century European bookbinding, where pigment floats on size in organic, unrepeatable patterns; (3) the editorial gravitas of mid-20th-century broadsheets like the International Herald Tribune before digital redesigns stripped them of their typographic character. ## Layout Motifs and Structure The layout follows a **masonry** paradigm -- content blocks of varying heights are arranged in a staggered, Pinterest-like vertical flow, but with the rigor and intentionality of a dry-stone wall rather than the algorithmic randomness of a social feed. Each masonry cell is a self-contained news unit with its own internal hierarchy, but the varying heights create a visual rhythm that rewards the eye's wandering -- unlike rigid grid layouts, the masonry structure produces organic sightlines that draw the reader from story to story through serendipity rather than forced sequence. **Masonry Architecture:** - **Column System:** Three columns on desktop (each approximately 30% viewport width with 2.5% gaps), collapsing to two columns on tablet and a single column on mobile. The columns are not mathematically equal -- the center column is 2% wider than the flanking columns, creating a subtle gravitational center that the eye registers subconsciously. - **Cell Proportions:** Each masonry cell adheres to one of four height classes: compact (180px-240px for headline-only briefs), standard (280px-380px for standard stories with watercolor thumbnails), feature (420px-560px for lead stories with expanded imagery), and panoramic (600px+ for rare immersive pieces that span two columns). The ratio of compact:standard:feature:panoramic across a typical page load is approximately 3:5:2:1. - **Stone-Wall Alignment:** Unlike standard masonry libraries that pack cells purely by available space, the layout includes a custom positioning bias that prevents more than two cells of the same height class from appearing adjacent. This creates the irregular-yet-harmonious rhythm of actual masonry -- each "stone" is different, but the wall holds together. - **Breathing Gutters:** Between masonry cells, the gutters are not mere gaps but active negative space. On hover, a cell's gutter expands by 4px on each side (animated over 400ms with a spring easing), making the hovered cell appear to float slightly above the wall -- a zen rock garden effect where attention lifts a stone above the gravel. - **Tokonoma Feature Zone:** The top of the page contains a full-width "tokonoma" zone -- a single featured story occupying 100% width and approximately 50vh height. This zone has no masonry; it is a moment of singular focus before the masonry wall begins. The tokonoma zone is separated from the masonry grid by a horizontal band of hand-marbled texture (see Imagery section), 40px tall, functioning like the raised threshold of a tokonoma alcove. - **No Fixed Navigation Bar:** Navigation is accessed through a minimal circular icon (a single enso brushstroke) positioned in the top-left corner. Tapping it opens a full-screen overlay with category navigation set in Playfair Display. The absence of a persistent nav bar preserves the contemplative, uncluttered reading surface. ## Typography and Palette **Typography:** - **Headlines / Display:** "Playfair Display" (Google Fonts) -- weight 700, both roman and italic. Playfair's high-contrast transitional serifs evoke the authority of 18th-century engraved title pages. Headlines are set at 2.4rem-4.8rem depending on cell height class. Letter-spacing is set tight at `-0.015em` with `line-height: 1.08` for compact, authoritative blocks of text. The italic variant is reserved for feature and panoramic cells, signaling editorial emphasis. All headlines use `font-feature-settings: "liga" 1, "kern" 1` for proper ligature rendering. Headlines never appear in uppercase -- sentence case preserves the zen quietude of the typographic voice. - **Body / Reading:** "Source Serif 4" (Google Fonts) -- weight 400 for body text, weight 600 for inline emphasis. This typeface's open counters and generous x-height make it supremely readable at 1.05rem/1.72 line-height for long-form news reading. The serif construction complements Playfair without competing: where Playfair is theatrical and declarative, Source Serif 4 is steady and workmanlike. Body paragraphs are set with `max-width: 38em` within their masonry cells to maintain optimal line length. - **UI / Captions / Metadata:** "DM Sans" (Google Fonts) -- weight 400 and 500. A clean geometric sans-serif for timestamps, bylines, category tags, and navigation elements. Set at 0.75rem-0.85rem with `letter-spacing: 0.06em` and `text-transform: uppercase` for metadata lines. The geometric precision of DM Sans creates a deliberate contrast with the organic serif faces: it signals "system" while the serifs signal "content." **Palette:** The palette is **honeyed-neutral** -- a warm, amber-inflected range of natural tones inspired by beeswax, aged parchment, raw linen, and walnut wood. The warmth is not saccharine but substantial, like the color of light filtering through old glass. | Role | Hex | Description | |------|-----|-------------| | Background Primary | `#F6F0E4` | Aged parchment -- the base surface, warm but not yellow | | Background Secondary | `#EDE4D0` | Deeper parchment -- used for masonry cell backgrounds | | Text Primary | `#2C2417` | Burnt walnut -- near-black with brown undertone, never pure black | | Text Secondary | `#6B5D4F` | Weathered oak -- for bylines, metadata, secondary text | | Accent Gold | `#C4982B` | Raw honey -- the primary accent, used sparingly for category tags and the enso nav icon | | Accent Warm | `#9B6B3D` | Amber resin -- for hover states and active indicators | | Marble Vein | `#D4C9B5` | Pale marble -- used in decorative marble-vein SVG patterns | | Ink Dark | `#1A1612` | Sumi ink -- the darkest tone, used only in the tokonoma feature zone background | The palette deliberately avoids pure white (#FFFFFF) and pure black (#000000). Every surface has warmth; every text element has brown undertone. This creates the feeling of reading on natural material rather than a screen. ## Imagery and Motifs **Watercolor Washes:** The primary imagery mode is **watercolor** -- not literal watercolor paintings, but CSS-generated watercolor effects that create soft, organic washes of color behind and around content elements. These washes are produced through layered techniques: 1. **SVG Filter Turbulence:** Each masonry cell has an optional watercolor wash background generated by an SVG `` filter with `type="fractalNoise"`, `baseFrequency="0.015"`, and 4 octaves, piped through `` to shift the noise into honeyed tones (#C4982B at 15% opacity). The result is a soft, cloud-like wash that varies per cell, as if each story card was painted on a different sheet of watercolor paper. 2. **Bleed Edges:** Masonry cell borders are not sharp rectangles. Instead, each cell uses a CSS `mask-image` referencing an SVG path with irregular, soft edges -- like the deckle edge of handmade paper. Five different mask variants rotate across cells to prevent repetition. The masks feather from full opacity to transparent over 8-12px, creating the watercolor bleeding effect where pigment meets wet paper. 3. **Wash Intensity by Story Weight:** Compact cells have barely-there washes (5-8% opacity). Standard cells carry moderate washes (10-15%). Feature cells have pronounced washes (18-25%) with visible color variation. Panoramic cells use full watercolor treatment with two-color washes (honey gold bleeding into marble pale) that create dramatic visual weight. **Marble-Classical Motifs:** The decorative vocabulary draws from **marble-classical** sources -- specifically the veining patterns of Calacatta marble and the scrollwork of neoclassical architectural ornament: - **Marble Vein Dividers:** Instead of simple horizontal rules, section dividers are rendered as thin SVG paths that mimic marble veining -- sinuous, branching lines in #D4C9B5 against the parchment background. These veins are procedurally generated using a cubic Bezier path with randomized control points, ensuring each divider is unique. The veins are 1-2px wide with a subtle `filter: blur(0.3px)` to soften them. - **Corner Acanthus:** Feature and panoramic masonry cells have subtle acanthus leaf motifs rendered as SVG in the top-left corner -- a 40x40px decorative element in #D4C9B5 at 30% opacity. This classical ornament anchors the cell and signals editorial importance without overwhelming the content. - **Enso Navigation Icon:** The primary navigation trigger is a hand-brushed enso (circle) icon -- an imperfect, single-stroke circle rendered as an SVG path, referencing the zen aesthetic. The enso is drawn in #C4982B (honey gold) and has a subtle CSS animation where the stroke-dashoffset completes the circle drawing over 800ms on page load, as if an invisible brush is painting it in real time. - **Ink Splatter Accents:** Occasionally, masonry cells feature tiny ink splatter marks (3-5px diameter circles with irregular edges) in #2C2417 at 8% opacity, scattered near the bottom-right corner. These reference the accidental beauty of calligraphy -- the drops that fall from a brush at rest. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to the tokonoma feature zone -- a full-width, 50vh section with a single hero story. The background is #1A1612 (sumi ink), and the headline appears in Playfair Display Italic at 4.2rem in #F6F0E4 (parchment), centered vertically and horizontally. Below the headline, a single line of Source Serif 4 at 1rem provides the story lede. No navigation is visible on first load except the enso icon, which completes its stroke-draw animation. The effect is of a single, contemplated object in a darkened alcove. **Shake-Error Micro-Interaction:** The primary interaction pattern is **shake-error** -- a deliberate, controlled horizontal shake that communicates invalid states. When a reader attempts an action that cannot be completed (submitting an empty search, clicking a disabled category, reaching the end of available stories), the relevant element performs a sharp horizontal oscillation: 3 cycles of 6px left-right displacement over 400ms with decreasing amplitude (6px, 4px, 2px). The easing is `cubic-bezier(0.36, 0.07, 0.19, 0.97)` -- sharp at the start, settling quickly. This shake is the only "loud" animation on the site; everything else is slow and contemplative, making the shake feel like a polite but firm refusal, like a librarian shaking their head when you try to leave with a reference book. **Extended Shake Applications:** - Form validation: Empty fields shake with the standard pattern. - Load boundary: When infinite scroll reaches its end, the last row of masonry cells performs a synchronized micro-shake (2px amplitude only) -- a collective "no more." - Navigation constraint: Attempting to swipe past the first or last category triggers a boundary shake on the enso icon. - 404 state: The entire viewport content performs one slow, exaggerated shake (12px amplitude, 600ms, single cycle) before transitioning to a watercolor-washed empty state. **Scroll Behavior:** Scrolling through the masonry grid uses a custom `IntersectionObserver` setup. Each masonry cell enters the viewport with a subtle upward translation (transform: translateY(20px) to translateY(0)) and opacity fade (0 to 1) over 500ms with a staggered delay of 60ms per cell. The stagger follows column order (left column first, then center, then right) to create a gentle cascade effect. Exit animations are not applied -- cells remain visible once revealed, preserving the meditative scroll rhythm without the jarring effect of elements disappearing. **Tokonoma Transition:** The tokonoma feature zone has a parallax-like behavior: as the user scrolls down, the sumi ink background darkens to pure #0F0D0A while the headline text fades to 0.3 opacity and scales down to 0.96, creating the sensation of receding into the alcove as the masonry wall rises. The marble-vein divider between tokonoma and masonry becomes visible only after 60% of the tokonoma has scrolled past, drawing itself left-to-right over 1200ms. **Hover States:** Masonry cell hover states are zen-minimal: (1) the cell's watercolor wash intensifies by 8% opacity, (2) the cell's gutter expands by 4px, (3) the headline text color shifts from #2C2417 to #9B6B3D (amber resin) over 300ms, (4) the marble-vein divider below the cell brightens to full opacity. No shadows, no scale transforms, no card lifts -- the effect is of attention gently warming a surface. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, breaking-news ticker bars, sidebar ad columns, modal pop-ups, cookie banners that break the layout, sticky headers, hamburger menus with flyout panels. The site must feel like a reading room, not a newsroom control center. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zen-Masonry Fusion:** No other design in the portfolio combines zen aesthetic restraint with masonry layout. The masonry layouts at 5% frequency are typically paired with playful or editorial aesthetics. matchoomnews.com uses masonry as a contemplative structure -- each stone placed with intention, each gap a deliberate pause -- transforming a layout typically associated with visual abundance (Pinterest, mood boards) into an instrument of meditative pacing. 2. **Watercolor-on-Parchment Material System:** The watercolor imagery treatment (9% frequency overall) is typically applied as a full-page artistic effect. Here, watercolor functions as a material property of individual masonry cells -- each cell is its own sheet of watercolor paper with unique wash intensity calibrated to editorial weight. This per-cell watercolor system creates a tactile, handcrafted quality that no other design achieves, making each story feel physically distinct. 3. **Shake-Error as Editorial Voice:** The shake-error pattern appears at only 1% frequency in the portfolio and is typically a utilitarian form validation tool. matchoomnews.com elevates it into an editorial voice -- the site's way of saying "no" with zen clarity. The graduated shake system (micro-shakes for boundaries, standard shakes for validation, slow ceremonial shakes for 404s) creates a complete vocabulary of refusal that doubles as personality. 4. **Tokonoma Narrative Architecture:** The tokonoma feature zone -- a singular, altar-like presentation of one story in a darkened alcove before the masonry wall begins -- has no parallel in the portfolio. It borrows from Japanese architectural philosophy where the most important object is given solitary prominence in a specially designated space, inverting the typical news site pattern of cramming as many headlines above the fold as possible. 5. **Marble-Vein Procedural Ornament:** The use of procedurally generated marble-vein SVG dividers and acanthus corner motifs creates classical ornamentation that is never repetitive. At 5% frequency for marble-classical motifs, this approach is rare, and the procedural generation ensures that even within this site, no two dividers share the same vein pattern -- each is as unique as actual stone. **Documented seed/style:** aesthetic: zen, layout: masonry, typography: playfair-elegant, palette: honeyed-neutral, patterns: shake-error, imagery: watercolor, motifs: marble-classical, tone: authoritative **Avoided overused patterns:** Avoided playful aesthetic (95%), centered layout (99%), mono typography (99%), warm-only palette (100%), scroll-triggered as primary pattern (97%), minimal imagery (93%), vintage motifs (81%), friendly tone (98%). While the palette is warm in temperature, it is specifically honeyed-neutral (2%) rather than the generic warm category. The primary animation pattern is shake-error (1%) rather than the ubiquitous scroll-triggered, though scroll-triggered entrance animations are used as secondary support for the masonry reveal.