# Design Language for yesang.xyz ## Aesthetics and Tone yesang.xyz (예상, Korean for "expectation") presents the concept of prediction through a Frutiger Aero lens -- the glossy, optimistic, nature-infused design language of mid-2000s software interfaces (Windows Vista, early macOS) applied to a forecasting tool. Card-grid layouts showcase predictions as polished, reflective interface panels with soft rounded corners and subtle glass reflections. Marble-classical motifs ground the digital glossiness in ancient oracular tradition (marble temples where predictions were sought). The tone is conversational -- a friendly fortune-telling machine from a future that looked exactly like 2006 imagined it would. Inspiration from Windows Vista Aero Glass, early iPhone UI skeuomorphism, classical Greek oracle temples, and Korean fortune-telling shops (점집). ## Layout Motifs and Structure A **card-grid** layout where prediction cards are presented as glossy, reflective interface panels. **Primary structure:** - **Oracle interface hero (100vh):** A soft blue-green gradient (#d0e8e4 to #e0d8f0) with a large glossy panel at center (backdrop-filter: blur + white gradient highlight at top). Inside: "예상" in rounded Korean type, below: "YESANG.XYZ - Expectations Engine." The panel has a subtle reflection effect (::after pseudo-element with reversed, faded gradient). - **Prediction card grid:** A 3-column grid of glossy cards, each representing a prediction category. Cards have: glossy surface (linear-gradient highlight at top), rounded corners (16px), soft drop shadows, and a small marble-texture accent bar at the bottom. Vintage photography elements (desaturated, tinted) serve as card backgrounds at low opacity. - **Marble classical divider:** A full-width band with CSS marble texture (veined pattern using layered gradients) separating the card grid from the detail section. Small classical column silhouettes (SVG) at each end. - **Zoom-focus interaction:** Hovering over a card triggers a zoom-focus effect: the hovered card scales up (1.05x) while neighboring cards blur slightly (filter: blur(2px)), creating a depth-of-field camera effect. **Spatial relationships:** Card grid: gap 24px, 3 columns. Card padding: 24px. Overall max-width: 1060px. Marble divider: 60px height. Footer: minimal. ## Typography and Palette **Fonts:** - **Display/Korean:** "Gothic A1" (Google Fonts) -- a rounded Korean-supporting sans-serif with soft, friendly character at clamp(32px, 5vw, 64px). Weight 700. The rounded forms match Frutiger Aero's soft UI aesthetic. - **Body text:** "Noto Sans KR" (Google Fonts) -- clean Korean sans-serif at 15px/1.65 line-height. Weight 400 for body, 700 for emphasis. - **Data/Predictions:** "DM Mono" (Google Fonts) -- monospace for prediction data and percentages at 16px. Weight 500. **Color Palette:** - **Background mint:** #d0e8e4 (soft mint green) - **Background lavender:** #e0d8f0 (soft lavender) - **Card surface:** #ffffff (white for glossy cards) - **Card highlight:** linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4)) (glossy top highlight) - **Dopamine coral:** #ff6b6b (neon coral for key predictions) - **Dopamine purple:** #a060e0 (neon purple for secondary accents) - **Text primary:** #2a2830 (dark purple-gray) - **Marble vein:** #c0b8a8 (warm gray for marble texture veins) ## Imagery and Motifs **Core visual motifs:** - **Vintage photography tinted backgrounds:** Desaturated, color-tinted photographs (CSS filter: grayscale(60%) sepia(20%) hue-rotate(var(--tint))) at 0.08-0.12 opacity used as card backgrounds. Each card has a different tint (coral, purple, mint), creating a vintage-postcard effect beneath the glossy surface. - **Marble-classical texture:** CSS-generated marble effect using layered linear-gradients and radial-gradients in cream, gray, and warm tones, creating convincing veined marble for the divider section and card accent bars. - **Zoom-focus depth-of-field:** On card hover: hovered card scales 1.05 with box-shadow enhancement. Adjacent cards: filter: blur(2px), opacity: 0.7. This creates a camera-like focus pull that directs attention. - **Glossy Aero reflections:** Cards have a ::before pseudo-element with a white-to-transparent gradient (45deg) creating the glossy highlight of Frutiger Aero interfaces. On hover, the highlight shifts position (background-position change) creating a "catch the light" effect. ## Prompts for Implementation **Frutiger Aero prediction interface:** The site should feel like a premium software interface from 2006 -- glossy, optimistic, and slightly over-designed in that charming mid-2000s way. Everything should look like it was rendered in a 3D environment with soft lighting. **Glossy card implementation:** - .card { background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06); position: relative; overflow: hidden; } - .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent); pointer-events: none; } **Zoom-focus hover:** - .card:hover { transform: scale(1.05); z-index: 10; box-shadow: 0 12px 40px rgba(0,0,0,0.15); } - .card-grid:has(.card:hover) .card:not(:hover) { filter: blur(2px); opacity: 0.7; transition: all 0.3s ease; } **Marble texture CSS:** - background: linear-gradient(135deg, #f5f0e8 25%, transparent 25%), linear-gradient(-135deg, #e8e0d0 25%, transparent 25%), radial-gradient(ellipse at 40% 60%, #c0b8a8 0%, transparent 50%); background-blend-mode: overlay; **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, flat design (the Aero aesthetic requires depth and gloss), dark mode. ## Uniqueness Notes **Differentiators from other designs:** 1. **Frutiger Aero glossy prediction cards:** Applying the nostalgic mid-2000s glossy software aesthetic to prediction/forecasting content creates a unique retro-futuristic interface not replicated in other designs. 2. **Zoom-focus depth-of-field on card hover:** Using CSS :has() selector to blur non-hovered cards while focusing on the hovered one creates a camera-lens effect unique to this design. 3. **Marble classical accent bars on Aero cards:** Combining CSS marble texture as decorative accents within glossy Frutiger Aero card interfaces creates a unique material juxtaposition (ancient stone + digital glass). **Chosen seed/style:** aesthetic: frutiger-aero, layout: card-grid, typography: rounded-sans, palette: dopamine-neon, patterns: zoom-focus, imagery: vintage-photography, motifs: marble-classical, tone: conversational **Avoided overused patterns:** photography imagery (90% -- vintage photography is used but as tinted, desaturated texture), centered layout (98%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).