# Design Language for 확률.com ## Aesthetics and Tone 확률.com (Korean for "probability") is a luxury-premium data visualization experience -- a site that treats mathematical probability with the reverence and material richness typically reserved for high-end fashion or Swiss watchmaking. The visual identity channels the dark, polished surfaces of luxury brand flagship stores and the precision of scientific instrumentation. Every probability concept is presented as a precious object: formula cards with subtle gold accents, distribution curves rendered as elegant vector art, and data points that stagger into view like gemstones being placed on velvet. The midnight-blue palette provides a deep, rich canvas that makes content feel curated and exclusive. Tech-mono typography frames probability equations with the authority of engineering blueprints. Organic blob shapes drift through the background, representing the fluid, amorphous nature of chance. The tone is optimistic-bright -- probability as wonder, not anxiety. The site sees beauty in uncertainty and celebrates the mathematics of maybe. Inspiration from Cartier window displays, Edward Tufte's data visualization principles, and the mesmerizing patterns of Mandelbrot sets. ## Layout Motifs and Structure A **portfolio-grid** layout where probability concepts and visualizations are presented as curated portfolio pieces in a refined grid -- each piece given gallery-level presentation. **Primary structure:** - **Probability entrance (100vh):** A deep midnight (#08101e) background with the Korean "확률" rendered in oversized tech-mono type at 30% opacity as a watermark. In the foreground, a single glowing vector-art probability distribution curve (bell curve, SVG path) draws itself over 2s. Above the curve: "확률" in normal size. Below: "THE MATHEMATICS OF MAYBE" in spaced tech-mono caps. - **Concept gallery (portfolio grid):** A 3-column grid of concept cards, each card presenting a probability concept (Bayes' Theorem, Central Limit Theorem, Monte Carlo, etc.) as a luxury portfolio piece. Cards have midnight backgrounds with subtle border (#1a2a48), generous padding (40px), and a single vector illustration per card. Cards enter the viewport with staggered timing (150ms between each). - **Interactive probability section:** A full-width section with a large-scale data visualization (e.g., a random walk animation or probability tree) rendered as SVG with organic blob accents. - **Probability axiom footer:** Three axiom statements presented in a single row, each in its own midnight-bordered card, with thin gold (#c8a860) top borders. **Spatial relationships:** Grid gap: 24px. Card padding: 40px. Overall grid max-width: 1200px, centered. Cards use consistent 1:1.2 aspect ratio. Stagger animations apply left-to-right, top-to-bottom, with 150ms delay per card. ## Typography and Palette **Fonts:** - **Display/Equations:** "Space Mono" (Google Fonts) -- a fixed-width grotesque with geometric precision, used at clamp(28px, 4vw, 56px). Weight 700. The monospace letterforms give mathematical expressions and titles the authority of engineering readouts and scientific instruments. - **Body text:** "Inter" (Google Fonts) -- a versatile sans-serif at 16px/1.7 line-height. Weight 400 for body, 600 for emphasis. The clean readability of Inter provides accessible contrast to the technical display type. - **Math notation:** "Space Mono" (Google Fonts) at 14px, weight 400, for inline equations, formulas, and probability notation. Letter-spacing: 0.02em for mathematical clarity. **Color Palette (midnight-blue):** - **Midnight deep:** #08101e (primary background, deepest blue-black) - **Midnight mid:** #0e1a30 (card backgrounds, surface elevation) - **Navy accent:** #1a2a48 (borders, dividers, subtle structure) - **Blue glow:** #3a6aaa (data visualization primary color) - **Light blue:** #68a0d8 (secondary data color, highlights) - **Text primary:** #d8e0ec (cool white for body text) - **Text muted:** #6880a0 (blue-gray for metadata) - **Gold luxury:** #c8a860 (rare accent for premium moments -- borders, mathematical operators) - **Blob teal:** #2a5868 (organic blob fills at 0.15 opacity) ## Imagery and Motifs **Core visual motifs:** - **Vector-art probability curves:** Mathematical distributions (normal, Poisson, binomial, uniform) rendered as clean SVG paths with 2px strokes in blue glow (#3a6aaa). Each curve draws itself via stroke-dashoffset animation (1.5s) on scroll-enter. These are the primary visual content -- probability as art. - **Organic blob backgrounds:** Amorphous SVG shapes filled with blob teal (#2a5868) at 0.1-0.15 opacity, positioned behind content sections. They drift slowly (CSS animation: translate, 30-45s cycles). These represent the fluid, shapeless nature of probability before measurement collapses it into a value. - **Stagger-enter grid animation:** Portfolio cards enter the viewport with staggered timing: each card transitions from opacity: 0, transform: translateY(30px) to opacity: 1, transform: translateY(0) with 150ms delay between cards. This creates a cascading reveal that mimics sequential sampling. - **Gold mathematical accents:** Mathematical operators (+, =, P, sigma) and card top-borders rendered in gold (#c8a860) -- treating mathematical notation as luxury ornamentation. - **Data point particles:** Small circles (3-5px) in blue glow and light blue that appear around probability curves after they draw, simulating data points scattering around a distribution. Positioned via JavaScript with slight random offsets from the curve path. ## Prompts for Implementation **Full-screen probability gallery:** The site should feel like visiting a private exhibition of mathematical beauty -- each probability concept mounted and lit like a gallery piece. The darkness creates focus, the gold creates premium feel, and the staggered animations create drama. **Stagger animation implementation:** - Use IntersectionObserver (threshold: 0.15) on the grid container. - When grid enters view, add a class that triggers child animations. - Each child card: transition: opacity 0.6s ease, transform 0.6s ease. - Stagger via: transition-delay: calc(var(--card-index) * 150ms). - Set --card-index via inline style or nth-child selectors. **SVG curve drawing:** - Each distribution curve: SVG path element with stroke-dasharray equal to path length. - Initial: stroke-dashoffset equal to path length (hidden). - Animated: stroke-dashoffset: 0 over 1.5s ease-out. - Use JavaScript path.getTotalLength() to calculate exact dash values. **Portfolio grid:** - CSS grid: grid-template-columns: repeat(3, 1fr) with 24px gap. - Cards: background #0e1a30, border: 1px solid #1a2a48, padding: 40px. - Hover state: border-color transitions to #3a6aaa over 300ms, subtle box-shadow: 0 4px 20px rgba(58,106,170,0.15). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids (ironic but intentional -- this is art, not dashboard), bright/warm palettes. The luxury darkness is essential. ## Uniqueness Notes **Differentiators from other designs:** 1. **Luxury-premium aesthetic applied to mathematics:** No other design treats probability theory with the material reverence of a luxury brand -- gold accents on mathematical operators, portfolio-gallery presentation of distribution curves, midnight-blue velvet darkness. 2. **Probability distributions as drawn art objects:** The SVG stroke-dashoffset animations that draw probability curves in real-time treat mathematical functions as performance art, unique in the collection. 3. **Organic blobs as metaphor for pre-measurement probability:** The drifting amorphous blob shapes serve a specific conceptual purpose -- representing probability's fluid, undefined nature before observation -- making them thematically meaningful rather than merely decorative. **Chosen seed/style:** aesthetic: luxury-premium, layout: portfolio-grid, typography: tech-mono, palette: midnight-blue, patterns: stagger, imagery: vector-art, motifs: organic-blobs, tone: optimistic-bright **Avoided overused patterns:** photography imagery (91%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (98%), mono typography (82%), mysterious-moody tone (72%).