# Design Language for matchumnews.com ## Aesthetics and Tone matchumnews.com (맞춤뉴스 — Korean for "customized news," alternate romanization) channels a graffiti aesthetic — raw energy, street-level authenticity, and the bold visual impact of urban wall art applied to grassroots news customization. The site presents personalized news as street-level information — raw, immediate, and authored by the community rather than corporate media machines. Inspiration draws from Banksy's political stencil work, Keith Haring's bold outlines, the layered wheat-paste posters of urban walls, and the urgent typography of protest placards. The tone is calm-serene — despite the raw visual energy, the editorial voice maintains a measured contemplative quality, creating a striking contrast between urgent visuals and thoughtful analysis. The immersive-scroll layout creates a continuous, flowing experience like walking past a long mural wall. ## Layout Motifs and Structure The layout uses an **immersive-scroll** architecture — a continuous, unbroken scrolling experience with no visible section breaks, creating the sensation of moving through a single extended space. **Immersive Scroll Architecture:** - No visible section boundaries — content flows in one continuous stream - Full-width background that slowly transitions in hue/darkness as user scrolls - Content max-width: 900px centered, but with elements occasionally breaking wider - Scroll-triggered events: content reveals, background shifts, icon animations - Scroll progress indicator: thin bar (2px) at top of viewport showing page position **Section Sequence:** 1. **The Wall:** Opening title in futura-geometric bold, splashed across a midnight-blue background with crystalline icon-heavy accents, graffiti-style dripping text effect 2. **Fresh Paint:** Latest news category cards bouncing into view, each heavily icon-decorated with crystalline geometric borders 3. **The Gallery:** Featured curated feeds displayed as wall-mounted frames in the immersive scroll, each with bounce-enter animation 4. **Layers:** User customization walkthrough — each step painted over the previous one as user scrolls, creating a layered wheat-paste effect 5. **The Corner:** Footer fading into the distance as the mural wall ends, with minimal sign-off ## Typography and Palette **Typography:** - **Headlines:** "Bebas Neue" (Google Fonts) — condensed geometric display at 3rem-5rem, weight 400. Its tall, narrow forms channel protest placard typography and graffiti lettering. - **Body Text:** "Inter" (Google Fonts) — clean UI sans at 0.95rem, weight 400, line height 1.7. Neutral contrast to the bold headlines. - **Korean:** "Noto Sans KR" (Google Fonts) — Korean sans matching Inter's clean weight. - **Tags:** "Bebas Neue" at 0.8rem for category labels and metadata. **Color Palette:** - **Midnight Deep:** #0a1428 — deep midnight blue for primary background - **Midnight Mid:** #142040 — medium midnight for secondary backgrounds - **Electric White:** #f0f0f8 — bright white for primary text - **Graffiti Red:** #d04040 — vivid red for primary accents and highlights - **Graffiti Yellow:** #e0c020 — bright yellow for secondary accents and warnings - **Graffiti Cyan:** #20c0d0 — bright teal for links and interactive elements - **Fade Gray:** #5060708 — muted blue-gray for secondary text - **Crystalline Ice:** #a0c0d8 — pale icy blue for subtle accents and borders ## Imagery and Motifs **Icon-Heavy News Symbols:** News categories represented through dense icon collections (SVG, 24-32px, stroke-only in Graffiti palette colors, stroke-width: 2px) — newspapers, microphones, cameras, globes, lightning bolts. Icons cluster around content blocks like the sticker-bomb aesthetic of urban surfaces. **Crystalline Geometric Frames:** Content cards framed with angular, faceted borders (CSS clip-path creating hexagonal or crystalline shapes) in Crystalline Ice at 0.15 opacity. These geometric frames contrast with the organic graffiti energy, creating a structured chaos aesthetic. **Bounce-Enter Street Art Arrivals:** Content blocks enter the viewport with energetic bounce — translateY(50px) and scale(0.9) transitioning to translateY(0) and scale(1) with timing cubic-bezier(0.34, 1.56, 0.64, 1) over 400ms. The overshoot creates the feeling of slapping a poster onto a wall. **Dripping Text Effect:** The hero title features a CSS dripping paint effect — pseudo-elements positioned below select letters creating thin, elongated drops (border-radius: 0 0 3px 3px, height: 20-40px, width: 3px) in Graffiti Red, suggesting fresh spray paint. **Background Color Journey:** As the user scrolls, the background color smoothly transitions from Midnight Deep through Midnight Mid to slightly lighter tones and back, controlled by CSS custom properties updated via JavaScript scroll position. Creates the feeling of walking past differently-lit sections of a wall. ## Prompts for Implementation Build the page as an immersive graffiti scroll. Body: background-color updated via --scroll-bg custom property. JavaScript: on scroll, calculate progress (0-1) and interpolate between background colors using HSL values. Bounce-enter: blocks start opacity: 0, transform: translateY(50px) scale(0.9). On .visible: opacity: 1, transform: translateY(0) scale(1), transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1). Dripping text: h1 span.drip::after { content: ''; position: absolute; bottom: -30px; left: 50%; width: 3px; height: 30px; background: Graffiti Red; border-radius: 0 0 3px 3px; }. Vary height per letter for organic randomness. Crystalline frames: clip-path: polygon(4% 0%, 96% 0%, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0% 96%, 0% 4%) creating a subtle octagonal/crystalline shape. Icon clusters: groups of 4-6 icon SVGs, position: absolute around content blocks, various sizes (24-32px), slight rotation (5-15deg each), opacity: 0.4-0.7 in graffiti palette colors. Scroll progress bar: fixed top div, height: 2px, width: calc(var(--scroll-progress) * 100%), background: Graffiti Red, z-index: 9999. AVOID: Clean corporate news layouts, polished gradient-heavy designs, and sanitized information architecture. Let the raw graffiti energy and calm-serene editorial voice create a street-credible news experience. ## Uniqueness Notes 1. **Graffiti aesthetic for news customization:** Street art visual language positions personalized news as grassroots, community-owned information. 2. **Immersive-scroll as mural walk:** The continuous scrolling experience recreates the feeling of walking past an extended street art installation. 3. **Calm-serene tone within graffiti energy:** The contrast between raw visuals and measured editorial voice creates sophisticated tension. 4. **Crystalline frames for urban content:** Geometric precision frames containing chaotic graffiti energy create structured visual rhythm. 5. **Background color journey as environmental storytelling:** The shifting background simulates moving through differently-lit sections of urban space. **Seed/Style:** aesthetic: graffiti, layout: immersive-scroll, typography: futura-geometric, palette: midnight-blue, patterns: bounce-enter, imagery: icon-heavy, motifs: crystalline, tone: calm-serene **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses graffiti aesthetic, immersive-scroll layout, midnight-blue palette, icon-heavy imagery, and calm-serene tone.