# Design Language for kkaji.com ## Aesthetics and Tone **kkaji** (까지) is Korean for *until* — a preposition of arrival, of threshold, of the last inch before something ends or begins. The word is both temporal and spatial: *up to here*, *as far as this point*, *all the way until now*. The site is designed as that threshold — the moment before the tag is finished, the last stroke of a marker cap still wet, the wall mid-act. The aesthetic is **graffiti** — not the crude cartoon bubble-letter school, but the high-literacy tradition of Korean street calligraphy crossed with 1980s New York subway bold: gesture-mark typography, drip-shadow on display text, cracked concrete texture underneath everything, and the warm amber-tungsten glow of a single work lamp illuminating a wall at 3 a.m. This is not ironic street-cred borrowing. It is the site of a practitioner: someone who actually knows what an undercut means, what it costs to get arrested for a tag, and why the color choice on this particular wall matters. The **tone is warm-inviting** without being soft. Think: the inside of a record shop owned by someone who has been to every show, the back wall of a taqueria where regulars leave their names. Rough, lived-in, but genuinely welcoming — the warmth of firelight on brick, not the warmth of pastel gradients and rounded buttons. **Mood board anchors:** - Tungsten work-lamp spill on a textured concrete wall: #2C1810 (deep scorched earth), #F5A623 (amber lamp bloom) - Newspaper overpaste on a plastered surface: stacked layers, legible through the tears - The negative space *between* two overlapping tags — the untouched rectangle of exposed brick that makes both marks readable - Korean hangul letterforms redrawn in a thick-nib marker, each stroke a deliberate weight decision --- ## Layout Motifs and Structure The layout system is **ma-negative-space** — the Japanese/Korean concept of *ma* (間), the pause, the gap, the room between objects that gives objects their meaning. On screen this means: - **Extreme asymmetric negative space:** a single content island occupies at most 38% of any viewport at rest. The remaining 62% is textured void — the concrete wall, the unwritten surface. This is not empty. It is load-bearing silence. - **No conventional columns.** The grid is a **torn-register system**: three invisible horizontal bands (roughly 28vh / 44vh / 28vh) that shift phase with scroll — upper and lower bands drift leftward at 0.6× scroll speed; the middle band is pinned. Objects placed in different bands create parallax separation that reads as depth-of-field on a real wall. - **The Tag Anchor:** one large typographic mark — a display word or short phrase rendered in the graffiti typeface — is pinned to the lower-right quadrant of each section, always partially clipped by the viewport edge. It is never fully readable. This is intentional: the tag extends past the frame, implying a wall larger than the screen. - **White margins are concrete:** the background is not `#ffffff`. It is a subtle concrete texture (`noise-texture` at 4% opacity over `#1A1208`) that reads as warm dark stone under the lamp light. Margins breathe like physical space. - **Single-axis scroll only.** No horizontal scroll, no carousels, no tabbed panels. One wall, one long movement downward, sections separated by 40–80 vh of near-empty concrete with a single ruled grid-line hairline crossing the void at a slight angle (2–4 degrees off horizontal). --- ## Typography and Palette ### Typography The typographic system exploits the **slab-serif** tradition — specifically the connection between nineteenth-century wood-type display slabs and modern graffiti block letters, where both traditions share the same impulse: maximum presence at maximum distance. - **Display / Tag Face:** [Alfa Slab One](https://fonts.google.com/specimen/Alfa+Slab+One), weight 400 (the family has only one weight, which is correct — it is already extreme). Used at 14–22 vw for the primary mark on each section. Tracked at `0.02em`. Color alternates between `#F5A623` (amber) and `#E8E0D0` (warm chalk) depending on the section's background depth. - **Secondary Display / Headline:** [Roboto Slab](https://fonts.google.com/specimen/Roboto+Slab), bold 700. Used at 2.4–4.8 rem for section headings. This is the "clean wall" voice — authoritative, architectural, not yet tagged. - **Body / Caption:** [Source Sans 3](https://fonts.google.com/specimen/Source+Sans+3), regular 400 and italic 400. Set at 1rem / 1.65 line-height. Warm off-white `#E8E0D0` on dark surfaces. This is the writer's notebook voice — clear, direct, undecorated. - **Accent / Label:** [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono), 400. Used exclusively for metadata — coordinates, dates, short codes. Suggests a label-maker, a stencil, a spray-cap cap-height. ### Palette — High Contrast The palette is a **high-contrast** system built from two temperature poles — scorched-earth warm dark against chalk and amber light — with one electric accent that punches through both. | Role | Hex | Name | |------|-----|------| | Background deep | `#1A1208` | Scorched earth | | Background mid | `#2C1F10` | Dark fired clay | | Surface raised | `#3D2B18` | Warm concrete shadow | | Primary text | `#E8E0D0` | Warm chalk | | Accent warm | `#F5A623` | Tungsten amber | | Accent electric | `#FF3B1A` | Spray-can vermillion | | Grid / hairline | `#4A3828` | Aged ink brown | | Duotone highlight | `#FFF0D6` | Lamp spill | Contrast ratios: chalk `#E8E0D0` on deep `#1A1208` = 14.1:1. Amber `#F5A623` on deep = 7.8:1. Electric `#FF3B1A` on deep = 5.6:1. All intentionally high — this is a **high-contrast** system, not a soft one. --- ## Imagery and Motifs ### Duotone Photography Every photographic element is processed as **duotone-photo**: the shadows mapped to `#1A1208` (scorched earth) and the highlights mapped to `#F5A623` (tungsten amber). This creates images that look like they were lit by a single work lamp — warm, directional, with deep crushed blacks. No mid-tone gray survives; everything is either in the light or in the shadow. Subjects for photography: close-up concrete texture with paint residue, hands holding a marker, a fragment of a wall in late-afternoon side-lighting, neon signs shot slightly out of focus so the bleed reads as a halo. **No lifestyle photography. No smiling people. No food.** Surfaces, objects, fragments. ### Grid Lines **Grid-lines** appear as a recurring structural motif — not as a UI grid, but as found objects: the chalk snap-line a builder leaves on a wall before plastering, the ruled pencil lines a writer uses to keep letters level on a curved surface. These are rendered as: - 1 px SVG lines at 2–5° off-axis, spanning full viewport width, `#4A3828` at 30% opacity - Occasionally doubled: two parallel lines 12 px apart, suggesting a construction guide - Used only in transition zones between sections — they mark the seam of the wall, not the content ### Border Animate Pattern **border-animate** is the primary interactive pattern. Every content card and typographic block has an animated border constructed from four SVG `` elements (one per side) that draw in sequence on scroll-enter: - Bottom edge draws left-to-right first (500 ms, `ease-out`) - Right edge draws top-to-bottom (400 ms, 100 ms delay) - Top edge draws right-to-left (500 ms, 200 ms delay) - Left edge draws bottom-to-top (400 ms, 300 ms delay) - Total reveal: 700 ms end-to-end - Border color: `#F5A623` for primary blocks; `#FF3B1A` for accent/emphasis blocks - Border weight: 2 px standard; 4 px for the hero tag block The border-draw animation is the primary affordance that tells the visitor: *this content has arrived*. It replaces the conventional fade-in and does not compete with the typographic mass of the slab display text. ### Drip Shadow A custom CSS effect applied only to the Alfa Slab One display text: a multi-layered `text-shadow` that simulates paint drip — three stacked shadows offset progressively downward (0/3 px/7 px) in the same hue as the text but at decreasing opacity (60% / 35% / 15%). This is a motif, not a gimmick: paint drips down walls, and the display text is paint. ### Concrete Texture Overlay A single ``-rendered noise field (Simplex noise, 2D, seed fixed per page load) overlays the entire background at 4% opacity, blended `multiply`. This creates the micro-texture of concrete or plaster without a repeating image tile. The noise field shifts at 0.05 px/frame on scroll — imperceptibly slow, but preventing the static flatness that kills the illusion of a physical surface. --- ## Prompts for Implementation Build this as a **single long wall** — one continuous scroll from top to bottom, no pagination, no routing, no JavaScript framework dependencies beyond vanilla scroll-observer and a tiny canvas noise renderer. **The structure is five sections:** 1. **The Mark** (100vh) — Hero. The site's primary tag: "kkaji" set in Alfa Slab One at 18 vw, color `#F5A623`, positioned at 72% left / 58% top, partially clipped right. To the upper-left: a duotone photograph (500×350, `object-fit: cover`) of a concrete surface, border-animate on enter. Grid-line hairline cuts diagonally across the lower third. No headline. No subhead. No CTA. Just the mark and the wall. 2. **The Practice** (140vh) — Content island in the lower-left quadrant (38% width, anchored 8% left / 30% top). Roboto Slab headline, two paragraphs of Source Sans 3 body. To the right: extreme negative space. A single Alfa Slab One word ("까지") at 9 vw, `#E8E0D0` at 15% opacity, positioned far right, acting as a watermark ghost. Border-animate on the content island. 3. **The Wall** (180vh) — Full-bleed duotone photograph behind everything, 40% opacity. Over it: three content fragments scattered at ma-spacing. Each fragment has its own border-animate. Grid-line pair crosses the mid-section horizontally. The section breathes — mostly photo, mostly void, three isolated text islands. 4. **The Archive** (120vh) — A tight cluster of items in the center-right. Share Tech Mono labels. Roboto Slab headings. The left 45% of the viewport is pure concrete texture — no content. The right-leaning cluster implies weight, implies that meaning accumulates toward an edge. 5. **The Threshold** (100vh) — Minimal. One sentence in Roboto Slab at 2.8 rem, centered vertically. Below it: a single Share Tech Mono line of coordinates or a date. Grid-line hairlines frame the text above and below. No footer navigation. No social links. No email. The wall ends here. **Animation and motion rules:** - All border-animate triggers on `IntersectionObserver` at 20% threshold - Parallax drift: `transform: translateY(calc(var(--scroll-y) * -0.4))` on background layers - No CSS transitions over 800 ms (the wall does not need to load slowly — it is already there) - No JavaScript scroll-jacking. Native scroll only - Canvas noise: `requestAnimationFrame`, capped at 30 fps via timestamp check - Drip shadow on display text: pure CSS, no JavaScript **Absolutely do not implement:** - Hero CTAs ("Get Started", "Sign Up", "Learn More") - Navigation hamburger menus or sticky headers - Pricing tables, feature grids, stat blocks - Testimonial sliders or social proof - Newsletter modals or cookie banners - Lightboxes or modal overlays - Horizontal scroll sections - Autoplay video or audio - Any animation that loops without user interaction (excepting the canvas noise drift, which is imperceptible) --- ## Uniqueness Notes **Seed:** aesthetic: graffiti, layout: ma-negative-space, typography: slab-serif, palette: high-contrast, patterns: border-animate, imagery: duotone-photo, motifs: grid-lines, tone: warm-inviting **Differentiators:** 1. **Graffiti aesthetic at near-zero frequency, executed through Korean cultural context.** The frequency report shows `graffiti` not appearing among the analyzed design aesthetics — the field is saturated with hand-drawn (61%), editorial (49%), terminal (28%), botanical (26%). A graffiti aesthetic grounded in Korean hangul calligraphy conventions — where stroke weight, directional energy, and the concept of *ma* (間) govern composition — is novel in the registry and unlikely to be confused with Western bubble-letter graffiti pastiche. 2. **Ma-negative-space layout combined with high-contrast warm palette breaks the usual split.** Ma-derived layouts (0% frequency) are most often executed in cool, minimalist, white-space Japanese design tradition — pale backgrounds, thin serifs, hairline rules. This design inverts the convention: the negative space is *dark and warm*, like the unlit portion of a concrete wall rather than the emptiness of a Muji catalog. The thermal contrast (warm dark void + amber light) makes the negative space active rather than passive. 3. **Border-animate as the sole animation vocabulary, replacing scroll-fade entirely.** At 4% frequency, border-animate is underused. Most designs reach for opacity-fade or slide-up on scroll-enter. Making border-draw the *only* scroll-trigger animation — and giving it a directional sequence (bottom → right → top → left, counterclockwise like a tag being completed) — creates a site that feels like a wall being written in real time rather than a page being revealed. No other design in the registry uses this pattern as a primary narrative device. 4. **Slab-serif at 2% frequency, specifically Alfa Slab One, used at graffiti scale.** Slab-serifs appear in only 2% of designs. Alfa Slab One (a single-weight extreme slab with no italic, no light variant) at 14–22 vw is an editorial choice that borrows the presence of wood-type poster printing. The connection between wood-type slabs and graffiti block lettering is typographic history, not aesthetics-borrowing; both traditions optimize for maximum legibility at maximum distance. No other design in the registry makes this lineage explicit. 5. **Duotone-photo at 5% frequency mapped to a non-standard warm duotone (scorched earth + tungsten amber).** The small number of designs using duotone-photo in the registry typically use either the blue/gold or red/dark academic duotone. Mapping duotone to the same warm temperature range as the background palette — so that photographic subjects appear to be lit by the same single lamp as the text — creates a unified light source fiction across media types. The photograph and the typography inhabit the same room.