# Design Language for yesang.org ## Aesthetics and Tone yesang.org inhabits a world where vaporwave nostalgia collides with botanical tranquility — a retro-futuristic greenhouse floating in a digital sunset. The visual identity draws from the pastel-drenched, grid-warped landscapes of late-80s Japanese city pop album art and the serene composure of Korean temple gardens, creating a space that feels simultaneously like browsing a forgotten LaserDisc menu system and wandering through a moonlit arboretum. The mood is calm-serene but tinged with technological wonder: every element carries the gentle melancholy of a future that was imagined but never arrived, where chrome reflections soften into petal-pink gradients and Roman columns dissolve into fern fronds. The tone avoids corporate polish entirely — this is a meditative digital terrarium, a place of quiet contemplation wrapped in retrofuturistic chrome and botanical abundance. Think Hiroshi Nagai painting a greenhouse on a space station, or a vaporwave remix of a Claude Monet water lily study rendered on a CRT monitor with slight scan-line distortion. ## Layout Motifs and Structure The site is built on a **masonry grid** system that rejects the rigid uniformity of standard column layouts. Content blocks are arranged as irregularly-sized rectangular tiles — some tall and narrow (1-column width, 2-row span), others wide and shallow (2-column width, 1-row span), others square — creating an organic, Pinterest-inspired cascade that mirrors the unpredictable growth patterns of a botanical garden viewed from above. **Masonry Grid Specifications:** - Desktop: 4-column masonry with `column-gap: 20px` and variable row heights determined by content. Columns use CSS `column-count: 4` with `break-inside: avoid` on all tiles, or CSS Grid with `grid-template-rows: masonry` where supported, falling back to JavaScript-calculated positioning. - Tablet: 3-column masonry, `column-gap: 16px` - Mobile: Single-column stacked flow with maintained visual rhythm through alternating tile heights (short content tiles at 40vh, tall immersive tiles at 70vh) **Tile Types:** 1. **Flora Tiles** — square or tall-portrait tiles with a single botanical illustration (CSS-drawn fern, monstera leaf, or cherry blossom branch) centered on a pastel gradient background. These are decorative breathing spaces, not content containers. 2. **Text Tiles** — wide-landscape tiles containing prose passages set in the rounded-sans body font against a semi-transparent frosted backdrop (`backdrop-filter: blur(12px)`) over a slow-moving gradient. 3. **Portal Tiles** — the largest tiles (2-col, 2-row on desktop), functioning as immersive viewport windows into animated vaporwave scenes: a sunset grid receding to a vanishing point, underwater bubble columns rising through pink-violet water, or a rotating wireframe globe wrapped in vine tendrils. 4. **Artifact Tiles** — small square tiles containing a single retro-futuristic icon or glyph (a floppy disk overgrown with moss, a CRT monitor displaying a water lily, a chrome sphere reflecting a garden) rendered as inline SVG with hover-triggered micro-animations. The masonry layout is preceded by a **full-viewport opening scene** (100vh) that is NOT a traditional hero banner but an animated diorama: a flat-perspective vaporwave sunset grid (magenta-to-teal gradient sky, perspective-warped grid floor) with CSS-animated botanical silhouettes (ferns, palms, cherry blossoms) growing upward from the grid horizon line. The domain name "yesang.org" appears in the center, rendered in the display font with a chrome text gradient and subtle text-shadow glow, flanked by small floating bubble particles. Below the opening diorama, the masonry grid begins immediately with no transitional section, creating the sensation of the sunset grid "breaking apart" into discrete garden tiles. Navigation is minimal: a small fixed pill-shaped indicator in the bottom-right corner showing scroll depth as a gradient-filled circle (empty at top, full at bottom), doubling as a back-to-top button on tap. ## Typography and Palette **Display Font:** "Comfortaa" (Google Fonts) — a rounded geometric sans-serif with perfectly circular letter bowls and soft terminals that embody the vaporwave aesthetic's obsession with smooth, friendly geometry while feeling undeniably futuristic. Used for the site title, section headings within portal tiles, and any oversized decorative text. Weight 700 (Bold) for headings, weight 300 (Light) for decorative oversized background text used as watermarks at 5% opacity. Sizes: 72px-120px for the hero title, 36px-48px for tile headings. Letter-spacing: `0.04em` for a spacious, airy rhythm. **Body Font:** "Nunito" (Google Fonts) — a well-balanced rounded-sans with warm, approachable letterforms and excellent readability at body sizes. Its rounded terminals harmonize perfectly with Comfortaa while providing the regularity needed for longer passages. Weight 400 (Regular) for body text, weight 600 (SemiBold) for emphasis and labels. Size: 16px-18px with `line-height: 1.75` for generous vertical breathing room. Color: #2D2B3D (deep twilight purple) on light backgrounds, #E8E0F0 (lavender mist) on dark backgrounds. **Accent Font:** "Poiret One" (Google Fonts) — an ultra-thin, geometric display face with Art Deco DNA and a retro-futuristic elegance. Used sparingly for decorative labels on artifact tiles, date stamps, and small categorical tags. Weight 400 (its only weight). Size: 12px-14px with `letter-spacing: 0.15em` and `text-transform: uppercase`. **Color Palette:** | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary | Sunset Magenta | #E84FAD | Gradient start, headings glow, hover states | | Secondary | Twilight Teal | #3DD8C5 | Gradient end, link color, bubble highlights | | Background Dark | Deep Indigo | #1A1433 | Opening diorama sky, portal tile backgrounds | | Background Light | Lavender Cream | #F0E8F5 | Text tile backgrounds, body background | | Accent Warm | Peach Glow | #FFB088 | Flora tile gradients, sunset mid-tone | | Accent Cool | Soft Violet | #9B7ED8 | Chrome text gradient mid, decorative borders | | Text Primary | Twilight Plum | #2D2B3D | Body text on light backgrounds | | Text Light | Mist Lavender | #E8E0F0 | Body text on dark backgrounds | | Botanical Green | Fern Shade | #4CAF7D | Botanical illustration strokes, leaf fills | | Bubble Highlight | Prismatic White | #F5F0FF | Bubble specular highlights, glow cores | **Gradient Definitions:** - **Vaporwave Sky:** `linear-gradient(180deg, #E84FAD 0%, #FFB088 35%, #9B7ED8 65%, #3DD8C5 100%)` — used for the opening diorama background and as a repeating motif in portal tiles. - **Chrome Text:** `linear-gradient(135deg, #F5F0FF 0%, #9B7ED8 40%, #E84FAD 70%, #3DD8C5 100%)` — applied via `background-clip: text` on the hero domain name. - **Frosted Tile:** `linear-gradient(160deg, rgba(240,232,245,0.85) 0%, rgba(248,240,255,0.7) 100%)` — backdrop for text tiles, layered over the masonry background. ## Imagery and Motifs **Water-Bubble Particle System:** The site's signature visual element is a continuous stream of CSS-animated bubbles rising from the bottom of the viewport. Bubbles are `border-radius: 50%` divs ranging from 6px to 80px diameter, filled with radial gradients (`radial-gradient(circle at 30% 30%, rgba(245,240,255,0.6), rgba(61,216,197,0.1) 60%, transparent)`) that create a convincing light-refraction effect. Each bubble has a subtle `box-shadow: inset -2px -4px 6px rgba(232,79,173,0.15), 0 0 12px rgba(155,126,216,0.1)` for depth. Bubbles rise at varying speeds (8s to 25s animation duration) with sinusoidal horizontal drift achieved via `@keyframes` alternating `translateX(-15px)` and `translateX(15px)` at 25%/75% intervals. They fade to `opacity: 0` in the top 15% of the viewport. The bubble layer sits behind the masonry content at `z-index: 1` with the masonry at `z-index: 2`, creating the impression of an underwater garden. Bubble count: 15-20 simultaneous particles on desktop, 8-10 on mobile, staggered with `animation-delay` for natural distribution. **Floral-Botanical Illustrations:** Throughout the masonry grid, dedicated flora tiles contain CSS-drawn botanical elements — not photographs, not icon fonts, but hand-crafted SVG/CSS illustrations: - **Monstera Leaf:** A large split-leaf form created with overlapping `border-radius` shapes in #4CAF7D with darker vein lines (#2D7A52) drawn as thin pseudo-elements. The leaf slowly rotates 3 degrees back and forth on a 12-second loop. - **Cherry Blossom Branch:** A diagonal branch (thin brown line via `border-left` on a rotated element) with 5-petaled flowers at nodes — each petal is a small `border-radius: 50%` element in #FFB088 with a #E84FAD center dot. Petals occasionally detach and drift downward via `@keyframes` with varying `animation-delay`. - **Fern Frond:** A recursive pattern of increasingly smaller angled lines, created with nested pseudo-elements or SVG `` elements, in graduated greens from #4CAF7D to #2D7A52. The frond sways gently left-right on a sine-wave animation. - **Water Lily:** A top-down view of concentric petal rings — outer petals in #F5F0FF, mid-petals in #FFB088, inner petals in #E84FAD — floating on a small circular "pond" of #3DD8C5 at 20% opacity. Used in the opening diorama and as a recurring decorative element. **Vaporwave Environmental Elements:** - **Perspective Grid Floor:** In the opening diorama and portal tiles, a CSS perspective grid recedes toward a horizon point. Created with `repeating-linear-gradient` for vertical lines and a `perspective`-transformed plane for horizontal lines, colored in #E84FAD at 30% opacity against the deep indigo sky. Grid lines pulse subtly in opacity (20%-40%) on a 6-second loop. - **Wireframe Globe:** A portal tile contains a rotating wireframe sphere made from SVG circle elements of decreasing radius, with latitude/longitude lines in #3DD8C5 at 40% opacity. The globe rotates via CSS `transform: rotateY()` on a 30-second loop. Vine tendrils (thin SVG paths in #4CAF7D) wrap around the wireframe. - **Scan Lines:** A subtle full-viewport overlay of horizontal lines created with `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26,20,51,0.03) 2px, rgba(26,20,51,0.03) 4px)` that evokes CRT monitor aesthetics without being heavy-handed. Applied at `pointer-events: none` and `z-index: 100`. **Retro-Futuristic Artifacts:** Small inline SVG icons used in artifact tiles, each depicting a hybridization of technology and nature: - A floppy disk with a fern growing from the label slot - A CRT monitor displaying a water lily on its screen - A chrome sphere reflecting a sunset garden - A cassette tape with vine tendrils replacing the magnetic ribbon - A satellite dish shaped like an unfurling flower ## Prompts for Implementation Build yesang.org as a single-page immersive scroll experience that begins with a full-viewport vaporwave diorama and dissolves into a sprawling masonry garden of content tiles. The entire site should feel like descending into a digital greenhouse submerged in warm, tinted water — every scroll movement reveals new botanical details and retro-futuristic artifacts rising through bubble-filled space. **Opening Diorama (100vh):** Construct the sky as a four-stop linear gradient (magenta > peach > violet > teal) filling the viewport. The perspective grid floor is a `div` with `transform: perspective(500px) rotateX(60deg)` positioned at the bottom 40% of the viewport, with `repeating-linear-gradient` creating the grid pattern. Botanical silhouettes (fern, palm, blossom branch) are positioned along the horizon using absolute positioning, initially at `transform: scaleY(0)` with `transform-origin: bottom`, and grow upward to full height on page load via a 2-second `ease-out` animation staggered 200ms apart. The domain name centers vertically with the chrome text gradient, a `text-shadow: 0 0 40px rgba(232,79,173,0.4), 0 0 80px rgba(61,216,197,0.2)` glow, and a subtle `scale(0.95)` to `scale(1)` entrance over 1.5 seconds. **Scroll-Triggered Masonry Reveal:** All masonry tiles begin with `opacity: 0` and `transform: translateY(40px)`. As each tile enters the viewport (detected via `IntersectionObserver` with `threshold: 0.15`), it transitions to `opacity: 1; transform: translateY(0)` over 600ms with an `ease-out` curve. Tiles in the same visible row are staggered by 100ms delay per column position, creating a gentle cascade effect. Flora tiles additionally scale from `0.8` to `1.0` during their reveal. Portal tiles fade in more slowly (1000ms) and their internal animations (grid perspective, globe rotation, bubble columns) only begin once the tile is fully visible. **Bubble Particle Layer:** Create a fixed-position container (`position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden`) containing 15-20 bubble elements. Each bubble is absolutely positioned at a random horizontal position, starts below the viewport (`bottom: -80px`), and rises via a CSS animation combining `translateY(-110vh)` with sinusoidal `translateX` drift. Stagger `animation-delay` values from 0s to 8s. Bubbles should feel ambient and gentle — never fast or distracting. On mobile, reduce count to 8-10 and limit maximum bubble size to 50px. **Tile Content Strategy (Narrative, NOT Commercial):** - AVOID: CTA buttons, pricing blocks, stat counters, testimonial carousels, feature comparison grids - INSTEAD: Tiles contain contemplative prose fragments (like exhibition wall text), botanical close-up illustrations, ambient animated scenes, and small retro-futuristic artifact studies - Each text tile reads like a passage from a calm guidebook — unhurried, descriptive, slightly poetic - The masonry grid tells no linear story; it is a garden to wander, not a funnel to follow **Interaction Details:** - Hovering over a flora tile causes its botanical illustration to shift hue by 15 degrees (`filter: hue-rotate(15deg)`) over 400ms, as if light is changing - Hovering over an artifact tile triggers its SVG icon to draw its stroke paths from 0% to 100% over 800ms (`stroke-dasharray` / `stroke-dashoffset` animation) - The scroll-depth indicator pill in the bottom-right corner fills with the Vaporwave Sky gradient as the user scrolls, and pulses gently (`scale(1)` to `scale(1.1)` on a 3-second loop) when the user has been idle for 5 seconds, inviting further exploration - All animations use `prefers-reduced-motion: reduce` media query to disable motion for accessibility **CSS Architecture:** - Use CSS custom properties extensively for the color palette, allowing potential theme variations - The masonry layout should use CSS `columns` as the primary method with `break-inside: avoid` on tiles, falling back to flexbox with calculated heights if column support is inconsistent - All gradients, bubble effects, and botanical illustrations must be pure CSS/SVG — no external images - Scan-line overlay is a single pseudo-element on `body::after` ## Uniqueness Notes 1. **Vaporwave-botanical hybrid identity:** While vaporwave (3%) and botanical/floral-botanical (3%/12%) each appear independently in the design corpus, no other design fuses them into a single coherent world — a digital greenhouse inside a retrowave sunset. The tension between synthetic neon gradients and organic botanical forms creates a visual language that is neither purely tech-nostalgic nor purely nature-inspired, but a third thing entirely: a solarpunk terrarium rendered through a CRT filter. 2. **Masonry layout as garden metaphor:** At only 4% frequency, masonry layouts are underrepresented in the corpus. Here, masonry is not just a layout choice but a thematic device — the irregular, organic arrangement of tiles mirrors the unpredictable growth patterns of a real garden. Unlike grid-based designs where every element snaps to rigid coordinates, the cascading tile arrangement rewards wandering and creates genuine spatial surprise as the user scrolls. 3. **Water-bubble particle layer as environmental atmosphere:** Water-bubbles imagery appears at just 2% in the corpus. Rather than using bubbles as a decorative accent confined to one section, this design deploys them as a persistent, full-viewport atmospheric layer that transforms the entire browsing experience into an underwater journey. The bubbles exist in a layer between the background and content, creating a genuine sense of spatial depth (background > bubbles > masonry tiles > scan-line overlay) that most flat designs lack entirely. 4. **Rounded-sans typography triple-stack:** The combination of Comfortaa (display), Nunito (body), and Poiret One (accent) creates a typographic system where every font shares rounded terminals and geometric DNA, yet each serves a distinct voice — friendly authority (Comfortaa), comfortable readability (Nunito), and retro-futuristic elegance (Poiret One). At 3% frequency, rounded-sans typography is severely underrepresented, and no other design in the corpus uses this specific triple-pairing. 5. **CSS-drawn botanical illustrations instead of photography/icons:** While 99% of designs rely on photography and 48% on minimal imagery, this design rejects both in favor of hand-crafted CSS/SVG botanical forms. Each plant illustration is a constructed artifact — built from `border-radius` shapes, pseudo-elements, and SVG paths — that exists nowhere else on the internet. This gives the botanical elements a distinctly digital, slightly uncanny quality that reinforces the retro-futuristic theme: these are not real plants but idealized digital specimens in a virtual greenhouse. **Seed/Style:** vaporwave, masonry, rounded-sans, retro-futuristic, scroll-triggered, water-bubbles, floral-botanical, calm-serene **Avoided overused patterns:** corporate aesthetic, photography imagery, full-bleed layout (used only for the opening diorama, not as the primary layout), warm palette (palette is cool-pastel with selective warmth), parallax animation (replaced with scroll-triggered reveals), mono typography, friendly tone (replaced with calm-serene contemplative voice)