# Design Language for yesang.xyz ## Aesthetics and Tone yesang.xyz is a **dopamine-soaked ethereal jukebox** — picture a late-night Korean study café where someone has replaced every fluorescent bulb with deep-sea bioluminescence and taped hand-drawn bubble letters over the neon signs. The site lives in the tension between **raw, unfiltered self-expression** (think torn-edge zine pages, ink smudges, handwritten corrections) and **dreamy celestial softness** (aquamarine aurora light washing across bubble-slick surfaces). It is simultaneously a teenage diary and a midnight disco ball. The aesthetic seed is `aesthetic: dopamine, layout: f-pattern, typography: retro-display, palette: ethereal-blue, patterns: magnetic, imagery: vector-art, motifs: bubble-playful, tone: raw-authentic`. This is not a brand page. Not a portfolio. Not a landing page. yesang.xyz is **a personal manifesto rendered as a swimming pool filled with bubbles at 3 AM** — the kind of place where the owner's handwriting appears directly on the wall in gel pen, next to a perfectly rendered SVG jellyfish. **Mood board anchors:** - Retro Japanese arcade signage: chunky pixel-adjacent letterforms, coin-insert energy - Deep ocean bioluminescence: electric cyan (#00d4e8), ghost-white glow, ink-black depth - Bubble tea shop windows: condensation circles, circular motifs, playful impermanence - Cassette tape label art: hand-lettered A-side/B-side text, raw sticker energy - Aquarium walls at night: the blue of water over city lights, surface tension shimmer **Tone is raw-authentic**: the page admits its own construction. SVG seams are visible as design choices. Hover states feel like someone leaned on the glass. The typography is imperfect on purpose — retro display fonts with visible ink weight variation, not cleaned-up optical compensation. ## Layout Motifs and Structure The layout follows an **f-pattern reading path** but subverts it — the f-pattern here is not a UX optimization, it is the **physical shape of a cassette tape label viewed front-on**, then a bookmark tucked sideways into a notebook. The visitor's eye moves left-to-right across the top (the tape header), then left-to-right slightly lower (the A-side label), then down the left spine (the label edge). **Macro structure:** 1. **TAPE HEADER BAND** — Full-width horizontal strip at the very top, approximately 80px tall. Contains the domain name `yesang.xyz` in retro display caps with extreme letter-spacing, left-aligned. This is the f-pattern's first horizontal stroke. Background: `#0a0a1a` (deep ink). Text: `#7ee8f5` (aqua glow) with a subtle text-shadow bloom `0 0 18px rgba(126, 232, 245, 0.6)`. 2. **MAIN CANVAS** — Two asymmetric columns. Left column is wide (65%), contains the primary narrative scroll. Right column (35%) is a **bubble-tank sidebar** — a vertically scrolling column of rising SVG bubbles with text fragments attached, like sticky notes on a lava lamp. This is structurally the f-pattern's right gutter, used deliberately as ambient visual noise rather than secondary content. 3. **CONTENT ROWS (f-pattern horizontals)** — Each content section begins with a full-width scannable band (the f-pattern stroke): a retro-display headline, left-anchored, at approximately 14vw. Below each headline, the left column narrows to reading width (~480px) for the body text. The eye scans wide, then drops to read left — classic f-pattern, made visible as a structural choice rather than a UX assumption. 4. **FOOTER CASSETTE SPINE** — A final full-width horizontal strip, mirroring the tape header, but in reverse: right-aligned domain, a loop of `▶ ▶ ▶` unicode arrows spaced across the band. **Spatial language:** - Grid: 24-column CSS grid underling, but sections use only columns 1–16 (left bias, f-pattern) - Gutter: 4vw breathing room between columns - No cards, no borders, no box shadows on content containers — the bubble motifs *are* the visual containers - Sections separated by 6vw vertical gap with a single magnetic SVG line (a bezier curve that appears to bend toward the cursor) ## Typography and Palette **Typography (all Google Fonts):** - **Display / Wordmark**: [`Righteous`](https://fonts.google.com/specimen/Righteous) — a retro display face with art-deco roots and cartoon-weight strokes. Used for `yesang.xyz` wordmark and all major section headings. Weight 400 (the only weight available). Set at `clamp(3.2rem, 8vw, 9rem)` for the header wordmark. Secondary headings at `clamp(2rem, 5vw, 5.5rem)`. The letterforms have the chunky confidence of 1970s arcade marquee lettering. - **Sub-display / A-side labels**: [`Bangers`](https://fonts.google.com/specimen/Bangers) — the condensed comic-book display. Used for section sub-labels, tape side annotations (`A-SIDE`, `B-SIDE`), and any inline callout text that needs to scream without moving. Set at `clamp(1.4rem, 3.2vw, 3.2rem)`, letter-spacing `0.06em`. - **Body / Handwritten annotations**: [`Caveat`](https://fonts.google.com/specimen/Caveat) — an authentic handwritten sans that reads at small sizes without becoming illegible. Used for all body paragraphs and bubble-note text at `1.1rem / 1.75`. The imperfection of Caveat is the point — it reinforces the raw-authentic tone against the retro-display headings. - **Mono / Technical labels**: [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono) — retro terminal mono used for tape timestamps, hex color annotations drawn directly on the page, and any code-adjacent text. Set at `0.85rem`, tracking `0.04em`, color `#4af0c4` (phosphor green-cyan). **Palette (ethereal-blue system):** | Role | Name | Hex | |------|------|-----| | Background base | Void Ink | `#070710` | | Background mid | Deep Tank | `#0d1230` | | Primary accent | Aqua Glow | `#7ee8f5` | | Secondary accent | Electric Cyan | `#00d4e8` | | Tertiary accent | Bubble Violet | `#a78bfa` | | Text primary | Ghost Cream | `#e8f4f8` | | Text secondary | Drift Mist | `#8ab4c4` | | Handwrite ink | Gel Blue | `#4af0c4` | | Bubble fill | Surface Shimmer | `rgba(126, 232, 245, 0.08)` | | Magnetic line | Thread Cyan | `#00b4cc` | **Color behavior:** - The page background is a CSS `radial-gradient` centered off-screen bottom-right: from `#0d1230` at 0% to `#070710` at 100% — the aquarium depth effect - Bubble elements use `backdrop-filter: blur(4px)` over the radial gradient - Text never uses pure white — always `Ghost Cream #e8f4f8` - The `Bubble Violet #a78bfa` appears exclusively in the bubble-tank sidebar, creating a parallel color world ## Imagery and Motifs **All imagery is original inline SVG — zero photography, zero stock art, zero icon libraries.** **Core motif family — The Bubble Vocabulary:** 1. **Primary Bubble (Circle with internal refraction)** — The site's foundational shape. Each bubble is a `` with: - Fill: `rgba(126, 232, 245, 0.06)` (near-transparent) - Stroke: `rgba(126, 232, 245, 0.35)` at `0.8px` - A specular highlight: small white `` at 25%/20% of the circle, fill `rgba(255,255,255,0.4)`, rotated 30° - A faint caustic reflection: a larger, softer `` at 70%/80%, fill `rgba(126, 232, 245, 0.12)` - Sizes range from 12px to 280px diameter across the site - The largest bubbles (180–280px) contain text fragments (Caveat font, `Gel Blue` color) — the bubble-notes 2. **Rising Bubble Column (Sidebar animation)** — The right sidebar contains 12–16 bubbles of varying size, each with a CSS `@keyframes rise` animation: they drift upward at `animation-duration: random(8s, 22s)`, `animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1)`, with slight horizontal wobble via a second animation on `translateX`. Bubbles recycle at the top (reset to bottom). Each bubble carries one text fragment — a fragment of a sentence from the main narrative, the bubble-notes tethering the sidebar to the content. 3. **SVG Jellyfish (Hero illustration)** — A single large-format SVG jellyfish anchored at the top-right of the main canvas (behind the tape header, partially clipped). Bell diameter approximately 340px. The bell is constructed from: - A `` dome in `rgba(126, 232, 245, 0.12)` with `stroke: #7ee8f5` at `1px` - Interior ribbing: 8 radial `` elements from center to bell edge, `stroke: rgba(126, 232, 245, 0.2)` - Trailing tentacles: 6–8 SVG `` bezier curves below the bell, `stroke: rgba(167, 139, 250, 0.5)` (`Bubble Violet`), no fill - The jellyfish pulses: a CSS `@keyframes pulse` that scales the bell between `scaleY(1.0)` and `scaleY(0.88)` over 4 seconds, `ease-in-out`, `infinite alternate` 4. **Magnetic Bezier Line** — Between each major content section, a single SVG `` drawn as a bezier curve spans full viewport width. The curve defaults to a gentle S-arc. On `mousemove`, JavaScript recalculates the control points to bend the curve toward the cursor position (interpolated, not snapping — uses `lerp()` with factor 0.08 per frame). Color: `Thread Cyan #00b4cc`, stroke-width 1px, opacity 0.5. This is the `patterns: magnetic` element — there is exactly one magnetic element and it is structural, not decorative. 5. **Tape Reel Medallion** — A small 64px SVG cassette reel appears at the left edge of each tape-header-band (the section scanline strips). It is a circle with a smaller circle inside, three oval cutouts in the outer ring, and a central hub — drawn in `#7ee8f5` lines at 0.8px, filled `transparent`. The reel rotates: `animation: spin 8s linear infinite`. 6. **Sticker Border Elements** — Scattered along the edges of large bubble-notes (the text-carrying bubbles), small SVG star and asterisk shapes in `Bubble Violet #a78bfa`. These are 5-point stars at 10–14px, drawn with a single ``, no animation. They reinforce the gel-pen/sticker energy of the handwritten bubble-notes. ## Prompts for Implementation **The narrative to build.** yesang.xyz is a single full-screen scroll that tells one story: **a person named Yesang who exists somewhere between a cassette tape, an aquarium, and a very late Tuesday night**. There is no product to sell. No CTA to click. The page is a self-portrait in blue light. **Story arc (single-column main scroll, bubble-tank right sidebar, no navigation chrome):** **Section 1 — TAPE HEADER (sticky, full-width, 80px tall)** The wordmark `yesang.xyz` in Righteous at maximum size, left-aligned. To its right, drifting right: the timestamp of "right now" rendered in Share Tech Mono (JS `Date.now()` formatted as `YYYYMMDD·HHmmss`), color `Drift Mist`. A tape-reel medallion SVG spins at the far left. The header is `position: sticky; top: 0; z-index: 100`. Background: `#070710` with a 1px bottom border in `Thread Cyan` at 40% opacity. The header does not change on scroll — it is a constant anchor point, the only fixed element on the page. **Section 2 — OPENING FRAME (100vh, the jellyfish lives here)** The jellyfish illustration occupies the top-right quadrant (position: absolute, right: 0, top: 0 within this section). The main content begins left-aligned in the left 65%. Lead text in Righteous at `clamp(3.5rem, 7vw, 7.5rem)`: a two-word phrase, the site owner's declaration — e.g. `DEEP TANK` or whatever yesang.xyz chooses. Below it, a three-sentence Caveat paragraph in `Ghost Cream` establishing the vibe. Below the paragraph, three large bubble-notes (the 200–280px bubbles) containing single words or short phrases in Caveat + Gel Blue — floating slightly off the grid, each slightly rotated (±4deg). **Section 3 — A-SIDE (the f-pattern scanline headline + content)** A full-width tape-style band in `#0d1230` with the label `A-SIDE` in Bangers at the left, followed by `◄ ● ●` icons in Share Tech Mono. Below the band, the left column contains a medium-length text block (3–4 paragraphs, Caveat, about anything personal — a thing Yesang is thinking about, obsessed with, doing). The right bubble-tank sidebar begins here, running for the rest of the page. **Section 4 — MAGNETIC INTERLUDE** Full-width section containing only: the magnetic bezier SVG line (with mouse-reactive JavaScript), spanning edge-to-edge at vertical center. Above and below the line, nothing — 10vh white space. A single Share Tech Mono label at the line's left origin: `cursor → magnetic` in `Thread Cyan` at 60% opacity. This is a rest beat. **Section 5 — B-SIDE** Mirror of A-SIDE: same tape-band structure, but `B-SIDE` label. This section contains the second personal text block — rawer, less edited-feeling. The Caveat paragraphs here should appear slightly more cramped, as if written in margins. A second magnetic bezier line appears at the bottom of this section (same behavior, different curve geometry). **Section 6 — BUBBLE GALLERY** A non-grid scatter of 10–15 bubble-notes across the full viewport width. Each bubble-note is a large bubble (150–280px) with one fragment of text. No predictable alignment. They appear to float randomly but are placed deliberately to guide the eye in a loose spiral from top-left to bottom-right. On scroll-into-view, each bubble fades in with a slight upward drift (`translateY(20px) → translateY(0)`, opacity 0→1, duration 0.6s, staggered 80ms per bubble using `IntersectionObserver`). **Section 7 — FOOTER CASSETTE SPINE** Full-width tape band, mirroring the header. Right-aligned: `yesang.xyz` in Righteous at `2.5rem`. Centered: a loop of `▶` unicode arrows with 3vw spacing between them, in `Drift Mist` at 40% opacity. Left: the tape-reel medallion again (spinning). Below the band, in very small Share Tech Mono at `0.75rem`, centered: a handwriting-style colophon in Caveat — one sentence that closes the story. **Animation and interaction principles:** - All bubble rise animations use CSS only — no JavaScript per bubble - The magnetic bezier is the ONLY JavaScript-driven visual effect - Scroll-triggered fade-ins use `IntersectionObserver` (no GSAP, no ScrollTrigger libraries) - The jellyfish pulse is CSS `@keyframes` only - `prefers-reduced-motion: reduce` wraps ALL animations in a `@media` check — when reduced motion is preferred, animations are paused or removed entirely - No parallax scrolling, no horizontal scroll, no sticky sections beyond the tape header **Technical specifics:** - Single HTML file with embedded `