# Design Language for hensai.quest ## Aesthetics and Tone **hensai.quest is a candlelit ledger-room where every debt you have ever carried — money, gratitude, apology, the favor you never returned — is finally tallied, line by line, and crossed out.** "Hensai" (返済) is the Japanese word for *repayment*: not just paying off a loan, but discharging an obligation, settling what is owed, closing the book. Marry that to `.quest` and the domain becomes a **pilgrimage of reckoning** — a slow walk down a long oak table stacked with account books, promissory notes, and brass-handled drawers, where the visitor is the one balancing the books at last. The aesthetic is **dark-academia** — but not the Pinterest dark-academia of tweed blazers and Latin tattoos. This is the dark academia of the *counting house*: the back room of an old library annex where the financial records of a hundred-year institution are kept, where the lamp is always lit because the windows face a courtyard wall, where leather spines are cracked from being opened in the same place for decades. Oxblood and ink-black and aged-vellum cream, warmed by brass and beeswax-candle amber. The corpus runs dark-academia at only ~7%, and almost everyone who touches it leans on the same five props: candle, raven, Greek bust, ivy, "memento mori." **hensai.quest forbids all of those.** Its dark academia is built from one primitive only: *the ruled ledger page* — debit on the left, credit on the right, a running balance that walks toward zero as you scroll. The tone is `warm-inviting` (~28% — common, but here pulled hard against the somber palette to make the contrast the whole point). The narration is the voice of a kind, unhurried bookkeeper — the one who tells you, gently, that yes, it's a lot, and yes, we will go through every line, and yes, by the bottom of the page it will be settled. Never guilt. Never the collection-agency register. The mood is **the relief of finally writing "PAID IN FULL" across a page you have been afraid to open** — warm, grave, and quietly triumphant. ## Layout Motifs and Structure The site is an **immersive-scroll** experience (only ~7% of the corpus) staged as **one continuous ledger page that unrolls vertically** — a single long sheet of ruled accounting paper, scrolling does not change "pages," it walks you *down the columns of one enormous open book*. This deliberately rejects the corpus defaults: `card-grid` (86%), `centered` (83%), `full-bleed` (94%) — there are **no cards, nothing is centered, nothing bleeds full-width.** The content lives inside a tall ledger frame with a real left and right margin, like a book lying open on a desk. **The structural spine: the double-entry column.** - The page is split into a **left column (Debits — what is owed)** and a **right column (Credits — what is repaid)**, divided by a single vertical ink rule that runs the full height of the document. - Each "section" of the site is a **ledger entry**: a horizontal row with a date in the gutter, a description that spans both columns, a figure in the debit column, and — as you scroll it into view — a matching figure that *writes itself* into the credit column, with a hairline strike-through drawn across the debit (`path-draw-svg`, ~29%, used for the strike, the rules, and the balance line — never for decorative flourishes). - A persistent **running-balance band** sits pinned to the bottom edge of the viewport: a thin brass strip showing `BALANCE OWED: ¥ ▮▮▮,▮▮▮` that **counts down** (`counter-animate`, ~12%) as entries get crossed off, reaching `¥ 0 — 完済 (paid in full)` at the foot of the page. **Grid system.** A strict **24-line ruled grid** — every element snaps to a horizontal blue rule, the way handwriting sits on lined paper. Vertically, the page uses a 2-column ledger split (debit ~58% / rule / credit ~38%, with the date gutter at the far left at ~4%). The `grid-lines` motif (only ~2% of the corpus) is *literal and load-bearing* here: the horizontal rules and the vertical column divider ARE the layout, faintly visible at all times, like the printed lines of a real account book. **Sequence of the scroll (the quest):** 1. **The Cover** — a closed leather account book, embossed `返済 / HENSAI / a quest in one volume`, edge gilt catching lamplight; "open the book" prompt. 2. **The Inventory of Debts** — entries write themselves in the debit column one by one: *a loan*, *a kindness never repaid*, *an apology owed*, *a promise*, *the years*. Each lands with weight; the balance band climbs. 3. **The Reckoning** — the long middle. Scrolling drags a ruler down the page; as it passes each debit, the matching credit is entered and the line is struck. The balance band ticks down. Marginalia in a second hand annotates: *"settled in person, spring"*, *"forgiven — see letter"*. 4. **完済 — Paid In Full** — the balance band hits ¥0 and turns from brass to warm gold; a red *kanji seal* (完) is stamped across the foot of the page with a soft ink-bloom; the book's ribbon marker falls closed. 5. **The Colophon** — printed like the last page of an old book: where the volume was "set," in which faces, by whom. No hero. No nav bar (a slim **gilt ribbon bookmark** down the right edge is the only persistent chrome — hover lifts it, click jumps to a ledger entry). No CTA blocks, no pricing tiers, no stat-grids, no testimonial carousel. ## Typography and Palette **Fonts — Google Fonts only, three voices, each doing one job.** - **`Spectral`** — *the body of the ledger and the narration.* A refined screen-first serif with true small caps and old-style figures, available on Google Fonts across a full weight range. Used for: the bookkeeper's narration (Spectral 400, generous leading, ~62ch measure), entry descriptions, and — critically — **old-style numerals throughout**, so every figure in the columns has the lowered "3, 4, 5, 7, 9" of a real account book. Headings (entry dates, "THE RECKONING") in **Spectral 600 small-caps, letter-spaced**. - **`IBM Plex Mono`** — *the figures column.* A humanist monospace on Google Fonts; used **only for the aligned money figures and the running balance**, so debits and credits stack in perfect vertical columns the way typewritten ledgers do. Tabular by nature; the decimal points and the `¥` signs line up exactly. Also sets the small running line-numbers in the left gutter. - **`Zen Kaku Gothic New`** — *the Japanese voice.* A clean, warm Japanese sans on Google Fonts, used for the kanji that anchor the concept: `返済` on the cover, `完済` and the `完` seal at the foot, and the small Japanese gloss that shadows key English entry titles. Set with comfortable spacing so the kanji read as *typeset*, not pasted-in. A handwritten marginalia hand — **`Caveat`** (Google Fonts) — appears *only* for the second-hand annotations in the margins (`"forgiven, see letter"`), in a faded ink color, slightly rotated, never for UI. **Palette — aged ledger paper, oxblood ink, brass lamplight. Eight values; the relationship is `complementary` (only ~5% of the corpus): warm vellum/brass on one side, cool oxblood-into-near-black ink on the other, with the brass↔ink contrast carrying the "owed vs settled" semantics.** - `#F3E8D2` — **Vellum** — the ledger page; aged, faintly uneven, the dominant field. - `#E7D7B8` — **Foxed Edge** — the darker tone at the book's outer margins and the page-curl shadow gradient. - `#3A1318` — **Oxblood Ink** — the *debit* color: entry text, the column rule, the horizontal ruled lines (at low opacity), all "what is owed." - `#1C0E10` — **Spine Black** — near-black brown of the leather cover and the deepest type; the background behind the closed book. - `#7E1C26` — **Sealing-Wax Red** — used *only* for the `完` seal stamp and the strike-through lines that cross out a settled debt. Scarce on purpose. - `#B98A3C` — **Brass Lamp** — the running-balance band, the gilt ribbon bookmark, edge-gilt highlights; the "warm light" that grows as debts clear. - `#E4C36A` — **Gilt Gold** — the brighter gold the balance band turns to at `¥0 — 完済`; the moment of release. - `#8C7A56` — **Faded Ink** — the marginalia hand and secondary annotations; ink that has lightened with age. Background base `#F3E8D2` for the open ledger; `#1C0E10` only for the cover and colophon "endpapers." A subtle paper-grain and a fixed warm vignette (as if from the lamp at the table's edge) sit over everything at low opacity. ## Imagery and Motifs **No photography. No stock illustration. No icon set. No glassmorphic cards. No 3D render.** The corpus is 99% photography; hensai.quest claims the under-used `custom-illustration` imagery (~2%) and the `grid-lines` motif (~2%) and combines them with `path-draw-svg`. Every visual is one of four hand-authored kinds: 1. **The ruled ledger surface itself** — a CSS/SVG-drawn sheet: faint horizontal blue rules (24-line grid), a single oxblood vertical column divider, a red double-rule under each column header, the gentle inner-shadow of a book's gutter down the centre, and a soft curl-shadow at the page foot. This is the "background" and it is also the whole layout. 2. **Self-writing entries** — each money figure and each strike-through line is an SVG path that *draws on* as it scrolls into view (`path-draw-svg`), as though an unseen hand is entering it. Letterforms appear to be *written*, not faded-in. The strike across a settled debit draws left-to-right with a slight pen-pressure taper. 3. **Hand-drawn ledger furniture** — small, precise line illustrations rendered in oxblood stroke, no fill: a closed clasped account book (the cover), a fountain-pen nib, a brass desk lamp casting one cone of light (the vignette source), a ribbon bookmark, a sealing-wax stick, an inkwell, a sheaf of promissory notes folded in thirds. Drawn like engraved plates from a 19th-century commercial-arithmetic textbook — fine cross-hatching, generous negative space. 4. **The `完` seal** — a single bold red kanji (完, "complete/settled") inside a softly irregular square seal outline, stamped across the foot of the page at the climax with a faint ink-bloom and a barely-perceptible double-impression offset, the way a real hanko lands. Decorative motifs, used sparingly: a **running tally of vertical pen-strokes** (𝍩 ⁄ "正" counting marks) in the gutter that fill in as entries clear; **corner reinforcement triangles** (gilt) at the four corners of the page like a real binding; a faint **watermark** of interlocking rules visible only in the page's empty stretches. Decoration always derives from *bookkeeping*, never generic ornament. ## Prompts for Implementation Build hensai.quest as **one HTML file, one CSS file, one ES module, and one SVG sprite** (the ledger furniture + the `完` seal) — no framework, no router, no build step. External assets: only the Google Fonts links (Spectral, IBM Plex Mono, Zen Kaku Gothic New, Caveat). **Bias the entire build toward a slow, full-screen narrative reckoning — this is a book you scroll through to the end, not a site you navigate.** **Document & structure.** Semantic landmarks: the page is one long `
` styled as a ledger; entries are `
`s with a `
` (date + description), a `.debit` cell, a `.credit` cell, and an `.annotation` (marginalia). The running-balance band is a `position: fixed` footer strip. The ribbon bookmark is a fixed nav `