# Design Language for yongjoon.xyz

## Aesthetics and Tone

**yongjoon.xyz** is a **collapsing ceremony** — the page feels as though a formal imperial court has been abandoned mid-ritual and left to slowly burn. The aesthetic is **anti-design rendered as ruined opulence**: rules of composition are established with meticulous care and then deliberately shattered — not through carelessness but through a deliberate act of high-stakes refusal. A gilded frame around a tear. A column of immaculate Frutiger type that bleeds off the right edge of its track. A burnt-orange gradient that should be a hero background but instead appears as a single stripe two-thirds of the way down a horizontal panel, overlapping nothing, explaining nothing.

The domain reads as a proper noun — a given name, Korean in origin — which means the site carries a person, not a brand. The tone is **opulent-grand**: everything on the page suggests that immense resources were deployed, that no corner was cut, and that whoever is named here commands a room simply by existing in it. But the anti-design layer prevents this from becoming self-congratulatory: the opulence is cracked, deliberately, the way Renaissance portraitists would introduce a single shadow of doubt into an otherwise triumphal face.

Mood reference: a Venetian *sala* at two in the morning, all the guests gone, the candelabra still lit, the tablecloths half-pulled. Magnificent and spent simultaneously.

Color temperature: warm, amber-dominant, tipping toward char at the edges. The darkness is not the darkness of tech minimalism; it is the darkness of a room that was once very bright.


## Layout Motifs and Structure

The layout is a **single horizontal-scroll track** — the entire page is one unbroken ribbon that the viewer moves through left-to-right. There are no vertical sections, no anchor links, no scrolljacking. The ribbon is exactly **720 viewport-heights wide** and one viewport-height tall. On mobile, the direction becomes vertical (a graceful fallback), but on any screen wider than 768px the axis is horizontal.

**Seven panels, each exactly 100vw wide, positioned absolutely within the ribbon:**

1. **Panel 0 — The Name.** Black ground. The name `yongjoon` in Frutiger-inspired type (Nunito Sans, weight 800, tracking -0.04em) at 18vw, centered vertically but pushed 14% left of true center. The `.xyz` TLD floats 2.4rem below the baseline in weight 300, tracking 0.32em, as if uncertain whether it belongs to the name or the void.

2. **Panel 1 — The Pulse.** Burnt-orange field (#C45C26) covering 60% of the panel width, aligned right. Left 40% is charcoal (#1A1208). A single sentence in weight 400 at 2.2vw crosses the color boundary — white on the dark side, near-black (#1A1208) on the orange side, creating a split-type effect. No explanation of the sentence's subject.

3. **Panel 2 — The Archive.** A 4×2 grid of items, each a rectangle of varying height (randomized between 120px and 340px), bearing a single line of text. Grid items break the grid deliberately: items 3 and 7 overflow their row by 60px. Background is deep ember (#0F0A06).

4. **Panel 3 — The Grain Field.** Full-panel grain overlay (CSS noise texture, `opacity: 0.72`, `mix-blend-mode: overlay`) over a radial gradient from #C45C26 at center to #0F0A06 at edges. Star motifs — 8-pointed asterisks rendered in SVG, weight 1px stroke, color #E8B080 at 22% opacity — drift slowly across the panel via a looping CSS animation. Seventeen asterisks, sizes ranging 12px–48px, at irregular positions.

5. **Panel 4 — The Text Body.** A long-form text column, 40ch wide, positioned at the vertical center but 28vw from the left edge of the panel. Weight 300, size 1.1rem, line-height 1.9. The text runs into the right edge of the panel — it does not wrap gracefully; the final line hangs, cut off. This is intentional: the text is not finished, or it never needed to be finished.

6. **Panel 5 — The Celestial Map.** A full-bleed SVG star chart — not decorative sparkles, but a rigorous Mercator-projected star map of a specific declination band (+20° to +50°), rendered as white dots on #0F0A06, connected by a subset of constellation lines in #C45C26 at 30% opacity. The map carries real star magnitudes (dot radius scales 0.8px–4.2px by magnitude class). Star names appear in Nunito Sans 300 at 9px, uppercase, tracking 0.22em.

7. **Panel 6 — The Exit.** Charcoal (#1A1208). A single burnt-orange horizontal rule, 1px, 38vw wide, positioned at 62% from the top. Nothing else. The viewer has scrolled past everything. The line does not explain itself.

**Navigation:** A fixed bottom strip, 32px tall, holds seven small dots (4px diameter, #C45C26 at 40% opacity) that fill to 100% opacity as the corresponding panel becomes active. No labels. No arrows. The dots are the only navigation affordance — the horizontal scroll is driven by mouse-wheel, trackpad, or swipe.


## Typography and Palette

**Primary palette:**
- `#C45C26` — Burnt Sienna / the primary accent; used for ruled lines, star connections, split-field backgrounds, and the pulse dot
- `#0F0A06` — Deep Ember Black; the base ground on most panels
- `#1A1208` — Charcoal Amber; secondary dark, used for the left field of Panel 1 and the exit panel
- `#E8B080` — Pale Amber; used for star glyph strokes and secondary text on dark backgrounds
- `#F5EBD8` — Cream Vellum; used for body text on deepest darks
- `#7A3010` — Ember Deep; used for hover states on the burnt-orange field and for constellation line accents

**Typography:**

- **Display / Name:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 800, size 18vw, tracking -0.04em. This is the Frutiger-clean expression — Nunito Sans shares the humanist, open-counter DNA of Frutiger Avenida lineage but is freely available on Google Fonts. Its rounded-yet-open forms carry the name without aggression.

- **Subheadings / Panel labels:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 600, size clamp(1.1rem, 2.2vw, 2.4rem), tracking 0.08em, uppercase.

- **Body:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 300, size 1.1rem, line-height 1.9. The single-family constraint is deliberate: it makes the weight contrasts — 800 vs. 300 — carry all the typographic drama without requiring a second typeface to "contrast."

- **Star labels / micro-text:** [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans), weight 300, size 9px, uppercase, tracking 0.22em, color #E8B080 at 55%.


## Imagery and Motifs

**Grain Overlay:** Every panel carries a CSS-generated noise texture as a pseudo-element (`::before` or `::after`), created with an SVG `feTurbulence` filter (baseFrequency 0.75, numOctaves 4) applied to a full-size rect, then composited with `mix-blend-mode: overlay` and `opacity: 0.35–0.72` depending on panel. The grain is the site's skin — it unifies the panels into a single tactile surface that feels pressed rather than displayed.

**Star-Celestial Motifs:** Two registers:
1. **Decorative asterisks** — 8-pointed SVG stars scattered across Panel 3, drifting slowly (CSS `@keyframes` translating ±24px over 18–32 second loops). These are ornamental, not literal.
2. **Real star map** — Panel 5 uses actual IAU-adjacent star data for a specific declination band, rendered as a Mercator projection in pure SVG. Constellation lines trace Ursa Major, Boötes, and Coma Berenices — chosen because their shapes rhyme with the name's visual rhythm.

**Burn marks:** Panels 0 and 6 carry subtle vignette gradients in `#C45C26` at 4–8% opacity radiating from corners, simulating the scorched edges of aged paper. These are rendered as radial gradients in CSS, not images.

**No photography. No stock assets. No external images.** Every visual element is SVG, CSS gradient, or procedural noise.


## Prompts for Implementation

The page is a **single horizontal track** — all layout work happens on the X axis. The implementation strategy:

```
body { overflow-x: scroll; overflow-y: hidden; width: 700vw; height: 100vh; }
.panel { width: 100vw; height: 100vh; position: absolute; top: 0; }
.panel-0 { left: 0; }
.panel-1 { left: 100vw; }
/* etc. */
```

**Grain texture as CSS:**
Generate the grain via an inline SVG data URI as a `background-image` on a `::before` pseudo-element:
```css
.panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,...feTurbulence...");
  mix-blend-mode: overlay;
  opacity: 0.42;
  pointer-events: none;
}
```

**Pulse-attention on the burnt-orange dot navigation:**
The active dot scales from 4px to 8px diameter with a concentric-ring pulse:
```css
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(196,92,38,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(196,92,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,92,38,0); }
}
```

**Horizontal scroll via wheel event:**
```js
document.querySelector('.ribbon').addEventListener('wheel', (e) => {
  e.preventDefault();
  ribbon.scrollLeft += e.deltaY * 2.4;
}, { passive: false });
```

**Star map construction:** Build the SVG star map in Panel 5 with hard-coded star coordinates for 60–80 stars in the +20° to +50° declination band. Use a linear Mercator projection: `x = (RA_hours / 24) * svgWidth`, `y = ((50 - Dec) / 30) * svgHeight`. Magnitude classes 1–6 → dot radii 4.2, 3.1, 2.3, 1.7, 1.1, 0.8px.

**Anti-design moments (deliberate rule-breaks):**
- Panel 2 grid items 3 and 7 overflow their row by exactly 60px, no clipping
- The Panel 4 text column runs into the right edge without soft-wrapping (use `white-space: nowrap` on the final paragraph, or `overflow: visible` on the container)
- Panel 0's name is pushed 14% left of center — not centered, not grid-aligned, not justified
- The bottom navigation dots have no labels and no tooltips — violating every accessibility heuristic deliberately

**Do not add:** a hero CTA, a contact form, a pricing section, a feature grid, social media icons, or any copy in the imperative voice ("Learn more", "Get started"). This is a presence, not a product.

**Animation philosophy:** Every animation on the page is slow and non-interruptible. The drifting star asterisks in Panel 3 loop over 18–32 seconds. The pulse ring completes in 2.1 seconds. Nothing jumps. Nothing snaps. The page moves like an ember cooling.


## Uniqueness Notes

**Differentiators from the corpus:**

1. **Horizontal-scroll as narrative axis, not gallery.** Horizontal scroll appears in only 2% of the corpus, and in those instances it is always a gallery or portfolio carousel. This site uses horizontal scroll as a *temporal narrative* — panels are sequential beats of a ceremony, not items in a collection. The viewer moves through time, not space.

2. **Anti-design at opulent scale.** The corpus uses anti-design (2%) exclusively in low-budget or "indie developer" contexts — raw edges, no color, Courier. This design applies anti-design rules (rule-breaking grid, cut-off text, off-center alignment) to a full-opulence palette (ember black, burnt orange, cream vellum). The tension between the formal color system and the broken composition is the design's central argument.

3. **Frutiger-clean with single-font dramatic range.** The corpus's Frutiger-clean instances (4%) pair Nunito-family with a contrasting serif for "drama." This design achieves full typographic drama from a single family — Nunito Sans at weight 800 (18vw display) vs. weight 300 (1.1rem body) — no serif needed. The humanist open counters of Nunito Sans read as Frutiger-clean without ever crossing into the clinical coldness that Helvetica brings.

4. **Real astronomical data as decoration.** The star-celestial motif (5% corpus) appears as decorative sparkles, sparkle backgrounds, or constellation illustrations in every existing instance. This design uses actual projected star positions for a specific declination band, building a rigorous star chart in SVG that doubles as the site's most visually complex panel. The decoration *is* data.

5. **Grain as unified skin, not texture accent.** Grain-overlay (3% corpus) is always applied to a single hero image or background. This design applies it as a persistent skin across every panel, at varying opacities (0.35–0.72), creating a single tactile surface that makes seven visually distinct panels feel like one physical object — an aged document, a long scroll of vellum.

**Seed:**
aesthetic: anti-design, layout: horizontal-scroll, typography: frutiger-clean, palette: burnt-orange, patterns: pulse-attention, imagery: grain-overlay, motifs: star-celestial, tone: opulent-grand
<!-- DESIGN STAMP
  timestamp: 2026-05-12T08:39:54
  domain: yongjoon.xyz
  seed: anti-design horizontal-scroll frutiger-clean burnt-orange pulse-attention grain-overlay star-celestial opulent-grand
  aesthetic: yongjoon.xyz** is a **collapsing ceremony** — the page feels as though a formal ...
  content_hash: 00ddae1d3820
-->