# Design Language for matchumnews.com ## Aesthetics and Tone **matchumnews.com** draws from the Korean word 맞춤 (matchum) — meaning *tailor-fit*, *custom-cut*, *made exactly for you*. The site is a **sci-fi editorial broadcast from thirty years ahead**, printed on yellowed newsprint that survived a long journey through time. Imagine a broadsheet newspaper discovered inside a derelict orbital station — its ink still vivid, its layout impossibly precise, but the edges of its pages browned with age and the columns edged with faint orange plasma light from the docking bay just outside the porthole. The aesthetic is **astro-editorial**: the solemnity of serious journalism crossed with the visual grammar of a spaceship instrument panel. Every story feels simultaneously ancient (aged paper, ink presses, typographic weight) and futuristic (animated border-light, glowing pulse lines, variable-weight headlines that breathe like a readout). The mood is relentlessly optimistic — this is not dystopian sci-fi. It is the future that *worked*. Humanity made it. The news matters. **Tone:** bright optimism under extreme precision. Every element feels hand-selected for this reader, delivered by a culture that solved information overload by caring more, not less. The paper-aged texture lives in the background and in photographic containers — sepia-toned with grain, treated as if every image was archived and then transmitted across deep space. The burnt-orange accent is the signal carrier: it illuminates borders, pulses at intersections, and marks the stories the algorithm (a friendly one) chose specifically for you. ## Layout Motifs and Structure The layout is a **magazine-spread reconstructed as a flight-deck display**. The macro-structure is a three-column broadsheet grid that fills the viewport edge-to-edge at desktop, collapsing to a single dominant column on mobile — but within that grid, the proportions deliberately echo classic magazine double-page spreads: one column takes 55% of the width, the other two share the remaining 45%. **Spatial hierarchy:** - **Header band:** A thin 48px strip at the very top — full bleed, dark background (`#0e0b08`), with a single glowing orange scanline running the full width. The masthead `matchumnews` is set in expressive variable type that subtly expands its width (`wdth` axis) on hover, as if a scanner is resolving its letters into higher definition. - **Feature spread:** The dominant story occupies the left 55% column as a full-height card reaching from the header band to the page midpoint. The image inside this card is paper-aged (sepia-toned, grain overlaid), and an animated border of burnt-orange light traces its perimeter continuously, like a signal confirming the story is live. - **Secondary column pair:** Two narrower columns to the right carry three stories each — smaller headlines, tighter leading, denser information. These columns are visually separated from the feature by a hairline `#cc5500` vertical rule that has a slow pulse animation (opacity 0.4 → 1.0 → 0.4, 4s loop). - **Story cards:** Each card uses a subtle `1px` inset border that animates its stroke-dashoffset on hover — the border draws itself around the card in 0.6s, starting from the top-left corner and completing clockwise. - **Floating elements:** Pull-quote fragments, category tags, and timestamps break out of the column grid and float slightly above the card surface using CSS `transform: translateZ(4px)` and a soft drop shadow (`box-shadow: 0 8px 24px rgba(204,85,0,0.18)`). These appear as if printed on a second layer of paper laid over the base spread, or as if holographic overlays. - **Horizontal story band:** Below the main spread, a horizontal filmstrip of six tertiary stories scrolls on a horizontal axis with momentum physics. Each frame is a fixed-width card (320px) with aged-image thumbnail and a two-line headline. The strip has a subtle `overflow: hidden` mask with a gradient fade at both edges into the page background. - **Footer signal:** A minimal footer — full-bleed `#0e0b08` with an animated row of small orange dots that sequence left-to-right like a transmission pulse, and a single line of metadata in monospace type. **Composition rule:** No story section ever uses a centered layout. All text is left-aligned or left-to-right flow. Asymmetry is structural, not decorative — it mirrors the asymmetry of information itself. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Masthead / Hero Display:** [Unbounded](https://fonts.google.com/specimen/Unbounded), variable weight (`wght 200–900`). At load, the masthead renders at `wght 200` and animates to `wght 700` over 1.2s on a spring easing. On hover, `wdth` axis expands from 75 to 125 over 0.4s. Set at `clamp(2rem, 6vw, 5rem)`, all-caps with `letter-spacing: 0.12em`. - **Feature Headline:** [DM Serif Display](https://fonts.google.com/specimen/DM+Serif+Display), weight 400 italic for feature stories. Large, unhurried, set at `clamp(2.4rem, 5vw, 4.2rem)`. The italic lean gives it a sense of urgency without shouting. - **Section Kickers / Category Labels:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 600, set in all-caps at 0.7rem with `letter-spacing: 0.2em`. Used for category badges like `SCIENCE`, `CULTURE`, `DISPATCH`. Color: burnt-orange `#cc5500`. - **Body / Secondary Headlines:** [Source Serif 4](https://fonts.google.com/specimen/Source+Serif+4), variable optical size (`opsz 8–60`). Body text runs at `opsz 14`, `wght 400`. Secondary headlines use `opsz 36`, `wght 600`. This gives body text a crisp newspaper-print feel and gives subheads editorial weight without a font switch. - **Metadata / Timestamps / Bylines:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono), weight 400, 0.72rem, color `#c47a3a`. Used for timestamps (`14:32 UTC+9`), bylines, and the footer data row. **Color palette:** | Role | Name | Hex | |------|------|-----| | Page background | Deep Newsprint | `#0e0b08` | | Primary surface | Aged Paper | `#f5edd8` | | Card surface | Warm Ivory | `#ede3cc` | | Feature accent | Burnt Orange | `#cc5500` | | Signal glow | Ember | `#e8720c` | | Body text | Press Ink | `#1c1510` | | Secondary text | Carbon | `#4a3f35` | | Metadata text | Rust Mono | `#c47a3a` | | Border hairline | Pale Copper | `#b8855a` | | Deep background 2 | Void Black | `#060402` | **Texture:** A subtle SVG-based grain overlay (`opacity: 0.06`) is applied as a `background-image` on all card surfaces and the hero image, simulating halftone print grain. Not photographic noise — SVG `` filtered grain, so it scales with resolution. ## Imagery and Motifs **Photography treatment:** All images use a CSS filter pipeline: `sepia(0.65) brightness(0.9) contrast(1.1) saturate(0.8)`. This creates the paper-aged analog look — photos look like they were printed in a 1970s science journal and then scanned. On hover, `sepia(0)` with a 0.8s ease transition, as if the image "wakes up" and the color bleeds back in. This is the key interaction metaphor: the site is a transmission, and your attention restores it. **Floating elements as motifs:** - **Signal tags:** Small pill-shaped labels (`border-radius: 2px`, not rounded) float at the top-left corner of every story card, offset `8px` from the card edge, using CSS absolute positioning with `z-index: 10`. They carry category text in `Space Grotesk` and a 1px burnt-orange border that animates its dashoffset on page-load. - **Timestamp ghosts:** Timestamps appear as a secondary typographic layer, positioned in the bottom-right corner of feature images, overlapping the image edge and the page background simultaneously — part of the photo, part of the page. - **Transmission rings:** Thin concentric SVG circles (`stroke: #cc5500`, `opacity: 0.15`) radiate from the center of the feature image on page load, expanding outward and fading, like a sonar ping confirming the story's coordinates. Three rings, staggered 0.6s each. - **Column rules as signals:** The vertical hairlines separating columns are not static lines — they are animated `` elements where a short dashed segment (`stroke-dasharray: 8 120`) travels from top to bottom on a 3s loop, like a data cursor scanning the column. - **Floating quote fragments:** Pull quotes break out of their column and sit at 3–5 degrees of rotation, with a very faint drop shadow, as if a physical paper slip was placed on top of the spread. **No iconography from icon libraries.** All micro-icons (arrow for "read more," share symbol) are hand-drawn SVG paths, 1px stroke, burnt-orange color. ## Prompts for Implementation **The story:** A reader in 2054 opens a news terminal on their way to work. The interface looks like a newspaper because newspapers were the last thing humans agreed was worth reading. The terminal pulls today's stories, each one *matchum* — cut exactly to this reader's curiosity. The aging effect on the images is not nostalgia; it is the patina of importance. Anything worth knowing is worth preserving. The orange glow is the terminal confirming signal lock. **Full-screen narrative structure:** 1. **Signal Lock (page entrance).** The entire page loads from `opacity: 0`, then a single burnt-orange scanline sweeps from top to bottom over 0.9s, and the content resolves behind it. This is the "terminal acquiring signal" moment. Never use a spinner. 2. **Masthead breathe.** The `Unbounded` masthead runs its weight animation on load: 200 → 700 over 1.2s, then settles. At rest, the masthead has a very faint orange text-shadow (`0 0 24px rgba(204,85,0,0.3)`) that pulses at 4s intervals on a `@keyframes` loop (opacity of the shadow: 0.15 → 0.45 → 0.15). 3. **Feature card border-trace.** On entrance, the animated SVG border on the feature story card traces itself clockwise from top-left in 1.4s. On scroll-back (Intersection Observer), it resets and re-traces. The border is a dashed line with `stroke-dasharray: 8 4` and `stroke: #cc5500`. 4. **Image restoration on hover.** Every aged image wakes up on hover — CSS transition `filter: sepia(0) brightness(1) contrast(1)` over 0.8s ease. This metaphor must be consistent across every image on the page with no exceptions. 5. **Floating elements entry.** Signal tags, timestamps, and pull quotes enter with `transform: translateY(6px) opacity(0)` → `translateY(0) opacity(1)`, staggered 0.1s per element, triggered by IntersectionObserver on their parent card. 6. **Horizontal filmstrip.** The tertiary story filmstrip uses `pointer-events: auto` drag-to-scroll with momentum: on `mousedown`, track delta X and apply `scrollLeft` directly to the container; on `mouseup`, apply a velocity-decay interval that eases the scroll to rest over ~600ms. 7. **Column scanner lines.** The animated vertical rules between columns must be implemented as SVG `line` elements inside a small `` positioned absolutely over the layout, not as CSS borders. The scanning segment is a `` with animated `stroke-dashoffset`. 8. **Footer pulse.** Seven small orange circles (``) in the footer animate their `opacity` in sequence, each offset by 0.14s, looping indefinitely. This is the only motion in the footer — everything else is static. **Implementation constraints:** - AVOID: hero CTA buttons, subscription banners, pricing blocks, stat-grids, testimonial carousels. - AVOID: centered layout for any text block. Every text element is left-aligned. - AVOID: white backgrounds. The page background is `#0e0b08`; card surfaces are `#f5edd8` and `#ede3cc`. - AVOID: any animation that changes `width`, `height`, or causes layout reflow. All animations use `transform`, `opacity`, `filter`, and SVG properties only. - The grain overlay must use `pointer-events: none` so it does not interfere with image hover interactions. ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **Image-restoration hover metaphor.** No other design in the registry uses CSS filter animation as its primary interaction metaphor. The sepia-to-color transition on every photograph is not decorative — it is the conceptual engine of the site: attention restores the signal. This is thematically specific to 맞춤 (tailored relevance) and entirely absent from the corpus. 2. **Animated SVG column rules as data cursors.** The corpus uses static hairlines (100% of designs with column rules). This design replaces static column separators with animated SVG scanning lines — a dashed segment traveling top-to-bottom like a cursor or a sensor sweep. It reads as both editorial formalism (column rule) and sci-fi instrumentation (scanner) simultaneously. 3. **Weight-axis masthead animation on page load.** The Unbounded variable-font masthead animates from ultra-light (200) to bold (700) on entrance, then breathes with a shadow pulse. This uses the `wght` axis as a narrative device — the site's identity gains its full weight as it loads, not before. The corpus has no other design that animates a variable font weight axis as a load event. 4. **Burnt-orange-on-deep-newsprint palette with paper-aged imagery.** The combination of near-black (`#0e0b08`) backgrounds with aged-paper card surfaces (`#f5edd8`) and a single vivid burnt-orange signal color is structurally different from the corpus palette patterns. No registry entry pairs deep void backgrounds with warm aged-paper card surfaces inside a news layout. 5. **Transmission rings as imagery motif.** The concentric SVG sonar rings radiating from the feature image on load are borrowed from radar/sonar display aesthetics and embedded directly in the editorial layout. They confirm the story's coordinates, making the sci-fi metaphor structural rather than decorative. **Chosen seed from assignment:** `aesthetic: sci-fi, layout: magazine-spread, typography: expressive-variable, palette: burnt-orange, patterns: border-animate, imagery: paper-aged, motifs: floating-elements, tone: optimistic-bright` **Avoided from frequency analysis (overused patterns):** `bebas-bold`, `serif-revival`, `display-bold`, `grotesque-neo`, `retro-display`. The masthead uses `Unbounded` (not Bebas), the body editorial voice uses `Source Serif 4` as a contemporary variable optical-size font rather than a historical revival, and no display elements use Bebas Neue or its aesthetic register.