# Design Language for matchoomnews.com ## Aesthetics and Tone matchoomnews.com (맞춤뉴스 — Korean for "customized news") channels a playful aesthetic — bright colors, rounded forms, and the optimistic visual language of apps designed to delight, applied to personalized news discovery. The site makes finding your ideal news feed feel like a joyful, creative act — assembling your perfect information diet with the satisfaction of building something personal. Inspiration draws from Pinterest's discovery interface, Notion's playful productivity, Spotify Wrapped's data-joy, and the colorful tile patterns of Korean traditional jogakbo patchwork quilts. The tone is scholarly-intellectual — despite the playful visuals, the content voice carries academic rigor, treating news curation as a studied discipline. The broken-grid layout creates visual energy and surprise that mirrors the dynamic, unpredictable nature of news discovery. ## Layout Motifs and Structure The layout uses a **broken-grid** architecture — content blocks overlap, offset, and break free from rigid alignment, creating the dynamic energy of a newsroom in action. **Broken-Grid Architecture:** - Base: 12-column grid, max-width: 1200px, but blocks deliberately cross boundaries - Cards offset 20-40px from expected positions using CSS transforms - Select cards tilted 1-2 degrees for energy - Overlap zones: adjacent blocks share 30-60px of overlap with z-index layering - Generous gaps (80px+) between content clusters **Section Sequence:** 1. **Headlines Board:** Hero with broken-grid arrangement of sample news cards, abstract-shape decorations, and title in commissioner-versatile type 2. **Your Feed:** Customization showcase — interactive category cards with hover-lift showing news topics users can select 3. **How It Works:** Step-by-step explanation in overlapping broken-grid cards with abstract-tech connection diagrams 4. **Sample Feeds:** Preview cards showing different curated news experiences, tilted and overlapping 5. **Subscribe:** Footer as a clean, scholarly call-to-action with minimal form and academic credibility signals ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile serif at 2rem-3.5rem, weight 700. Its broad range from light to bold creates a complete typographic system with scholarly presence. - **Body Text:** "Commissioner" at 0.95rem, weight 400, line height 1.7. Maintaining serif consistency for intellectual credibility. - **Data/Tags:** "Space Grotesk" (Google Fonts) — geometric sans at 0.8rem, weight 500 for category tags and metadata. - **Labels:** "Commissioner" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Burgundy Rich:** #6a2a3a — deep wine red for primary accents and headlines - **Cream Base:** #faf0e4 — warm cream for page background - **Rose Blush:** #d8a0a0 — soft pink for secondary card backgrounds - **Sage Muted:** #a0b898 — soft green for tertiary accents and success states - **Dark Ink:** #2a2020 — warm near-black for primary text - **Gold Warm:** #c4a050 — warm gold for premium indicators and highlights - **Lavender Soft:** #c0b0c8 — muted purple for additional card variety - **Stone Light:** #e8e0d8 — warm light gray for card borders and backgrounds ## Imagery and Motifs **Abstract-Shape News Blocks:** News categories represented as abstract geometric shapes (CSS or SVG) — circles, rounded rectangles, and organic blobs in pastel palette colors. Each shape contains a category icon (line-weight 1.5px, Dark Ink) and serves as a visual anchor for the broken-grid cards. **Abstract-Tech Connection Diagrams:** The personalization algorithm visualized as an abstract technology diagram — thin (1px) lines in Burgundy Rich at 0.2 opacity connecting user preference nodes to news category nodes, with small (6px) circles at intersection points. Suggests the intelligent matching happening behind the scenes. **Hover-Lift Category Cards:** News topic cards lift on hover — transform: translateY(-6px) with box-shadow deepening from 0 2px 4px rgba(0,0,0,0.05) to 0 8px 24px rgba(0,0,0,0.1). A color strip at the card top (4px height in the card's category color) subtly brightens on hover. **Scholarly Margin Notes:** Feature sections include margin annotations — small text blocks (max-width: 140px) positioned in the broken-grid gaps, styled in Commissioner italic at 0.8rem, containing scholarly commentary on news curation methodology. Connected to main content by thin hairlines. **Jogakbo Pattern Accents:** Section backgrounds feature subtle patchwork patterns inspired by Korean jogakbo — geometric shapes (rectangles, triangles) in pastel palette colors at 0.04 opacity, arranged in irregular but harmonious quilting patterns using CSS clip-path on small divs. ## Prompts for Implementation Build the page as a playful broken-grid newsroom. Base grid: display: grid, grid-template-columns: repeat(12, 1fr). Cards use grid-column spans that overlap neighbors. Rotation: transform: rotate(1deg) on select cards. Offsets: margin adjustments of 20-40px. Hover-lift: transition: transform 250ms ease, box-shadow 250ms ease. Default: box-shadow: 0 2px 4px rgba(0,0,0,0.05). Hover: transform: translateY(-6px), box-shadow: 0 8px 24px rgba(0,0,0,0.1). Abstract shapes: divs with border-radius: 50% (circles) or border-radius: 40% 60% 55% 45% (organic) in pastel palette fills at 0.3-0.5 opacity. Positioned within card headers, 60-80px. Connection diagrams: SVG with position: absolute. Lines: straight or quadratic-bezier paths. Stroke: Burgundy Rich at 0.2 opacity, 1px. Junction circles: 6px, fill: Rose Blush. Margin notes: position: absolute, max-width: 140px. Connected to parent with thin SVG line. Font: Commissioner italic, 0.8rem, color: Burgundy Rich at 0.5 opacity. AVOID: Dense, sterile news aggregator layouts, dark corporate interfaces, and overwhelming information density. Let playful energy and scholarly credibility make news curation feel joyful and intelligent. ## Uniqueness Notes 1. **Playful aesthetic for personalized news:** Joyful visual design makes news curation feel creative rather than algorithmic. 2. **Broken-grid as newsroom energy:** Overlapping, tilted cards capture the dynamic chaos of a working newsroom. 3. **Scholarly-intellectual tone with playful visuals:** The combination of academic voice and bright design creates credible yet approachable news curation. 4. **Jogakbo pattern accents:** Korean patchwork quilting motifs honor the cultural context while adding unique visual texture. 5. **Margin notes as curation methodology:** Scholarly annotations in layout gaps add intellectual depth to the news discovery experience. **Seed/Style:** aesthetic: playful, layout: broken-grid, typography: commissioner-versatile, palette: burgundy-cream, patterns: hover-lift, imagery: abstract-shapes, motifs: abstract-tech, tone: scholarly-intellectual **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses playful aesthetic, broken-grid layout, burgundy-cream palette, abstract-shapes imagery, and scholarly-intellectual tone.