# Design Language for kakuritsu.com ## Aesthetics and Tone kakuritsu.com (確率 — Japanese for "probability") embodies an ethereal aesthetic — translucent layers, soft luminescence, and the dreamlike quality of probability clouds and quantum uncertainty. The site presents probability theory as something beautiful and mysterious, where numbers dissolve into soft gradients and mathematical certainty gives way to elegant uncertainty. Inspiration draws from Claude Shannon's information theory visualizations, the soft focus of Hiroshi Sugimoto's seascape photographs, and the gentle glow of paper lanterns. The tone is nostalgic-retro — probability presented through the warm lens of classical mathematics, evoking the golden age of mathematical discovery. The organic-flow layout mirrors the natural distribution curves and random walks that define probability, with content flowing like water finding its level. ## Layout Motifs and Structure The layout uses an **organic-flow** architecture — content elements are positioned along curved, non-linear paths rather than rigid grids, mirroring the flowing curves of probability distributions. **Organic Flow Architecture:** - Content follows a sinusoidal path down the page, alternating between left and right positions within a 1200px container - Each content block is positioned at a point along an invisible S-curve, creating a gentle zigzag reading flow - Blocks are irregularly sized (400-700px width) and float at organic positions using CSS transforms - Between blocks: generous space (120-160px) allowing the background to breathe **Section Sequence:** 1. **Probability Cloud:** Hero with soft-focus generative background and floating title 2. **Distribution Curve:** Concept introduction with content blocks following a bell-curve arrangement 3. **Random Walk:** Feature presentation with blocks positioned along a random-walk-inspired path 4. **Convergence:** Deeper analysis where blocks gradually align toward center (visual convergence) 5. **Equilibrium:** Footer with balanced, centered content suggesting statistical equilibrium ## Typography and Palette **Typography:** - **Headlines:** "Cormorant Garamond" (Google Fonts) — refined serif with classical mathematical elegance at 2.5rem-4rem, weight 400-500. Light weights enhance the ethereal quality. - **Body Text:** "Source Serif 4" (Google Fonts) — readable text serif at 1rem, weight 400, line height 1.8. - **Japanese:** "Noto Serif JP" (Google Fonts) — Japanese serif matching the classical feel at equivalent sizes. - **Math/Data:** "Fira Code" (Google Fonts) — monospace for mathematical notation at 0.9rem. **Color Palette:** - **Cream Mist:** #faf5f0 — warm, soft background suggesting aged paper - **Burgundy Deep:** #6a2a3a — primary accent, wine-dark suggesting classical elegance - **Rose Blush:** #d4a0a8 — soft pink for secondary highlights and gradient endpoints - **Ink Warm:** #3a2a24 — warm dark brown for primary text - **Lavender Haze:** #b8a8c8 — muted purple for tertiary accents - **Gold Patina:** #c4a860 — warm gold for decorative elements and mathematical symbols - **Pearl White:** #f0ece6 — slightly darker cream for alternating backgrounds - **Sage Mist:** #a8b8a8 — soft green for success states and subtle accents ## Imagery and Motifs **Generative Art Probability Clouds:** Background sections feature algorithmically generated point-cloud formations — hundreds of tiny dots (1-2px) distributed according to Gaussian probability functions, creating visible bell-curve shapes in the background. **Bubble-Playful Elements:** Soft, translucent circles (30-80px) in palette colors at 0.08-0.15 opacity float through the page, representing probability particles. They drift with gentle CSS animations and occasionally cluster, mimicking probabilistic grouping. **Morph Transitions:** When content blocks scroll into view, they morph from an amorphous, blob-like shape (border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%) to their final rectangular form (border-radius: 8px) over 800ms. This morphing represents probability collapsing from uncertain to defined. **Bell Curve Section Dividers:** Instead of horizontal lines, sections are separated by thin SVG bell-curve shapes — a gentle Gaussian arc in a palette color at 0.2 opacity. **Classical Mathematical Ornaments:** Large mathematical symbols (Σ, ∫, P, ∞) used as decorative watermarks behind content at very low opacity (0.03-0.05), in Gold Patina color. ## Prompts for Implementation Build the page as a flowing probability landscape. Content blocks use position: relative with calculated left/right offsets creating the S-curve path. Each block's horizontal position is determined by: left: calc(50% + sin(index * 0.8) * 200px), approximated with predefined CSS classes for different positions along the curve. The generative probability clouds: render on a canvas element with fixed positioning. For each of 500-800 points, sample x from a Gaussian distribution (Box-Muller transform) centered at canvas midpoint, y from a uniform distribution. Points rendered as 1-2px circles in Burgundy Deep at 0.1-0.2 opacity. The morph effect: content blocks start with an irregular border-radius (CSS animation from organic shape to 8px) triggered by Intersection Observer. The transition uses transition: border-radius 800ms cubic-bezier(0.4, 0, 0.2, 1). Floating probability bubbles: 15-20 divs with border-radius: 50%, various sizes and palette colors at low opacity, animated with multi-property @keyframes (translateX, translateY, scale) at different speeds (15-30s loops). Bell-curve dividers: SVG path elements using quadratic bezier curves that form a smooth Gaussian shape, stroke in palette color at 0.2 opacity, no fill. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the organic probability flow and ethereal visual language create a contemplative mathematical experience. ## Uniqueness Notes 1. **Organic-flow layout mimicking probability distributions:** Content positioned along mathematical curves makes the layout itself a visualization of the subject matter. 2. **Shape-morphing content blocks:** Elements transitioning from amorphous to defined shapes metaphorically represent probability collapsing to certainty. 3. **Generative Gaussian point clouds:** Background art generated from actual probability distributions creates authentic mathematical beauty. 4. **Bell-curve section dividers:** Replacing horizontal rules with Gaussian curves makes even structural elements thematically coherent. 5. **Classical mathematical watermarks:** Large mathematical symbols as background decoration bridges aesthetic beauty with mathematical content. **Seed/Style:** aesthetic: ethereal, layout: organic-flow, typography: geometric-sans, palette: burgundy-cream, patterns: morph, imagery: generative-art, motifs: bubble-playful, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette at surface level (89%), friendly tone (76%), minimal imagery (84%). This design uses ethereal aesthetic, organic-flow layout, burgundy-cream palette, generative-art imagery, and nostalgic-retro tone.