# Design Language for kkaji.com ## Aesthetics and Tone kkaji.com is **a candle-warm woodworker's loft at the hour the windows go amber** — a vertical, single-screen-at-a-time descent through a workshop where someone named Kkaji turns fallen branches (*kkaji* / 까지 worn down here to mean *the twig, the offcut, the part that goes all the way to the end of the limb*) into small honest objects: a spoon, a comb, a doorstop, a whistle. The site is **skeuomorphic** in the truest sense — not flat icons pretending to be buttons, but a digital surface that behaves like the **actual matter of a workshop**: oiled oak that catches a low light, brass that has a fingerprint on it, beeswax that softens at the edge, paper labels curling at one corner, a candle stub that genuinely flickers and genuinely casts a moving shadow across everything below it. Skeuomorphic sits at **4% in the cohort frequency table** and the few that claim it usually mean "iOS-6 leather stitching" — kkaji.com claims it for **hand-tool tactility under a single warm light source**, which nobody else is doing. The tone is **energetic but at woodshop tempo** — the energy of someone who has been working with their hands since before sunrise and is *delighted*, not frantic; the briskness of a plane shaving curling off in one clean pull; quick, confident, generous, never breathless. Energetic is **15% in the tone table** and almost always renders as dopamine-bright SaaS or startup-pitch loud — kkaji.com proves energetic can also mean **the crackle of pine resin, the snap of a clean break, the bright ring of a chisel struck once and true**. Inspirations: the amber interior of a Vermeer with the shutters half-closed; George Nakashima's *The Soul of a Tree*; the way a beeswax candle's flame leans, recovers, and leans again; Japanese *kanna* shavings thin enough to read through; a 19th-century joiner's tool chest opened in lamplight; the specific orange of last light hitting sawdust in the air. Every screen should feel **lit from one warm point** and **made of something you could pick up, weigh in your hand, and smell**. ## Layout Motifs and Structure The site is **seven workbench-screens stacked vertically**, each occupying exactly `100vh`, scrolled one at a time with **scroll-snap** so every screen settles like a board laid flat on the bench. This is **hero-dominant** layout — **11% in the layout frequency table**, and where it appears it's almost always *one* giant hero followed by ordinary stacked sections. kkaji.com reads hero-dominant literally and structurally: **every screen is a hero**. Seven full-bleed heroes in a row, each one a complete workshop tableau, no "section below the fold" comedown. Hero-dominant for **a sequence of equals**, not a headliner with an opening act. The composition law: **one warm light source per screen, top-third, slightly off-center** (alternating left-of-center / right-of-center screen to screen, like a candle being moved along the bench). Everything else — the object on the bench, the tools, the labels, the wood grain of the surface itself — is **arranged by how the light falls on it**: nearest-to-flame is brightest and most saturated; far corners drop into warm shade (`#2A1F16`, not black — there is no true black anywhere on this site). The bench surface is a **full-bleed plank of oak grain** that runs continuously top to bottom across all seven screens, so as you scroll it reads as **one impossibly long workbench** and the seven objects are laid out along it in the order they were made. The reading column for any prose is **a paper work-label pinned to the bench** — max-width `46ch`, set on a slightly-yellowed card (`#F4E8D2`) with one corner physically curled (CSS — a pseudo-element with a soft shadow under the lift), a brass thumbtack (a tiny `radial-gradient` dome) holding it at top-center, and the card casting its own shadow that **moves when the candle flickers**. No navigation bar. Navigation is **a row of seven small carved notches along the right edge of the bench** — a tally-stick / measuring-stick motif — each notch a shallow chiseled `clip-path` cut into the wood; the current screen's notch holds a **bead of warm light**; clicking a notch slides the bench to that screen. The notches deepen very slightly on hover, as if a thumb pressed in. No hamburger, no logo lockup, no footer — the last screen simply ends on a swept-clean bench at dusk with one line burned into the wood. ## Typography and Palette **Type system — Google Fonts only, three families, used like a joiner's three chisels (one broad, one medium, one fine).** - **Fraunces** (variable — opsz, wght, SOFT, WONK axes) — the broad chisel. All display: screen titles, the name *Kkaji*, the burned-in closing line. Fraunces is **serif-revival** (5% in the typography table) and **expressive-variable** (4%) at once — its optical-size axis means the big cuts (84–140px) get the dramatic high-contrast Didone-ish swell while body-size drops to a warm, slightly-wonky old-style serif. Set display at `opsz: 144, SOFT: 0, WONK: 1, wght: 540` — the WONK axis adds the hand-cut irregularity, like letters carved into a beam rather than printed. Tracking `-0.02em`. Display fill is never solid color — it's a **subtle vertical gradient from candle-bright to wood-shade** so the letterforms themselves look lit from above. - **Newsreader** (variable, optical, weights 300–500, with its true italic) — the medium chisel. All running prose on the paper labels, captions, the maker's notes. Newsreader is a transitional serif with **genuinely beautiful italics** (used for object names and Korean glossing — *kkaji = 까지*); it reads like a craftsman's notebook, ink slightly absorbed into rag paper. Body `19px / 1.62`, color `#3B2C1D` (oak-dark ink, never `#000`). Italic for asides; small-caps (`font-variant: small-caps`, tracking `0.07em`) for the object labels themselves. - **Spline Sans Mono** (variable, weights 400–500) — the fine chisel, used *sparingly*: dimensions, grain counts, the tally-notch numbers (01–07), and the tiny stamped marks ("oak · 2cm · linseed"). Mono is **94% saturated in the cohort** so this is deliberately the *least*-used face here — a few stamped figures only, never body text, never headings. It reads as the cold steel detail against all the warm wood. **Palette — earth-tones, candle-lit. Earth-tones is only 2% in the palette frequency table** (warm-earthy is another 4%) — genuinely underused, and where it shows it tends toward muddy beige flatland. kkaji.com gives it **chiaroscuro**: every color exists in a lit version and a shade version, and the candle's flicker animates a tiny lightness shift across the whole page. - `#1F1710` — **deep workshop shade** (the page's darkest value — warm umber, the corners the candle doesn't reach; used for the burned-in closing text and far-corner gradients) - `#2A1F16` — **oak in shadow** (the bench plank where it falls away from the flame) - `#3B2C1D` — **oak ink** (all body text, label hand-lettering) - `#6B4A2A` — **walnut mid** (tool handles, the carved notches, secondary objects) - `#A9712E` — **honey oak lit** (the bench surface near the flame, primary highlights) - `#C98B3C` — **warm brass** (thumbtacks, the bead of light in the active notch, hardware) - `#E8B964` — **candle-glow** (the halo around the flame, the brightest reachable light) - `#FFEDB8` — **flame-near highlight** (specular catch on oiled wood and brass, the wick's bright point) - `#F4E8D2` — **aged work-label paper** - `#7A8B5A` — **single lichen accent** (one moss-green on a sprig of leaves or a paper seed-packet — the *only* cool note on the entire site, used once per screen at most, to make the warmth feel chosen rather than total) Pure white and pure black appear **nowhere**. The lightest pixel is `#FFEDB8`; the darkest is `#1F1710`. ## Imagery and Motifs **Primary imagery: nature-elements (only 1% in the imagery table — genuinely rare) rendered as the literal material of every screen, plus candle-atmospheric (5% in the motifs table) as the light engine.** - **The continuous oak bench** — a full-bleed, full-site-height plank rendered with layered CSS: a base `linear-gradient` for the board color, then **3–4 superimposed long, soft `repeating-linear-gradient` strata at slight angles** for grain lines, then two faint elliptical `radial-gradient` knots, then a `mix-blend-mode: multiply` paper-grain `feTurbulence` SVG filter at 6% opacity for the tooth. It is *one* element; the seven screens are windows onto different stretches of it. - **Seven objects, one per screen, each a hand-built SVG/CSS still life** — (1) a roughed-out spoon blank with the bowl barely hollowed; (2) a finished comb, teeth catching the light; (3) a doorstop wedge with a leather pull-tab; (4) a willow whistle, bark half-peeled; (5) a stack of three nesting bowls; (6) a sprig of fresh oak leaves and an acorn laid across the bench (the lichen-green accent lives here); (7) the empty swept bench at the end. Each object is built from **layered gradient fills + one or two precise `feDropShadow` passes** so it reads as a real form catching a real raking light — never flat icon, never photo. - **The candle** — a single beeswax stub, top-third of every screen, off-center. Its **flame is a small SVG `` that morphs** between 3–4 keyframe shapes on an irregular 1.4–2.8s cycle (never a clean loop), with a `` + warm-color glow filter. The flame's brightness is a CSS variable `--flicker` (oscillating 0.86–1.06) that **the entire page reads**: the bench's lit-zone radial-gradient, every object's highlight, the paper label's drop-shadow length and angle, the active notch's bead — all keyed to `--flicker`, so the whole workshop **breathes with the flame**. Occasionally (every ~22s) a slow "draft" makes the flame lean hard left for 0.6s and recover, and every shadow on the screen leans with it. - **Tools as a quiet supporting cast** — at the edge of each screen, half in shade, one or two hand tools (a `kanna` plane, a marking gauge, a bench knife, a brace-and-bit) rendered the same way as the objects: lit edges, shade bodies. They never move; they're just *there*, the way tools are. - **Tally-stick navigation** — the right-edge notches: each a shallow chisel cut (`clip-path: polygon(...)` with an inner gradient simulating the cut's depth), numbered 01–07 in tiny Spline Sans Mono burned into the wood beside it. The active one holds a brass-glow bead that flickers with `--flicker`. - **Stamped maker's marks** — small mono-type stamps ("oak · linseed · 2024", "willow · waxed") set as if branded into the wood: dark-burnt color, very slight `letter-spacing`, a faint inset shadow so they sit *in* the surface, not on it. - **Sawdust in the light** — a sparse field of ~30 tiny warm-toned dots, only inside each screen's lit cone, drifting *very* slowly downward and sideways (CSS `@keyframes`, randomized durations 14–40s), opacity tied to proximity to the flame. Barely there. The thing you notice on the third visit. ## Prompts for Implementation - **Build it as seven `100vh` scroll-snap panels (`scroll-snap-type: y mandatory`) inside one scroll container**, with the oak-bench background as a single fixed/very-tall element they're windowed onto. Each panel transition should feel like *a board being set flat on the bench* — a brief, weighted settle (a `cubic-bezier` ease with a tiny overshoot), not a slick fade. Honor `prefers-reduced-motion` by freezing the flame to a steady glow and disabling the sawdust drift, but **keep every static light/shadow** — the chiaroscuro is the design, not decoration. - **The candle flicker is the heartbeat — make it the engine.** One JS `requestAnimationFrame` loop (or a carefully irregular CSS keyframe set) writes a single CSS custom property `--flicker` on `:root`. Everything warm references it: `--lit: calc(... * var(--flicker))`. Bench glow radius, every object's specular highlight opacity, the paper label's `box-shadow` offset/blur, the active notch bead, the sawdust opacity. When the flicker dips, the *whole workshop* dims a hair. Add the occasional 0.6s "draft lean" that skews the flame path and rotates every shadow's offset. This is the soul of the site — spend real effort on the irregularity (avoid any clean loop; use layered sines at incommensurate frequencies + a touch of noise). - **Skeuomorphism = layered gradients + raking shadows, never flat icons.** Every object: base form fill is a `linear-gradient` from lit-edge to shade-body; add one inner highlight (a thin bright `radial-gradient` ellipse where the flame catches it) and one or two `feDropShadow` / `box-shadow` passes whose direction comes from the candle's position on *that* screen. Oiled wood gets a subtle specular streak; brass gets a hard tiny `#FFEDB8` glint; beeswax gets a soft translucent edge. The paper labels physically curl (pseudo-element + soft under-shadow) and cast moving shadows. - **Typography as carved matter.** Fraunces display at `opsz:144, WONK:1` with a vertical candle→shade gradient fill so the big titles look *lit from above*. Newsreader body on the aged-paper labels in oak-ink, italic for the Korean glosses (*까지*) and asides. Spline Sans Mono only for stamped figures and the tally numbers — burnt-in, inset-shadowed, sparing. - **Scroll choreography, woodshop-paced.** As each panel enters, its object "settles" into the light: a 220ms tiny drop + the highlight blooming up to full as if the candle just reached it; the paper label's tack "presses in" (a 1px settle + shadow bloom); the stamped marks fade up last. Quick, confident, generous — energetic at the tempo of a clean plane-stroke, never frantic. - **Sound-of-it-without-sound.** Micro-interactions should *feel* like wood and brass: notch hover = a 1px inward press + a faint warm glow pulse; clicking a notch = the bench sliding with a weighted settle; hovering an object = it rotates ~1.5° into the light (`tilt-3d`-adjacent, **25% in patterns** but here it's "turning a piece to see the grain", not a parallax card). Use **blur-focus** (only 6% in the patterns table) for depth: the screen you're leaving softens to a warm blur for ~300ms as the next settles sharp — like looking up from one piece to the next. - **AVOID:** any CTA-heavy layout, pricing tiers, signup blocks, stat counters, testimonial carousels, feature grids, dashboards, cards-in-a-grid. There is no "sign up", no "get started", no metrics. The closing screen is the empty swept bench at dusk and one Fraunces line **burned into the wood** — `kkaji — all the way to the end of the branch.` — and nothing else. No footer, no nav bar, no logo cluster, no social row. ## Uniqueness Notes - **One literal warm light source governs the entire site, and it flickers — and *everything* reads the flicker.** A single `--flicker` CSS variable drives bench glow, every object highlight, every shadow length, the paper-label lift, the nav bead, and the sawdust. The whole workshop breathes with one candle. No other design in the cohort makes a single live light source the rendering engine for the page. - **Skeuomorphic reclaimed as hand-tool tactility under raking light** (the 4% skeuomorphic seed) — not iOS leather stitching, not faux-3D buttons, but layered-gradient wood/brass/beeswax forms that genuinely catch a moving low light. Distinct from every glassmorphism (71%) and hand-drawn (96%) site in the pool. - **Hero-dominant taken literally as seven full-bleed heroes-of-equals stacked with scroll-snap** (the 11% hero-dominant seed), windowed onto *one continuous oak workbench background* that runs the full site height — not a headliner + ordinary sections. Nobody else does "every screen is a hero, and they're all the same bench." - **Earth-tones with chiaroscuro** (the 2% earth-tones seed): every color in lit-version and shade-version, no pure white, no pure black anywhere — lightest pixel `#FFEDB8`, darkest `#1F1710` — plus exactly one cool lichen-green accent used once per screen to make the warmth feel chosen. Most earth-tone designs go flat-beige; this one has a light direction. - **"Energetic" reinterpreted at woodshop tempo** (the energetic tone seed): the briskness of a clean plane-stroke and the bright ring of a struck chisel, not dopamine-SaaS loudness — animations are quick, weighted, and confident, never frantic. - **Domain wordplay made material:** *kkaji* (까지, "all the way to / up to the end") rendered as *the offcut twig that goes to the very end of the branch* — every screen is a small honest wooden object made from a branch, and the site literally ends with a line burned into the swept bench. - **Documented chosen seed:** `aesthetic: skeuomorphic, layout: hero-dominant, typography: variable-fluid, palette: earth-tones, patterns: zoom-focus, imagery: nature-elements, motifs: candle-atmospheric, tone: energetic` — implemented via Fraunces/Newsreader variable-axis fluid type (variable-fluid, 4%), `zoom-focus`/`blur-focus` panel transitions (zoom-focus only 3%, blur-focus 6%), nature-elements imagery (1%), candle-atmospheric motif (5%). - **Frequency-aware avoidances:** no glassmorphism (71%), no hand-drawn aesthetic (96%), no photography (98%), no card-grid layout (88%), no warm-gradient-mesh imagery, no cursor-follow/magnetic/spring-bounce default kit beyond the restrained tilt/blur uses; mono typography deliberately demoted to a few stamped figures despite its 94% cohort saturation; the standard parallax/stagger/CTA-stack vocabulary is replaced by candle-light physics, scroll-snap board-settling, and a tally-stick nav.