# Design Language for yongjoon.dev

## Aesthetics and Tone
yongjoon.dev channels the visual philosophy of the **International Typographic Style (Swiss Design) reimagined as a luxury engineering workshop** -- a space where Zurich's rationalist grid discipline meets the obsidian-and-gold gravitas of a master craftsman's atelier. The site evokes the feeling of opening a precision-machined instrument case: everything is aligned, weighted, and intentional, yet the materials are sumptuous rather than sterile. Think of a Braun calculator redesigned by a Kyoto goldsmith -- Dieter Rams's geometry rendered in 24-karat inlay on volcanic glass.

The tone is **tech-tutorial** -- authoritative and instructive, but delivered through the lens of quiet luxury rather than casual approachability. Content reads like annotations in an exquisitely bound engineering manual: precise, informative, and structured as knowledge transfer, never as sales pitch. The voice assumes the reader is a peer, a fellow practitioner worthy of the material's richness. Every element teaches something, and every teaching is presented as a precious object.

## Layout Motifs and Structure
The site employs a **dashboard** layout -- not the corporate SaaS variety, but an instrument panel inspired by Swiss railway timetable displays and analog synthesizer control surfaces. The viewport is divided into a persistent left index column (240px) and a main content area organized as a **4-column Swiss grid** with 24px gutters and 48px margins.

**The Instrument Dashboard:**
The left column functions as a persistent table-of-contents rendered as a vertical sequence of gold-on-black labels, each left-aligned in Helvetica Neue precision. These labels do not behave as conventional navigation links -- they are **flip-cards**. Each label is a 3D card (rotateY on hover/click) that reveals a topic summary on its reverse face before navigating. The cards measure 200px wide by 56px tall with 8px separation.

**Content Panels as Tiles:**
The main area presents content as a series of modular dashboard tiles arranged on the Swiss grid. Tiles come in three sizes: 1-column (single metric or code snippet), 2-column (explanatory block), and 4-column (full-width deep-dive). Each tile has a 1px solid border in #C9A84C (antique gold), a background of #0A0A0A (near-black), and 32px internal padding. Tiles are not rounded -- they use sharp 0px border-radius throughout, honoring the Swiss tradition of rectilinear precision.

**Wave-Form Dividers:**
Between major dashboard sections, horizontal audio-waveform visualizations span the full content width. These are SVG paths rendered as oscilloscope-style sine waves in gold (#C9A84C) at 0.3 opacity, providing organic rhythm breaks within the rigid grid structure. The waveforms are not decorative noise -- each corresponds to a different "frequency" that subtly increases in amplitude as the user scrolls deeper, suggesting building momentum and complexity.

## Typography and Palette
**Display Heading Font:** "Playfair Display" (Google Fonts, weights 700, 900) -- a high-contrast transitional serif with dramatic thick-thin stroke variation and refined ball terminals. Used for section titles and the site wordmark. Set at `clamp(2.4rem, 5vw, 4.2rem)`, `letter-spacing: 0.02em`, `line-height: 1.1`. Color: #C9A84C (antique gold). The serif's calligraphic elegance creates deliberate tension with the Swiss grid's rationalism -- ornament constrained by structure.

**Body Text Font:** "Inter" (Google Fonts, weights 400, 500) -- a typeface designed specifically for computer screens with a tall x-height, open apertures, and distinct letterforms optimized for small sizes. Used for all body text and dashboard tile content at `font-size: 1rem` (16px), `line-height: 1.7`, `letter-spacing: 0.01em`. Color: #E8E0D0 (ivory parchment). The humanist sans-serif provides clean readability that complements Playfair's flourishes without competing.

**Code/Label Font:** "IBM Plex Mono" (Google Fonts, weight 400) -- used for inline code, metadata labels, and the navigation index. Set at `font-size: 0.875rem`, `line-height: 1.5`. Color: #C9A84C at 0.7 opacity for labels, full opacity for code.

**Palette:**
| Role | Color | Hex |
|------|-------|-----|
| Background (primary) | Obsidian Black | #0A0A0A |
| Background (elevated) | Charcoal Slate | #141414 |
| Accent (primary) | Antique Gold | #C9A84C |
| Accent (secondary) | Tarnished Brass | #8A7340 |
| Text (primary) | Ivory Parchment | #E8E0D0 |
| Text (muted) | Smoked Pearl | #6B6560 |
| Border/Rule | Gold Whisper | #C9A84C at 0.25 opacity |
| Highlight | Champagne Flash | #F2E6C4 |

The palette is strictly **gold-black-luxury** -- a two-axis system where black provides infinite depth and gold provides all warmth, accent, and hierarchy. No blues, no greens, no tertiary distractions. The constraint is the luxury: like a black-tie dress code, the limitation itself communicates refinement.

## Imagery and Motifs
**Collage Panels:**
The signature visual element. Rather than conventional hero images or illustrations, yongjoon.dev uses **CSS-constructed collage compositions** -- overlapping geometric fragments arranged in the style of Swiss poster art meets Dada photomontage. Each collage is built from layered `<div>` elements containing: code snippet fragments (rendered as gold text on black), geometric shapes (rectangles and circles in #C9A84C at varying opacities from 0.05 to 0.4), and typographic excerpts (single words or symbols from Playfair Display at oversized scales, rotated 5-15 degrees, clipped by container boundaries). These collages occupy 2-column tile spaces and are purely decorative -- they do not contain navigable content but create visual texture that breaks the grid's austerity.

**Wave-Form Motif:**
Persistent throughout the site as both section dividers and background texture. Two varieties exist:
1. **Macro waves:** Full-width SVG paths between sections, described above. Stroke: #C9A84C, stroke-width: 1.5px, fill: none. Animated via `stroke-dashoffset` to create a slow left-to-right drawing effect on scroll (duration: 2s, easing: cubic-bezier(0.4, 0, 0.2, 1)).
2. **Micro waves:** Tiny waveform thumbnails (80px wide, 24px tall) embedded in dashboard tile headers as visual identifiers -- each tile gets a unique waveform shape generated from a simple sine function with different frequency/amplitude parameters, rendered as inline SVG. These serve as abstract "fingerprints" for each content section.

**Gold Particle Field:**
The background of the main content area carries a sparse particle system: tiny gold dots (2px circles, #C9A84C at 0.08 opacity) positioned on a regular grid pattern (every 48px, matching the Swiss grid gutters). On mouse movement, particles within a 120px radius of the cursor shift position by 4-8px with a spring-physics easing (duration: 600ms, tension: 0.3), creating a subtle magnetic distortion that acknowledges the user's presence without being distracting.

**Oscilloscope Cursor:**
The custom cursor is a 24px gold ring (#C9A84C, 1.5px stroke, no fill) that leaves a faint oscilloscope trail -- a 3-point trailing waveform path that decays over 400ms, drawn in gold at 0.15 opacity. This reinforces the wave-form motif at the interaction level.

## Prompts for Implementation
Build yongjoon.dev as a **single-page Swiss dashboard instrument** -- a precision-gridded, gold-on-black environment where content tiles present knowledge like readings on an engineer's control panel, and card-flip interactions reveal depth behind every surface.

**Initial Load Sequence (first 2.5 seconds):**
The page loads to pure black (#0A0A0A). After 150ms, a single horizontal gold line draws itself from left to right across the viewport center (stroke-dasharray animation, 400ms, ease-out). The line then splits vertically at the 240px mark (the index column boundary), establishing the grid. Over the next 800ms, the navigation labels in the left column fade in sequentially from top to bottom (stagger: 80ms per item, opacity 0 to 1, translateY(8px) to translateY(0)). Simultaneously, dashboard tiles in the main area scale in from 0.96 to 1.0 with opacity 0 to 1 (stagger: 60ms, duration: 500ms). The wave-form dividers draw themselves last (stroke-dashoffset animation, 1200ms). Total sequence: no element appears before the grid lines establish the spatial framework.

**Card-Flip Navigation (Primary Interaction):**
Each navigation label in the left index column is a CSS 3D card. Default state shows the section title in IBM Plex Mono, gold on black. On hover, the card performs a `rotateY(180deg)` flip (duration: 500ms, `transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)`) revealing the reverse face: a 2-line summary of that section's content in Inter at 0.75rem, ivory on charcoal (#141414). Clicking the revealed face scrolls the main content to that section with a smooth scroll (duration: 800ms). The 3D perspective is set on the parent container at `perspective: 1200px`. `backface-visibility: hidden` on both faces. The card's transform-origin is center-center. A gold border (1px #C9A84C) frames the card on both faces.

**Dashboard Tile Hover States:**
When a user hovers over a content tile, the tile's gold border transitions from 0.25 opacity to full 1.0 opacity over 300ms. Simultaneously, the micro-waveform in the tile header animates -- its path morphs slightly (the sine wave's amplitude increases by 30%) over 400ms with spring easing. On hover-out, both reverse with the same timing. This creates a living, responsive feel without large-scale motion.

**Scroll-Driven Wave Amplification:**
As the user scrolls through the page, the wave-form dividers between sections progressively increase in amplitude. The first divider has wave amplitude of 8px; the second, 14px; the third, 22px; the fourth, 32px. This creates a visual narrative of building intensity and complexity -- the deeper you go, the more energetic the waveforms become. Implemented via CSS scroll-timeline or IntersectionObserver updating SVG path data.

**Collage Panel Assembly Animation:**
When a collage panel enters the viewport (IntersectionObserver, threshold: 0.3), its constituent fragments animate in from scattered positions. Each fragment starts at a random offset (translateX/Y of 20-60px) and rotated by an additional 10-30 degrees, then settles into its composed position over 700ms with staggered delays (80ms per fragment). The easing is `cubic-bezier(0.16, 1, 0.3, 1)` -- a sharp deceleration that makes fragments feel like they're being magnetically pulled into formation.

**Code Snippet Presentation:**
Code blocks within dashboard tiles use a typewriter reveal: characters appear left-to-right at 30ms intervals, in IBM Plex Mono, gold on a slightly elevated background (#141414). A blinking gold cursor (1px wide, 1rem tall, 530ms blink interval) follows the typing. After the block is fully revealed, the cursor blinks three times and disappears. This reinforces the tech-tutorial tone -- every code example is presented as a live demonstration, not a static excerpt.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, gradient backgrounds, rounded corners, drop shadows, blur/glassmorphism effects, photography, corporate color palettes. The site must feel like a precision instrument, not a marketing funnel.

## Uniqueness Notes
1. **Swiss grid + luxury gold-black palette as unified system:** No other design in this collection combines the International Typographic Style's rigid rationalist grid with a gold-on-obsidian luxury palette. The tension between Swiss functionalism's democratic, industrial origins and the aristocratic exclusivity of gold-black creates a unique dialectic -- utilitarian structure made precious, luxury made systematic.

2. **Card-flip as primary navigation paradigm:** While card-flip appears in 4% of designs as a decorative interaction, yongjoon.dev uses it as the fundamental navigation mechanism. Every section link is a 3D flip-card that reveals summary content before allowing navigation, making the act of wayfinding itself an interactive, informational experience rather than a simple click-and-scroll.

3. **Wave-form amplitude as scroll-narrative device:** The progressive amplification of waveform dividers (8px to 32px) as the user scrolls creates a unique visual storytelling arc embedded in the page's structural elements. No other design uses section dividers as a dynamic narrative progression system. The waveforms are not decoration -- they are a data visualization of the page's own increasing depth and complexity.

4. **Collage as CSS-only compositional art:** Rather than using photographic or illustrated collages, yongjoon.dev constructs its collage panels entirely from code fragments, typographic excerpts, and geometric shapes via CSS. This makes the collage self-referential -- the site's own content and medium become its visual art, eliminating the need for external imagery entirely.

5. **Oscilloscope cursor trail:** The custom cursor with a decaying waveform trail is unique in this collection. It connects the user's physical movement to the wave-form motif, making the site's visual language responsive to and shaped by human input at every moment.

**Chosen seed/style:** swiss, dashboard, playfair-elegant, gold-black-luxury, card-flip, collage, wave-forms, tech-tutorial

**Avoided overused patterns:** corporate aesthetic (97%), photography imagery (99%), full-bleed layout (97%), parallax animation (98%), warm palette (98%), mono typography (76%), friendly tone (46%), nature motifs (48%). The design deliberately avoids all of these in favor of underused alternatives: swiss (2%), dashboard (12%), playfair-elegant (4%), gold-black-luxury (3%), card-flip (4%), collage (3%), wave-forms (2%), tech-tutorial (3%).
<!-- DESIGN STAMP
  timestamp: 2026-03-28T08:24:42
  domain: yongjoon.dev
  seed: seed
  aesthetic: yongjoon.dev channels the visual philosophy of the **International Typographic S...
  content_hash: efb7e62a17bf
-->