# Design Language for yongjoon.dev ## Aesthetics and Tone yongjoon.dev should feel like entering a private orbital atelier: a minimal personal domain suspended between luxury black lacquer, dopamine-neon instrument light, and translucent watercolor weather. The site is not a résumé, portfolio grid, business card, or developer dashboard. It is a cinematic identity chamber for a maker whose work appears as precise signals inside a quiet, high-end void. The tone is restrained and premium, but not conservative. Imagine a gallery room aboard a silent spacecraft where the walls are cut on impossible diagonals, faint magenta and cyan diagnostic lines glide across polished obsidian, and hand-washed pigments bloom behind the glass like memories of Earth. The luxury should come from negative space, exact alignment, slow reveal, and luminous detail rather than gold trim or heavy ornament. Keep the voice minimal: short phrases, sparse labels, and a sense that every word has been intentionally placed in orbit. ## Layout Motifs and Structure Use the planned **diagonal-sections** layout as the primary spatial grammar. The page should be composed of full-screen slanted planes that slide past one another like overlapping spacecraft hull panels. Avoid centered hero blocks and card grids; the viewer should move through a sequence of angled thresholds rather than down a conventional landing page. Recommended structure: 1. **Signal Lock** — a full-viewport opening scene with the domain set large on a diagonal baseline, partially intersected by a thin sci-fi HUD reticle. The hero copy should be minimal, almost whispered, with one or two fragments such as “systems, language, forms” or “quiet tools for complex thought.” 2. **Oblique Biography** — a slanted text corridor where short personal statements appear as coordinates along a diagonal spine. Each statement may sit in a transparent instrument pane, but never as a repetitive card stack. 3. **Work as Constellations** — instead of project cards, use luminous nodes placed along an angled orbit line. Nodes can expand into small annotations, sketches, repo-like glyphs, or conceptual labels. 4. **Watercolor Memory Layer** — a quiet interlude where neon geometry fades back and soft watercolor washes become visible, suggesting human presence behind technical precision. 5. **Terminal Horizon** — an ending scene with a single restrained contact or identity mark, framed by a nearly empty HUD aperture. The overall composition should be asymmetric and cinematic. Use diagonal clipping with `clip-path: polygon(...)`, rotated grid guides, and large black margins. Sections can overlap slightly, like glass plates sliding across each other. Let empty space dominate at least half of each viewport. ## Typography and Palette Use Google Fonts with a geometric-sans hierarchy that feels engineered, elegant, and personal: - **Primary display:** "Space Grotesk" from Google Fonts, weights 500, 600, and 700. Use for `yongjoon.dev`, major scene titles, and oversized diagonal words. Tighten tracking slightly for premium density, then use generous line-height so the type feels architectural. - **Body and narrative text:** "Outfit" from Google Fonts, weights 300, 400, and 500. It gives the writing a clean geometric voice without becoming sterile. - **HUD annotations:** "Rajdhani" from Google Fonts, weights 400, 500, and 600. Use sparingly for coordinate labels, tiny system readouts, timestamps, and loading captions. Palette: dopamine-neon energy restrained by luxury darkness and watercolor softness. - Obsidian lacquer: `#05050A` - Deep violet black: `#111022` - Neon cyan signal: `#20F7FF` - Dopamine magenta: `#FF2BD6` - Acid lime accent: `#B8FF2C` - Watercolor lilac haze: `#C8A7FF` - Washed coral bloom: `#FF8FA3` - Porcelain text: `#F7F3FF` Use gradients as thin luminous veils, not broad SaaS washes: cyan-to-magenta hairlines, soft lilac watercolor blooms behind black glass, and tiny acid-lime pings only where the interface wants attention. ## Imagery and Motifs Imagery should be mostly generated through CSS/SVG rather than photography. The core visual tension is **watercolor aura inside sci-fi HUD discipline**. Build soft pigment fields from blurred radial gradients, SVG filters, and mask layers, then cage them inside precise diagonal frames and reticles. The watercolor should look like suspended ink in microgravity: irregular, translucent, and slow. HUD motifs should include thin corner brackets, micro tick marks, orbital arcs, scanline fragments, small coordinate strings, focus boxes, and skeletal loader bars. These elements should never become a dashboard; they are ceremonial instruments around the personal identity. Use skeleton-loading as a visual metaphor: pale diagonal placeholder bars briefly shimmer into real words, as though the site is calibrating the person behind the domain. Decorative details: - Diagonal hairline grids at 12–18 degree angles, fading before they fill the whole screen. - Watercolor blooms clipped inside polygonal windows, like nebula samples under glass. - A single animated reticle that searches slowly, then locks onto text fragments. - Tiny neon particles that travel along slanted section seams. - Abstract glyphs based on initials, coordinates, or folder-path shapes rather than generic icons. ## Prompts for Implementation Implement as a full-screen narrative experience in a single HTML/CSS/JS page. Load "Space Grotesk", "Outfit", and "Rajdhani" from Google Fonts. Build the site around slanted viewport-height scenes and a continuous diagonal visual axis. Do not make a CTA-heavy layout; avoid pricing blocks, testimonial strips, stat-grids, feature-card grids, and centered corporate hero formulas. Use CSS custom properties for the palette and create reusable diagonal section classes with `clip-path`, skewed pseudo-elements, and layered gradients. Background depth should come from black-on-violet planes, thin neon borders, and soft watercolor blurs. Let JavaScript enhance the story with subtle scroll progress: HUD coordinates update, skeleton bars shimmer once before text resolves, and the reticle drifts toward whichever scene is active. Animations should feel expensive and deliberate: slow opacity fades, diagonal wipes, tiny scan passes, and text resolving from skeleton-loading placeholders. Avoid bouncy startup effects, busy parallax, or generic staggered card reveals. The scroll should feel like moving through a calibrated personal instrument, where each section discloses one more facet of yongjoon.dev. Suggested implementation cues: - Use one fixed background `canvas` or layered CSS gradients for watercolor clouds, with very slow hue/position shifts. - Create diagonal seams with `::before` and `::after` pseudo-elements rather than boxed sections. - Represent work or interests as orbit nodes along a slanted SVG path, with hover/focus expansion into compact annotation panes. - Use minimal copy and let the visual system carry the storytelling. - End on a near-empty black scene with a single luminous mark, small contact line, and fading HUD brackets. ## Uniqueness Notes - Combines **luxury-premium** restraint with **dopamine-neon** signal color, avoiding the common corporate gradient, warm palette, and authoritative SaaS tone found heavily in the frequency analysis. - Uses **diagonal-sections** as full-screen sliding architecture rather than the overused centered layout, card-grid, stacked sections, dashboard layout, or conventional portfolio grid. - Treats **skeleton-loading** as a poetic identity reveal mechanism, not a utilitarian placeholder or product-loading trick. - Blends **watercolor** imagery with **sci-fi-hud** motifs so the site feels both human and engineered: pigment behind glass, memory inside instrumentation. - Keeps the personal domain minimal and cinematic, with orbit nodes and diagonal corridors replacing CTA-heavy blocks, pricing panels, stat-grids, and testimonial bands. - Documented chosen seed/style: aesthetic: luxury-premium, layout: diagonal-sections, typography: geometric-sans, palette: dopamine-neon, patterns: skeleton-loading, imagery: watercolor, motifs: sci-fi-hud, tone: minimal. - Frequency-informed avoidance: no warm corporate palette, no centered card-grid composition, no default photography/minimal imagery pairing, no mono-dominant developer terminal aesthetic, and no parallax-heavy scroll spectacle.