# Design Language for quietjoon.net ## Aesthetics and Tone `quietjoon.net` is a **Y2K-futurist personal manifesto** — part chrome OS splash screen from 2003, part contemporary algorithmic identity card. The name itself carries contradiction: *quiet* against *joon* (준, brightness, clarity, talent in Korean) — so the site lives in that gap between restrained authority and high-frequency visual energy. It is not loud. It is *precise at high velocity.* The aesthetic draws from the peak Y2K internet moment: lenticular plastics, iridescent blister packs, the UI chrome of Windows XP Media Center Edition, early Flash portfolio sites with beveled buttons and animated loading bars. But this is not nostalgia-as-kitsch. The Y2K references are sharpened through 2025 eyes: the palette is not garish neon but **complementary electric** — a deep ultraviolet foundation hit with charged amber-lime, the two colors sitting at 180° apart on the wheel so they vibrate in the eye without needing to scream. The chrome is real: `conic-gradient` and `CSS @property` animations that rotate metallic sheens at 3rpm without JavaScript. The site reads as **authoritative without being cold**. The tone is a scientist presenting results with absolute confidence — not a marketer pleading. Every sentence is declarative. Every element knows what it is. The bubble motifs (rounded, inflated, like XP's Aqua buttons but abstracted) introduce just enough warmth and playfulness to prevent the precision from curdling into clinical. **Mood:** A senior engineer's personal site circa 2027, if the year 2003 had slightly better taste and a lot more restraint. ## Layout Motifs and Structure The layout is built entirely on **diagonal slabs** — the page is not divided into horizontal bands but into **parallelogram-shaped zones** clipped at ±7° from horizontal. This is rare in the registry (2%) and directly counters the dominant full-bleed/centered hegemony (84%/65%). **Structural anatomy:** - **Slab 0 — Vitals (hero):** Full viewport, clipped at bottom-right with a -7° diagonal cut. Contains a large isometric identity block (the portrait rendered as isometric pixel-art) and the name in Bebas Neue at 160px. The clip creates a sharp arrow shape pointing the eye diagonally downward-right into the next slab. - **Slab 1 — Skeleton Intro:** The next parallelogram slab shows a skeleton-loading state that resolves into a 3-panel isometric scene as the user scrolls into view. The skeleton pulse is `#2a0a6b → #3d1594` shimmer (ultraviolet register) — not the typical gray. The slab is offset by 80px from the viewport left edge, creating a staggered-brick rhythm. - **Slab 2 — Isometric Work Grid:** A 4-column grid of isometric project icons, each a 3D pixel-rendered diorama. The grid itself is clipped into a parallelogram. Each card has a bubble-shaped hover state: `border-radius` inflates from 4px to 24px, the card lifts 8px, a glossy Y2K inset-shadow appears. - **Slab 3 — Writing / Signal:** A narrow diagonal slab, offset right, containing a compact list of essays/posts. The typography here drops to 16px Barlow with wide tracking, very technical. - **Slab 4 — Contact:** Full-width diagonal terminal, styled like a Y2K OS taskbar — amber-lime (#bfff00) text on ultraviolet (#1a0050), monospaced, with a blinking cursor and a `mailto:` link that looks like a system prompt. **No horizontal rules, no card grids that flow left-to-right.** All content blocks are oriented by the 7° diagonal axis. The spatial logic is: you are reading a billboard tilted slightly into the future. ## Typography and Palette **Typefaces (all Google Fonts, verified):** - **Display — `Bebas Neue`** (single weight 400, uppercase-only condensed sans): Used exclusively for the name, section labels, and any heading that requires authority. Set at 160px on the hero slab, letterSpacing: -0.01em. The condensed geometry reads as Y2K-era digital display — broadcast LCD, not editorial serif. Bebas Neue is at 6% in the registry; its use here is intentional but differentiated by pairing. - **Body / Annotation — `Barlow`** (weights 300, 400, 600): The workhorse. Light 300 for descriptive body text, 600 for inline emphasis. Its geometric humanist structure complements Bebas without competing. Barlow is underused in the registry. - **Monospace / Terminal — `JetBrains Mono`** (weight 400, 500): Contact slab and any code-adjacent annotation. Google Fonts carries the full JetBrains Mono family. **Palette — complementary (ultraviolet + charged amber-lime):** | Role | Hex | Description | |------|-----|-------------| | Primary background | `#0d0024` | Near-black ultraviolet — absorbs all ambient light | | Primary surface | `#1a0050` | Deep violet — the slab base color | | Slab mid-tone | `#2a0a6b` | Elevated violet for Slab 1 skeleton shimmer start | | Accent shimmer | `#3d1594` | Skeleton shimmer end, hover highlights | | Complementary pop | `#bfff00` | Charged amber-lime — sits at 180° from the violet base, maximum visual contrast without neon toxicity | | Warm secondary pop | `#f0c600` | Softened gold-amber — used for isometric icon warm faces | | Chrome surface | `#c8c0e0` | Desaturated lavender-chrome — for the isometric top faces | | Text | `#ede8ff` | Off-white lavender — warm enough to not burn against the dark field | | Terminal text | `#bfff00` | Same as complementary pop — contact slab monospace text | The complementary pair (`#1a0050` ↔ `#bfff00`) vibrates at the boundary of perception. It is the exact visual frequency of Y2K UI accents — think WinAmp skins, Flash intros — but grounded by the near-black background so it reads as deliberate, not garish. ## Imagery and Motifs **Isometric icons — the primary image language:** Every visual artifact in the site is rendered in isometric pixel art at a consistent 32px grid (each isometric tile is 64×32px at 2x). The isometric system creates a miniature world where every project is a diorama: a tiny server rack for infrastructure work, a circuit board city for software projects, a floating document for writing. The iso tiles are SVG, constructed from three faces — top (`#c8c0e0`), left (`#2a0a6b`), right (`#1a0050`) — with a 1px highlight stroke of `#bfff00` on the top-left lit edge. **Bubble motif — inflated Y2K Aqua surfaces:** The "bubble-playful" motif is expressed through: 1. **Inflated tag chips:** Skill/technology tags are pill-shaped elements with `border-radius: 100px`, a `background: radial-gradient(ellipse at 30% 30%, #3d1594, #1a0050)`, and an inset white highlight at the top-left — the Aqua button effect that defined early 2000s UI. They feel pressurized, like they contain something. 2. **Hover bubble state:** On isometric work cards, hover inflates `border-radius` from 4px to 24px and applies `box-shadow: inset 0 1px 0 rgba(255,255,255,0.25)` — the classic Aqua inner-top-edge gloss. 3. **Loading bubbles:** During skeleton loading, three `#bfff00` bubbles (8px circles) float upward with staggered `animation-delay` — a compact, charming preloader that takes 400ms total. **Chrome-metallic sheen:** The hero slab uses a `conic-gradient` rotating behind the isometric portrait: a slow 3rpm CSS animation on `--gradient-angle` (via `@property`) produces a genuine metallic shimmer without any images. Stops: `#ede8ff 0%, #3d1594 25%, #bfff00 50%, #3d1594 75%, #ede8ff 100%`. This is extremely rare in the registry (chrome-metallic at 3%, animated via @property essentially 0%). **Skeleton loading as a first-class narrative device:** Slab 1 begins in skeleton state intentionally — the shimmer pattern is visible immediately, not as a loading artifact but as a **designed moment of anticipation**. The skeleton resolves (via Intersection Observer) into the isometric work scene over 600ms, each isometric block sliding in from below with a slight spring. This makes the skeleton-loading pattern (3% in registry) a story beat, not a performance fallback. ## Prompts for Implementation Build this as **a single diagonal manifesto scroll** — a page that reads like a professional OS splash screen for a person, not a portfolio website. The implementation must serve the Y2K-futurist fiction at every level. **Diagonal slab system:** Implement slabs using `clip-path: polygon()` on full-width section elements. Each slab's clip path: ``` Slab top-left corner to top-right → 7° angle dip → right side → 7° angle rise → bottom-left ``` Specifically, for a 100vw section: `clip-path: polygon(0 0, 100% 7vw, 100% 100%, 0 calc(100% - 7vw))`. Adjacent slabs overlap by the clip height so there are no gaps. The slabs are not flat — each carries a subtle `background: linear-gradient(160deg, ...)` that suggests depth. **Isometric icon system:** All isometric icons are inline SVG, built from three quadrilateral faces using the standard isometric projection (x-axis 30°, y-axis 90°, z-axis 30° from horizontal). The SVG viewBox is always `0 0 64 80`. Write a tiny JS function `isoFace(x, y, z, w, h, d, colorTop, colorLeft, colorRight)` that returns SVG polygon strings for the three faces. Icons are never rasterized — they stay SVG so they scale and animate cleanly. **Skeleton loading choreography:** ```js const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('resolve'); observer.unobserve(e.target); } }); }, { threshold: 0.3 }); ``` The `.resolve` class triggers a CSS animation that fades the skeleton shimmer (`opacity: 0`) and slides isometric blocks up (`transform: translateY(0)`) from their initial `translateY(32px)` state. Each iso block has a staggered `transition-delay: calc(var(--i) * 80ms)`. **Chrome animation via @property:** ```css @property --shine-angle { syntax: ''; inherits: false; initial-value: 0deg; } .hero-chrome { background: conic-gradient(from var(--shine-angle), #ede8ff 0%, #3d1594 25%, #bfff00 50%, #3d1594 75%, #ede8ff 100%); animation: shine-rotate 20s linear infinite; } @keyframes shine-rotate { to { --shine-angle: 360deg; } } ``` **No CTAs, pricing blocks, testimonials, stat grids, logo bars, or "Get in touch" sections.** The contact slab is a terminal prompt, not a form. There is no footer. The page ends with the blinking cursor. **Narrative arc of the page:** 1. Hero: Who is this person? (identity, name, isometric portrait, chrome sheen) 2. Skeleton reveal: What do they do? (work, resolving from skeleton into iso dioramas) 3. Signal: What do they think? (essays, minimal list) 4. Terminal: How do you reach them? (amber-lime prompt on deep violet, blinking cursor) Each scroll step is a reveal, not a sales beat. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: y2k-futurism, layout: diagonal-sections, typography: bebas-bold, palette: complementary, patterns: skeleton-loading, imagery: isometric-icons, motifs: bubble-playful, tone: authoritative **Differentiators from the registry:** 1. **Diagonal slab layout is structurally distinct from the dominant centered/full-bleed patterns.** At 2% frequency in the registry, diagonal-sections is rare. Combined with the -7° parallelogram clip-path system (not a mere diagonal rule or divider, but entire slab geometries), this creates a reading experience unlike any other site in the collection. The page has no horizontal datum — every zone is tilted. 2. **Skeleton-loading as intentional narrative moment, not performance artifact.** Every other use of skeleton-loading in the registry (3%) treats it as an engineering concern. Here, Slab 1 begins in skeleton state on purpose, with skeleton colors matched to the palette (ultraviolet shimmer, not gray), making it a designed beat. The skeleton is a story beat that resolves into the isometric reveal. 3. **CSS @property animated conic-gradient chrome** — implementing Y2K metallic sheen via pure CSS custom property animation (not a GIF, not a video, not canvas) is essentially absent from the registry. The chrome-metallic pattern appears at 3%, but animated @property conic-gradient for that effect is novel in the set. 4. **Isometric icons as the sole image language** — at 2% in the registry, isometric-icons are rare, and using them as the *only* visual artifact (no photography, no illustrations, no abstract shapes) with a consistent 32px isometric grid across all project cards creates a coherent miniature world system that functions as both imagery and motif. 5. **Avoided patterns from frequency analysis:** No `parallax` (75% overused), no `stagger` (51% overused), no `centered` layout (84% overused), no `warm` palette (88% overused), no `circuit` motif (13% overused), no `authoritative` tone treated as corporate gravity (13% — here authority is expressed through declarative precision, not hierarchy or credentialism).