# Design Language for yesang.org ## Aesthetics and Tone yesang.org (예상, Korean for "expectation/prediction") channels pop-art vibrancy through a hexagonal-honeycomb prediction matrix. The visual identity takes Lichtenstein's bold dots, Warhol's repetitive frames, and the flat, high-contrast colors of vintage comic books, applying them to the concept of forecasting and prediction. Hexagonal cells become comic panels, each containing a different prediction or forecast visualized in pop-art style. The tone is elegant and sophisticated -- pop art elevated from kitsch to curated gallery piece. Inspiration from Roy Lichtenstein's Ben-Day dots, Andy Warhol's screen prints, vintage Korean newspaper fortune columns, and the hexagonal pattern of insect compound eyes (multi-faceted vision = multiple predictions). ## Layout Motifs and Structure A **hexagonal-honeycomb** layout where each hexagonal cell represents a different prediction or expectation, creating a multi-faceted forecasting interface. **Primary structure:** - **Pop gallery entrance (100vh):** A bold muted-vintage background (#f0e8d0) with large Ben-Day dots pattern (repeating radial-gradient, 8px circles at 16px intervals, #d8c8a0 at 0.3 opacity). The title "예상" in elegant Playfair serif (25vw) with "YESANG.ORG" below. A single hexagonal frame (thin 2px border in vintage red #c84040) contains a subtitle: "The Art of Expectation." - **Prediction honeycomb:** Hexagonal cells in a honeycomb arrangement. Each cell has a distinct pop-art color (rotated through the vintage palette). Inside each: a grain-overlay texture, a bold headline (the prediction), and a small star-burst shape. Cells fade-reveal on scroll. - **Organic-blobs as thought bubbles:** Large organic blob shapes positioned between honeycomb sections, styled as comic-book thought bubbles (white fill, dashed border) containing meta-commentary about prediction and expectation. - **Comic strip footer:** A horizontal strip of 4 connected panels (rectangular, comic-strip style) showing a narrative sequence about "expecting the unexpected," with pop-art typography and Ben-Day dot fills. **Spatial relationships:** Hexagonal cells: 180px wide, honeycomb pattern with 4px gaps. Thought-bubble blobs: 200-300px, positioned with transform: rotate for dynamic angles. Max honeycomb width: 1000px. ## Typography and Palette **Fonts:** - **Display/Korean:** "Playfair Display" (Google Fonts) -- a high-contrast transitional serif used at clamp(40px, 7vw, 96px). Weight 700. The elegant, fashion-magazine quality of Playfair elevates pop-art visuals to gallery sophistication. - **Body text:** "Nanum Gothic" (Google Fonts) -- a clean Korean-supporting gothic sans-serif at 16px/1.7 line-height. Weight 400 for body, 700 for emphasis. - **Pop art callouts:** "Bangers" (Google Fonts) -- a comic-book display font at 20px for prediction headlines within hexagonal cells and thought-bubble captions. Weight 400. The loud, impactful letterforms channel vintage comic book energy. **Color Palette:** - **Background vintage cream:** #f0e8d0 (muted vintage paper) - **Pop red:** #c84040 (vintage comic red) - **Pop blue:** #4060a0 (vintage comic blue) - **Pop yellow:** #e8c830 (bright vintage yellow) - **Pop green:** #408060 (muted vintage green) - **Ben-Day dots:** #d8c8a0 (subtle dot pattern color) - **Text primary:** #2a2420 (warm near-black) - **Grain overlay:** #8a7a60 (muted warm gray for texture) ## Imagery and Motifs **Core visual motifs:** - **Grain overlay texture:** Every hexagonal cell and major section has a CSS noise texture (SVG feTurbulence) at 0.08 opacity, creating the printing-press grain of vintage pop-art reproductions. This texture unifies disparate color cells into a cohesive vintage feel. - **Organic-blobs as thought bubbles:** Large SVG blob shapes (asymmetric border-radius) with white fill and 2px dashed border (#2a2420), plus a small triangular "tail" pointing toward associated content. These serve as pop-art thought bubbles for meta-commentary. - **Ben-Day dot pattern:** Repeating radial-gradient creating uniform dots (4px diameter, 12px spacing) as background texture in specific cells and the hero section. Colors vary per section. - **Fade-reveal on hexagonal cells:** Cells start with opacity: 0 and transform: scale(0.8). On Intersection Observer trigger: transition to opacity: 1, scale(1) over 400ms with staggered delays (50ms between cells). ## Prompts for Implementation **Pop art prediction gallery:** The site should feel like walking through a pop-art gallery exhibition where each piece is a prediction or forecast. Bold colors, graphic patterns, and comic-book energy make the intellectual concept of prediction visually exciting. **Hexagonal honeycomb:** - Same CSS clip-path technique as other hex layouts: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). - Each cell: unique background color from pop palette. - Grain texture applied via ::after pseudo-element with SVG noise filter. **Ben-Day dots:** - background-image: radial-gradient(circle 2px, #c84040 100%, transparent); background-size: 12px 12px; - Apply at 0.15-0.3 opacity depending on section. **Thought-bubble blobs:** - SVG blob shape with fill: #ffffff, stroke: #2a2420, stroke-dasharray: 6,4, stroke-width: 2. - Small triangle "tail": additional SVG polygon positioned at bottom of blob. - Content centered within using foreignObject or overlaid div. **Staggered fade-reveal:** - Intersection Observer on hex grid container. - On intersection: iterate hex cells, adding .visible class with 50ms stagger. - .hex-cell { opacity: 0; transform: scale(0.8); transition: all 400ms ease; } - .hex-cell.visible { opacity: 1; transform: scale(1); } **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, muted/minimal aesthetics. Embrace bold pop-art vibrancy. ## Uniqueness Notes **Differentiators from other designs:** 1. **Pop-art hexagonal prediction matrix:** Applying Lichtenstein/Warhol visual vocabulary specifically to forecasting and prediction within a hexagonal grid creates a unique fusion of art style and intellectual concept. 2. **Organic blob thought bubbles between hex sections:** Using pop-art thought bubbles (blob shapes with dashed borders and triangular tails) for meta-commentary between honeycomb sections creates a unique narrative device. 3. **Ben-Day dot texture integrated into hexagonal cells:** The vintage printing-press dot pattern applied within hexagonal clip-path shapes creates a distinctive visual texture not replicated in other designs. **Chosen seed/style:** aesthetic: pop-art, layout: hexagonal-honeycomb, typography: playfair-elegant, palette: muted-vintage, patterns: fade-reveal, imagery: grain-overlay, motifs: organic-blobs, tone: elegant-sophisticated **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).