# Design Language for yongzoon.com

## Aesthetics and Tone

yongzoon.com ("yongzoon" derived from the Korean name meaning "eternal respect/reverence") inhabits the intersection of **seapunk subculture and ancient earth** -- a digital tide pool where bioluminescent ocean imagery meets sun-baked terracotta, dried clay, and fossilized coral. The aesthetic is neither purely aquatic nor purely terrestrial; it lives in the liminal zone where the sea recedes and leaves its memory on stone. Imagine a seapunk artist who abandoned neon-drenched cyber-oceans and instead became obsessed with the geologic record of ancient seas -- the strata of sandstone that were once ocean floors, the mineral deposits left by evaporated saltwater lakes, and the ghostly imprints of trilobites pressed into shale.

The tone is **grounded-earthy** with an undercurrent of the uncanny. Every element feels weighty and mineral, as though the interface itself were carved from sedimentary rock with pockets of trapped seawater still glowing faintly within. There is a quiet reverence here -- not spiritual in the incense-and-meditation sense, but geological, the reverence of deep time. The site speaks in the visual language of fossil beds, tidal erosion, and the slow crystallization of dissolved minerals. Seapunk's characteristic aquatic iconography is present but transformed: dolphins rendered as paleontological sketches in ochre, seashells fossilized into the background texture, waves abstracted into sine curves that could equally represent sound, water, or the undulation of sediment layers.

The mood is contemplative, unhurried, and slightly alien -- like standing at the edge of a desert that was once an ocean, knowing that the sand beneath your feet is made of billion-year-old shells.

## Layout Motifs and Structure

The site is a **full-bleed vertical narrative** organized into five distinct sediment layers, each representing a different epoch of the "eternal ocean" concept. There is no traditional navigation bar, no hamburger menu, no sticky header. Instead, a thin vertical depth indicator -- rendered as a stylized stratigraphic column -- is fixed to the left edge of the viewport. It shows the user's current position as a small glowing marker (color #00CED1, a subdued seapunk teal) that moves along the column as the user scrolls. Each layer in the column is tinted to match its section's dominant earth tone.

**Structural Architecture:**

- **Layer 1 -- The Surface (100vh):** A full-viewport opening that presents the domain name rendered in massive Bebas Neue characters, partially submerged beneath a horizontal wave-form line that oscillates gently via CSS animation. Above the line: dry earth tones (#8B7355, #A0522D). Below the line: deep aquatic tones (#1A3C40, #0D2B2E). The wave line itself is an animated SVG path with subtle sinusoidal motion, drawn in #00CED1 at 60% opacity. The entire section breathes -- a slow CSS scale pulse (1.0 to 1.02 over 8 seconds) on the background layer gives the impression of tidal breathing.

- **Layer 2 -- The Fossil Record (100vh):** Three glassmorphic cards arranged in a staggered diagonal cascade from upper-left to lower-right. Each card has `backdrop-filter: blur(16px)`, a background of `rgba(139, 115, 85, 0.15)`, a 1px border of `rgba(0, 206, 209, 0.25)`, and a `border-radius: 16px`. The cards appear to float over a background of layered wave-form SVGs in muted sienna and teal. Cards fade-reveal into view as the user scrolls -- each card enters with `opacity: 0` to `opacity: 1` over 800ms, staggered by 200ms, with a simultaneous `translateY(40px)` to `translateY(0)`.

- **Layer 3 -- The Mineral Vein (120vh):** A full-width section with no cards, no grids. A single enormous wave-form SVG spans the entire width, its path animated to shift slowly (a `<animate>` element cycling through three slightly different `d` attribute values over 12 seconds). The wave is rendered in a gradient from #6B4226 (raw umber) to #00CED1 (seapunk teal). Overlaid on this are three lines of text in Bebas Neue, each line appearing via fade-reveal at different scroll thresholds, each slightly offset horizontally to create a staircase rhythm.

- **Layer 4 -- The Tidal Pool (100vh):** A cluster of five glassmorphic cards arranged in an organic, non-grid formation -- positioned with percentage-based absolute positioning to create the appearance of objects scattered on a surface. Cards vary in size (200px to 360px wide) and are rotated by -3 to +4 degrees each. Each card contains a single glyph or symbol rendered as an SVG: a fossilized nautilus, a wave equation, a trilobite silhouette, a crystal lattice, a tidal chart. The background is a solid #2C1A0E (deep burnt earth) with a CSS radial gradient of #00CED1 at 5% opacity emanating from the center, creating a faint bioluminescent pool effect.

- **Layer 5 -- The Abyss (80vh):** The closing section. Background transitions to near-black (#0D0D0D). A single line of text in Bebas Neue fades in at center viewport: the domain name again, but this time rendered in #00CED1 with a subtle `text-shadow: 0 0 30px rgba(0, 206, 209, 0.4)` glow. Below it, a final wave-form SVG -- the same sine curve from Layer 1 but inverted and slowed -- completes the visual bookend. The stratigraphic column indicator on the left reaches its deepest point.

**No traditional website elements:** No hero banner with tagline, no feature grid, no pricing table, no testimonials carousel, no footer with social links. The site is a geological narrative from surface to abyss.

## Typography and Palette

**Primary Display Font:** "Bebas Neue" (Google Fonts, weight 400) -- a tall, condensed, all-caps sans-serif with sharp edges and industrial presence. Used for ALL headings and the domain name display. Set at `clamp(3rem, 8vw, 7rem)` for the primary title and `clamp(1.8rem, 4vw, 3.5rem)` for section headings. `letter-spacing: 0.12em` for the largest sizes to give the letterforms room to breathe, tightening to `0.06em` at smaller sizes. Color alternates between #D2B48C (tan, for earth-register headings) and #00CED1 (dark turquoise, for ocean-register headings).

**Body Text Font:** "IBM Plex Sans" (Google Fonts, weights 300, 400, 500) -- a humanist sans-serif with a technical backbone and excellent legibility at small sizes. Weight 300 for body text (creating a light, airy quality against dark backgrounds), weight 400 for card content, weight 500 for emphasized text. Set at `clamp(0.95rem, 1.8vw, 1.15rem)` with `line-height: 1.7` and `letter-spacing: 0.01em`. Color: #C4B09A (warm sandstone) on dark backgrounds, #2C1A0E (burnt earth) on light surfaces.

**Monospace Accent Font:** "IBM Plex Mono" (Google Fonts, weight 300) -- used sparingly for the stratigraphic column labels, depth indicators, and small technical annotations scattered throughout. Set at `0.75rem` with `letter-spacing: 0.08em` and `text-transform: uppercase`. Color: #00CED1 at 70% opacity.

**Color Palette:**

| Role | Hex | Name | Usage |
|------|-----|------|-------|
| Earth Primary | #8B7355 | Raw Sienna | Backgrounds, section fills, card overlays |
| Earth Deep | #6B4226 | Raw Umber | Deep section backgrounds, SVG wave fills |
| Earth Surface | #D2B48C | Tan | Display text on dark backgrounds, borders |
| Earth Dark | #2C1A0E | Burnt Espresso | Deepest backgrounds, body text on light |
| Ocean Signal | #00CED1 | Dark Turquoise | Accent color, glows, wave highlights, links |
| Ocean Deep | #0D2B2E | Abyssal Teal | Layer 1 below-water zone, deep section tints |
| Ocean Mid | #1A3C40 | Kelp Forest | Transitional backgrounds, card backdrop tints |
| Fossil Cream | #C4B09A | Sandstone | Body text, subtle borders, grain overlay tint |
| Void | #0D0D0D | Near Black | Final abyss section background |

**Gradient Definitions:**
- Earth-to-Ocean: `linear-gradient(180deg, #8B7355 0%, #1A3C40 100%)` -- used for section transitions
- Bioluminescent Pool: `radial-gradient(circle at 50% 50%, rgba(0, 206, 209, 0.08) 0%, transparent 70%)` -- used as overlay
- Sediment Strata: `linear-gradient(180deg, #D2B48C 0%, #8B7355 40%, #6B4226 70%, #2C1A0E 100%)` -- used for the stratigraphic column

## Imagery and Motifs

**Wave-Form SVGs:** The dominant visual motif is the sine wave, rendered as SVG `<path>` elements with sinusoidal curves. These are not decorative flourishes -- they are the structural grammar of the site. Every section boundary is defined by a wave-form rather than a straight horizontal line. The waves vary in amplitude (from tight 20px ripples to sweeping 80px swells), frequency (from closely packed oscillations to long, lazy curves), and color (cycling through the earth-to-ocean palette). Key waves are animated using SVG `<animate>` elements that smoothly interpolate between 2-3 path variations over 8-15 second cycles, creating the impression of living water fossilized mid-motion but still faintly pulsing.

**Glassmorphic Cards:** Cards use `backdrop-filter: blur(16px)` with semi-transparent earth-tone backgrounds (`rgba(139, 115, 85, 0.12)` to `rgba(44, 26, 14, 0.20)`). Borders are 1px solid with ocean-tinted transparency (`rgba(0, 206, 209, 0.2)`). A faint inner glow is achieved with `box-shadow: inset 0 0 30px rgba(0, 206, 209, 0.03)`. Cards never have sharp corners -- `border-radius: 16px` minimum. When hovered, the border opacity increases to 0.4 and the blur strengthens to 20px over a 400ms ease transition.

**Fossil Glyphs:** Each glassmorphic card contains a hand-crafted SVG icon drawn in a paleontological sketch style -- thin 1.5px strokes in #D2B48C with no fill, resembling scientific illustrations from a Victorian naturalist's field journal. The icon set includes: a nautilus cross-section (logarithmic spiral), a trilobite dorsal view, a crinoid stem segment, an ammonite profile, a coral polyp cluster, a diatom radial pattern, and a stylized wave equation. These are NOT photographic -- they are minimal line drawings that feel etched rather than drawn.

**Grain Texture Overlay:** A subtle noise texture is applied globally via a `::before` pseudo-element on the `<body>`, using an inline SVG `<filter>` with `<feTurbulence baseFrequency="0.65" numOctaves="3">` and `<feColorMatrix>` to create a warm-tinted grain. Opacity is set to 4% with `mix-blend-mode: multiply` for warm sections and `mix-blend-mode: screen` for dark sections. This gives every surface the tactile quality of sandpaper or unglazed ceramic.

**Stratigraphic Column:** The fixed left-edge navigation element is a narrow (24px wide) vertical bar styled as a geological stratigraphic column. It is rendered as an SVG with distinct colored bands representing each section, separated by wavy (not straight) lines. The current-position indicator is a small circle (8px diameter) filled with #00CED1 and surrounded by a pulsing ring (`box-shadow` animation: `0 0 0 0px` to `0 0 0 6px` with opacity fade, over 2 seconds, infinite).

**No Photography:** The site uses zero photographic images. All imagery is SVG-based: wave forms, fossil glyphs, grain textures, gradient backgrounds. This reinforces the mineral/geological abstraction and avoids the overused photography pattern (99% frequency).

## Prompts for Implementation

Build yongzoon.com as a **single HTML file** containing a continuous vertical scroll through five full-viewport geological layers. The experience is a descent from earth surface to ocean abyss, told entirely through wave-form animations, glassmorphic cards, and typographic rhythm. There is no traditional website structure -- no header/nav/main/footer paradigm. The HTML is a sequence of five `<section>` elements, each `min-height: 100vh`, with the fixed stratigraphic column overlaid.

**Opening Sequence (Layer 1 -- first 100vh):**
The page loads to a split-tone background: the top 55% is #8B7355 (raw sienna), the bottom 45% is #0D2B2E (abyssal teal). The boundary between them is NOT a straight line -- it is an animated SVG wave-form path that gently oscillates. The domain name "YONGZOON" appears in Bebas Neue at `clamp(4rem, 10vw, 8rem)`, centered, with the baseline of the text sitting exactly on the wave line so that the bottom portions of descending letters appear to dip below the waterline. The text color above the line is #D2B48C; CSS `clip-path` or a layered approach creates the effect of the text being two-toned at the wave boundary. Below the wave, a single line in IBM Plex Sans weight 300 at 0.85rem: ".com" in #00CED1 at 60% opacity. The entire section has a slow, breathing scale animation.

**Scroll Transition to Layer 2:**
As the user scrolls past 80vh, the background begins a gradient transition (via scroll-driven CSS or a lightweight IntersectionObserver) from the split earth/ocean tone to a unified #6B4226 (raw umber). The wave-form from Layer 1 scrolls upward and a new, differently-shaped wave-form scrolls into view from below, establishing the new section's rhythm.

**Layer 2 -- The Fossil Record:**
Three glassmorphic cards fade-reveal into the viewport. Use IntersectionObserver with `threshold: 0.15` to trigger each card's entrance animation. Cards are arranged in a staggered diagonal: first card at `top: 10%, left: 8%`, second at `top: 35%, left: 35%`, third at `top: 55%, left: 60%`. Each card is `width: clamp(280px, 30vw, 380px)` with padding `2rem`. Inside each card: a fossil glyph SVG (80px square) centered at top, a Bebas Neue heading below it, and 2-3 lines of IBM Plex Sans body text. The card backgrounds use `backdrop-filter: blur(16px)` and the earth-tone semi-transparent fill. Between the cards, thin wave-form SVG lines connect them, suggesting geological strata passing through the cards.

**Layer 3 -- The Mineral Vein:**
A full-bleed section dominated by a single massive animated wave-form SVG that spans the entire viewport width and stands approximately 200px tall at its center. This wave is rendered with a gradient stroke from #6B4226 to #00CED1, `stroke-width: 3`, and `fill: none`. The wave's `d` attribute is animated between three sinusoidal variations using SVG `<animate>` with `dur="12s"` and `repeatCount="indefinite"`. Three text lines in Bebas Neue fade-reveal at staggered scroll positions, each offset 5% further right than the last, creating a descending staircase of text that echoes the wave's rhythm. Text color shifts from #D2B48C (first line) through a midpoint blend to #00CED1 (third line).

**Layer 4 -- The Tidal Pool:**
Background: solid #2C1A0E with the bioluminescent radial gradient overlay. Five glassmorphic cards are positioned absolutely in an organic scatter pattern -- no grid, no alignment. Each card is a different size and rotated slightly. Each contains a single large fossil glyph SVG (120px) and a one-word label in Bebas Neue. Cards fade-reveal with longer durations (1200ms) and larger translate offsets (60px), creating a slower, more contemplative entrance. On hover, each card's border glows brighter (#00CED1 at 0.5 opacity) and the interior glyph SVG animates a slow rotation (360 degrees over 20 seconds).

**Layer 5 -- The Abyss:**
Background: #0D0D0D. Almost nothing here. The domain name "YONGZOON.COM" appears in Bebas Neue at `clamp(2rem, 5vw, 4rem)`, centered, in #00CED1 with the bioluminescent text-shadow glow. It fade-reveals over 1500ms. Below it, the final wave-form SVG -- an inversion of the Layer 1 wave -- draws itself in via a CSS `stroke-dasharray`/`stroke-dashoffset` animation (the path-draw technique), revealing itself over 3 seconds as the user scrolls into the final section. The stratigraphic column on the left reaches its deepest band.

**Animation Strategy:**
- All scroll-triggered animations use IntersectionObserver, NOT scroll event listeners
- Fade-reveal is the primary entrance animation: `opacity 0 -> 1` combined with `translateY(40px) -> translateY(0)`, eased with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- SVG wave animations use native SVG `<animate>` elements for performance
- The stratigraphic column position indicator tracks scroll via a single `scroll` event listener with `requestAnimationFrame` throttling
- No JavaScript frameworks -- vanilla JS only, under 80 lines total
- CSS custom properties define the palette for easy theming: `--earth-primary`, `--earth-deep`, `--ocean-signal`, etc.

**AVOID:** CTA buttons, pricing grids, testimonial carousels, stat counters, feature comparison tables, newsletter signup forms, social media icon rows, cookie consent banners, chatbot widgets, "scroll down" chevron animations. This is a geological meditation, not a conversion funnel.

## Uniqueness Notes

1. **Seapunk-meets-geology as conceptual framework:** No other design in this collection fuses seapunk's aquatic visual language with geological/paleontological imagery. While seapunk typically manifests as neon-drenched cyber-ocean aesthetics, this design reinterprets it through the lens of deep time -- fossilized sea creatures, sedimentary strata, mineral deposits. The result is seapunk that feels ancient and earthy rather than digital and fluorescent.

2. **Earth-tone palette in a seapunk context:** Seapunk designs almost universally use cool neon palettes (cyan, magenta, electric blue). This design deliberately subverts that expectation by grounding the palette in earth tones (#8B7355, #6B4226, #2C1A0E, #D2B48C) with #00CED1 appearing only as a signal accent -- the trace of ocean in a landscape of stone. The earth-tones palette category sits at only 2% frequency, making this palette choice highly distinctive.

3. **Wave-form as structural grammar rather than decoration:** While wave-forms appear at 2% frequency as motifs, no existing design uses them as the primary architectural element replacing straight horizontal boundaries between sections. Every section transition, every background boundary, every connecting line between cards is a sinusoidal wave rather than a straight edge. The wave is not ornamental -- it IS the layout grid, bent into curves.

4. **Stratigraphic column as navigation metaphor:** The fixed-position geological column replacing traditional navigation (sticky headers, hamburger menus, dot indicators) is unique to this design. It communicates position through the metaphor of geological depth rather than page progress, reinforcing the site's conceptual framework at every scroll position.

5. **Zero photography, SVG-only imagery:** In a collection where 99% of designs use photography and 48% use minimal imagery, this design achieves its visual richness entirely through SVG wave-forms, hand-drawn fossil glyphs, gradient backgrounds, and grain textures. There are no photographs, no raster images, no stock art -- only vector geometry and CSS effects.

**Seed/Style:** seapunk, full-bleed, bebas-bold, earth-tones, fade-reveal, glassmorphic-cards, wave-forms, minimal

**Avoided overused patterns:** parallax scrolling (98% -- replaced with fade-reveal and SVG animation), corporate aesthetic (97% -- replaced with geological narrative), photography imagery (99% -- replaced with SVG-only approach), warm-friendly tone (46% -- replaced with grounded-earthy contemplation), mono typography (76% -- using bebas-bold condensed + humanist IBM Plex Sans instead).
<!-- DESIGN STAMP
  timestamp: 2026-03-28T08:25:13
  domain: yongzoon.com
  seed: unspecified
  aesthetic: yongzoon.com ("yongzoon" derived from the Korean name meaning "eternal respect/r...
  content_hash: ae07ec2b10cd
-->