# Design Language for yongjoon.net ## Aesthetics and Tone `yongjoon.net` is a **Bauhaus-classical collision** — a personal portfolio where Weimar-era geometric functionalism crashes headfirst into ancient Greek marble halls, and somehow both survive. Imagine Oskar Schlemmer's Triadic Ballet performed inside the Parthenon: primary geometric volumes rotating against veined white stone, stark black rules painted directly onto travertine. The tension between the hand-painted circle and the chiseled column *is* the aesthetic. The mood is **bold-confident without apology** — not the timid confidence of someone asking permission, but the confidence of a sculptor who has just lifted the chisel and knows exactly where to strike. Every section is a deliberate act. No hedging, no soft sell. Each stacked panel makes one statement and ends. The visitor does not scroll for content density; they scroll because the next section promises a different collision. The Bauhaus vocabulary is strict: primary palette (but warm, not cold — terracotta primary instead of fire-engine red, amber instead of chrome yellow, charcoal instead of pure black), geometric sans type, ruled dividers that are decorative *and* structural. The classical vocabulary is equally strict: veined marble textures rendered as CSS fractals, egg-and-dart ornamental borders redrawn in SVG at 1px stroke, Doric column proportions used as spacing ratios. Neither vocabulary mocks the other. Both are taken seriously. This is the only site in the registry that treats Bauhaus and classical antiquity as **genuine equals** rather than ironic juxtaposition. ## Layout Motifs and Structure The structure is a sequence of **full-viewport stacked sections**, each one a self-contained compositional act. There are exactly seven sections — the count is not accidental (seven liberal arts, seven days, seven columns on the Parthenon's side). Each section fills 100vh and does not scroll internally; the only scrolling is the reader descending from one section to the next. **Section anatomy:** - Every section has a **Bauhaus-ruled header strip** — a thick horizontal bar (12px) in the section's accent color, spanning the full width, positioned at 20% from the section top. This is the structural datum line. Everything above it is air; everything below it is content. - Content blocks sit on a **tripartite vertical grid** (columns at 8.3%, 41.6%, 75% left-edge positions) — a reference to Vitruvian tripartition. No content bleeds between columns; each block owns its column. - The **tilt-3d interaction** activates on every section panel: as the viewer's cursor moves across the section, the entire section face tilts ±4° on X and ±3° on Y via `perspective(900px) rotateX() rotateY()`, with a 200ms cubic-bezier(0.23, 1, 0.32, 1) ease-out. The tilt is subtle but physical — the marble texture shifts highlights as the panel turns, reinforcing the illusion of a stone slab rotating in space. - **Section dividers** are not whitespace — they are 2px ruled lines in #2C1810 (dark espresso) with a centered SVG egg-and-dart ornament motif (48px wide, 12px tall), rendering the transition as a classical frieze fragment. **Section sequence:** 1. **Hero Slab** — Name + discipline, enormous, no decoration except the datum rule. 2. **Work Manifesto** — One paragraph. Full width. The Bauhaus grid goes off-kilter by 2°. 3. **Selected Projects** — Three project cards on the tripartite grid, each a tilting slab. 4. **Process** — Diagrammatic. Geometric shapes trace a workflow, labeled in Bauhaus style. 5. **Medium** — Writing, if any. Single-column with wide marble-texture left gutter. 6. **Collaboration** — Geometric call-block. One address, one phrase, no form. 7. **Coda** — Footer as frieze: egg-and-dart border spans full width, then silence. ## Typography and Palette **Typography (Google Fonts only):** - **Display / H1 — `Nunito`** (Google Fonts, variable wght 200–900). Set at 88px / 1.0 line-height, wght 900, letter-spacing -0.03em. The roundness of Nunito plays the playful-rounded brief while the heavy weight and tight tracking restore geometric authority. The H1 is set entirely in uppercase. On load, each glyph animates in from a slight `scale(0.85) rotateZ(-2deg)` to `scale(1) rotateZ(0)`, staggered 40ms per character, spring physics, settling with a single gentle overshoot. This is the only animation on the H1. - **Section headers / H2 — `Nunito`** (wght 700, 32px, uppercase, letter-spacing 0.12em). Treated as Bauhaus labels: all-caps, generous tracking, no serifs. The tracking here deliberately echoes the spacing between Doric triglyphs. - **Body copy — `Lato`** (Google Fonts, wght 400/700, 16px / 1.7 line-height). Humanist but clean. Wide enough leading to breathe against the dense geometric layout. Body wght 400 for narrative, wght 700 for emphasis. No italic — the Bauhaus rejected ornamental slant. - **Captions / labels — `Lato`** (wght 400, 11px, uppercase, letter-spacing 0.18em). Used for project year labels, section numbers (01 – 07), and ornamental callouts. **Palette — warm bauhaus-classical:** | Role | Hex | Name | |------|-----|------| | Background base | `#F5EDE0` | Travertine cream — warm stone, not white | | Primary action / datum rule | `#B84A2B` | Burnt sienna — terracotta primary | | Secondary accent | `#D9942A` | Amber ochre — warm Bauhaus yellow | | Deep structure / text | `#2C1810` | Espresso dark — rich not black | | Marble vein mid | `#C8B49A` | Dusty rose-tan — vein color | | Highlight / section 5-6 bg | `#EAD5B7` | Warm parchment — slightly lighter stone | | Negative space accent | `#7A3B1E` | Dark terracotta — deep version of primary | Minimum 7 colors. The warm palette is acknowledged as overused (88% in registry) but here it is used non-generically: warmth comes from actual stone mineral pigments (travertine, terracotta, amber) rather than generic coral-and-peach. ## Imagery and Motifs **No photography.** The registry shows photography at 87% — yongjoon.net opts out entirely. **Abstract geometric shapes** are the exclusive imagery system: - **Bauhaus primitives** — circle, triangle, square — appear as large (200–400px) flat-fill SVG shapes in the section backgrounds. They are not icons; they are scenographic volumes. The circle is always `#B84A2B` (burnt sienna). The triangle is always `#D9942A` (amber). The square is always `#2C1810` (espresso). Color assignments are dogmatic, per Itten/Kandinsky's Bauhaus color-form theory. - **Marble-classical texture** — generated as a CSS fractal using layered `radial-gradient` and `conic-gradient` at micro scale, creating a veined stone surface in `#F5EDE0` / `#C8B49A` / `#EAD5B7`. Applied as background texture to alternating sections, giving them the feel of polished travertine panels. The veins run at approximately 20–35° — the angle of natural stone cleavage. - **Egg-and-dart ornament** — a single SVG pattern (`` element, 48×12px tile) used as a horizontal repeating border for section dividers and the footer frieze. Drawn at 1px stroke in `#2C1810`, the egg ovoids are ellipses (14×10px), the dart interstitials are chevrons. This is the one concession to decorative tradition and it is used with Bauhaus economy: exactly two appearances — section dividers and footer. - **Doric column spacing** — the vertical rhythm of the page uses the proportional relationship 1:1.5:3 (capital height : intercolumn : column height) translated to pixel units (24px : 36px : 72px). All vertical margins derive from these three values or their multiples. This is not visible as imagery but felt as structural rightness. - **Geometric shape rotation** — each background primitive slowly rotates on a separate `animation` cycle (circle: 120s full rotation; triangle: 90s; square: 180s), all using `transform-origin: center`. The rotation is imperceptible moment-to-moment but creates a cumulative sense of geological time — like watching a slow tide. ## Prompts for Implementation Build yongjoon.net as a **seven-panel stacked monument** — not a website, a sequence of carved stone panels the viewer descends. The experience is vertical, deliberate, and tactile. **Global structural rules:** - `body` has `overflow-x: hidden`, `background: #F5EDE0`, `font-family: 'Lato', sans-serif`. - Every section is `height: 100vh`, `display: grid`, `position: relative`, `overflow: hidden`. - The tilt-3d effect is applied to every `
` via a single shared JS listener: `document.querySelectorAll('section').forEach(section => { section.addEventListener('mousemove', (e) => { const rect = section.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; section.style.transform = 'perspective(900px) rotateX(' + (-y * 6) + 'deg) rotateY(' + (x * 5) + 'deg)'; }); section.addEventListener('mouseleave', () => { section.style.transform = 'perspective(900px) rotateX(0) rotateY(0)'; section.style.transition = 'transform 400ms cubic-bezier(0.23, 1, 0.32, 1)'; }); })`. - Marble texture sections use a pseudo-element `::before` with layered gradients; example: `background: radial-gradient(ellipse 80% 60% at 30% 40%, #C8B49A22 0%, transparent 70%), radial-gradient(ellipse 60% 80% at 70% 60%, #C8B49A18 0%, transparent 65%), radial-gradient(ellipse 100% 40% at 50% 80%, #C8B49A12 0%, transparent 60%), #F5EDE0;`. - Load Google Fonts: `Nunito:wght@700;900&family=Lato:wght@400;700`. **Section-by-section build:** **Section 01 — Hero Slab:** - Background: `#F5EDE0`, marble texture pseudo-element. - Datum rule: `position: absolute; top: 20%; left: 0; width: 100%; height: 12px; background: #B84A2B;`. - Name `YONGJOON` set in Nunito 900, 88px, `#2C1810`, positioned at tripartite column 1. Each character wrapped in `` for stagger animation. - Below the name: discipline label in Lato 400 11px uppercase tracking-widest, `#7A3B1E`. - Background Bauhaus circle: SVG `` 340px diameter, `fill: #B84A2B`, `opacity: 0.09`, positioned right-30%/top-40%, `animation: slowRotate 120s linear infinite`. **Section 02 — Work Manifesto:** - Background: `#2C1810` (espresso). Text: `#F5EDE0`. Accent rule: `#D9942A`. - The entire section tilts 2° off-axis: `transform: rotate(2deg) scale(1.02)` applied to inner content wrapper, while outer section clips with `overflow: hidden`. This creates the sense of a canvas that has slid slightly out of true — deliberate, not accidental. - Bauhaus triangle: SVG `` 280px, `fill: #D9942A`, `opacity: 0.07`, background left side, `animation: slowRotate 90s linear infinite`. - One manifesto paragraph. No H2. Just the text and the tilt. **Section 03 — Selected Projects:** - Background: `#EAD5B7` (warm parchment), marble texture heavy. - Three project cards in tripartite grid positions (8.3%, 41.6%, 75% left). Each card: 280px wide, `background: #F5EDE0`, 1px border `#2C1810`, tilt-3d applies to each card independently (nested tilt inside section tilt). - Card header: Nunito 700 18px uppercase, `#2C1810`. Below: Lato 400 14px description. Year label: Lato 11px uppercase letter-spacing-wide, `#B84A2B`. - On hover, card's datum rule (4px thick, `#B84A2B`) slides in from left via `scaleX` transform. **Section 04 — Process:** - Background: `#F5EDE0`. Accent rule: `#2C1810` (dark). - Geometric workflow diagram: 5 nodes (circle, triangle, square, circle, triangle) connected by 1px ruled lines. Each shape is the canonical Bauhaus color. Labels in Lato 11px uppercase beneath each node. - Shapes animate via `scroll-triggered` entry: each shape slides in from 20px below, `opacity: 0 → 1`, staggered 150ms. **Section 05 — Medium:** - Background: `#F5EDE0` with heavy marble texture in left 25% gutter. - Single content column at 41.6% left, width 50%. Article list in Lato 400 16px. Links in `#B84A2B`, no underline by default, underline draws on hover via `text-decoration-thickness` animation. - Left gutter ornament: egg-and-dart SVG pattern tile, rotated 90°, running vertically. **Section 06 — Collaboration:** - Background: `#B84A2B` (burnt sienna). All text: `#F5EDE0`. - One phrase, Nunito 900, centered, 64px. Below: contact address Lato 400 16px. - Background Bauhaus square: 300px, `fill: #7A3B1E`, `opacity: 0.15`, `animation: slowRotate 180s linear infinite`. - No form. No button. Just address. **Section 07 — Coda (Footer):** - Background: `#2C1810`. Full-width egg-and-dart SVG border at top, `stroke: #C8B49A`. Section number `07` in Nunito 900 120px, `color: #F5EDE010` (ghost). Copyright in Lato 11px uppercase, `#C8B49A`. **Typography loading snippet:** ```html ``` **Animation keyframes:** ```css @keyframes slowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` **Avoid:** navbar, hamburger menu, hero CTA button, stats counters, pricing blocks, testimonial carousels, parallax (overused 74%), centered layout (overused 83%). ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **bauhaus**, layout = **stacked-sections**, typography = **playful-rounded**, palette = **warm**, patterns = **tilt-3d**, imagery = **abstract-shapes**, motifs = **marble-classical**, tone = **bold-confident**. **Differentiators from existing registry designs:** 1. **Bauhaus × Classical Antiquity as genuine equals.** No other design in the registry pairs Weimar geometric modernism with ancient Greek classical vocabulary at equal footing. The collision is not ironic or postmodern — both systems are taken seriously and their proportional rules (Bauhaus grids and Doric column ratios) coexist structurally. 2. **Tilt-3d applied to full viewport sections, not cards.** Most tilt-3d implementations treat individual cards or elements. Here, each 100vh stacked panel tilts as a monolithic slab — the marble texture shifts highlights as the entire section tilts, reinforcing the physicality of stone. This is the registry's only panel-scale tilt-3d application. 3. **Playful-rounded typography (Nunito 900) deployed with geometric severity.** The playful-rounded seed is typically associated with friendly, approachable aesthetics. Here, Nunito is stripped of its friendliness by weight (900), tight tracking (-0.03em), and all-uppercase setting — creating a font that looks rounded but reads as a stamp. The roundness surfaces only at close inspection; at reading distance it reads as authority. 4. **Egg-and-dart classical ornament used with Bauhaus economy.** Classical ornament is typically maximalist. Here, the egg-and-dart motif appears exactly twice — section dividers and footer frieze — following Bauhaus principles of only using decoration that doubles as structure. This constraint transforms a maximalist motif into a minimalist signature. 5. **Seven-panel monument structure with explicit sacred/classical numerology.** The choice of exactly seven sections is named and justified (seven liberal arts, seven Parthenon columns). This transforms what would be an arbitrary UI decision into a compositional statement. No other registry design references classical architectural counting as structural rationale. **Avoided patterns from frequency analysis:** - photography (87% in registry) — replaced with abstract geometric SVG shapes - centered layout (83%) — replaced with stacked-sections / tripartite grid - parallax (74%) — not used; tilt-3d (5%) used instead - mono typography (74%) — replaced with playful-rounded (Nunito + Lato) - vintage motifs (33%) — replaced with marble-classical (4%) - warm palette used non-generically — stone mineral warmth (travertine, terracotta) not coral/peach