# Design Language for ggaji.com ## Aesthetics and Tone ggaji.com is **a private, candle-lit jewel-cabinet in a marble alcove of a 19th-century Seoul nobleman's sarangchae, photographed through a sheet of frosted Joseon hanji paper that has been very lightly oiled** — and the whole image is then re-pressed gently into wet marble until the marble becomes the screen. The Korean word *gaji* (가지) means *branch* — a stem that diverges, a kind, a sort, a single offshoot of a greater taxonomy — and this site treats the user as a candle-bearer walking through a darkened *ojakgyo* (five-magpie cabinet) of jeweled drawers, each drawer one *gaji*, one branch, one kind. Pull a drawer open and the velvet interior breathes a slow purple-green-amber light at you. The site is a soft-pressed neomorphic alcove — every surface is a single continuous warm-marble plane, and every interactive element is *embossed up out of the marble or debossed down into it*, lit from a single candle at the upper-left at roughly 11 o'clock, with the candle visibly burning and visibly dimming the page when it gutters. The tone commits unreservedly to **opulent-grand** (only 5% in the corpus, claimed against the 27% warm-inviting and 34% pastoral-romantic majority). This is not warm-inviting and it is not pastoral. This is the slow, expensive, deliberate quiet of a private collector showing you a single Joseon white-porcelain *baekja* moon-jar by a single beeswax taper, and saying nothing — no headline announces, no CTA implores, no badge testifies. The page is calm, deep, ceremonial, and unhurried, and it is rendered from the conviction that the user is here on purpose, has time, and deserves jewels and quiet. The mood-references are: a 1996 Sotheby's evening-sale Asian Art catalogue cover (deep aubergine cloth, gold foil-stamp, single hairline rule), a Nan Goldin candle-still life from 1986 with its sticky amber halation, the Hoam Museum of Art's *Joseon Royal Court Treasures* gallery at low dusk lighting, a James Turrell *Aten Reign* afterglow but cropped to the size of a jewel, and the soft-edged interior shadows of a Christofle silver-vault drawer. The user should feel that opening the page is the act of asking a museum curator, in private, to slide a velvet tray out of a cabinet for them. ## Layout Motifs and Structure The structural commitment is **minimal-navigation** (6% in the corpus, claimed) executed as **a single soft-marble alcove with no nav bar, no hamburger, no menu, and no breadcrumbs at all** — only the candle in the upper-left, which *is* the navigation. Click the candle and a vertical column of seven jeweled drawers slides out from the left margin, each drawer labeled in oversized hairline display type with one *gaji* (one branch). Click a drawer and it opens in place; click the candle again and the drawers retract into the marble and the alcove returns to silence. There is no other persistent UI. No footer chrome, no social bar, no language switcher in a corner — the language switcher is itself one of the seven drawers (*gaji 七: 言語*). The page is composed as **one full-bleed marble alcove** (full-bleed at 93% in the corpus, but the implementation is unusual — the marble is not a hero photo, it is the entire substrate of every section, never broken) carrying **seven debossed cartouches stacked vertically with very generous Korean *yeobaek* (余白, negative space) of 38vh between cartouches**. Each cartouche is one *gaji*. Each cartouche is debossed (pressed into the marble) when at rest — the user reads its title in oversized hairline display type that sits *inside* the depression with a soft inner shadow. As the user scrolls a cartouche to the vertical center of the viewport, a slow 1.4-second transition embosses it *up out* of the marble (neomorphic raise: outer shadow lower-right, outer highlight upper-left, both very soft, both very pale, sigma 18px), and a single jewel-toned candle-flame-shaped backlight blooms from behind the cartouche at 12% opacity. As the cartouche scrolls past center, it presses back down into the marble and dims. Only one cartouche is ever raised at a time. This is the principal scroll grammar of the site. Inside each raised cartouche, the content is laid as **a single-column centered tablet** with a maximum measure of 38ch — enough for one paragraph of body text, one specimen image, and one inset jewel-drawer that opens on click with **blur-focus** (6% in the corpus, claimed) shifting the rest of the page out of focus to a `backdrop-filter: blur(14px)` while the drawer interior comes forward in sharp relief, lit by an intensified candle. The blur is non-trivial — it has chromatic aberration of 1.5px, a slight warm tint shift, and a 9% film-grain overlay so the out-of-focus marble looks like it is being seen *through tears or candle-smoke*, not through a Gaussian filter. The blur is the entire affordance for "this is not what you are looking at right now." There are exactly seven cartouches, and they correspond to the seven *gaji* the site presents — a deliberate cap. There is no pagination, no infinite scroll, no "load more." When the user reaches the seventh cartouche, the page ends in a **single oversized seal** debossed into the marble at the bottom — a circular intaglio of the *ggaji* wordmark in jewel-tone enamel, with the candle flame visible to its upper-left as a small glowing reflection in the polished marble. The seal does not link anywhere. It simply ends the document. This is the inverse of CTA-driven layout, and it is the structural argument of the site. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Cormorant SC`** (Small Caps, weights 300/400/500) — the principal **oversized-display** face (only 3% in the corpus, actively claimed). Cormorant is Christian Thalmann's revival of Claude Garamont's 16th-century Parisian roman, expanded for this site into the Small-Caps cut and rendered at extreme display sizes (cartouche titles at 11.4vw, the masthead *ggaji* wordmark at 18vw on first paint, decaying to 4.8vw after the candle is first clicked). Cormorant SC has the high contrast, narrow apertures, and tall horizontal-stress small-caps glyphs that read on marble like *deeply incised intaglio*. Letter-spacing is opened to +0.18em at display sizes so each capital sits in its own small alcove of *yeobaek*. Hairline strokes (the thinnest verticals in the lowercase) are explicitly kept — they should look like *they could be scratched by a fingernail*, which is the visual semantics of *fragile incision into stone*. - **`Noto Serif KR`** (weights 200/400/600) — the Korean serif companion, used for all Hangul body type, all *gaji* labels in their original Korean form, and the wordmark's optional vertical-set Hangul rendering 가지. Noto Serif KR's *Myeongjo*-style high-contrast serifs sit harmoniously with Cormorant's display contrast — their stroke endings rhyme. Used at 1.05rem for body, 2.4rem for inline Hangul callouts, and at 6vw for the vertical-set Hangul wordmark on the about-the-name cartouche. - **`Cormorant Garamond Italic`** (weight 300/400 italic) — used for the curatorial annotations, the museum-cartel-style specimen captions, and the single-line italic dedication that appears under each opened jewel drawer. Italic Cormorant is the closest a free font comes to the swooping copperplate of a Sotheby's catalogue cartel. - **`IBM Plex Mono`** (weight 300, used very sparingly, in three places only) — for the artifact catalog numbers (e.g. *gaji.001 / 七種之一*) that appear in the lower-right of each opened jewel drawer at 0.72rem with letter-spacing +0.24em. Mono is at 94% in the corpus — its near-total absence on this site is intentional. Three occurrences only. **Palette — jewel-tones (3% in the corpus, actively claimed) on a warm-marble substrate:** The base substrate is *not* a flat warm — it is **a real two-tone marble** generated as a CSS gradient field plus a tiling SVG noise of veining. The marble is named here as `--marble-base` and `--marble-vein`, but it is rendered as a continuous field, never as a tile. - `--marble-base: #F4EDE0` — the dominant marble cream, a Carrara-warm with a faint pink under-key. This is the *dominant* color of the page (~62% of pixels). - `--marble-vein: #E8DCC4` — the secondary marble pour, used for the slow vein channels. - `--marble-shadow-deep: #C9B89A` — the cool-warm shadow inside debossed cartouches. - `--marble-shadow-soft: #DCCDB3` — the secondary inner shadow at lower contrast, for the soft neomorphic transitions. Six **jewels**, each used for exactly one of the seven cartouches plus the seal (with one cartouche sharing the deepest amethyst with the seal, on purpose, to bind the document closed): - `--amethyst: #5B2A7A` — deep regalian purple, the principal jewel; used for *gaji 一* (the heritage / origin cartouche) and for the closing seal. - `--emerald: #1F5C47` — Joseon-court jade-green, used for *gaji 二* (the kind-and-classification cartouche). - `--ruby: #7A1F2D` — deep oxblood ruby, used for *gaji 三* (the lineage cartouche). - `--sapphire: #1A2F5C` — midnight sapphire, used for *gaji 四* (the contemplation cartouche). - `--topaz: #B58A2E` — imperial topaz, used for *gaji 五* (the inheritance cartouche). - `--garnet: #6B2D3F` — almandine garnet, used for *gaji 六* (the silence cartouche). - `--amber: #B5701A` — beeswax-candle amber, used for *gaji 七* (the language cartouche) AND as the candle-flame source color throughout. Each jewel is rendered exclusively as a **soft inner glow inside the raised cartouche**, never as a flat fill. The cartouche surface itself remains marble-cream — the jewel only *suffuses up through the marble from below*, the way an amethyst on the underside of a thin alabaster tile would. Saturation never exceeds 38% at any single pixel, because **opulence is not loud**. The candle's amber spills slightly across all six jewels at 8% opacity, unifying them as one room. ## Imagery and Motifs **Photography is at 0% on this site** (against 99% in the corpus — the largest deliberate deviation). There are no photos, no stock, no Unsplash, no portraits, no product shots. There is also no 3D, no video, no Lottie, and no canvas-particle library. Every visual element is generated from CSS, SVG, or two small PNG textures. The visual world is built from four motif families: **1. Marble-texture (3% in the corpus, claimed) as the universal substrate.** The marble is a layered composite: (a) a CSS radial gradient with the candle's warm at the upper-left and a cool drift toward lower-right; (b) a single tiling 1024×1024 SVG of generated veining (procedural Perlin-curve veins in `--marble-vein` and `--marble-shadow-soft`, hand-tuned in three sigma layers to look like Calacatta Oro, not the cliché Carrara); (c) a 0.6-opacity grain-overlay from a 256×256 PNG to give the marble its slightly powdery interior reflectance; (d) a single very large soft radial vignette that follows the candle's animated flicker at the upper-left, breathing the marble brighter and dimmer with the flame's amber. The marble is never flat. When the user moves the cursor, a very faint highlight follows the cursor by 360ms with a heavy ease-out, as if a candle were being held in the hand and tilted — but this is a single second highlight, not a cursor-follow particle effect. **2. Candle-atmospheric (6% in the corpus, claimed) as the only light source.** The candle lives in the upper-left of the viewport at fixed position (4vw, 6vh) and is a single inline SVG of a beeswax taper, hand-drawn as four paths: the column (warm cream gradient), the flame (a teardrop with radial amber-to-white gradient and a 6% inner core of `--amber`), the wick (a tiny dark vertical), and a very soft dropped halo that drifts onto the marble at 14% opacity. The flame is animated — not as a generic loop, but as a **2.6-second hand-keyed flicker cycle** with three sub-cycles: a slow 2.6s sway in flame-tilt (±3°), a faster 0.7s wobble in flame-height (94%–106%), and an irregular gutter every 11–17 seconds where the flame briefly drops to 60% height for 280ms and the entire page's vignette dims by 8% in sync. The candle visibly burns down very slowly across a session — the column shortens by 1px every 90 seconds of dwell time, and the wax drips on the marble accumulate as small SVG paths near the candle's base, persistent until reload. After 30 minutes of dwell the candle is visibly half-melted. This is the only "stat" the page tracks. **3. Jewel-cabinet drawers as the only product element.** When a cartouche is raised and clicked, a **debossed velvet drawer slides out of its lower edge** with a 1.6-second cubic-bezier motion and reveals a single jeweled object on a velvet bed. The drawer interior is **deep `--amethyst`** (or whichever jewel the cartouche is keyed to) rendered with a tiny SVG velvet-pile texture (a 64×64 procedural cross-hatch) and a soft inner shadow that mimics the way velvet eats candle-light. On the velvet bed sits the *gaji's specimen* — a hand-composed SVG of a Joseon-era jeweled object: a *binyeo* hairpin (gaji 一), a celadon teabowl glyph (gaji 二), a brass *norigae* knot (gaji 三), a folded *bojagi* wrapping cloth (gaji 四), an old brass key (gaji 五), a single white moon-jar in cross-section (gaji 六), and a *jindo* manuscript page with hangul characters (gaji 七). Each specimen is hand-drawn with the marble palette plus its own jewel hue, never rendered, never photographed. Each specimen has a slow 8s breathing animation (1.5% scale, 1° rotation) keyed off the candle's flicker so they share the candle's "alive" tempo. **4. Korean classical micro-typography motifs.** The seven cartouches are numbered with Hanja numerals (一 二 三 四 五 六 七) at 1.8rem in `--marble-shadow-deep`, set in a tiny embossed cartouche of their own to the *upper-right* of each main cartouche. The wordmark *ggaji* is offered in three orientations on the masthead: roman *ggaji.* (Cormorant SC at 18vw), vertical Hangul 가지 (Noto Serif KR Light at 14vw, ko-vertical writing-mode), and tiny Hanja 種 ("kind / sort / branch") at 2vw nestled into the period. The trio is composed as a **single inscription-stone arrangement** — *roman large, hangul vertical-mid, hanja small* — and this triglyph is the only logo treatment used on the site. There are zero icons of the Material/Feather/Lucide variety. There is no chart, no graph, no data-viz. There is no avatar. There is no badge. The page consists entirely of marble, candle, jewels, drawers, oversized inscriptions, and silence between them. ## Prompts for Implementation **Build ggaji.com as one HTML document, one CSS file, one ES module, and four small asset files: `marble-veins.svg` (the tiling 1024×1024 marble-vein layer, ~38kb), `marble-grain.png` (256×256 tiling fine-grain noise, ~22kb), `candle.svg` (the inline candle but also exported as an asset for prefetch, ~6kb), and `jewels.svg` (a single combined SVG sprite containing the seven jewel-cabinet specimens with `` elements, ~52kb).** Total assets under 140kb. No framework. No bundler. No analytics. No CDN beyond Google Fonts. No service worker. No webfont self-host. No Lottie. No canvas. No video. Use `prefers-reduced-motion` honestly: when set, the candle still flickers but the cartouche raise/lower transitions become 80ms fades, the breathing on jewels stops, and the cursor-follow highlight is disabled. The blur-focus on opened drawers remains in all conditions because it is structural, not decorative. The site must read as **a single ceremonial scroll through a candle-lit cabinet of seven jewels, narrated only by yeobaek and incision**. Bias every implementation decision toward *unhurried*, *cohesive* and *quiet*. There is no announcement banner. There is no marketing copy. There is no testimonial slab. There is no pricing table, no stat-grid, no client-logo bar, no FAQ, no "as seen in." This is the inverse of a CTA page. **The CTA-counter is zero, on purpose.** The button-counter is also zero — the candle is not a button (it is a candle), and the cartouches are not buttons (they are inscriptions on marble that happen to respond to scroll). The only click-targets on the entire page are: the candle (toggles the seven-drawer column), the seven cartouches (open the jewel-drawer in place), and the jewel-drawer interior (close on click-out). Three click-target archetypes, period. The neomorphism (3% in the corpus) is implemented strictly: every embossed/debossed transition uses the **paired-shadow technique** — `box-shadow: inset 1px 1px 3px var(--marble-shadow-deep), inset -1px -1px 3px #FBF6EB` for debossed at rest, and `box-shadow: 6px 8px 24px var(--marble-shadow-deep), -4px -6px 18px #FBF6EB` for embossed. Crucially, **the shadow color is never gray-black** — it is always `--marble-shadow-deep`, the warm cool-marble shadow, because this is marble, not plastic. This single decision is what separates this neomorphism from the 2020 dribbble cliche of soft-UI white plastic. Marble has a warm shadow. Plastic does not. The candle is the application clock. Every animation in the document is driven from one single shared timeline that the candle's flicker keys off. There is no `setInterval`, there are no separate `requestAnimationFrame` loops — there is one rAF that updates a `--candle-phase` CSS custom property in `[0..1]` cycling at 2.6s, and every other animation (cartouche breathing, jewel breathing, vignette pulse, highlight drift) is a CSS transform driven off `--candle-phase`. The single-shared-timeline is the architectural commitment that lets the document feel alive *as one room*, not as a stack of independent micro-animations. The scroll grammar is implemented as an `IntersectionObserver` with `threshold: [0.42, 0.5, 0.58]` per cartouche, mapping center-proximity to the embossed/debossed lerp. Scroll-snapping is enabled as `scroll-snap-type: y proximity` on the root, with each cartouche `scroll-snap-align: center`, but the snap is *proximity* not *mandatory* — the user can stop wherever they wish. The 38vh negative space between cartouches is the *reading silence*, and it is sacrosanct. Do not fill it. Do not stick anything in it. Do not put a quote, a divider rule, a quiet animation, or a section heading in it. It is empty marble, lit by the candle, and that is its job. The blur-focus on the jewel-drawer open uses `backdrop-filter: blur(14px) saturate(0.86)` plus a 9% grain overlay and a 1.5px chromatic aberration achieved with a `feColorMatrix` SVG filter applied to the rest of the page. When the drawer closes, the blur recedes over 720ms with a `cubic-bezier(0.2, 0, 0, 1)` curve. The blur is not a vibe; it is a focal-depth statement — *the rest of the room is now defocused; this drawer is the entire viewfinder*. Storytelling: each of the seven cartouches carries one paragraph of body copy of around 220–280 characters, plus a one-line italic dedication, plus the specimen. The seven paragraphs together read as **a continuous unsigned essay on what it means for a thing to be one *gaji* — one branch — of a greater taxonomy: of jewels, of lineages, of contemplations, of inheritances, of silences, of languages**. The user who reads from gaji 一 to gaji 七 has read a complete short essay; the user who scrolls past has at minimum experienced a candle-lit cabinet that breathes. Both are valid endings. ## Uniqueness Notes This design's differentiators against the 210-design corpus, chosen with explicit reference to the frequency-analysis underused patterns and the planned seed: 1. **Neomorphism rendered in marble, not plastic.** Neomorphism is at 3% in the corpus, and in nearly every prior use across the wider web it defaults to the 2020 dribbble cliche of white-plastic soft-UI with neutral gray shadows. ggaji.com replaces the entire base material — the embossed/debossed cartouches sit in *real warm marble* with warm-tinted shadows (`--marble-shadow-deep: #C9B89A`, never `#888`), and the result reads as Joseon stone-cabinet, not as iOS settings panel. This is not "neomorphism with a marble background image." This is *neomorphism whose shadow algebra has been recolored to obey marble's actual subsurface scattering*. The single decision recasts the entire aesthetic. 2. **Minimal-navigation taken to the candle as nav.** Minimal-navigation is at 6% in the corpus and is normally implemented as "no top bar, just a centered hero." ggaji.com goes further: there is *no nav bar, no menu, no hamburger, no breadcrumb, no footer chrome, no language toggle in any corner*. The candle in the upper-left is the only persistent UI affordance, and it doubles as the document's clock and atmosphere. Click-targets total three archetypes (candle, cartouche, drawer-interior). This is structurally below the floor of any minimal-navigation prior on the corpus, and it is the structural argument of the site. 3. **Oversized-display in Cormorant SC small-caps at 18vw, decaying.** Oversized-display is at 3% in the corpus and is almost always implemented in geometric sans (Bebas, Anton, Druk). ggaji.com instead uses Cormorant SC small-caps (a high-contrast 16th-century roman small-caps revival) at 18vw on first paint, decaying to 4.8vw after the candle is first interacted with. The decay-on-interaction is itself a typographic moment that no other corpus site performs. 4. **Jewel-tones (3% in the corpus) treated as subsurface glow, not as flat fill.** Most jewel-tone palettes on the corpus default to flat amethyst/emerald/sapphire blocks, often saturated. Here every jewel is rendered exclusively as a *soft inner glow suffusing up through the marble cartouche from below*, with saturation capped at 38%. The page reads as one continuous warm marble with seven distinct jeweled lights underneath it, not as seven colored panels. 5. **Blur-focus (6% in the corpus) executed with chromatic aberration and grain, not as plain Gaussian.** Most blur-focus uses on the corpus are decorative `backdrop-filter: blur(8px)` overlays. Here the blur is structurally bound to drawer-open, carries 1.5px chromatic aberration via `feColorMatrix`, and a 9% grain — so the defocused remainder of the page reads as *seen through tears or candle-smoke*, not through a CSS blur. This makes blur-focus carry narrative weight. 6. **Candle-atmospheric (6% in the corpus) as the application clock.** Most candle motifs on the corpus are static SVG decorations. Here the candle is a 2.6s shared-timeline that drives every other animation in the document — cartouche breathing, jewel breathing, vignette pulse, cursor highlight — through a single `--candle-phase` CSS custom property updated by one `requestAnimationFrame`. The candle also burns down across the session (1px every 90 seconds), and a session-long melt is visible. No other corpus site that uses candle-atmospheric makes the candle the document's animation clock. 7. **Marble-texture (3% in the corpus) as the only photography substitute.** Photography is at 99% in the corpus — almost universal. ggaji.com excludes photography entirely, and instead generates Calacatta Oro marble from a CSS radial gradient + tiling SVG vein layer + grain PNG + animated candle vignette, breathing in time with the flame. This is the largest single deviation against corpus norms (a 99-point swing). 8. **Opulent-grand (5% in the corpus) without warmth-bait.** The corpus's 5% of opulent-grand sites usually pair with warm-inviting (27%) or pastoral-romantic (34%) to soften the opulence into something approachable. ggaji.com refuses the softening — it is *quietly grand* (Sotheby's evening-sale, not boutique-hotel-lobby), and the body copy is short, unsigned, ceremonial, and unbargained. There is no testimonial, no founder photo, no team page, no warmth-bait. The opulence is not flirting. 9. **The seven *gaji* cap and the closing seal as anti-CTA structure.** The site has exactly seven cartouches and ends in a debossed seal that is not a link. There is no pricing block, no stat-grid, no client-logo bar, no "book a consultation," no newsletter signup, no FAQ. The CTA-counter and the button-counter are both zero (excepting the three click-archetypes named). This is the inverse of every CTA-driven landing-page convention in the corpus and is the structural commitment of the planned seed *opulent-grand + minimal-navigation*. 10. **Korean classical typography in three orientations.** The wordmark is composed as a single inscription-stone triglyph: roman *ggaji.* (Cormorant SC, 18vw), vertical Hangul 가지 (Noto Serif KR Light, 14vw, vertical-rl writing-mode), and tiny Hanja 種 (2vw) nestled into the period. No other corpus site composes a wordmark as a Korean inscription-stone triglyph. **Chosen seed (from assignment):** *aesthetic: neomorphism, layout: minimal-navigation, typography: oversized-display, palette: jewel-tones, patterns: blur-focus, imagery: marble-texture, motifs: candle-atmospheric, tone: opulent-grand.* Every one of these eight axes is in the underused band of the corpus (each at 3–6%), and the design's architectural commitments line up with each of them deliberately rather than incidentally. **Avoided patterns referenced from frequency analysis:** photography (99%, excluded entirely), warm gradient palettes (97%, replaced by jewel-glow-through-marble), card-grid (85%, excluded — single-column tablet inside one continuous alcove), centered hero-dominant (83%/11%, excluded — no hero, the candle is the only persistent figure), parallax (95%, replaced by the candle-driven shared-timeline), cursor-follow (85%, replaced by a single 360ms candle-tilt highlight), spring/magnetic/stagger (84%/78%/79%, excluded — animations are slow, deliberate, ceremonial, never bouncy or playful), mono typography (94%, restricted to three occurrences only as catalog numbers), pastoral-romantic (34%, refused), warm-inviting (27%, refused). The site lives almost entirely in the under-3% bands of every category, by design.