# Design Language for yesang.xyz ## Aesthetics and Tone yesang.xyz channels the spirit of a 1920s Bauhaus classroom that has been haunted by a digital poltergeist -- imagine Walter Gropius's Dessau workshop after a power surge corrupted every cathode-ray tube in the building, leaving razor-sharp geometric compositions fractured by chromatic aberration and datamoshing artifacts. The aesthetic is **bauhaus-corrupted**: the rigor and functional beauty of early modernist design (primary geometric forms, systematic grids, the unity of art and craft) deliberately undermined by glitch interventions that expose the fragility of digital reproduction. The tone is **playful** in the way a mischievous graduate student might be -- someone who deeply respects the canon of design history but cannot resist feeding a Kandinsky composition through a broken JPEG encoder to see what emerges. There is reverence here, but also irreverence. Every element communicates that design rules exist to be understood first, then bent until they sing a different note. The mood oscillates between the sober geometry of a Bauhaus primer and the anarchic energy of a corrupted file system -- a library where the index cards have been shuffled by an algorithm with a sense of humor. The experience should feel like discovering a forbidden volume in a design school archive: scholarly in structure, glitched in execution, and deeply satisfying in the tension between order and entropy. ## Layout Motifs and Structure The layout is built on a **masonry** grid system -- not the polite Pinterest-style masonry of equal-width columns with variable heights, but a Bauhaus-inflected structural masonry where content blocks are treated as architectural bricks of varying proportions, stacked and interlocked according to a modular system derived from a 12-unit base grid. **Primary Grid System:** - The viewport is divided into a 12-column grid with 16px gutters and 32px outer margins. Content blocks ("bricks") occupy 2, 3, 4, or 6 column spans, with heights determined by a modular scale (multiples of 80px: 80, 160, 240, 320, 400). This creates an irregular but rhythmic vertical stacking where blocks of different heights interlock like the facade of a Brutalist housing block -- no two rows are the same height, but the underlying proportional system creates coherence. - **Hero Zone:** The top 100vh of the page is a single full-viewport "title card" -- a flat plane of Faded Plaster (#D4C9B8) with a centered geometric composition: three overlapping shapes (circle, triangle, square -- the Bauhaus triad) rendered as SVG outlines with 2px strokes in Oxidized Ink (#2B2926). The domain name "yesang.xyz" is typeset in a monospaced font at 6vw, centered within the geometric composition. On load, the shapes undergo a brief glitch sequence (200ms of random CSS `translate` jittering at +/-3px, then settle into position). The title card has no scroll indicator -- the user must discover the masonry grid below through exploration. - **Content Masonry:** Below the hero, the masonry grid begins. Each brick is a self-contained "page" from a fictional design textbook: some contain typographic specimens (large letterforms with annotation lines), some contain geometric diagrams (circles inscribed in squares, golden ratio spirals rendered in SVG), some contain "corrupted" versions of the same diagrams (the SVG paths displaced by random offsets, colors channel-shifted). The masonry uses CSS `columns: 3` on desktop (2 on tablet, 1 on mobile) with `break-inside: avoid` on each brick element. - **Interstitial Bands:** Between every 8-12 masonry bricks, a full-width horizontal band interrupts the grid. These bands contain a single line of monospaced text -- aphorisms about form, function, and error -- rendered at 1.2rem with generous letter-spacing (0.3em). The bands have a background of Darkroom Slate (#3A3632) with text in Faded Plaster (#D4C9B8), creating rhythmic pauses in the vertical scroll, like chapter dividers in a book. - **Footer as Colophon:** The page ends with a "colophon" section styled as the back matter of an academic publication: a centered block of small text (0.75rem) listing the "typefaces used," "grid specifications," and a fictitious "publication date" and "edition number." This block sits on 80px of vertical whitespace above and below, grounding the page with scholarly formality. ## Typography and Palette **Typography:** - **Primary / Body / Headlines:** "Space Mono" (Google Fonts) -- a monospaced typeface designed by Colophon Foundry with fixed-width characters that carry the mechanical precision of a Bauhaus typographic exercise. Used across all text roles: headlines at 3rem-6rem (weight 700), body text at 1rem (weight 400), captions at 0.75rem (weight 400). All text is set with `line-height: 1.5` for body and `line-height: 1.1` for headlines. Headlines use `letter-spacing: -0.02em` to tighten the natural looseness of monospace at large sizes. Body text uses `letter-spacing: 0.04em` for improved readability at paragraph scale. - **Accent / Annotation:** "IBM Plex Mono" (Google Fonts) -- used exclusively for the annotation labels that appear on geometric diagrams and typographic specimens. Set at 0.65rem, weight 300 (Light), with `text-transform: uppercase` and `letter-spacing: 0.15em`. This creates a visual register that reads as technical notation -- the marginal notes of a textbook -- distinct from the primary Space Mono voice. - **Glitch Text Treatment:** For "corrupted" text blocks within the masonry, the text is rendered in Space Mono but with a CSS animation that randomly toggles `font-feature-settings: "ss01"` on and off at 150ms intervals, while simultaneously applying a `text-shadow` with 1px horizontal offset in Rust Signal (#A0522D) and -1px offset in Archive Teal (#4A7C6F), creating an RGB-split effect that makes the text appear to vibrate between two color channels. **Palette:** | Role | Name | Hex | Usage | |------|------|-----|-------| | Background | Faded Plaster | #D4C9B8 | Primary surface, hero zone, brick backgrounds | | Text Primary | Oxidized Ink | #2B2926 | Headlines, body text, SVG strokes | | Accent Warm | Rust Signal | #A0522D | Glitch channel 1, geometric fills, hover states | | Accent Cool | Archive Teal | #4A7C6F | Glitch channel 2, annotation text, link underlines | | Surface Dark | Darkroom Slate | #3A3632 | Interstitial bands, colophon background | | Highlight | Aged Mustard | #C4A44A | Sparse accent for active states, focus rings | | Paper White | Vellum | #EDE7DB | Alternate brick backgrounds for contrast | | Deep Ground | Charred Umber | #1A1714 | Deepest shadows, text on light surfaces when max contrast needed | The palette is **muted-vintage** -- every color appears as though it has been printed on slightly yellowed paper and left in a sunlit archive for decades. No pure whites, no saturated primaries. Even the "teal" and "rust" accents are desaturated enough to feel like they belong to a 1930s color chart rather than a modern screen. ## Imagery and Motifs **Glitch-Art as Visual Language:** All imagery on yesang.xyz is **glitch-art** -- not photography, not illustration, but geometric compositions that have been algorithmically corrupted. The base images are Bauhaus-style geometric studies (circles, triangles, squares, lines arranged in systematic compositions) rendered as crisp SVGs, then subjected to various corruption techniques: 1. **Datamosh Blocks:** Rectangular regions of the SVG are duplicated and offset by 8-16px in random directions, creating a "torn" effect where the geometry appears to have been dragged across the screen by a malfunctioning display driver. Implemented via CSS `clip-path` on duplicated elements with `transform: translate()` offsets. 2. **Channel Separation:** Key geometric elements are rendered three times -- once in Rust Signal (#A0522D), once in Archive Teal (#4A7C6F), once in Oxidized Ink (#2B2926) -- each offset by 2-4px, simulating the misregistration of a multi-pass printing press or an RGB channel split in a corrupted image file. 3. **Scan Line Overlay:** A repeating horizontal line pattern (1px lines at 3px intervals, 8% opacity in Oxidized Ink) is layered over all imagery via a CSS pseudo-element using `repeating-linear-gradient`, evoking the scan lines of an old CRT monitor displaying a design textbook. **Book-Scholarly Motifs:** The entire site is structured as a scholarly artifact: - **Margin Notes:** Small annotation blocks positioned in the gutters of the masonry grid (visible only on desktop, hidden on mobile) contain technical notes about the adjacent content -- "Fig. 3.2: Circle inscribed in square, after Albers (1928)" or "Note: rendering artifact at coordinates (142, 87) -- [UNCORRECTED]." These are typeset in IBM Plex Mono Light at 0.6rem, rotated 90 degrees along the left edge of their parent brick. - **Page Numbers:** Each masonry brick has a small "page number" in its bottom-right corner -- a sequential number typeset in IBM Plex Mono at 0.55rem in Rust Signal (#A0522D), starting from "001" and incrementing through the grid. This reinforces the book metaphor: the user is scrolling through numbered pages of a corrupted textbook. - **Index Marks:** Every third interstitial band includes a "chapter index" -- a horizontal row of small squares (8px x 8px) in alternating Rust Signal and Archive Teal, representing a visual index of sections. The current section's square pulses with a subtle `opacity` animation (0.5 to 1.0, 2s duration, ease-in-out). - **Footnote Anchors:** Certain words in the body text are rendered with a superscript number in Rust Signal. Clicking these (or hovering) reveals a tooltip-style footnote block positioned directly below the word, containing a short "scholarly" note in IBM Plex Mono Light -- a playful mix of genuine design history references and absurdist commentary about digital corruption. **Bauhaus Geometric Elements:** The decorative motifs are drawn directly from the Bauhaus formal vocabulary: - **Primary Triad:** Circle, Triangle, Square -- rendered as SVG outlines (2px stroke, no fill) in various combinations throughout the masonry bricks. These are the site's "icons" -- no emoji, no FontAwesome, just the three fundamental forms. - **Color-Form Correspondence:** Following Kandinsky's color-form theory: triangles are always rendered in Aged Mustard (#C4A44A), circles in Archive Teal (#4A7C6F), squares in Rust Signal (#A0522D). This correspondence is maintained rigorously across the entire site, creating a visual language that rewards close attention. - **Compositional Studies:** Larger masonry bricks (spanning 4-6 columns) contain full geometric compositions -- overlapping shapes, intersecting lines, concentric circles -- that function as purely decorative art pieces within the grid. Each composition has a title label ("Study No. 7: Tension Between Circle and Grid") typeset in the annotation style. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must feel like slowly paging through a corrupted first-edition Bauhaus textbook that has been digitized by a scanner with a glitching CCD sensor. The experience is unhurried, contemplative, and punctuated by moments of visual surprise when glitch effects activate. **Opening Sequence:** On initial load, the viewport shows only Faded Plaster (#D4C9B8) for 400ms. Then, the three Bauhaus shapes (circle, triangle, square) draw themselves into existence using SVG `stroke-dasharray` / `stroke-dashoffset` animation over 1.2 seconds -- the circle first, then the triangle, then the square, each beginning 200ms after the previous shape reaches 50% completion. As each shape completes its draw, it undergoes a single 150ms glitch pulse (random `translate` jitter of +/-4px combined with the RGB channel split effect). After all three shapes are drawn and have glitched, the domain name "yesang.xyz" fades in at the center (opacity 0 to 1 over 600ms) in Space Mono 700 at 6vw. The entire hero zone then remains static until the user scrolls. **Scroll-Triggered Masonry Reveal:** As the user scrolls past the hero zone (detected via `IntersectionObserver` with `threshold: 0.1`), the masonry bricks enter the viewport with a **staggered fade-and-rise** animation: each brick starts at `opacity: 0; transform: translateY(24px)` and transitions to `opacity: 1; transform: translateY(0)` over 500ms with a cubic-bezier easing (0.16, 1, 0.3, 1). Bricks in the same visual row are staggered by 80ms, creating a cascade effect that flows left-to-right across each row. **Glitch Trigger Events:** Every 12-18 seconds of idle time on the page, a random masonry brick undergoes a "corruption event": its content shifts 4px to the right while a duplicate of its content (tinted in Archive Teal at 40% opacity) appears shifted 4px to the left, holding for 200ms before snapping back. This creates the impression that the page's rendering is periodically unstable -- a living document that cannot fully maintain its composure. **Interstitial Band Scroll Effect:** When interstitial bands enter the viewport, their text content is initially rendered as a string of Unicode block characters (U+2588 "FULL BLOCK") in Oxidized Ink, which then "decode" character-by-character into the actual aphorism text at a rate of one character per 30ms, simulating a terminal decryption or typesetting process. This effect uses JavaScript to replace characters sequentially from left to right. **Hover Interactions on Bricks:** When the cursor enters a masonry brick, a thin border (1px solid Rust Signal) fades in over 200ms along the top and left edges only -- an asymmetric border that references the Bauhaus preference for dynamic asymmetry over static symmetry. Simultaneously, the brick's "page number" transitions from Rust Signal to Aged Mustard. On cursor exit, both effects reverse over 300ms. **Footnote Reveal:** Footnote anchors (superscript numbers) respond to hover with a smooth expansion: a tooltip-like block slides down from directly below the anchor text over 250ms (using `max-height` transition from 0 to auto, clipped), containing the footnote text on a Darkroom Slate (#3A3632) background with Vellum (#EDE7DB) text. The block has a 1px top border in Aged Mustard. **Mobile Adaptation:** On viewports below 768px, the masonry collapses to a single column. Margin notes and rotated annotations are hidden. Page numbers move to the top-left corner of each brick. The hero zone shapes scale to 80vw container width. Interstitial bands maintain their full-width behavior but text size reduces to 1rem. The periodic glitch events are disabled on mobile to preserve battery and reduce motion for smaller screens. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus with flyout panels, gradient mesh backgrounds, glassmorphic cards, parallax background images. This is not a product page or a SaaS landing -- it is a digital artifact, an art object, a corrupted textbook. **Performance Notes:** All glitch effects are CSS-only where possible (channel split via `text-shadow` and layered transforms, scan lines via `repeating-linear-gradient`). JavaScript is used only for: IntersectionObserver scroll triggers, the interstitial text decode animation, periodic random glitch events, and footnote reveal interactions. No external animation libraries. SVG shapes are inline, not loaded as external assets. The two Google Fonts (Space Mono 400/700, IBM Plex Mono 300) are loaded via a single `` tag with `display=swap`. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus-Glitch Fusion:** No other design in the portfolio combines the formal rigor of Bauhaus geometric vocabulary (circle-triangle-square triad, Kandinsky color-form correspondence, modular grid proportions) with systematic glitch-art corruption. The existing glitch designs tend toward cyberpunk or tech-dashboard aesthetics; the existing geometric designs tend toward clean, uncorrupted presentations. yesang.xyz occupies the unexplored intersection: classical modernist design language subjected to digital entropy. 2. **Scholarly Book Apparatus as UI Pattern:** The site deploys academic publishing conventions (page numbers, margin notes, footnote anchors, colophon, chapter indices, figure captions with citation format) as its primary UI framework. No other design in the portfolio uses the book as its structural metaphor to this degree. The margin notes, superscript footnote anchors, and sequential page numbering on masonry bricks create a reading experience that is fundamentally different from web-native navigation patterns. 3. **Kandinsky Color-Form Mapping:** The strict correspondence between geometric shapes and specific colors (triangle = Aged Mustard, circle = Archive Teal, square = Rust Signal) creates a semiotic system unique to this site. This is not decorative color usage but a meaningful visual code that the observant visitor can decode, adding a layer of intellectual engagement absent from other designs. 4. **Periodic Autonomous Glitch Events:** The site's idle-triggered corruption events (random bricks glitching every 12-18 seconds) create a sense of the page as a living, slightly unstable artifact. Unlike scroll-triggered animations that respond to user action, these autonomous events happen whether the user is interacting or not, suggesting that the corruption is inherent to the document itself rather than a response to interaction. No other design in the portfolio features time-based autonomous visual disruptions. 5. **Terminal-Decode Text Reveal on Interstitials:** The character-by-character block-to-text decode animation on interstitial bands is a unique reveal mechanism not used in other designs. It bridges the scholarly (text appearing as if typeset) and the digital-corrupt (text appearing as if decrypted from garbled data). **Chosen Seed / Style:** - aesthetic: bauhaus - layout: masonry - typography: mono - palette: muted-vintage - patterns: scroll-triggered - imagery: glitch-art - motifs: book-scholarly - tone: playful **Avoided Overused Patterns (from frequency analysis):** - Avoided "centered" layout (99% frequency) -- used masonry instead (6%) - Avoided "warm" palette (100%) -- used muted-vintage instead (2%) - Avoided "minimal" imagery (95%) -- used glitch-art instead (4%) - Avoided "vintage" motifs (89%) -- used book-scholarly instead (4%) - Avoided "friendly" tone (99%) -- used playful instead (distinct register: intellectual mischief vs. approachable warmth) - Avoided "photography" imagery (72%) -- all imagery is generated geometric/SVG compositions - Avoided "parallax" patterns (72%) as a secondary pattern -- relied on scroll-triggered with stagger cascades instead