# Design Language for 확률.com ## Aesthetics and Tone 확률 (probability) demands a design language that lives in the tension between order and chaos, between the predictable and the unknowable. The aesthetic is **japanese-minimal filtered through neon probability fields** -- imagine a Kyoto rock garden at midnight, where each carefully raked sand line suddenly ignites with bioluminescent color, tracing the paths of probability distributions across the void. The tone is raw-authentic: no corporate polish, no friendly hand-holding. This is a site that speaks with the directness of a mathematician scrawling proofs on a chalkboard at 3am, punctuated by moments of visual ecstasy when abstract probability becomes viscerally beautiful. The visual philosophy draws from the Japanese concept of "ma" (negative space as active compositional element) combined with the sensory overload of Shibuya crossing at night -- dopamine-neon probability curves slicing through vast fields of darkness. Every element earns its place through mathematical inevitability. The mood oscillates between meditative stillness (the space between cards, the pause before a skeleton loads) and electric revelation (aurora gradients that bloom when probability collapses into certainty). The raw-authentic tone means exposed structure: visible grid lines that double as axis markers, skeleton-loading states that reveal the bones of the interface before content arrives, typography that feels hand-set rather than algorithmically perfect. This is probability as lived experience, not textbook abstraction. ## Layout Motifs and Structure The layout follows a **card-grid architecture** inspired by the arrangement of probability tiles in a Bayesian network diagram -- each card is a discrete probability node, and the spatial relationships between cards encode conditional dependencies. The grid is not uniform: it breathes with variable gap widths that widen and narrow based on section context, creating rhythm through irregularity within structure. **Card-Grid System:** The primary grid uses CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` as a baseline, but individual sections override this with intentional asymmetry. The first row of any section always features one card at 2x width (spanning two columns) flanked by standard cards, establishing a visual hierarchy that mirrors how probability distributions have dominant modes and secondary peaks. **Spatial Architecture:** - **Section 1 (Hero/Entrance):** A single full-viewport panel with no card grid -- pure negative space in the japanese-minimal tradition. A single probability curve (rendered as an SVG path) draws itself across the screen, its stroke color transitioning through the dopamine-neon palette. The domain name "확률" appears in serif type at the golden ratio intersection point (61.8% from left, 38.2% from top). - **Section 2 (Probability Fields):** The card grid begins. Cards are arranged in a 3-column layout with the center card elevated (via `transform: translateY(-2rem)` and a stronger box-shadow) to create a peaked distribution shape in the layout itself -- the grid physically mirrors a bell curve. - **Section 3 (Deep Exploration):** Cards shift to a 2-column layout with generous `gap: 3rem` spacing. Each card contains a single concept, illustrated with custom line drawings. The ma (negative space) between cards becomes as important as the cards themselves. - **Section 4 (Convergence):** Cards collapse to a single column, each growing wider and taller as the user scrolls, creating a visual funnel that represents probability converging toward certainty. **Card Design:** Each card has a `border-radius: 2px` (almost sharp, rejecting the rounded-corner trend), a 1px border in muted neon (#FF006620), and a background that shifts between #0A0A0F (near-black) and #12121A (dark navy) to create subtle depth differentiation. On hover, the border brightens to full neon opacity and a skeleton-loading shimmer effect sweeps across the card surface before the hover state fully resolves -- a micro-interaction that references the uncertainty principle. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- a transitional serif with high contrast between thick and thin strokes, embodying the serif-revival movement. Used at 3rem-6rem for section headers, with `font-weight: 700` and `letter-spacing: -0.02em` for tight, authoritative headlines. The high-contrast strokes visually echo probability density curves -- thick where probability mass concentrates, thin where it attenuates. Korean text (확률) uses the same sizing to maintain visual weight. - **Body Text:** "Noto Serif JP" (Google Fonts) -- a pan-CJK serif that harmonizes with Playfair Display's traditional proportions while providing full Korean/Japanese glyph coverage. Used at `clamp(1rem, 1.2vw + 0.5rem, 1.25rem)` with `line-height: 1.85` for generous vertical rhythm. Weight 400 for body, 600 for emphasis. - **Data / Labels:** "IBM Plex Mono" (Google Fonts) -- a humanist monospace used exclusively for numerical values, probability expressions (P(A|B) = 0.73), axis labels, and card metadata. Size 0.85rem, weight 400, `letter-spacing: 0.04em`. The monospace treatment signals "this is data, not prose" -- a typographic code-switch that the raw-authentic tone demands. **Palette:** The palette is dopamine-neon -- electric, synthetic colors that emerge from deep darkness, inspired by the aurora borealis (connecting to the aurora-lights motif) rendered through a Japanese minimal sensibility that uses neon sparingly against vast dark fields. | Role | Color | Hex | Context | |------|-------|-----|---------| | Background Primary | Void Black | #0A0A0F | Main canvas, card interiors | | Background Secondary | Midnight Navy | #12121A | Alternate cards, section breaks | | Neon Accent 1 | Probability Pink | #FF0066 | Primary CTAs, active states, probability curve strokes | | Neon Accent 2 | Aurora Cyan | #00F5D4 | Secondary highlights, data labels, hover states | | Neon Accent 3 | Electric Violet | #7B2FFF | Tertiary accent, skeleton loading shimmer, gradient endpoints | | Text Primary | Bone White | #E8E4DD | Body text, headlines (warm white, not pure) | | Text Secondary | Muted Stone | #8A8690 | Captions, metadata, secondary information | | Aurora Gradient Start | Neon Magenta | #FF006E | Left edge of aurora gradient bands | | Aurora Gradient Mid | Phosphor Green | #00FF87 | Center of aurora gradient transitions | | Aurora Gradient End | Deep Ultraviolet | #4400FF | Right edge of aurora, deepest shadows | **Gradient Definitions:** - **Aurora Sweep:** `linear-gradient(135deg, #FF006E 0%, #00F5D4 40%, #7B2FFF 70%, #4400FF 100%)` -- used for section dividers, progress bars, and the hero probability curve - **Skeleton Shimmer:** `linear-gradient(90deg, transparent 0%, #7B2FFF15 40%, #FF006615 60%, transparent 100%)` -- animated left-to-right at 1.5s intervals for loading states - **Card Glow:** `radial-gradient(ellipse at center, #FF006610 0%, transparent 70%)` -- subtle hover halo ## Imagery and Motifs **Custom Illustration System:** All imagery uses a custom-illustration approach: hand-drawn probability diagrams rendered as SVG line art with variable stroke widths (1px-3px). These are not clip-art or stock illustrations but purpose-built visual metaphors for probability concepts. Every illustration uses only the neon palette strokes on transparent backgrounds, allowing them to float over the dark cards like chalk on a blackboard. **Illustration Inventory:** - **Bell Curve Portrait:** A normal distribution curve drawn with a single continuous SVG path, its stroke using the aurora gradient. At the peak, the stroke thickens to 3px; at the tails, it attenuates to 0.5px. Small hash marks along the x-axis indicate standard deviations. This appears in the hero section and animates its draw using `stroke-dasharray` and `stroke-dashoffset`. - **Dice Constellation:** Six dice faces arranged in a hexagonal pattern, each drawn with minimal line art (dot patterns only, no cube perspective). Lines connect dice to probability values, forming a constellation map. - **Branching Tree:** A decision tree rendered as a botanical branching pattern -- probability splits drawn as forking stems, with branch thickness proportional to probability weight. Leaves are small circles colored by outcome (pink for one branch, cyan for another). - **Venn Overlap:** Two intersecting circles drawn with dashed strokes, the intersection zone filled with a subtle aurora gradient. Labels float outside in IBM Plex Mono. **Aurora-Lights Motif:** The aurora motif manifests as horizontal gradient bands that drift slowly across section backgrounds. These are implemented as `::before` pseudo-elements on section containers, using the aurora sweep gradient with `background-size: 200% 100%` and a 15-second `@keyframes auroraDrift { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }` animation. The bands have `opacity: 0.08` in resting state, increasing to `opacity: 0.15` when any card in the section is hovered -- the aurora brightens in response to interaction, as if probability itself is being observed. **Skeleton-Loading as Design Element:** Skeleton loading is elevated from utility pattern to decorative motif. When cards enter the viewport, they first render as skeleton states: three horizontal bars (representing title, body, and metadata) shimmer with the skeleton gradient for 600ms before the actual content fades in at `opacity: 0` to `opacity: 1` over 400ms. This 1-second ritual of revelation happens once per card per page load. The skeleton bars use rounded ends (`border-radius: 4px`) and heights of 1.5rem, 0.8rem, 0.8rem with varying widths (70%, 100%, 40%) to suggest natural content proportions. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens with a full-viewport hero that is nearly empty -- pure Void Black (#0A0A0F) with a single SVG probability curve that draws itself from left to right over 3 seconds using `stroke-dasharray: 1000; stroke-dashoffset: 1000` animated to `stroke-dashoffset: 0`. The curve uses the aurora sweep gradient as its stroke. At the 2-second mark (curve 66% drawn), the text "확률" fades in at the golden ratio point in Playfair Display at `8vw`, colored Bone White. Below it, ".com" appears in IBM Plex Mono at `2vw` with `letter-spacing: 0.3em`, 500ms after the Korean text. The entire hero has no scroll indicator, no navigation, no other elements -- pure japanese-minimal restraint. **Card Grid Narrative:** Below the hero, the card grid tells a story of probability through four sections (described in Layout above). Each section transition is marked by a full-width aurora band (height: 2px, aurora gradient, animated) that serves as both section divider and visual heartbeat. Cards use `skeleton-loading` entry animation exclusively -- no fade-in, no slide-up, no bounce. The skeleton is the animation. Content resolves into place with clinical precision. **Interaction Model:** - **Card Hover:** Border transitions from `#FF006620` to `#FF0066` over 200ms. A skeleton shimmer sweeps once across the card surface (left to right, 400ms). The card lifts with `transform: translateY(-4px)` and gains `box-shadow: 0 8px 32px #FF006615`. - **Card Click/Tap:** The aurora background of the section brightens momentarily (`opacity: 0.08` to `0.25` over 150ms, then back over 500ms), as if the act of choosing (clicking) collapses probability into certainty and releases energy. - **Scroll Behavior:** Minimal. Cards appear via skeleton-loading when they enter the viewport (IntersectionObserver at `threshold: 0.15`). No parallax, no elastic scrolling, no stagger delays between cards -- all visible cards in a section load simultaneously, maintaining the grid's integrity as a single compositional unit. **Animation Specifications:** - All transitions use `cubic-bezier(0.22, 1, 0.36, 1)` (custom ease-out) for a snappy, decisive feel that matches the raw-authentic tone - No animation exceeds 1.5 seconds - No infinite loops except the aurora drift (which is subtle enough to register as atmospheric rather than distracting) - Skeleton loading shimmer: `@keyframes shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }` duration 1.5s, applied to a `::after` pseudo-element with the skeleton gradient **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids - Rounded corners beyond 4px - Drop shadows with warm tones - Gradient text effects (gradients are for backgrounds and strokes, not text fills) - Scroll-jacking or smooth-scroll overrides - Hamburger menus or complex navigation - Stock photography or photographic imagery of any kind ## Uniqueness Notes **Differentiators from other designs:** 1. **Skeleton-Loading as Primary Animation Language:** While 96% of designs use scroll-triggered animations and 73% use parallax, this design uses skeleton-loading (3% frequency) as its ONLY entry animation pattern. Every element's first appearance is mediated through the skeleton state, creating a unified visual language of "probability resolving into certainty" that is thematically inseparable from the site's subject matter. No other design in the portfolio treats a loading pattern as a narrative device. 2. **Mathematical Layout Topology:** The card-grid physically embodies probability distributions -- the bell-curve elevation in Section 2, the widening cards in Section 4's convergence funnel. The layout IS the content. Most card-grid designs (10% frequency) arrange cards in uniform rows; this design uses CSS transforms and variable sizing to make the grid itself a data visualization. 3. **Neon-on-Void Japanese Minimalism:** The collision of dopamine-neon palette (5% frequency) with japanese-minimal aesthetic (1% frequency) is unprecedented in the portfolio. Japanese minimalism typically pairs with muted, natural palettes. Here, the ma (negative space) is rendered in near-black void, and the sparse elements that populate it burn with synthetic neon -- like a Zen garden transplanted into a Tokyo arcade. The restraint is Japanese; the energy is electric. 4. **Aurora-Lights as Responsive Atmosphere:** The aurora motif (1% frequency) is not decorative wallpaper but a reactive environmental system that brightens and shifts in response to user interaction. Hovering over cards, clicking elements, and scrolling all modulate the aurora's opacity, making the background itself a feedback mechanism. No other design uses motifs as interactive atmospheric layers. 5. **Trilingual Typographic Code-Switching:** The combination of Playfair Display (Latin serif), Noto Serif JP (CJK serif), and IBM Plex Mono (data/code) creates a three-register typographic system that code-switches based on content type: prose in serif, data in mono, Korean in harmonized CJK serif. This trilingual approach is unique among portfolio designs. **Seed Documentation:** - aesthetic: japanese-minimal (1% frequency -- deeply underused, PREFERRED) - layout: card-grid (10% frequency -- moderate, differentiated through mathematical topology) - typography: serif-revival (1% frequency -- deeply underused, PREFERRED) - palette: dopamine-neon (5% frequency -- low, PREFERRED) - patterns: skeleton-loading (3% frequency -- underused, PREFERRED, elevated to primary animation) - imagery: custom-illustration (5% frequency -- low, PREFERRED) - motifs: aurora-lights (1% frequency -- deeply underused, PREFERRED) - tone: raw-authentic (3% frequency -- underused, PREFERRED) **Avoided overused patterns:** - playful aesthetic (96%) -- replaced with raw-authentic restraint - centered layout (99%) -- replaced with card-grid with intentional asymmetry - warm palette (100%) -- replaced with cold neon-on-void - scroll-triggered patterns (96%) -- replaced with skeleton-loading entry - minimal imagery (95%) -- replaced with custom-illustration SVG system - vintage motifs (89%) -- replaced with aurora-lights - friendly tone (99%) -- replaced with raw-authentic directness - mono typography dominance (99%) -- mono used only for data labels, serif leads