# Design Language for yongzoon.net
## Aesthetics and Tone
yongzoon.net is a **topographic field journal** — a single dark scroll that reads like a surveyor's notebook left open on a granite ledge at dusk. The aesthetic is dark-mode rendered not as "tech interface" (the corpus default) but as **ink on aged cartographic vellum lit by a single lantern**: deep charcoal backgrounds with warm honeyed overtones, amber highlights where candlelight hits the page, cool slate shadows where the mountain blocks the sky.
The domain name is treated as a proper topographic designation — like a named summit or a ridge marker on a USGS quad sheet. The wordmark `yongzoon.net` is set in a monospaced face at a precise altitude-label size, positioned exactly as a peak designation appears on a contour map: anchored, unadorned, stating the coordinates of a place.
Tone is **mysterious-moody** but in a geological register — not supernatural, not noir. The mystery is the mountain's own: something large, patient, indifferent, beautiful. The page does not explain itself. It renders a place and trusts the visitor to orient.
**Inspiration:** USGS topographic quadrangles, 1970s Japanese mountaineering guidebooks, Ansel Adams contact sheets, old expedition logbooks with faded red coordinate marks, the amber glow of a headlamp on a tent wall at 3,200 metres.
**No CTA, no pricing, no statistics, no testimonials. Only terrain.**
## Layout Motifs and Structure
The layout is **single-column** but executed as a **survey transect** — a vertical cross-section through a mountain, read from sky to stone. The page is a strip of terrain, not a webpage in any conventional sense.
**Macro structure (top-to-bottom):**
1. **Summit Plate (`100svh`).** The viewport-filling opening. A large SVG contour-line mountain silhouette fades in from black over 1.8 seconds (`fade-reveal`). The wordmark appears last, at the precise position a peak designation holds on a topographic sheet — right-aligned against the silhouette's highest point. No hero CTA. No subheadline. Just the name and the mountain.
2. **Elevation Log (`auto height`).** A monospaced text column, max-width 62ch, left-aligned with a 6ch left margin (evoking a logbook's ruled column). Sections are separated by hand-drawn horizontal rule lines — thin SVG strokes that mimic cartographic section dividers, not CSS `
`. Each section opens with a coordinate marker (e.g., `37.5234°N 128.8743°E`) rendered in amber as a label, then body text below it in slate-warm tone.
3. **Contour Field.** An inline SVG panel spanning the full column width — an abstract cross-section of a mountain flank drawn in the style of a bathymetric chart: concentric closed curves at irregular intervals, all stroked in `Contour` color (warm amber), no fills. This is the page's primary illustration.
4. **Bearing Notes.** Two or three short paragraphs styled as field notes — brief, observational, non-marketing. Set at 14px / 1.8 line height in the mono face.
5. **Datum Footer.** Coordinates, a compass rose drawn in SVG, and the domain name, all in subdued warm-grey. No links, no social icons.
**Navigation:** None. The page is read as a scroll. A thin progress line on the left edge (3px wide, amber, `position: fixed`) tracks descent through the page like an altimeter.
**No parallax, no centered layout, no grid, no sidebar.**
## Typography and Palette
**Typography — mono register, all from Google Fonts:**
This is the one case in the corpus where `mono` typography is not a developer-aesthetic choice but a **cartographic one**. Survey instruments print in fixed-width type. USGS elevation labels are monospaced. This page treats the mono face as precision instrumentation, not code editor.
- **Primary face:** [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400 for body, weight 700 for coordinate markers and the wordmark. Space Mono's slight mechanical irregularity reads as worn type-specimen, not as terminal output.
- **Secondary face (accent only):** [`Fraunces`](https://fonts.google.com/specimen/Fraunces), weight 300 italic, used exclusively for section headings inside the Elevation Log — long-exposure lyric labels like *"first light above the fog line"*. Maximum 6 uses per page. Fraunces's optical-size axis and soft ink-trap serif evoke 1920s expedition typography.
- No third face.
**Palette — honeyed-neutral with geological depth:**
| Token | Hex | Usage |
|-------|-----|-------|
| `Stone` | `#1a1714` | Page background — darkest charcoal with warm undertone |
| `Shale` | `#2c2825` | Section background variation, subtle alternation |
| `Slate` | `#4a4440` | Borders, SVG strokes (non-accent), faint grid lines |
| `Vellum` | `#e8dcc8` | Primary text — warm off-white, never pure white |
| `Amber` | `#c8891e` | Coordinate markers, progress bar, SVG contour lines |
| `Honey` | `#d4a44c` | Wordmark, section-header italic, hover state |
| `Fog` | `#6b5e52` | Secondary text, captions, footer |
The palette deliberately avoids both cold blue-blacks (cyberpunk dark-mode) and pure black/white (minimalist dark-mode). Every color carries warmth — this is dark-mode through geological time, not through electric light.
## Imagery and Motifs
**All imagery is custom SVG vector art.** No photography. No stock icons. No icon fonts.
**The vector vocabulary:**
1. **Summit Silhouette.** The hero SVG — a single mountain profile rendered as a filled shape in `Stone` against pure black, with a 12px-wide contour highlight in `Amber` tracing just the ridgeline. The silhouette is asymmetric: long gradual slope on the left (approach), steep drop on the right (north face). Drawn at 1440px wide, scales via `viewBox`.
2. **Contour Field Illustration.** An inline SVG cross-section: 8–12 closed concentric curves at varying intervals encoding steepness, all stroked in `Amber` at 0.8px weight. No fills. The innermost curve (summit) has a small dot marker. Dimensions: 620px × 260px, scales with column.
3. **Compass Rose.** Footer ornament, 64px diameter. Eight-point rose drawn in thin SVG lines — four cardinal arms slightly longer than four diagonal. No fills, 1px stroke in `Fog`. The north arm has a small arrowhead in `Amber`.
4. **Coordinate Markers.** Text elements in the Elevation Log styled as map labels: amber background pill, 10px Space Mono, `border-radius: 2px`. Not images — pure CSS + text.
5. **Section Divider Lines.** SVG paths that mimic hand-ruled cartographic lines: slight irregularity introduced via bezier control point offsets (~1–2px variance from straight), 1px stroke in `Slate`. Not CSS borders.
**Motif system: mountain-landscape as topographic information, not as scenery.**
The mountain does not appear as a decorative backdrop. It appears as survey data — contour lines, elevation markers, bearing annotations, cross-sections. The landscape is an information system.
## Prompts for Implementation
**The narrative:** A visitor opens the logbook of someone who has been on this mountain for a long time. There is no introduction. The logbook is already open to a page somewhere in the middle. The entries are precise, spare, and strange in their quietness — not foreboding, not supernatural, simply *very far from ordinary things*. The visitor reads, orients by the contour illustration, and eventually reaches the datum footer — coordinates, a compass rose, the domain name. That is the end of the logbook.
**HTML/CSS/JS implementation guidance:**
- Build as a single `index.html` with all SVG inline. No external image files.
- CSS custom properties for all palette tokens (`--color-stone`, `--color-amber`, etc.).
- `fade-reveal` pattern: on scroll, elements cross a threshold and fade from `opacity: 0, translateY(12px)` to `opacity: 1, translateY(0)` over 600ms with `ease-out`. Use `IntersectionObserver` — no scroll event listeners. Threshold: `0.15`.
- The Summit Plate silhouette fades in on page load: first the mountain fill (`0ms`), then the ridgeline highlight (`600ms delay`), then the wordmark (`1200ms delay`). No JS needed — CSS `animation` with `animation-delay`.
- Progress bar: `position: fixed; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-amber); transform-origin: top; scaleY()` driven by `window.scrollY / (document.body.scrollHeight - window.innerHeight)`. Vanilla JS, ~8 lines.
- The Contour Field illustration SVG: individual `` elements get `stroke-dashoffset` animations triggered by `IntersectionObserver` — the contour lines draw themselves inward from outermost to innermost over 2.4 seconds as the panel enters view.
- Typography rhythm: `font-size: 15px; line-height: 1.9; letter-spacing: 0.03em` for body (Space Mono at this scale is comfortable without leading compression). Coordinate markers at `font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase`.
- Section transition: `background-color` shifts from `--color-stone` to `--color-shale` for alternating sections — a 1px change in warmth, barely perceptible, like geological strata.
- No JavaScript frameworks, no build tools, no external dependencies beyond the two Google Fonts.
- Responsive: the 62ch column is already fluid. Below 480px, left margin drops to 2ch. The SVG illustrations scale via `width: 100%; height: auto`. The compass rose reduces to 48px.
- **AVOID:** Any layout that centers text. Any parallax. Any scroll-hijacking. Any animation that fires on hover of the wordmark. Any CTA button. Any grid structure.
**Accent interaction:** When the visitor hovers over a coordinate marker, the label text shifts from `Amber` to `Honey` and a thin amber underline draws in from left over 200ms (`transition: border-bottom`). This is the only interactive element on the page besides the scroll itself.
## Uniqueness Notes
**Differentiators from the existing registry:**
1. **Mono typography executed as cartographic instrumentation, not developer aesthetic.** The corpus uses `mono` at 74% — overwhelmingly as "terminal/code" visual language. yongzoon.net is the first design where monospaced type is justified by *survey instrument precision* and *USGS notation convention*. The same letterforms read as field equipment rather than IDE interface.
2. **Honeyed-neutral dark-mode: warm geological ochres instead of cold blue-black.** Every dark-mode design in the corpus uses cool-temperature darks (`#0a0a0f`, `#141428`, neon accents). This palette is built entirely from warm geological pigments — charcoal-browns, ambers, and vellum — inverting the standard dark-mode temperature assumption.
3. **Contour line draw-on animation as the primary motion event.** `fade-reveal` (5% in corpus) is the only animation pattern here, but executed as SVG path `stroke-dashoffset` animation on contour curves — not as opacity fades on cards or section headers. The landscape draws itself.
4. **No navigation, no hero CTA, no scroll hijacking.** Single-column at 21% in corpus is typically used for product/personal pages with navigation and CTA blocks. This design has none — the page is a document, not an interface.
5. **Chosen seed:** `aesthetic: dark-mode, layout: single-column, typography: mono, palette: honeyed-neutral, patterns: fade-reveal, imagery: vector-art, motifs: mountain-landscape, tone: mysterious-moody`
6. **Avoided patterns from frequency analysis:** `centered` layout (83% — not used), `parallax` (73% — not used), `minimal` styling (45% — replaced with geological specificity), `asymmetric` composition (43% — single survey-column instead).