# Design Language for kkaji.com ## Aesthetics and Tone kkaji.com — the romanization of "까지" (kkaji), the Korean particle meaning *"all the way to"*, *"as far as"*, *"until"*. The site is built around the philosophy of **destinations and limits**: how far does something reach? Until when? To whom? The visual identity is **corporate-whimsical** — a deliberately strange hybrid where the conventions of an annual-report cover meet the playful logic of a children's book about geometry. Imagine a marble lobby in a quiet seaside government building where, at midnight, the statues exchange jokes and the elevator buttons glow lavender. Everything is composed and serious in posture, yet quietly absurd in detail. The mood is **whimsical-creative** crossed with the gravitas of classical European institutions. There is a sea-glass calmness over the entire surface — the colors of Mediterranean morning light passing through stained glass — but every element behaves slightly wrong: form labels giggle when you mistype, the cursor leaves a fading neon trail, the bust of a Roman emperor in the corner blinks once every ninety seconds. This site does not shout. It performs corporate dignity while wearing one mismatched shoe. It is a kind, deadpan host: it invites you in, offers tea, and lets the punchlines reveal themselves slowly across the scroll. Inspirational reference points: the engraved frontispiece of an 18th-century encyclopedia, Wes Anderson's symmetrical interiors, Memphis-era postcards from the Adriatic, the warm hum of a 1990s pastel-blue iMac, and the particular shade of pale cyan fluorescent tube glow you only see through frosted bathroom windows at dawn. ## Layout Motifs and Structure **Primary layout: organic-flow** built upon an invisible **classical 12-column ledger**. The page reads like a flowing pilgrimage from one *kkaji* (limit) to the next. Each section answers a question of distance: *어디까지?* (how far?), *언제까지?* (until when?), *누구까지?* (up to whom?), *어디서부터 어디까지?* (from where to where?). These five questions form five chambers of the page, and the user walks through them as if down a slow colonnade. **Composition rules:** - The page does not snap to a strict grid. Instead, a **river of vertical whitespace** (averaging 18% of viewport width) wanders down the center-left, sometimes widening to 30%, sometimes narrowing to 8%. Content flows around it on either side as if the river is a current of marble veining. This produces an **organic-flow** rhythm without ever becoming chaotic — the river behaves like a slow, dignified meander, never a flood. - Section transitions are marked by **pediment dividers**: thin horizontal SVG lines drawn in the silhouette of a Greek temple roofline, animated with `path-draw-svg` from left to right over 1.8 seconds as each section enters the viewport. The pediments grow shorter and more abstract as the user descends — by the final chamber, they have melted into a single wavy line. - **The Plinth Block** is the recurring atomic unit: a soft-edged rectangle (border-radius 22px on top corners only, 0px on bottom) suggesting a marble pedestal. Each plinth carries one idea, one quote, or one exhibit. Plinths are arranged in deliberately unbalanced pairs — 60/40 splits, sometimes overlapping by 6%, like postcards laid carelessly on a counter. - **Chamber headers** are oversized and centered above the river, but the body text below is asymmetric — left-aligned in odd chambers, right-aligned in even chambers. This creates a slow zigzag breathing pattern down the page. - A **floating compass** sits in the lower-right viewport corner: a small marble disc with a brass-colored needle that always points to the next *kkaji* (limit) below the current scroll position. As the user nears each section, the needle softly trembles (`shake-error` micro-animation, 4-pixel amplitude, decaying over 0.6s) — the only deliberate "error" in an otherwise unflappable layout. - The footer is a **horizon line**: a single horizontal stripe of coastal blend gradient stretching the full viewport width, with a tiny figure (12px tall SVG silhouette of a person carrying a parasol) walking slowly from left to right on a 90-second loop, eventually disappearing into the right edge. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Chamber Titles:** **"Playfair Display"** (900 italic for primary titles, 400 regular for chamber numerals). High-contrast didone with sweeping ball terminals — the typographic equivalent of a marble pediment. Used at clamp(3rem, 7.5vw, 6.25rem). Letter-spacing: -0.025em. Color: #1f2d3d (Ink Slate). Each title sits beneath a hairline (0.5px, #c8a96a Brass Filament) that extends only beneath the descenders, never the full width. - **Sub-display / Pull-quotes:** **"Playfair Display"** (400 italic) at clamp(1.5rem, 2.4vw, 2.1rem). Used for the recurring "kkaji" question prompts. Color shifts from #4a6a82 to #d77a8a on hover with a 700ms cross-fade. - **Body Text:** **"Cormorant Garamond"** (400 regular, 500 italic for emphasis). A delicate, almost feathery serif that pairs with Playfair without competing. Body size: 1.075rem. Line-height: 1.78. Color: #28384a. Tracking: +0.005em. - **Labels / Captions / Metadata:** **"Inter"** (500 weight, all-caps, letter-spacing +0.18em) at 0.72rem. Used for chamber numerals, footnotes, the compass label, and form-field annotations. Color: #6f8aa1. - **Accent Numerals:** **"Cormorant Garamond"** (300 weight) at oversized scales (clamp(8rem, 18vw, 14rem)) used as silent watermarks behind each chamber — Roman numerals I through V — in #e8edf2 with 0.35 opacity, slightly tilted (-3deg), with neon outer-glow shadow. **Palette — "Coastal Blend":** | Role | Hex | Name | |---|---|---| | Background base | `#f4f1ea` | Travertine Cream | | Primary surface | `#e8edf2` | Sea-Glass Mist | | Deep accent | `#1f2d3d` | Ink Slate | | Mid accent | `#4a6a82` | Adriatic Blue | | Soft sky | `#8fb8c9` | Coastal Haze | | Warm coral | `#d77a8a` | Salt-Rose | | Brass detail | `#c8a96a` | Brass Filament | | Whimsy neon | `#7df9ff` | Lagoon Glow (neon-glow accent) | | Whimsy neon 2 | `#ff9ecb` | Bubblegum Phosphor (neon-glow accent) | | Marble shadow | `#cfd6dc` | Vein Shadow | | Body text | `#28384a` | Deep Cuttlefish | The base palette is calm coastal blend — travertine, sea-glass, Adriatic blue. The whimsy is delivered exclusively through **two neon glow tones** (Lagoon Glow and Bubblegum Phosphor) which appear ONLY at specific moments: cursor trails, focus rings on form fields, the moment a plinth enters the viewport, and the trembling compass needle. This contained neon usage keeps the palette dignified at rest and sparkly in motion. ## Imagery and Motifs **Core motif: marble-classical, lit by neon-glow.** 1. **The Five Busts.** Each chamber is presided over by one floating SVG bust drawn in fine line-art (1px stroke, #1f2d3d on cream background) — a stylized classical head representing the chamber's *kkaji* question. The busts are: a youth gazing toward the horizon (어디까지), an old astronomer with an hourglass (언제까지), a magistrate with an open ledger (누구까지), a traveler with sandals untied (어디서부터), and a sleeping cat on a plinth (어디까지나 — "to the very end"). Each bust has one small detail that animates: the youth's hair lifts in a slow wind, the astronomer's hourglass sand drifts, the magistrate's quill scratches once per minute, the traveler's untied sandal lace sways, the cat's tail flicks. 2. **Marble Veining as Connective Tissue.** Across the entire site, faint **veining patterns** (generated SVG, organic curves with 0.08 opacity, #4a6a82 stroke) drift behind the content. These veins are not decorative — they are the river of whitespace made visible at low opacity. They thicken near plinths and dissolve in open areas. On hover over any plinth, the nearest vein brightens to neon (Lagoon Glow #7df9ff) and pulses once. 3. **The Glow Halo.** Around each bust, a soft radial gradient halo (Bubblegum Phosphor → transparent, blur 80px) appears. It is invisible at rest but visible in dim browser conditions or when the viewport is scrolled into that chamber. The halo softly *breathes* — radius oscillates between 180px and 220px on a 6-second sine cycle. 4. **Tremble Markers.** Whenever the user mistypes a form field, hovers a broken link, or attempts an undefined interaction, the affected element executes a **shake-error** animation: 5-cycle horizontal wobble, ±4px amplitude, decaying over 0.55s, accompanied by a momentary salt-rose tint (#d77a8a) that fades back to its base color over 1.2s. Crucially, this same tremble is also used **affectionately** — the compass needle trembles when nearing a *kkaji*, the cat's whiskers tremble when the cursor passes nearby, the parasol-walker in the footer trembles slightly each time it changes direction. Tremble is the site's emotional vocabulary: a small, dignified flinch. 5. **The Coastal Postcards.** Embedded within plinths are small (160px × 100px) "postcard" inserts depicting abstract coastal scenes — three horizontal bands of color (sky / sea / sand) with a single classical column rising from the sand line. Each postcard's column is a slightly different height, like teeth in a smile. They are stamped with a tiny "KKAJI" watermark in Inter caps along the bottom edge. 6. **Pediment Frames.** Quoted text is enclosed by small SVG pediment frames — two columns supporting a triangular roof. The triangular roof rotates very slowly (0.5deg over 12 seconds) and resets, an almost imperceptible breathing motion that gives the page a feeling of being alive without being restless. 7. **The Compass Rose.** A single 64px marble compass disc anchored to the lower-right viewport. Its needle is brass (#c8a96a). Its face is etched with cardinal markings in Inter caps: 어 / 언 / 누 / 까. The needle always points to the user's next destination on the page. ## Prompts for Implementation **Opening Sequence (0–4 seconds):** The page begins on a full-bleed travertine cream backdrop (#f4f1ea). After 250ms, a single horizontal hairline (#c8a96a Brass Filament, 0.5px) draws itself across the viewport at the 38% vertical mark, animating left-to-right over 1.6s with a slight ease-out. As the line completes, the word **까지** appears one stroke at a time above the line in Playfair Display 900 italic at 14vw, in Ink Slate (#1f2d3d). Beneath the line, in Cormorant Garamond 400 italic at 1.4rem: *"as far as the road continues, as long as the light remains."* In the lower-right corner, the marble compass fades in at 80% opacity. Its needle trembles once (shake-error animation, 4px amplitude) and settles pointing downward — toward the first chamber. **Scroll Narrative — Five Chambers:** The page is structured as five *kkaji* questions, walked through in slow procession. - **Chamber I — 어디까지? (how far?):** The youth bust drifts into view from the upper-right at 30% opacity, gradually solidifying. The chamber's text discusses geographic, conceptual, and emotional reach. A coastal postcard insert depicts a thin road vanishing into a horizon. As the user finishes reading and scrolls, the road on the postcard extends by 12 pixels — a tiny visual punchline. - **Chamber II — 언제까지? (until when?):** Background veining slows down. The astronomer bust appears with hourglass. A vertical timeline runs along the right edge: a single brass thread with seven small marble nodules. As the user scrolls, sand from the hourglass drifts into the topmost nodule. The chamber discusses deadlines, deferrals, the soft tyranny of "until." Pediment dividers in this chamber are slightly slumped, as if tired of waiting. - **Chamber III — 누구까지? (up to whom?):** The magistrate bust hovers with an open ledger. A grid of 12 small face silhouettes (different ages, expressions) is arranged in a slightly broken organic-flow pattern. Hovering each face causes it to glow with Bubblegum Phosphor and reveal a single Korean honorific in Inter caps. The chamber meditates on inclusion and limit — who is inside the *kkaji*, who is outside. - **Chamber IV — 어디서부터? (from where?):** The traveler bust appears mid-step. A horizontal line of seven marble milestones runs across the chamber, each labeled with a fragment of a journey ("부터 / 까지 / 부터 / 까지..."). The chamber breaks the vertical reading flow with a brief horizontal-scroll detour: the user can drag left to reveal the journey's beginning, drag right to reveal its end. The cursor inside this chamber leaves a faint Lagoon Glow trail. - **Chamber V — 어디까지나 (to the very end):** The sleeping cat on the plinth. A single line of Cormorant Garamond italic, slowly typed (`typewriter-effect`, 80ms per char): *"끝까지 — 우리가 닿을 수 있는 가장 먼 곳까지."* The background fades into a warmer cream. The compass needle ceases trembling. The page exhales. **Cursor Behavior:** The cursor leaves a 6-trail of small marble dots that decay over 480ms. Within glowing zones (Chambers III and V), the trail picks up neon — Lagoon Glow within III, Bubblegum Phosphor within V. Hovering over busts magnifies the cursor into a small magnifying glass icon (subtle skeuomorphic touch). **Shake-Error as Universal Microinteraction:** Apply shake-error not just to validation errors but to ANY moment of friction, near-miss, or playful nudge: - Form field shakes when empty on submit (with #d77a8a Salt-Rose tint) - Compass needle shakes when scrolling past a chamber boundary - Bust whiskers/hair/quill shakes once when cursor enters its bounding box - Postcard columns shake briefly when scrolling crosses the postcard's center line - Footer parasol-walker shakes parasol when the wind metaphor is invoked in nearby text **Storytelling Bias:** This site is a slow, dignified procession through an almost-untranslatable Korean particle. Every implementation decision should privilege immersion and gentle surprise over conventional CTA flow. Do not include pricing tiers, statistics grids, or feature comparison tables. Avoid hero/features/testimonials structure entirely. Replace any "call to action" with a *kkaji* — an invitation to a destination, framed as a question. **Avoid:** - Centered, hero-dominant layouts (already 92% saturation in the portfolio) - Gradient-heavy backgrounds (96% saturation; we use solid coastal cream with veining) - Mono-typography (93% saturation; we lean Playfair + Cormorant + Inter, no monospace anywhere) - Mysterious-moody tone (94% saturation; we are whimsical-creative and politely cheerful) - Counter-animate numbers, dashboard cards, stat grids, pricing blocks, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Corporate-whimsical hybrid is structurally rare.** The portfolio is dominated by mysterious-moody (94%) and corporate is the most saturated aesthetic (92%) — but corporate **fused with whimsical-creative** (7%) is virtually absent. Most "corporate" sites in the portfolio are stern, blue, gradient-saas. kkaji.com is corporate in posture (marble plinths, classical busts, formal serifs, ledger-grid structure) but whimsical in soul (the cat, the trembling compass, the parasol-walker, the postcard punchlines, the deadpan Korean particle as organizing principle). 2. **shake-error as primary emotional vocabulary.** Across 231 designs, shake-error appears in only 2% — and almost always as form-validation feedback. kkaji.com elevates the tremble into the emotional grammar of the entire site: needles tremble in anticipation, cats' whiskers tremble in greeting, postcards tremble at section boundaries, parasols tremble in imaginary wind. Tremble is no longer error; it is *feeling*. 3. **Coastal-blend palette (2% saturation) executed with neon-glow accents (2% saturation).** Two rare patterns are combined: a calm Mediterranean-morning palette punctuated by precisely two neon glow tones (Lagoon Glow #7df9ff and Bubblegum Phosphor #ff9ecb). Other coastal sites avoid neon; other neon sites avoid coastal. kkaji.com lives in their intersection. 4. **marble-classical motif (1% saturation).** Across 231 designs, only ~2 use marble-classical motifs. Here it is the spine of the entire visual language — pediments, plinths, busts, compass discs, veining as connective tissue. Instead of stock photography or geometric abstracts (the dominant 72% imagery patterns), kkaji.com uses **animated SVG line-art classical busts** as the only figurative imagery. 5. **Five-chamber procession, not a landing page.** No hero section, no features section, no CTA stack, no testimonial carousel. The page is a vertical pilgrimage through five questions of limit, each presided over by a different bust, each ending with a small visual punchline. The user does not "browse" — they walk. 6. **Untranslatable Korean particle as conceptual armature.** The site is built around 까지 (kkaji), a particle that has no clean English equivalent. Other sites in the portfolio use Korean phrases as decoration or branding; here the particle dictates the *structure* of the experience. The whole site is a meditation on a single grammatical idea. 7. **Organic-flow with classical underpinning.** Most organic-flow layouts (16% of portfolio) lean nature-organic, blob, or fluid. kkaji.com's organic flow is derived from **marble veining and classical river-of-whitespace composition** — a more architectural, dignified flow than the typical blob-based organic-flow. 8. **Counter-animate numbers entirely absent.** 91% of the portfolio uses counter-animate. kkaji.com uses zero — no statistics, no growth metrics, no countdowns. Only the trembling, the breathing, the slow walking parasol. **Chosen seed:** aesthetic: corporate, layout: organic-flow, typography: playfair-elegant, palette: coastal-blend, patterns: shake-error, imagery: neon-glow, motifs: marble-classical, tone: whimsical-creative **Avoided saturated patterns from frequency analysis:** centered (92%), gradient (96%), mono (93%), mysterious-moody (94%), counter-animate (91%), warm palette (90%), photography (63%), parallax (68%), stagger (56%). **Embraced rare patterns from frequency analysis:** coastal-blend (2%), shake-error (2%), neon-glow (2%), marble-classical (1%), whimsical-creative (7%), organic-flow (16%).