# Design Language for kakuritsu.com ## Aesthetics and Tone kakuritsu.com -- the Japanese word for "probability" -- inhabits the visual space where classical marble sculpture meets the soft, impossible physics of an isometric dream. Imagine a Piranesi engraving of an infinite marble library, but rendered in cream and blush pastels, where every column and archway is drawn at precise 30-degree isometric angles, and every surface has the translucent, powdered quality of marzipan or meringue. The aesthetic is **isometric neoclassical confectionery**: the mathematical certainty of probability theory expressed through the ordered beauty of Greco-Roman architecture, but softened until it feels like walking through a room made of whipped cream and rose quartz. The mood is **dreamy-ethereal** -- not the sharp, cold ethereal of ice crystals or moonlight, but the warm, somnolent ethereal of afternoon light filtering through alabaster. Think of Maxfield Parrish's luminous skies rendered in isometric perspective, or the pastel marble halls in a Wes Anderson film that never existed. There is a pervasive sense of gentle unreality, as though the laws of physics have been replaced by the laws of aesthetics: gravity is lighter, shadows are softer, and every surface catches the light like polished stone. The name "kakuritsu" (probability) provides the conceptual throughline: the site explores the space of what MIGHT exist, the probability cloud of possible forms. Every isometric structure on the page is one configuration drawn from an infinite set. Marble columns could have been arranged differently. The archways could lead elsewhere. The viewer is always aware that they are seeing one instantiation of a beautiful system -- one roll of the cosmic dice that happened to land on elegance. ## Layout Motifs and Structure The layout follows a **magazine-spread** composition adapted to the isometric grid. Rather than the conventional centered column or card grid, content is arranged as editorial spreads where each viewport presents a curated arrangement of isometric architectural elements alongside text blocks, like the pages of a luxury architecture journal laid flat on a marble table. **Structural Principles:** - **The Isometric Grid:** All structural elements are aligned to a true isometric grid (60-degree angles from horizontal). This grid is not merely decorative -- it is the spatial substrate of the entire page. Content containers, decorative columns, floating platforms, and navigation elements all snap to isometric alignment. The grid is rendered as a faint pattern of rhombic tiles in pale rose (#F2D7D5) on the cream background, visible at 8% opacity, providing a subtle tectonic structure beneath the content. - **Magazine Spreads:** Each "spread" occupies the full viewport height and is divided into asymmetric zones. The left zone (approximately 55% width) contains the primary visual element -- a large isometric architectural composition (rendered in CSS/SVG). The right zone (approximately 45% width) contains the editorial text, set in generous whitespace with pull-quotes, drop caps, and margin annotations. On alternate spreads, this arrangement mirrors (visual right, text left), creating the rhythm of turning pages in a physical magazine. - **Floating Platforms:** Content blocks do not sit on a flat plane but rest on isometric platforms -- shallow parallelogram shapes rendered with three visible faces (top in light cream, left face in slightly darker blush, right face in a third slightly deeper tone). These platforms create the illusion that every content block is a physical object resting on a marble shelf, hovering in the dreamy space of the page. - **The Probability Column:** A persistent vertical element on the far right of the viewport (70px wide) displays a continuously animated probability distribution -- a vertical bell curve rendered as a softly glowing gradient bar that shifts its peak position as the user scrolls. This serves as both a decorative motif and a scroll-position indicator, mapping the user's location in the page to a point on the probability distribution. At the top, the peak is at the top of the bar; at the bottom, it has migrated to the bottom. The color transitions from Alabaster Rose (#E8C4C0) to Marble Cream (#FDF6F0) along its length. - **Depth Layering:** The isometric perspective naturally creates depth. Elements in the "back" of the isometric space are smaller and more transparent. Elements in the "front" are larger and more opaque. This creates a parallax-like depth without traditional parallax scrolling. Three distinct depth planes: background architecture (0.7 opacity, 85% scale), mid-ground content platforms (1.0 opacity, 100% scale), and foreground decorative elements (1.0 opacity, 110% scale, slight blur on edges to simulate depth-of-field). - **No Traditional Navigation Bar:** Instead, navigation is embedded as a set of isometric doorways at the top of the first spread. Each "door" is a CSS-rendered isometric archway with a label inside. Hovering on a door causes it to glow softly from within, as though light is spilling through from an adjacent room. Clicking steps the user through the doorway to the corresponding section. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with elegant, almost art-deco proportions and a high x-height that feels both mathematical and ornamental. Used at 3.5rem-6rem for spread titles. Weight: 300 (Light) for primary display, creating the airy, weightless quality that matches the dreamy tone. Letter-spacing: +0.08em for headlines (wide tracking enhances the architectural, inscriptional feel -- like letters carved into a marble frieze). Text-transform: uppercase for primary titles. Line-height: 1.05. Color: Marble Charcoal (#3D3232). - **Secondary / Pull-Quotes:** "Cormorant Garamond" (Google Fonts) -- a display Garamond with high contrast between thick and thin strokes, evoking the chiseled letterforms of Roman inscriptions. Used at 1.75rem-2.5rem for section subtitles and pull-quotes. Weight: 300 (Light) for subtitles, 500 (Medium) for pull-quotes. Style: italic for pull-quotes, creating an elegant counterpoint to the geometric sans headlines. Letter-spacing: +0.02em. Line-height: 1.35. Color: Blush Stone (#7A5C58). - **Body Text:** "Nunito Sans" (Google Fonts) -- a well-balanced sans-serif with rounded terminals that feels approachable without being childish, geometric without being cold. Weight: 400 (Regular) for body, 600 (SemiBold) for emphasis. Size: 1.05rem-1.15rem. Line-height: 1.75 (generous leading for the magazine editorial feel). Letter-spacing: +0.01em. Color: Warm Graphite (#4A3F3F). - **Monospace / Annotations:** "DM Mono" (Google Fonts) -- used only for margin annotations, mathematical expressions, and the probability-themed decorative numerals that float in the background. Size: 0.8rem. Weight: 300. Color: Blush Mist (#C4A6A0) at 60% opacity. These annotations appear along the edges of content blocks, showing fictional "coordinates" or probability values (e.g., "P(x) = 0.73", "n = 144") that reinforce the mathematical theme without demanding attention. **Palette:** The palette is **creamy-pastel** -- a narrow range of warm, desaturated pinks, creams, and stone tones that evokes marble, meringue, and rose quartz. | Name | Hex | Usage | |------|-----|-------| | Marble Cream | #FDF6F0 | Primary background, top faces of isometric platforms | | Alabaster Rose | #E8C4C0 | Secondary background, left faces of platforms, hover states | | Blush Stone | #7A5C58 | Tertiary text, borders, subtle UI elements | | Petal Pink | #F2D7D5 | Isometric grid lines, decorative accents, probability column | | Marble Charcoal | #3D3232 | Primary headline text, strong contrast elements | | Warm Graphite | #4A3F3F | Body text, secondary text | | Rose Quartz | #D4A5A0 | Interactive highlights, doorway glow, cursor-follow orb | | Cloud Ivory | #FAF0E6 | Alternate background for even-numbered spreads | | Gilded Vein | #C9A96E | Marble veining details, decorative gold accents (used sparingly) | The palette deliberately avoids saturated colors entirely. The most "vivid" element is the Gilded Vein gold, used only in thin lines that trace through the isometric marble structures like the mineral veins in real Calacatta marble. The overall impression is of a space washed in the warm light of late afternoon, where everything has been drained of urgency and saturated instead with calm. ## Imagery and Motifs **3D-Render Isometric Architecture:** The primary visual system consists of **isometric architectural structures** rendered purely in CSS and SVG -- no raster images. These are not photorealistic 3D renders but stylized, flat-shaded isometric compositions that evoke marble buildings, columns, arches, and platforms. Each structure is composed of parallelograms and rhombuses colored with three tones from the palette (top face: Marble Cream #FDF6F0, left face: Alabaster Rose #E8C4C0, right face: Petal Pink #F2D7D5) to create the illusion of three-dimensional form on the isometric grid. Specific architectural elements: 1. **Marble Columns:** Isometric cylinders (approximated with a stack of progressively offset ellipses) with subtle vertical fluting lines. These columns frame content blocks and appear at the edges of spreads. Each column has a simplified Corinthian capital rendered as a stylized acanthus-leaf pattern in SVG, using Gilded Vein (#C9A96E) line-art. 2. **Archways and Doorways:** Isometric arched openings cut into flat walls. The interior of each arch is filled with a soft radial gradient from Rose Quartz (#D4A5A0) at center to Marble Cream (#FDF6F0) at edge, creating the impression of light spilling through from a hidden room beyond. These arches serve as navigation anchors and section dividers. 3. **Stepped Platforms:** Ziggurat-like stepped structures that elevate content blocks. Each step is a shallow isometric rectangle, creating a tiered pedestal effect. The steps use alternating shades from the palette, creating gentle striping. 4. **Marble Veining Patterns:** SVG `` elements that trace organic, branching lines across the surface of isometric structures, mimicking the natural veining of Calacatta marble. These veins use the Gilded Vein (#C9A96E) color at 30% opacity, with stroke-width varying between 0.5px and 2px. The veining patterns are algorithmically generated using a simple L-system or recursive subdivision to ensure each instance is unique. 5. **Floating Probability Dice:** Small isometric cubes that drift slowly across the background at various depths. Each cube face displays a numeral (1-6) in DM Mono. The cubes rotate slowly on their isometric axes (a CSS animation cycling through the three visible face configurations over 12-second loops). These dice reinforce the "probability" theme and add gentle motion to the otherwise still compositions. **Cursor-Follow System:** The cursor is accompanied by a **marble orb** -- a circular element (28px diameter) centered on the cursor position, rendered with a radial gradient from white at center to Rose Quartz (#D4A5A0) at edge, with a subtle CSS box-shadow creating a soft glow. The orb follows the cursor with a spring-physics easing (approximately 0.12s delay, slight overshoot), creating a fluid, weighted feel as though the user is rolling a marble across a smooth surface. When the cursor hovers over an interactive element, the orb expands to 42px and its glow intensifies, transitioning from Rose Quartz to Gilded Vein (#C9A96E). When the cursor is idle for 3 seconds, the orb slowly pulses (scale between 0.9 and 1.1 over a 4-second cycle) like a breathing marble. A secondary effect: the cursor-follow orb leaves a **fading trail** of smaller orbs (12px, 8px, 5px) that persist for 0.6 seconds with exponential opacity decay, creating a comet-tail effect that traces the user's movement across the page. The trail particles are colored in a gradient from Rose Quartz to Petal Pink. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport spread of Marble Cream (#FDF6F0). For 0.8 seconds, nothing is visible except the faint isometric grid pattern pulsing once at low opacity. Then, from the center of the viewport, an isometric structure begins to unfold: first, a flat isometric platform rises from zero height to its full three-face form (CSS transform animation, 1.2 seconds, ease-out). Upon this platform, marble columns grow upward (height animated from 0 to full over 1.5 seconds, staggered by 0.15 seconds for each column). Between the columns, archways fade in (opacity 0 to 1 over 0.8 seconds). Finally, the site title -- "kakuritsu" -- materializes letter by letter inside the central archway, each letter appearing as though carved into the marble (each letter fades in at 0.1-second intervals, using Josefin Sans at 5rem, Marble Charcoal #3D3232, with a text-shadow that gives a subtle engraved look). Below the title, a subtitle in Cormorant Garamond italic fades in: a Japanese character or the English translation "probability" -- appearing with a soft upward drift of 15px over 1 second. The Probability Column on the right edge fades in simultaneously, its gradient already animating. The cursor-follow marble orb appears only after the entrance animation completes, materializing at the cursor position with a scale-up from 0 to 1. **Scroll Behavior:** Each magazine spread occupies exactly 100vh. Scrolling is smooth but snap-assisted (CSS `scroll-snap-type: y proximity`) so that the viewport tends to settle on complete spreads. As the user scrolls between spreads, the isometric architectural elements in the departing spread collapse gently (platforms sink, columns shorten, archways dim), while the elements in the arriving spread build up, creating a continuous cycle of construction and deconstruction -- the probability of one configuration collapsing to make room for the next. Between spreads, a brief interstitial zone (20vh) shows only the isometric grid and a floating probability expression (e.g., "P(beauty | order) approaches 1") in DM Mono at the center, fading in and out as the user scrolls through. **Interactive Moments:** - Hovering over isometric structures causes them to "lift" slightly (translateY by -4px over 0.3s) and gain a slightly stronger shadow, as though the marble block has been nudged upward by an invisible force. - Hovering over archways causes the interior glow to intensify and a subtle particle effect (tiny bright specks drifting upward inside the arch) to activate, suggesting a hidden world of light beyond the doorway. - The floating probability dice respond to cursor proximity: when the cursor-follow orb passes within 120px of a die, the die rotates faster and drifts slightly away, as though gently repelled by the marble orb. - Text blocks in the editorial zones have a subtle **line-by-line reveal** on scroll: each line of body text fades in with a 20ms stagger and a 6px upward translation, creating a gentle cascade of appearing text that mimics the experience of reading words as they are being typeset. **Animation Philosophy:** All animations use easing curves that feel physical and weighted, never snappy or mechanical. Preferred easing: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for entrances (gentle acceleration, soft deceleration) and `cubic-bezier(0.19, 1, 0.22, 1)` for spring effects (fast start, overshoot, settle). Duration range: 0.6s to 2.5s for structural animations, 0.15s to 0.4s for hover responses. The overall animation tempo is slow and graceful -- nothing on the page moves with urgency. Even the cursor-follow orb has a lazy, trailing quality. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids -- this is a contemplative narrative space, not a conversion funnel - Traditional navigation bars or hamburger menus -- use the isometric doorway system - Sharp geometric angles or neon colors -- everything should feel soft, warm, and marmoreal - Dark backgrounds -- the palette is exclusively light and creamy - Stock photography or raster imagery -- all visuals are CSS/SVG constructed - Rapid or jarring animations -- the dreamy tone demands slowness ## Uniqueness Notes **Differentiators from other designs:** 1. **Isometric Architectural Composition as Layout System:** While isometric aesthetics appear in only 5% of existing designs, no other design uses isometric perspective as the actual structural framework for content layout. Here, the isometric grid is not decorative overlay but the organizing principle: content platforms, navigation doorways, and decorative elements all exist in a coherent isometric space. The magazine-spread layout (10% frequency) is adapted to work within this isometric framework, creating a hybrid editorial-architectural spatial model that exists nowhere else in the portfolio. 2. **Marble-Classical Motif Rendered in Pastel Confection:** The marble-classical motif (3% frequency) is typically associated with luxury-premium or dark-academia aesthetics. This design subverts the expectation by rendering classical marble architecture in the creamy-pastel palette (1% frequency), creating an effect more reminiscent of a pastel patisserie display than a Roman forum. The combination of classical architectural forms with the soft, food-adjacent color palette is deliberately disorienting -- monumental forms made tender and edible. 3. **Probability-Themed Narrative Layer:** The conceptual throughline of probability and chance is woven throughout the design without being didactic. The Probability Column scroll indicator, the floating dice, the margin annotations with probability expressions, and the interstitial mathematical quotations create a layer of meaning that rewards close attention. No other design in the portfolio uses mathematical concepts as a narrative and decorative motif. The domain name itself becomes an integral part of the visual language rather than a mere label. 4. **Cursor-Follow Marble Orb with Trail Physics:** While cursor-follow patterns exist at 6% frequency, no other design implements a cursor companion with spring physics, contextual size/color changes, breathing idle animation, AND a fading particle trail. The marble orb is a complete interactive character -- it responds to proximity, changes behavior on hover states, and creates a persistent visual trace of the user's journey through the page. It transforms the cursor from a pointer into a rolling marble exploring a marble palace. 5. **Construction/Deconstruction Scroll Transitions:** The transition between spreads -- where departing architectural elements gently collapse while arriving ones build -- creates a unique temporal experience. Each scroll is an act of creation and dissolution, reinforcing the probability theme: one configuration of marble forms collapses back into the possibility space, and another crystallizes in its place. This animation pattern does not appear in any other design. **Documented Seed/Style:** - aesthetic: isometric - layout: magazine-spread - typography: geometric-sans - palette: creamy-pastel - patterns: cursor-follow - imagery: 3d-render - motifs: marble-classical - tone: dreamy-ethereal **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with dreamy-ethereal tone - centered layout (99%) -- replaced with magazine-spread asymmetric composition - mono typography (99%) -- DM Mono used only for decorative annotations, not primary type - warm palette (100%) -- creamy-pastel is warm-adjacent but operates in a much narrower, more specific tonal range - scroll-triggered (96%) -- scroll behavior is present but as snap-assisted spread transitions, not the typical trigger-on-enter pattern - friendly tone (97%) -- replaced with dreamy-ethereal, which is inviting but not conversational - minimal imagery (94%) -- replaced with 3d-render isometric constructions - photography (73%) -- no photographic imagery; all visuals are CSS/SVG constructed - vintage motifs (80%) -- marble-classical shares historical reference but operates in a completely different visual register than the distressed/aged vintage pattern - parallax (80%) -- depth is created through isometric perspective and opacity layering, not traditional parallax scrolling