# Design Language for ipjosim.com ## Aesthetics and Tone ipjosim.com is **a chubby marble statue of a Greek orator that has just been told, kindly, to keep its voice down** — and decided to take the advice as a compliment. The word *ipjosim* (입조심, Korean: "mind your mouth," "be careful what you say") is treated here not as a scolding but as a warm life skill, the way an aunt who loves you teaches you to think before you speak. So the whole site is built around a single image: **a soft, inflated, balloon-rendered classical bust — pillow-plump cheeks, glossy plastic-marble skin, a finger raised gently to puffy lips** — sitting in a sunbeam, glowing, friendly, completely un-intimidating. The controlling aesthetic is **inflated-3d** (only 3% in the registry — claimed in full and made the literal protagonist). Everything that would normally be hard and Hellenic — the Doric column, the laurel wreath, the carved scroll, the Corinthian capital — is reinterpreted as if it were *blown up out of warm latex and lit by a softbox*: rounded corners on the column flutes, pillowy chamfers on the cornice, a slight squash-and-stretch wobble in the lettering, fat highlight blooms where a hard edge used to be. It is marble that you could hug. The light source is **retro-futuristic**: not modern minimalist white, but the optimistic Tomorrowland glow of a 1979 album cover — peachy coral, electric teal, chrome-gold, and a deep midnight that the lens flare cuts straight through. Imagine the cover of a forgotten ELO record where the orchestra is replaced by a smiling marble head. The mood is **approachable-casual** (only 4% in the registry): the copy talks to you like a friend ("hey — before you hit send..."), the headline kerning breathes, nothing is shouted, and the one piece of "advice" the site gives is delivered as a soft whisper that you have to lean toward, not a banner you can't escape. Tonal anchors, in order of loudness (quiet → quieter): 1. A puffy marble bust, finger to lips, lit like a perfume bottle. 2. A warm beam of late-afternoon sun, full of dust and a single rainbow lens flare. 3. Type that wobbles a half-degree, like it's breathing. 4. A whisper of text that draws itself letter by letter when you slow down and scroll gently. ## Layout Motifs and Structure The structural commitment is **broken-grid** (only 5% in the registry — claimed deliberately) executed as a **toppled colonnade**: imagine a row of seven inflated marble columns that were *meant* to stand in a perfect Vitruvian line, but someone leaned on one and the whole row slumped into a gentle, friendly diagonal. Content blocks sit on those tilted column-tops. Nothing is centered the way you expect; everything is offset by a column-width, rotated 1–4 degrees, and overlaps its neighbor by the width of a fat highlight. The page reads as a **fallen-but-comfy temple**, not a dashboard. Concrete structure (single long scroll, full-bleed, ~5 "rooms"): - **Room 1 — The Sunbeam.** Off-center to the left: the big puffy marble bust, finger to lips, three-quarter view, occupying ~45% of the viewport width and bleeding off the top. To the right and lower, on a tilted column-capital, the wordmark *ipjosim* set huge and condensed. A single anamorphic lens flare streaks diagonally from upper-right to lower-left, passing *behind* the bust's shoulder and *in front of* the wordmark — the flare is the only thing on the page that respects a straight line. No nav bar in the conventional sense; instead three small puffy laurel-leaf glyphs float at the top-right, each a soft anchor link. - **Room 2 — The Whisper.** The grid breaks hardest here: a column of text set against a near-empty midnight field, the lines staggered rightward like steps, each line a fragment of the same gentle thought ("words are easy to say / hard to un-say / so — / hold them a second longer"). The text draws itself in as you scroll, letter by letter, like breath fogging glass. A single tilted column lies horizontally across the bottom of this room like a fallen bench. - **Room 3 — The Three Reminders.** Three puffy marble cards (a scroll, a wreath, a small closed mouth) arranged on a broken 2-1 grid: two cards high-left, one card low-right, all rotated differently, overlapping by their glossy edges. Each card, on hover, *inflates* a little more (spring scale) and lets a tiny lens-flare spark cross its surface. The copy is casual, three short kindnesses, not "features." - **Room 4 — The Colonnade.** A horizontal-ish band of the seven inflated columns themselves, in their toppled diagonal, with light raking across them; this is the most "marble-classical" room and the most purely decorative — text is minimal, just a soft caption. - **Room 5 — The Threshold.** A puffy marble doorway/arch, slightly squashed, framing a single line of warm sign-off text and one small soft button shaped like a rounded laurel leaf ("okay — go gently"). The lens flare resolves here into a calm, centered bloom, like the sun finally dropping behind the temple. Footer is two whisper-small lines. Spatial rules: - Baseline grid is **12 columns but used wrong on purpose**: content never spans a "tidy" 4/4/4 or 6/6; it spans 5+4 with a column of overlap, or 7 offset by 2, etc. - Every block carries a `--tilt` custom property between `-4deg` and `+3deg`; nothing is at `0deg` except the lens flare and the final button. - Vertical rhythm is loose and generous — this is a slow site, lots of warm empty space, the opposite of a stat-grid. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available on Google Fonts:** - **`Archivo Expanded`** — no wait — the principal display face is **`Bricolage Grotesque`** for the wordmark *only when bold*, BUT the controlling typographic commitment is **condensed** (only 15% in the registry), so the workhorse display face is **`Oswald`** (Google Fonts, variable weight 200–700). *Oswald* is the spine of the site: tall, narrow, confident-but-friendly, used for the giant wordmark *ipjosim* (weight 600, letter-spacing slightly positive so the condensed letters can breathe), all room headlines, and the whisper-text in Room 2. Oswald's narrowness lets the headlines run *long and unbroken* across the tilted column-tops, reinforcing the toppled-colonnade feel — a wide font would have to wrap and break the gag. - **`Big Shoulders Display`** (Google Fonts) — a second, even more aggressively condensed display face, used sparingly for the single largest hero numeral/letterform moment and for the room labels (tiny, tracked-out caps). It's the "inflated" cousin: when set very large with a fat text-shadow it reads almost like a balloon letter. - **`Fraunces`** (Google Fonts, variable, with the "soft" / low-contrast optical settings and a touch of italic) — the *humane* counter-voice. All body copy, the casual second-person sentences, the kindnesses in Room 3, the sign-off. Fraunces' wonky, slightly wobbly soft serifs are doing the "approachable-casual" work — they keep the marble from feeling cold. Used at comfortable 18–20px, generous 1.7 line-height, never justified. - **`Spline Sans Mono`** (Google Fonts) — for the two whisper-small footer lines and any captions; just a quiet, rounded mono so it doesn't fight Fraunces. Type behavior: - The wordmark and headlines have a barely-perceptible `breathe` animation: `transform: scale(1, 1.012)` oscillating over ~6s, so the condensed letters look softly inflated and alive. - On hover over a headline, individual glyphs do a tiny spring squash (scaleY 0.94 → 1.0 with overshoot), like poking a balloon. - Whisper-text draws in via clip-path / per-letter opacity as it scrolls into view. **Palette — "retro-futuristic" (only 4% in the registry), 8 colors, warm-leaning, gradient-friendly:** - `#FF8E6E` — **Coral Sunbeam** — the warm key light; the dominant accent, used on the bust's lit side, the laurel glyphs, and link underlines. - `#FFD25A` — **Chrome Gold** — the highlight bloom color; fat specular highlights on every inflated surface, the lens-flare core. - `#2BD4C8` — **Tomorrow Teal** — the cool fill light; the shadowed side of the marble, the column flutes, the secondary headline color. - `#7C5CFF` — **Synth Violet** — the deep-shadow accent and the lens-flare's chromatic-aberration fringe; used in tiny doses inside gradients. - `#FFF3E2` — **Warm Plaster** — the primary "paper" / background-light tone for the bright rooms; not white, never white. - `#FBE9D2` — **Sun-Bleached Marble** — the bust's mid-tone body color, slightly pinker than the plaster. - `#171231` — **Midnight Atrium** — the deep background for Room 2 (the whisper) and Room 5's pre-bloom; a navy-violet, not black. - `#0B0820` — **Temple Floor** — the deepest value, used only for the very bottom edge gradient and the inside of the marble's mouth. Gradient recipes (used liberally — gradient is 97% in the registry, so it's expected, but here it's always *warm* and *radial*): - Inflated-surface shader: radial-gradient from `#FFD25A` (top-left highlight) → `#FBE9D2` (body) → `#2BD4C8` (terminator) → `#7C5CFF` (deep core shadow), with a hard-ish `#FFFFFF` 6% rim where the balloon would catch the light. - Sky/atmosphere: linear-gradient `#171231` → `#7C5CFF` → `#FF8E6E` → `#FFD25A`, used behind the colonnade like a synthwave sunset turned down to a murmur. - Lens-flare: layered radial-gradients in `#FFD25A` and `#FFF3E2` at low opacity, plus a thin `#7C5CFF`/`#2BD4C8` chromatic ring offset by 1–2px. ## Imagery and Motifs **Zero photography (98% in the registry — its exclusion is a deliberate deviation), zero stock, zero 3D-render asset files, zero icon fonts.** Everything is built from CSS gradients, SVG, and a small amount of canvas/CSS for the flare. Four motif families: **1. The Inflated Marble Bust (aesthetic: inflated-3d, the protagonist).** A classical orator's head-and-shoulders, but rendered as a *balloon*: built from layered SVG ellipses and `` shapes filled with the inflated-surface radial gradient, plus 2–3 stacked `filter: blur()` highlight blobs for the glossy bloom and a soft `drop-shadow` for the pillowy occlusion shadow. Cheeks deliberately over-round. One puffy hand, index finger raised, resting against pursed lips — the universal "shh," but warm. The bust has a slow idle: a 0.5-degree head-tilt sway and a faint highlight drift, driven by `requestAnimationFrame` and gently following the cursor (cursor-follow at 88% in the registry — used, but at a whisper). It never looks at you head-on; always a friendly three-quarter. **2. Marble-Classical Architecture, Inflated (motifs: marble-classical, only 6% in the registry — claimed).** Seven Doric-ish columns with *rounded* flutes and a pillowy entablature; a Corinthian capital that looks like a soft serving of acanthus-shaped marshmallows; laurel wreaths whose leaves are fat little teardrops; a partial pediment; a couple of scattered "fallen" column drums acting as benches/cards. All in SVG, all sharing the marble gradient and a faint `feTurbulence` veining at very low opacity so it reads as stone, not plastic — the tension between "stone" texture and "balloon" form is the whole joke. The colonnade in Room 4 has a long raking `linear-gradient` of light across all seven columns. **3. The Lens Flare (imagery: lens-flare, only 8% in the registry — claimed and made structural).** A single anamorphic flare — the long horizontal streak plus a chain of soft hexagonal/circular ghosts marching diagonally across the composition — implemented as a fixed-position layer of radial- and linear-gradients with `mix-blend-mode: screen`, plus a thin offset chromatic ring for the retro-futuristic shimmer. It is the *only straight line on the site*, and it moves: as you scroll, the flare's origin tracks slowly from upper-right toward center, "setting" by Room 5 into a calm centered bloom. On the hero, the flare passes physically *behind* the bust's shoulder and *in front of* the wordmark via z-index layering, so it feels like real lens glare, not a sticker. **4. The Whisper Glyphs.** Tiny decorative marks scattered in the negative space: three or four laurel-leaf bullets (puffy teardrops), a couple of soft "speech-bubble-with-its-mouth-zipped" icons (a rounded rect with a zipper of dots across the opening), and faint dotted "breath" lines that draw themselves (path-draw-svg at 28% in the registry — used). These are nav anchors and section markers, never loud. ## Prompts for Implementation Build ipjosim.com as **one HTML document, one CSS file, and one ES module (`ipjosim.js`)** — no image files, no icon fonts, no Lottie, no WebGL, no video. Google Fonts CDN only for **Oswald**, **Big Shoulders Display**, **Fraunces**, and **Spline Sans Mono**. The marble bust, the columns, the wreaths, and all glyphs are inline SVG. The lens flare is a stack of CSS gradient layers in a single fixed `
` with `mix-blend-mode: screen`. The "physics" is one `requestAnimationFrame` loop doing three cheap things: (a) easing the bust's head-tilt and highlight toward the cursor, (b) easing the lens-flare origin toward a target that's a function of `scrollY`, (c) advancing the slow `breathe` scale on the wordmark. An `IntersectionObserver` triggers the per-letter draw-in of the whisper-text and the spring-inflate of the Room 3 cards. On mobile, swap cursor-follow for a gentle `deviceorientation` parallax on the bust, and let the flare drift on a slow autonomous timer. Storytelling spine (the page is a short, kind monologue, not a pitch): 1. **You arrive in a sunbeam** — the puffy marble orator is there, finger to lips, glowing, a rainbow flare cutting across. The huge condensed wordmark *ipjosim* sits on a tilted column. It feels like walking into a warm, half-ruined temple at golden hour and finding it... cozy. 2. **You scroll, and it whispers** — Room 2: the grid steps sideways, the midnight field opens up, and a soft thought draws itself out one letter at a time, the way you'd actually murmur advice to someone you like: *words are easy to say / hard to un-say / so — / hold them a second longer.* The reader has to slow down to read it; that slowing-down *is* the message. 3. **Three small kindnesses** — Room 3: not "features," just three gentle reminders on puffy overlapping cards (a scroll = "you can always say it later," a wreath = "kind words age well," a zipped-mouth = "silence is also an answer"). Hover inflates them; a flare-spark crosses each. 4. **The colonnade breathes** — Room 4: a quiet, almost wordless room — just the seven toppled inflated columns, raking light, and a soft caption. A visual exhale. 5. **You leave gently** — Room 5: a squashed marble archway frames a warm sign-off; the flare resolves into a calm centered bloom like the sun setting behind the temple; one small rounded-laurel button: *okay — go gently.* Two whisper-small footer lines. No newsletter, no signup wall, no contact form, no pricing. Animation & feel notes: - **spring** (86% in the registry — expected, used as the core motion grammar): every interactive transform uses a slight-overshoot spring (`cubic-bezier(.34,1.56,.64,1)` or a JS spring) — card inflate, glyph squash, button press. Nothing eases linearly; everything has a tiny bounce, like poking something soft. - The bust's idle sway is ~0.5deg, ~6s period — sub-conscious, never distracting. - The lens flare's chromatic ring offset is animated ±1px on a slow sine — a retro-futuristic shimmer. - Headlines `breathe` at scale(1, 1.012) over ~6s; on hover, individual glyphs spring-squash. - Reduced-motion: freeze the flare into a static tasteful bloom, stop the breathing, keep the per-letter whisper but reveal it instantly, drop the cursor-follow. **AVOID:** no CTA-stacks, no pricing tables, no stat/metric grids, no testimonial carousels, no feature-comparison tables, no "as seen in" logo bars, no cookie-style modal nags. The site sells nothing and asks for nothing — it just gives one small, warm piece of advice and lets you go. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused vocabulary surfaced by frequency analysis: 1. **Inflated-3d as warm classical statuary, not as glossy product render or Y2K blob.** Inflated-3d sits at only 3% in the registry, and where it appears elsewhere it tends toward bouncy candy mascots or shiny SaaS blobs. ipjosim.com instead inflates *a Greek orator's marble bust and a Doric colonnade* — the collision of "stone, ancient, severe" with "balloon, soft, huggable" is the entire concept, and it's executed in pure SVG + CSS gradients with `feTurbulence` veining so it still reads as stone. 2. **The lens flare is the only straight line and it's load-bearing.** Lens-flare (8%) is usually a decorative overlay sprinkle here; on ipjosim.com it's a structural, scroll-reactive element that physically layers behind/in front of objects and "sets" like a sun by Room 5 — narrative lighting, not garnish. Combined with the **broken-grid** (5%) toppled-colonnade layout, the page deliberately has *one* axis of order (the flare) inside a world of friendly tilt. 3. **A site that gives advice and asks for nothing.** Against a registry where CTA-heavy, stat-grid, pricing-block layouts dominate, ipjosim.com is a five-room monologue with zero conversion mechanics — its "feature section" is three gentle reminders, its "hero" is a statue telling you *shh*, and its footer is a whisper. The **approachable-casual** tone (4%) and **condensed** Oswald/Big-Shoulders typography (15%) are tuned to make the advice "mind your words" feel like a kindness, not a rule. 4. **Retro-futuristic warmth, not synthwave neon clichés.** Retro-futuristic palette (4%): instead of the usual purple-pink-grid-laser treatment, the colors are a *peachy 1979-album-cover sunset* — Coral Sunbeam, Chrome Gold, Tomorrow Teal over Warm Plaster and Midnight Atrium — and the only "screen"-blended glow on the page is the single anamorphic flare. Avoided patterns from frequency analysis: no hand-drawn aesthetic (96%), no glassmorphism (69%), no photography (98%), no terminal/mono-typewriter dev styling, no card-grid-as-skeleton, no dashboard/sidebar chrome, no editorial-magazine spread. Claimed underused tokens, in full: **inflated-3d (3%)**, **broken-grid (5%)**, **marble-classical (6%)**, **lens-flare (8%)**, **retro-futuristic palette (4%)**, **approachable-casual tone (4%)**, **condensed type (15%)** — with **spring** (86%) accepted as the deliberate motion grammar binding it all together. Documented chosen seed: *aesthetic: inflated-3d, layout: broken-grid, typography: condensed, palette: retro-futuristic, patterns: spring, imagery: lens-flare, motifs: marble-classical, tone: approachable-casual* — assigned by the orchestrator, claimed in full, with **inflated-3d (3%)** elevated to be the literal protagonist (a balloon-rendered marble orator) and **lens-flare (8%)** promoted from decoration to the one structural axis of order in an otherwise gently-toppled world.