奥書
A Note on How
This Was Built
Concept, palette, type and technique behind the ink garden.
← Return to the Garden一 · Concept
Concept & Inspiration
SUMI imagines Nomadic Owls as a single sumi-e brushstroke: one owl, painted fast and exactly once, surrounded by more paper than ink. The reference is the zen garden as much as the ink painting — ma (間), the deliberate emptiness that gives the marks meaning. If the other nine directions compete to say the most, this one wins by saying the least and meaning it.
Composition follows the logic of a raked gravel garden: stones placed off-centre, never in a grid. The three pillars sit staggered across a twelve-column frame. The six disciplines line up as a single index, not a wall of cards. Vertical writing rails — 「梟は夜に飛ぶ」("the owl flies at night") and 「旅する梟」("nomadic owls") — frame sections the way a doorframe frames a room, without ever competing with the horizontal English body copy inside it.
二 · Palette & Type
Palette & Type
Washi
#f6f3ec
the paper — ground for everything, textured with faint SVG fibre noise
Washi Deep
#efe8d9
kakemono card ground, one shade below the page for lift
Sumi Ink
#1a1a18
brush, type, rules — nearly black, warmed slightly like real ink stone
Vermilion
#d34e24
the hanko — spent on maybe three marks in the entire page
Shippori Mincho — Display & kanji
梟 · Obsessively Curious.
Zen Kaku Gothic New — Quiet body & tracked labels
We send beautiful things to the Internet.
三 · Technique
Techniques Used
One reveal system, five uses
A single IntersectionObserver toggles .in on any .rv element. Plain .rv fades up with a blur-to-sharp settle (1.3s). Compound classes reuse the same mechanism for different effects: .rv.rule-draw scales a hairline from 0 to full width, .rv.rail-draw grows a vertical rail line downward, and .rv.owl-reveal drives the hero owl from a small blurred scale to full clarity — the ink-spread. No per-element JavaScript, just CSS variants of one primitive.
The hanko is drawn, not photographed
The seal is one SVG path with twenty hand-placed vertices jittered a few pixels off a perfect square, reused for both the visible fill and a clipPath — so a feTurbulence grain layer and two hairline "cracks" stay confined inside the carved silhouette. The 梟 glyph sits in Shippori Mincho, washi-coloured, over solid vermilion — a relief seal (朱文), not a photograph of one.
The stamp, layered
On scroll-into-view the outer link fades up like any other .rv element, while the inner <svg> independently animates scale 1.42→1, rotation −9°→−3° and blur 7px→0 on a bouncier cubic-bezier(.2,1.5,.4,1) — two motions on two elements, composited, reading as one confident press. A soft radial "press" halo blooms in underneath on the same beat.
Vertical rails as structural decoration
writing-mode: vertical-rl with text-orientation: upright renders 「梟は夜に飛ぶ」and 「旅する梟」as literal architecture — a hairline that draws downward, then kanji standing like a doorframe at the edge of a section. English content is never set vertically; the rails frame it, they do not carry it. Hidden below 900px, where there is no room left to frame anything.
Composition as restraint
The three pillars sit on a 12-column grid at columns 1, 6 and 3 with staggered margin-top — stones placed, not a card grid. The kanji numerals (一二三) are set at low-opacity ink, sized large — because 一, 二 and 三 are themselves just one, two and three brush strokes, restraint has to come from color, not from hiding the glyph. Six disciplines become a single index list with a hairline that draws to fill the gap between name and motto — a table of contents, not a features grid.
Vermilion rationed on purpose
The palette allows exactly three vermilion touches on the whole page: a small tick beside the disciplines kicker, an underline beneath one word in the manifesto, and the hanko itself. Everything else — including :focus-visible outlines, which are vermilion by design since only one element is ever focused at a time — obeys "once per viewport, at most."
四 · Asset
The Higgsfield Prompt
五 · Iteration
Three Passes of Polish
Pass One
First full build reviewed at five scroll depths, on mobile and via a hand-rolled incremental-scroll capture (the review tool’s single-shot mobile screenshot doesn’t trigger scroll reveals — a real scroll does). Found and fixed a vertical rail hidden behind the hero owl, a mobile hero where the owl could collide with long copy, six content blocks set too dim to read comfortably, and pillar numerals rendered all but invisible by a hollow-stroke treatment that doesn’t suit glyphs as minimal as 一/二/三.
Pass Two
Complexified: added hover/focus depth to the kakemono cards (lift, deeper shadow, the scroll-rod turning vermilion for the one card in focus), a brightening numeral on pillar hover, and a warming rule on discipline-row hover. Verified the 820px tablet breakpoint end to end and confirmed the vermilion focus ring on the hanko reads as designed, not as a default outline.
Pass Three
Nitpick sweep — hand-checked contrast ratios for the final ink-70/ink-45 split, confirmed prefers-reduced-motion renders a fully settled page with zero artifacts, trimmed unused font weights to shrink the payload, and reconciled this page’s own technique notes with what actually shipped.