# Design Language for algoha.com ## Aesthetics and Tone algoha.com embodies the Korean philosophical provocation "알고서 하는거야? 모르고는 하지마" -- "Are you doing this with knowledge? Never act in ignorance." The visual language channels the tension between knowing and not-knowing, between illuminated understanding and the void of ignorance. The aesthetic is **dark-academia meets wabi-sabi**: aged parchment textures and scholarly gravitas interrupted by moments of deliberate imperfection that remind the viewer that knowledge is always incomplete, always in progress. The mood draws from the interior of a centuries-old Korean seodang (서당, traditional school) reimagined through the lens of contemporary design -- wooden surfaces bearing the patina of ten thousand lessons, ink that bleeds at the edges of certainty, the smell of old paper encoded as grain and texture. But this is not nostalgic reverie. The tone is **scholarly-intellectual** with an undercurrent of urgency: every design element asks the viewer whether they truly understand what they are looking at, or merely assume they do. The site should feel like opening a book that reads you back. Inspiration: the penmanship practice sheets of Joseon-era scholars where repetition breeds mastery; the concept of 격물치지 (investigation of things to extend knowledge) from Neo-Confucian epistemology; the visual paradox of a mirror reflecting a candle in a dark library -- warm light contained within a vast darkness. ## Layout Motifs and Structure The layout uses a **f-pattern** primary reading flow combined with **layered-depth** stacking, creating the sensation of peeling back layers of understanding. Each viewport is a stratum of knowledge -- the surface level of casual observation yields to deeper, more nuanced comprehension as the user descends. **Primary structure:** - **The Threshold (0-100vh):** A full-viewport opening that presents the Korean title "알고서 하는거야?" as a single question consuming the entire screen. The text is rendered in a classical serif with ink-bleed edges, as if freshly brushed onto the viewport. Behind it, a generative canvas draws an infinite fractal tree of knowledge -- branches splitting into sub-branches, each representing a domain of understanding. The tree grows in real-time, roots descending from the top of the viewport. After 3 seconds, the question fades to reveal the answer: "모르고는 하지마." -- and the tree freezes, mid-growth, as if knowledge itself has paused to listen. - **The Library (100vh-300vh):** A horizontally-scrolling corridor of vertical text columns, mimicking the spine-out view of books on a shelf. Each "book spine" is a content module that expands when the user hovers or taps, unfolding like a real book opening. The horizontal scroll is triggered by vertical scrolling (wheel-to-horizontal translation), creating a spatial disorientation that mirrors the feeling of being lost in a vast library. The expanded book reveals content in a single-column layout with generous margins (20% each side), forcing focused reading. - **The Diagram (300vh-500vh):** A node-graph layout where content modules are positioned as nodes in a knowledge graph. Lines connect related concepts, drawn with SVG path animation as the user scrolls into view. The graph is not decorative -- it represents actual semantic relationships between the site's content sections. Nodes pulse gently with a warm glow when in viewport, and dim when scrolled past, creating a sense of knowledge being "activated" and then "stored." - **The Reflection (500vh-600vh):** A mirror-composition layout where the bottom half of the viewport is a CSS-reflected, darkened, and blurred version of the top half. Content in the top half represents "what is known," while the reflection represents "what is assumed." As the user scrolls, the reflection gradually sharpens and diverges from the original, revealing different content -- a visual metaphor for how assumptions distort knowledge. **Spatial principles:** No two sections share the same background treatment. The vertical rhythm is 8px-based but deliberately broken at the transitions between strata -- a 3px misalignment at each boundary creates a subtle visual "stutter" that signals the shift in epistemological depth. Navigation is minimal: a single vertical line on the left edge with notches indicating stratum positions, inspired by the margin marks on traditional Korean manuscript paper. ## Typography and Palette **Typography:** - **Display / Title:** "Noto Serif KR" (Google Fonts) -- a high-quality Korean serif with the authority and gravitas of classical scholarship. Used at extreme display sizes: clamp(3rem, 8vw, 9rem) for the opening question, with letter-spacing: 0.08em to give each Hangul syllable block the weight of a carved seal stamp. Weight 900 (Black) for the primary question, weight 300 (Light) for the answer, creating a visual hierarchy of certainty vs. humility. - **Body / Reading:** "Libre Baskerville" (Google Fonts) -- a revival of the Baskerville serif lineage optimized for screen reading, with generous x-height and sharp bracketed serifs that evoke academic publishing. Used at clamp(1rem, 1.8vw, 1.25rem) for body text with line-height 1.85 and letter-spacing: 0.015em. The Baskerville heritage connects to the Enlightenment tradition of empirical knowledge -- form supporting content. - **Annotations / Marginalia:** "Caveat" (Google Fonts) -- a handwritten font with the quality of marginal notes scribbled in a textbook. Used at 0.85rem for annotations, captions, and meta-commentary that appears alongside main content. Color set to #8b7355 (a faded-ink brown) to distinguish from primary text. This font represents the personal, subjective layer of knowledge -- interpretation laid over fact. - **System / Navigation:** "IBM Plex Sans" (Google Fonts) -- a humanist sans-serif with a rational, systematic quality that contrasts with the organic warmth of the serifs and handwriting. Used at 0.75rem, weight 500, all-caps with letter-spacing: 0.2em for navigation elements and stratum labels. Represents the scaffolding of organized knowledge. **Palette:** The palette is built on the concept of **ink on aged paper** -- a triadic structure anchored by three chromatic pillars: | Role | Color | Hex | Description | |------|-------|-----|-------------| | Void (Primary Dark) | Deep Ink Black | `#0f0f17` | The darkness of not-knowing; background of the knowledge graph, the space between books | | Parchment (Primary Light) | Aged Hanji | `#f2e8d5` | The surface of Korean handmade paper (한지); primary background for readable sections | | Illumination (Accent) | Scholar's Amber | `#d4943a` | The warm light of a candle or oil lamp; used for active states, node glows, and the growing fractal tree | | Ink (Text Primary) | Brush Black | `#1a1610` | Not pure black but a warm, slightly brown-tinted black, like actual brush ink (먹) | | Margin Note | Faded Sienna | `#8b7355` | The color of annotations that have aged 50 years on paper | | Knowledge Active | Celadon Trace | `#5a8a6e` | A muted jade green borrowed from Korean celadon pottery (청자); used for visited/known nodes in the graph | | Uncertainty | Mist Violet | `#6e5c7a` | A twilight purple representing the liminal space between knowing and not-knowing | **Gradient usage:** Deliberately minimal -- the only gradient is a vertical fade from `#0f0f17` to `#f2e8d5` at the Threshold-to-Library transition, representing the emergence from darkness into the light of knowledge. All other transitions are hard cuts with the 3px misalignment stutter. ## Imagery and Motifs **Core visual motifs:** - **The Fractal Knowledge Tree:** A generative art piece rendered on a `` element using recursive branching algorithms. The tree grows from a single trunk at the top of the viewport, branching downward (an inversion of natural trees -- knowledge growing from a single axiom into infinite specifics). Each branch is drawn with a calligraphic stroke width that thins toward the tip, rendered in Scholar's Amber (#d4943a) with 60% opacity. Branch angles are determined by a seeded random function so the tree is consistent across visits but appears organic. On scroll, new branches sprout at the current scroll depth, creating the illusion that the user's exploration is literally growing the tree of knowledge. - **Ink Bleed Edges:** Text containers and content modules have edges that are not sharp rectangles but irregular ink-bleed boundaries, created with SVG `feTurbulence` and `feDisplacementMap` filters. The turbulence frequency is set low (0.02) so the bleeding is large-scale and architectural rather than fine-grained noise. This represents the impossibility of perfectly containing knowledge -- ideas always bleed beyond their boundaries. - **Seal Stamps (도장):** Important concepts and section headers are accompanied by a circular seal stamp motif rendered in Scholar's Amber on a transparent background. Each stamp contains a single Hanja (Chinese character used in Korean) relevant to the section's epistemological theme: 知 (knowledge), 問 (question), 理 (reason), 悟 (enlightenment). The stamps are rotated 2-7 degrees and have an intentional imperfection in their circularity, mimicking the hand-carved quality of real Korean name seals. - **Manuscript Grid Lines:** Background layers for readable sections include faint horizontal ruling lines (#1a1610 at 3% opacity, 1.85rem apart matching body line-height) that evoke manuscript paper. Every fifth line is slightly darker (5% opacity), creating a rhythmic visual texture that supports readability without demanding attention. - **Node-Graph Connections:** The knowledge graph section uses animated SVG paths drawn with `stroke-dasharray` and `stroke-dashoffset` animations. Connection lines are rendered in Celadon Trace (#5a8a6e) with a 1px stroke and 40% opacity. When a node is hovered, its connections brighten to 100% opacity and thicken to 2px, while all non-connected lines fade to 15% opacity -- a visual metaphor for how focusing on one piece of knowledge illuminates its relationships while obscuring everything else. - **The Mirror Effect:** In the Reflection stratum, a CSS `backdrop-filter: blur(4px) brightness(0.4)` combined with `transform: scaleY(-1)` creates the reflected content. A subtle animated grain overlay (SVG noise pattern at 2% opacity, repositioned every 100ms) on the reflection layer gives it the quality of a dark, slightly disturbed water surface -- knowledge reflected imperfectly in the pool of assumption. ## Prompts for Implementation **Narrative Architecture:** The site tells the story of epistemological descent -- from the provocative question at the surface through the library of accumulated knowledge, into the connected web of understanding, and finally to the mirror of self-reflection where the viewer confronts their own assumptions. The scroll is the act of inquiry itself. Implementation should serve this philosophical journey: 1. **The Threshold (opening):** The Korean text "알고서 하는거야?" should be rendered using Noto Serif KR at maximum display size, centered both horizontally and vertically. Use CSS `@keyframes` to simulate ink bleeding in from the center of each character outward, using `clip-path` with animated `inset()` values expanding from the character center. The generative fractal tree behind it should be implemented on a `` element with `requestAnimationFrame`, drawing one new branch level every 400ms. The tree uses recursive line drawing with decreasing `lineWidth` (from 4px to 0.5px) and decreasing `globalAlpha` (from 0.8 to 0.2) per recursion level. After the 3-second delay, use `opacity` transition (800ms ease-out) to fade the question and reveal the answer "모르고는 하지마." at weight 300, followed by a scroll-down indicator (a single thin line descending from the text baseline, animated with `transform: scaleY` from 0 to 1). 2. **The Library (horizontal corridor):** Implement horizontal scroll via `scroll-snap-type: x mandatory` on a container with `overflow-x: scroll` and `overflow-y: hidden`. Each "book spine" is a narrow (120px wide) flex item with vertical text using `writing-mode: vertical-rl`. On click/tap, the spine expands to `80vw` with a `transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1)`, and the writing mode transitions to `horizontal-tb` with content fading in via `opacity` transition delayed by 400ms. The book-opening effect uses a CSS perspective transform: `transform: perspective(1200px) rotateY(-5deg)` on the expanded state, giving a subtle 3D page-turn quality. 3. **The Knowledge Graph:** Implement nodes as absolutely-positioned `div` elements within a relatively-positioned container whose height is calculated to fit all nodes. Use JavaScript to compute node positions using a force-directed layout algorithm (simple spring simulation: iterate 50 times on page load to settle positions). SVG overlay for connection lines, drawn with `` elements using quadratic Bezier curves (`Q` commands) for organic-feeling connections. Animate line drawing on scroll-into-view using Intersection Observer to trigger `stroke-dashoffset` transition from full-length to 0 over 1200ms with `ease-in-out` timing. Node pulse effect: `box-shadow` animation cycling between `0 0 0 0 rgba(212, 148, 58, 0)` and `0 0 20px 4px rgba(212, 148, 58, 0.3)` over 3s with `ease-in-out` infinite alternate. 4. **The Reflection:** Use a duplicated content container with `transform: scaleY(-1)` positioned absolutely below the original. Apply `mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 80%)` to fade the reflection naturally. The grain overlay is a tiny (100x100) SVG noise pattern tiled via `background-repeat` and repositioned every 100ms using `background-position` animation to create a living, breathing reflection surface. 5. **Global considerations:** All text content should support Korean (Hangul) and English. The ink-bleed SVG filter should be defined once in a `` block and referenced by class. Intersection Observer should be used for all scroll-triggered animations (NOT scroll event listeners) to maintain performance. The fractal tree canvas should pause rendering when not in viewport. The entire experience should be a single HTML page with no routing -- the scroll IS the navigation. Bias toward CSS animations over JavaScript where possible. No CTA buttons, no pricing blocks, no stat-grids, no testimonial carousels. The site is a contemplative experience, not a conversion funnel. AVOID: CTA-heavy layouts, pricing blocks, stat-grids, card-grid patterns, corporate aesthetics, generic hero-with-subtitle patterns, stock photography, gradient-heavy palettes, mono typography dominance. ## Uniqueness Notes **Differentiators from other designs:** 1. **Epistemological narrative as structural principle:** No other design in the collection uses the philosophy of knowledge itself as its organizing architecture. Each of the four strata (Threshold, Library, Diagram, Reflection) corresponds to a stage in the epistemological process: questioning, accumulating, connecting, and self-examining. The layout IS the argument -- the medium is the message. 2. **Korean classical scholarship as visual vocabulary:** While other designs reference various cultural traditions, this design draws specifically from the material culture of Korean Joseon-era scholarship -- hanji paper texture, brush-ink calligraphy, seal stamps (도장), manuscript ruling lines, and the seodang (서당) as spatial metaphor. These are not decorative overlays but structural elements that inform spacing, texture, color, and typography decisions. 3. **Triadic palette with warm-dark grounding:** The palette avoids the overused gradient-warm-muted combination (96%/93%/66% frequency) in favor of a triadic structure anchored by deep ink-black, aged parchment, and scholar's amber. The celadon trace and mist violet serve as secondary chromatic accents that reference Korean ceramic traditions without falling into the warm-gradient defaults. The overall effect is high-contrast but warm -- #0f0f17 against #f2e8d5 creates strong readability while the amber and celadon provide measured chromatic relief. 4. **Generative fractal tree as persistent metaphor:** The knowledge tree is not a one-off illustration but a living generative element that responds to the user's scroll position, growing new branches as they explore. This creates a unique per-visit visual artifact that embodies the site's core message: knowledge grows through active inquiry. 5. **Mirror-reflection stratum as epistemological device:** The Reflection section's CSS mirror effect is not merely decorative but serves a philosophical function -- it visually demonstrates how assumptions distort knowledge by showing the same content reflected imperfectly. No other design in the collection uses reflection as a narrative device. **Chosen seed/style:** education scholarly layout -- selected because the domain's epistemological theme ("알고서 하는거야?") demands a design rooted in the traditions and materials of scholarly pursuit. The scholarly layout vocabulary (manuscript lines, book-spine navigation, knowledge graphs, margin annotations) provides authentic visual language for a site about the nature of knowing. **Avoided patterns from frequency analysis:** - card-grid layout (90% frequency) -- replaced with f-pattern + layered-depth + horizontal-scroll - corporate aesthetic (83% frequency) -- replaced with dark-academia + wabi-sabi - mono typography (83% frequency) -- replaced with serif-classic (Noto Serif KR, Libre Baskerville) + handwritten (Caveat) + humanist (IBM Plex Sans) - photography imagery (90% frequency) -- replaced with generative-art (fractal tree) + hand-drawn motifs (seal stamps, ink bleed) - gradient palette (96% frequency) -- replaced with triadic palette using a single transitional gradient - warm + muted palette (93%/66% frequency) -- replaced with high-contrast ink-on-parchment scheme - scroll-triggered as sole animation pattern (93%) -- supplemented with typewriter-effect (ink-bleed text reveal), path-draw-svg (knowledge graph connections), and pulse-attention (node glow)