# Design Language for yongjoon.xyz ## Aesthetics and Tone yongjoon.xyz is a brutalist personal archive -- a raw concrete slab of a website where content is presented with uncompromising directness. The visual identity channels the exposed-structure aesthetic of Le Corbusier's Unite d'Habitation and Tadao Ando's bare concrete churches, translated to horizontal-scroll digital space. The midnight-blue palette replaces concrete gray with deep oceanic darkness, making the brutalism feel more cerebral than industrial. Content is organized as a horizontal scroll through "chapters" -- book-like sections that flip via card-flip animations, reinforcing the scholarly-intellectual tone. Mixed-media imagery (photographs, diagrams, text blocks, code snippets) collide on screen without hierarchy, echoing the brutalist refusal to prioritize. Inspiration from Zaha Hadid's early deconstructivist drawings, the typographic experiments of Wolfgang Weingart, and the raw HTML aesthetic of early academic homepages. ## Layout Motifs and Structure A **horizontal-scroll** layout where the user navigates laterally through content "pages" -- each panel a full-viewport spread that can be flipped like a physical book page via card-flip animation. **Primary structure:** - **Title panel (100vw x 100vh):** Deep midnight blue (#0a1628) with "YONGJOON" set in large serif-revival type, flush-left at 10vw from the edge. Below, a single line: "developer. scholar. archivist." in smaller type. No decoration -- pure typographic brutalism. A thin white border (1px, rgba(255,255,255,0.1)) frames the entire viewport. - **Chapter panels (5-7 panels, each 100vw):** Each panel is a "chapter" (Work, Research, Writing, Code, Archive). Panels use brutal grid subdivision -- content placed on a visible 12-column grid with 1px midnight-blue lines. Mixed media fills grid cells: text blocks, SVG diagrams, code snippets, photograph placeholders. - **Flip transition:** Navigating between panels triggers a CSS card-flip animation (rotateY) on the outgoing panel, revealing the next panel beneath. - **Index strip:** A fixed bottom bar (height: 48px) showing chapter titles in small serif-revival type, the current chapter underlined with a 2px white line. **Spatial relationships:** Within panels, content respects a strict 12-column grid (visible gridlines). Text blocks snap to columns 2-7 or 6-11 (never centered). Mixed-media elements overlap grid boundaries by 1-2 columns intentionally. ## Typography and Palette **Fonts:** - **Display/Headlines:** "Libre Baskerville" (Google Fonts) -- a web-optimized Baskerville revival with generous x-height, used at clamp(36px, 6vw, 72px). Weight 700. The classical authority of Baskerville collides with brutalist presentation to create intellectual tension. - **Body text:** "Libre Baskerville" (Google Fonts) -- same family at 17px/1.75 line-height, weight 400. Maintaining a single type family (different weights/sizes) is itself a brutalist reduction. - **Code/Annotations:** "JetBrains Mono" (Google Fonts) -- monospace at 13px for code blocks and marginalia annotations. Weight 400. **Color Palette:** - **Primary midnight:** #0a1628 (deep blue-black, primary background) - **Panel dark:** #0d1e38 (slightly lighter midnight for alternate panels) - **Text white:** #e8eaf0 (cool white with blue tint) - **Text muted:** #6a7a8e (steel blue-gray for secondary text) - **Accent line:** #ffffff (pure white at varying opacities for structural lines) - **Accent warm:** #c8a878 (muted gold for rare emphasis moments) - **Grid lines:** #1a2a40 (barely visible grid structure) ## Imagery and Motifs **Core visual motifs:** - **Mixed-media collage cells:** Within the 12-column grid, cells contain heterogeneous content types -- a photograph cropped to harsh rectangles, a block of monospaced code, an SVG line diagram, a pull-quote. These are placed without visual hierarchy, all equally weighted, as if dumped from an archive box onto a grid. - **Book-scholarly references:** Footnote markers (superscript numbers in accent warm) appear throughout text, with corresponding notes in the bottom 80px of each panel in small monospace. This academic apparatus grounds the brutalism in intellectual rigor. - **Visible grid structure:** The 12-column grid is drawn with 1px lines (#1a2a40) visible at all times, creating a blueprint/architectural drawing quality. Content sits ON the grid, not hidden within it. - **Card-flip page turns:** Navigating between panels uses CSS perspective and rotateY transform -- the current panel rotates on its vertical axis (like turning a book page) to reveal the next. Duration: 600ms, cubic-bezier(0.4, 0, 0.2, 1). ## Prompts for Implementation **Full-screen horizontal book experience:** The site should feel like navigating through a scholarly monograph laid flat -- each panel a spread, each flip a page turn. The horizontal scroll with card-flip transitions creates a tangible reading experience. **Horizontal scroll implementation:** - Container: display: flex, flex-direction: row, width: calc(100vw * number-of-panels), overflow: hidden. - Navigation via JavaScript: click/swipe triggers translateX animation to the next panel. - Each panel: width: 100vw, height: 100vh, position: relative. **Card-flip transition:** - Outgoing panel: animation: rotateY(0) to rotateY(-90deg), 300ms, with perspective: 1200px on parent. - Incoming panel: animation: rotateY(90deg) to rotateY(0), 300ms, starting after outgoing completes. - Use backface-visibility: hidden on both panels during transition. **Visible grid implementation:** - Apply a CSS background-image with repeating-linear-gradient to create visible 12-column grid lines. - background-image: repeating-linear-gradient(90deg, #1a2a40 0px, #1a2a40 1px, transparent 1px, transparent calc(100%/12)). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, rounded corners, gradients, shadows. Brutalism demands raw edges, sharp corners, and structural honesty. ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal scroll as scholarly codex:** No other design treats horizontal navigation as a physical book metaphor with card-flip page turns -- the combination of lateral movement and rotational transitions creates a reading experience unique in the collection. 2. **Visible architectural grid as aesthetic choice:** While other designs use grids, yongjoon.xyz makes the grid itself visible as a design element, transforming structural scaffolding into brutalist ornament. 3. **Mixed-media archive without hierarchy:** The deliberate refusal to prioritize content types (code equal to photography equal to prose) within grid cells creates an anti-hierarchical information architecture found in no other design. **Chosen seed/style:** aesthetic: brutalist, layout: horizontal-scroll, typography: serif-revival, palette: midnight-blue, patterns: card-flip, imagery: mixed-media, motifs: book-scholarly, tone: scholarly-intellectual **Avoided overused patterns:** photography imagery (91%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (98%), mono typography (82%), mysterious-moody tone (72%).