// Alt I — Karesansui (枯山水 · dry rock garden) // The page is a Zen garden seen from above. Raked sand fills the canvas; // "stones" sit asymmetrically — each stone is one color. Text is sparse, // pushed to the edges. Reading is contemplative, not informational. function AltKaresansui() { // sand pattern — concentric ripples around each "stone" const sandPattern = ` `; // Use SVG rings for the rakes around stones. Stones are positioned in a few // groups, like real karesansui placement (asymmetric, with breathing room). const stones = [ { id: "S1", x: 28, y: 14, size: 92, color: "#1B1B1B", name: "墨色", romaji: "Sumi-iro", hex: "#1B1B1B" }, { id: "S2", x: 60, y: 22, size: 60, color: "#264653", name: "藍色", romaji: "Ai-iro", hex: "#264653" }, { id: "S3", x: 78, y: 16, size: 36, color: "#5F9EA0", name: "浅葱", romaji: "Asagi", hex: "#5F9EA0" }, { id: "S4", x: 18, y: 42, size: 56, color: "#B33A3A", name: "紅", romaji: "Beni", hex: "#B33A3A" }, { id: "S5", x: 35, y: 50, size: 40, color: "#D8A431", name: "山吹", romaji: "Yamabuki", hex: "#D8A431" }, { id: "S6", x: 70, y: 48, size: 78, color: "#7A8B55", name: "抹茶", romaji: "Matcha", hex: "#7A8B55" }, { id: "S7", x: 22, y: 74, size: 44, color: "#F1C6C1", name: "桜", romaji: "Sakura", hex: "#F1C6C1" }, { id: "S8", x: 55, y: 80, size: 50, color: "#6B4C7A", name: "紫", romaji: "Murasaki", hex: "#6B4C7A" }, { id: "S9", x: 82, y: 78, size: 30, color: "#E8DDCB", name: "和紙", romaji: "Washi", hex: "#F4EFE6" }, ]; return (
{/* SAND background — repeating horizontal raked lines */}
{/* paper noise */}
{/* TOP CHROME — minimal */}
Japanese Color Atlas · 石庭
ATLASPALETTESGUIDES· SEARCH
{/* TATEGAKI title — right margin */}
日本色譜 · 石庭抄
{/* tategaki — left margin, sub-line */}
WALK SLOWLY — NINE STONES
{/* CENTER — the garden itself */}
{/* raked rings around each stone */} {stones.map((s, i) => { const cx = (s.x / 100) * 1000; const cy = (s.y / 100) * 1700; const rSteps = 6; return ( {Array.from({ length: rSteps }).map((_, k) => { const r = s.size * 0.6 + 16 + k * 14; return ; })} ); })} {/* Each stone, absolutely placed */} {stones.map((s, i) => { const left = `${s.x}%`; const top = `${s.y}%`; const isLight = ["#F1C6C1", "#E8DDCB", "#F4EFE6", "#D8A431", "#5F9EA0"].includes(s.color); return (
{/* stone */}
{s.name}
{/* label below */}
{s.romaji} {s.hex}
); })} {/* A wandering footpath line, suggesting walking order */}
{/* BOTTOM — pavilion */}
From the verandah · 縁側より

"There is no order to a karesansui garden — you choose where to look. We have placed nine stones in the sand. Each one is a color."

The rest of the atlas — 81 source-aware records, the seasonal koyomi, the palette builder — is through the gate to your right. This is the entrance garden. Walk slowly.

Enter All 81 source-aware colors 門 → The koyomi · 72 micro-seasons 暦 → Palette builder · tools 具 →
Today's stone
桜 sakura · 桜始開

March 26 — the 11th kō. Cherry blossoms first open. The garden offers Sakura today.

{/* Tiny colophon */}
CHROMA CATHAY · KARESANSUI ENTRY · 入庭 二〇二六 — hosted by Chroma Cathay, vol. II —
); } window.AltKaresansui = AltKaresansui;