# Design Language for ipjosim.com ## Aesthetics and Tone ipjosim.com (입조심 — Korean for "watch your mouth," literally "mouth-caution") is a single-page, full-screen confessional cabaret rendered as a **vaporwave opera house at 3:47 AM**. The site exists at the intersection of two impossible ideas: the grandeur of a 1920s Seoul gisaeng salon and the chromatic decay of a 1995 Tokyo karaoke booth lit only by failing fluorescent tubes and a CRT monitor showing static. It is opulent and dangerous, gilded and rotting, intimate and cavernous — a place where words are physical objects, where gossip leaves residue on the velvet, where every careless syllable inflates into a fragile pearlescent bubble that drifts upward and pops against a chandelier of hot-pink neon tubing. The tone is **opulent-grand** but never solemn. There is a knowing wink throughout — the site is aware that it is staging a melodrama about the dangers of loose lips, and it leans into the camp of the metaphor without ever breaking the spell. Imagine if Wong Kar-wai's *In the Mood for Love* had been art-directed by a teenager who had just discovered Macintosh Plus, Patrick Nagel posters, and 1980s shoujo manga panels in the same week. Imagine if a Joseon-era court chamber had been reconstructed inside a Miami arcade circa 1987. Bubbles are everywhere — translucent, iridescent, oily — because spoken words are bubbles: weightless until they touch something, and then catastrophic. The palette resists vaporwave's usual cyan-and-magenta cliché. Instead, it leans into a **dark-neon Joseon nocturne**: obsidian lacquer black as the foundation, with magenta-fuchsia and electric jade as the principal accents, garnished with hot-celadon mint, honey-amber from old cathode-ray glow, and a single recurring shade of pearl-white (the color of a held breath). Nothing is matte. Everything has the faint wet sheen of a vinyl record sleeve under a UV bulb. ## Layout Motifs and Structure **Primary layout: editorial-flow with full-bleed magazine-spread chambers, sequenced as a six-act libretto.** The page is structured as a **vertical operatic libretto** — six acts that scroll in sequence, each occupying ~120vh and behaving like a magazine double-truck spread that has been folded and slipped into the browser. The reading rhythm is editorial, not corporate: long-measure type columns abut full-bleed image plates, drop caps the size of windows, marginalia floating in the gutters, and a recurring pull-quote-as-bubble that breaks the grid like a speech balloon escaping its panel. **The Six Acts (top to bottom):** 1. **Overture — "the held breath"** — Black stage. A single pearl-white bubble, 60vw across, hangs at center. Inside the bubble, the word `입조심` is set in massive Commissioner type, faintly trembling. The bubble's surface ripples with a slow chromatic aberration. No nav bar. Only a tiny vertical column of dots on the right edge — the act indicator. 2. **Act I — "the salon"** — Two-column editorial spread. Left column: a long-measure essay paragraph about the etymology of 입조심, set in elegant serif body type with a hot-magenta drop cap that breathes. Right column: a vertical strip of three flip-cards stacked like postcards on a vanity table. Each card flips on hover to reveal a Korean proverb on the back. Background: a soft jade gradient bleeding into black at the edges, with a faint scan-line texture. 3. **Act II — "the gossip exchange"** — Broken-grid magazine spread. Six asymmetric panels at varying scales (one is half the page, three are postcard-sized, two are tiny stamps). Each panel is a flip-card with a famous historical "loose-lip catastrophe" — Joseon court intrigues, modern political slips, mythological hubris. Bubbles drift across the entire spread, occasionally occluding a panel. The grid intentionally "breaks" — one card hangs off the right edge into the page margin. 4. **Act III — "the chandelier"** — Full-bleed centerpiece. The entire viewport becomes a chandelier of hot-pink neon tubing, hand-drawn in SVG and animated to pulse at the rhythm of a slow exhalation. Bubbles rise from the bottom edge and pop against the tubes with a brief flash of jade. Overlaid, in minimal Commissioner display type, a single line of text: *"every word is a tenant of the air."* No other content. A breath-room moment. 5. **Act IV — "the confession booth"** — Editorial-flow returns. A magazine-style "long read" — a 600-word meditation on speech as architecture. Set as a single flowing column with marginal notes in the gutters. The marginalia are themselves miniature flip-cards. A recurring sidebar shows "what you almost said today" as a bubble counter that gently increments as you scroll, never reaching a final number. 6. **Coda — "the morning after"** — Dawn-pink wash bleeds in from the top. The bubbles deflate. The neon dims to a single hot-magenta filament. Final line, in Commissioner italic at small size: *"the room remembers."* A tiny, tasteful colophon — typeface credits, inspirations, a single gilded `ipjosim.com` mark — sits at the bottom corner like the final page of a slim hardcover. **Grid rules:** - 12-column editorial grid with 24px gutters; columns may merge to form 3-, 4-, 6-, or 8-column blocks. - Each act has its own grid signature — Act I uses 6+6, Act II uses broken asymmetric (4+3+2+3), Act IV uses 8+4 with marginalia in the 4. - Vertical baseline grid of 8px, locked. - No sticky nav. The act-indicator column on the right is the only persistent UI. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Domain Mark / Act Numerals:** **"Commissioner"** (Google Fonts, weights 100, 300, 700, 900 — full variable axis range used). Commissioner is a versatile contemporary humanist sans-serif designed for the United Nations, with subtle calligraphic warmth and an unusually expressive weight axis. Used at clamp(3rem, 9vw, 7.5rem) for the domain mark and act titles, weight 900 with letter-spacing -0.025em. Used at weight 100 for act subtitles at clamp(1rem, 1.6vw, 1.25rem) with letter-spacing 0.32em uppercase — the contrast between the two extremes carries the entire typographic hierarchy. - **Body / Long-Measure Editorial Prose:** **"Fraunces"** (Google Fonts, weights 300, 400 italic, 500). A high-contrast contemporary serif with a soft, almost feminine voice and beautiful italic. Used at 1.0625rem, line-height 1.7, measure of 38em maximum. Italic Fraunces is reserved for the Korean translations and the operatic stage directions. - **Marginalia / Captions / Act Indicator:** **"DM Mono"** (Google Fonts, weight 400). A warm, slightly humanist monospace with rounded terminals that softens the usual clinical mono register. Used at 0.75rem, letter-spacing 0.08em, uppercase for labels. The mono establishes the "editorial annotation" voice without descending into terminal aesthetics. - **Korean characters (입조심, proverbs):** **"Gowun Batang"** (Google Fonts) for serif Korean and **"Gothic A1"** for sans Korean. Both are high-quality Hangul typefaces with proper hinting at large sizes. **Palette — "Joseon Nocturne, Side B":** - `#0A0410` — **Lacquer Black.** Foundation. The color of a courtyard at midnight after rain. Used for the deepest backgrounds and Act I's edges. - `#1B0A2E` — **Velvet Aubergine.** Secondary background, used for Act II's panel borders and the marginalia gutters. Slightly warmer than the lacquer. - `#FF2EA6` — **Magenta Filament.** The primary neon accent. Used for the chandelier tubes, drop caps, the bubble-rim highlight, and the act-indicator dot when active. Glows with a 24px box-shadow at 40% opacity. - `#3DF2C5` — **Electric Jade.** The secondary neon. Used for hover states, the bubble-pop flash, and Korean Hangul highlights. The visual rhyme to the magenta — they appear together at every key moment. - `#86F7CC` — **Hot Celadon Mint.** Tertiary accent, used in soft gradient washes behind Act I and as the chandelier's afterglow. - `#F4C770` — **CRT Honey.** A warm amber, the color of a 1985 Sony Trinitron at half-brightness. Used sparingly for the act numerals and the colophon. - `#F5E9D3` — **Pearl Breath.** The off-white of held breath. Used for body type on dark grounds and for the bubble interior tint. - `#E8B4D9` — **Dawn Mauve.** The single warm pink, used only in the Coda dawn-wash gradient. Gradient rule: all gradients are **conic or radial**, never linear. Linear gradients are forbidden in this design — the bubbles, the chandelier glow, and the dawn-wash all use radial mathematics to feel like light rather than paint. ## Imagery and Motifs **Core Visual Motifs:** 1. **The Bubble (signature element).** Every spoken word in this site is rendered as a soap bubble — a transparent SVG circle with a layered conic-gradient stroke that simulates iridescent oil-slick refraction. Bubbles have three states: rising (0.4 opacity, slow drift, 18s loop), floating (full opacity, gentle bob), and popping (a 220ms scale-and-flash animation to electric jade, then gone). Bubbles are drawn with three concentric circles: outer rim (magenta), iridescent body (conic gradient cycling magenta → jade → mint → honey → magenta), and inner highlight (a small white crescent at 11 o'clock). The bubble is the punctuation mark of the entire site — it appears in headers as the dot of an `i`, as a list-marker, as the period at the end of pull quotes, and as the ambient ornament drifting across every act. 2. **The Neon Chandelier.** A hand-drawn SVG composition resembling a Joseon palace chandelier translated into bent-glass neon tubing. Concentric rings of magenta-filament tubes hang from a central ceiling point, with smaller jade-tube pendants dangling like teardrops. Animated with a slow `pulse-breath` keyframe that varies stroke-width and box-shadow blur in sync. Appears at full scale only in Act III; a miniature version appears as the favicon and in the colophon. 3. **The Speech Bubble Frame.** Flip-cards in Acts I and II use a comic-book speech-balloon outline as their border — a rounded rectangle with a small triangular tail pointing toward the previous panel, drawn in 2px magenta with a faint glow. On flip, the tail rotates with the card, so the card "spins" while keeping its origin connection. 4. **Hangul Architecture.** The Korean character `입` (mouth) is recurringly used as a structural/decorative motif. It appears as: a giant 60vw watermark in the Overture, as the bullet point for proverb lists, and decomposed into its three components (ㅇ, ㅣ, ㅂ) which float as separate bubbles in the Coda before reassembling. 5. **Scan Lines + Grain.** A subtle full-page CRT scanline overlay (1.5px lines at 8% opacity) layered with low-frequency film grain (animated at 24fps). Together they impart the "VHS tape played on a CRT" quality without becoming a heavy-handed retro affectation. The scan lines slowly drift downward at 0.4px per second. 6. **The Velvet Rope.** A thin, hot-magenta hairline rule (1px, with 8px blur glow) appears as a section divider between acts — drawn as a wavering, hand-traced SVG path that animates its `stroke-dasharray` on scroll-into-view, like a rope being tied across a hallway. **Imagery rule:** **No photography whatsoever.** No stock photos, no portraits, no skylines. The site is constructed entirely from SVG geometry, CSS gradients, neon-glow effects, and typography. Every "image" on the page is either a bubble, a Hangul character, a chandelier, or a speech-balloon outline. This is a rule, not a guideline. ## Prompts for Implementation **Full-Screen Operatic Libretto (HTML structure):** Build a single `index.html` with six `
` elements, each at `min-height: 120vh; width: 100vw`. No traditional nav bar; instead, a fixed `