# Design Language for rinji.net

## Aesthetics and Tone

rinji.net is a **leather-bound compendium of the irrefutable** — imagined as a privately printed journal distributed among scholars who do not advertise their membership. The visual register is the specific texture of a hand-tooled Victorian calfskin folio: gold leaf stamped into the cover, ink pressed so deeply into the page you can feel the relief from the back. Every surface carries the evidence of a hand that decided. The aesthetic is **luxury-premium hand-drawn**: not the twee warmth of a sketchbook diary, but the gravitas of a master copperplate engraver who happens to own seventeen thousand books.

The tone is **scholarly-intellectual without apology**. No footnotes are hidden. Marginalia are not decorative — they carry argument. The site behaves like a lecture delivered in a panelled reading room where the chairs are too comfortable and the arguments are too rigorous. There is no hurry. Parallax depth rewards the reader who slows down. The gold is not aspirational — it is oxidised, earned, inevitable.

Mood references: the cover of the *Encyclopaedia Britannica* 11th edition (1911), a Maggs Bros antiquarian catalogue, the front matter of a Folio Society limited run, the binding decisions of a private press in Edinburgh that has been operating since 1847. Nothing here is new; everything is deliberate.

## Layout Motifs and Structure

The structure is **parallax-sections** arranged as **chapters of a codex**. The page unrolls vertically through six distinct depth layers, each section at a different scroll velocity — the leather background moves at 0.3×, inked chapter ornaments at 0.5×, body text at 1×, and embossed gold rule lines at 0.7×. The effect is that reading the page feels like peeling back overlaid sheets of vellum, each one slightly older than the last.

**Chapter architecture (six sections, one continuous scroll):**

1. **The Seal** — Full-viewport opening. A single circular device (hand-drawn copperplate monogram of the domain) centered on a deep black field, surrounded by concentric gold rule lines. The seal rotates 1.5° on `tilt-3d` mouse parallax — barely perceptible, as if the folio shifted in your hands. No text except the domain name set at `6vw` below the seal.

2. **The Provenance** — 80vh section. Two-column layout: 660px measure left column of dense body text, 280px right column of marginal annotations in a lighter weight. Leather-texture background panel behind the annotation column. Section header in drop-cap grotesque-neo display, 120px, gold.

3. **The Catalogue** — Horizontal rule divider (3px gold, 1px black shadow) then an asymmetric three-panel grid. Left panel full-height image (vintage engraving texture), center two stacked text blocks, right a single large pull-quote in 80px weight. Each panel subtly tilt-3d-transforms on hover at `perspective: 1200px`, `rotateY(2deg)`.

4. **The Marginalia** — Full bleed dark section. Hand-drawn ink marks (SVG paths) animate in on scroll — not as decoration but as marginalia that appear as you "read" down the page. Annotations draw themselves letter by letter across the left margin.

5. **The Index** — Scholarly index layout: two columns of small-caps entries with leader dots, gold page reference numbers. The visual vocabulary of a 19th-century concordance. Typography only, no images.

6. **The Colophon** — Black footer with embossed gold type. Small-caps. The restraint of a printer's mark. Single centered ornament (hand-drawn SVG flourish).

**Grid:** CSS Grid, 1440px container, 12 columns at 100px each with 24px gutter. Sections alternate between full-bleed and contained-width. Mobile collapses to single column with preserved chapter sequencing.

## Typography and Palette

**Primary Colors:**
- `#0A0705` — pitch-black with a leather warmth undertone (backgrounds, dominant)
- `#C9A84C` — antique gold, hand-pressed leaf (headings, ornaments, rule lines)
- `#F5EDDA` — vellum cream (body text, primary reading surface)
- `#3D2B1F` — deep cognac brown (leather texture surfaces, secondary panels)
- `#8B6B3D` — raw sienna gold (marginal annotations, secondary gold register)
- `#1C1008` — near-black with amber cast (code, labels, colophon text)
- `#E8D5A3` — pale gilt (hover states, subtle highlight on interactive elements)

**Typography (Google Fonts only):**

- **Display / Headings:** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display) — Old-Style serif with high contrast strokes. Used for chapter titles and the seal wordmark. Set at `clamp(48px, 8vw, 128px)`, weight 700, color `#C9A84C`. Italic variant for pull-quotes.
- **Body / Grotesque Neo:** [`Barlow`](https://fonts.google.com/specimen/Barlow) — clean modern grotesque with just enough warmth. Body text at 17px/1.7, weight 400, color `#F5EDDA`. Semi-condensed variant for annotation columns at 14px.
- **Marginal Annotations / Scholarly:** [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville) — dignified transitional serif for the marginalia column. Set at 13px/1.6, italic, color `#8B6B3D`.
- **Index / Small-Caps:** [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond) — old-style humanist for the index section. `font-variant-numeric: oldstyle-nums`. Set at 13px in `font-variant: small-caps`, color `#C9A84C`.
- **Ornamental / Drop Caps:** Playfair Display, 5× body size, positioned absolutely, `color: #C9A84C`, `line-height: 0.8`.

**Type scale:** Major Third (1.25×) — 13, 16, 20, 25, 31, 39, 49, 61, 76, 95px.

## Imagery and Motifs

**Leather Texture as Primary Surface:** The leather texture is not a background image — it is a CSS layered surface. Base: `background-color: #3D2B1F`. Texture: a repeating SVG noise pattern at `opacity: 0.12` over a subtle radial gradient from `#4A3526` to `#2A1C10`. On section panels, a second layer uses `mix-blend-mode: multiply` with a 400×400px repeating leather grain tile (small, tight, calfskin-scale). The result reads as tooled leather under gallery lighting.

**Hand-Drawn Ink System:** All ornamental elements are SVG paths drawn with a variable-width stroke (`stroke-width` transitions from 0.5 to 2.5px along the path, mimicking a quill nib). Elements in the vocabulary:
- **Rule flourishes:** curvilinear end-marks on chapter headers, 60px wide
- **Section dividers:** triple-rule in gold/black/gold with hand-drawn terminal diamonds
- **Marginal annotation marks:** pointing manicule (☞), asterisk-variants, brackets
- **The central seal:** circular frame with acanthus leaf segments and an internal monogram "R" — all SVG, all drawn with `stroke-dasharray` animation on first load (draws itself over 2.4 seconds)
- **Drop-shadow stamps:** rectangular gold "RINJI.NET" stamp in the footer, rotated −3°, with SVG ink bleed at corners

**Motifs from the Vintage Tradition:**
- Acanthus leaf scrollwork (SVG, inline)
- Printer's ornaments (Unicode: ❧ ☙ ✦ ❦) at section transitions
- Herringbone pattern in `#3D2B1F`/`#2A1C10` used as a narrow decorative border (8px) on major section breaks
- A single full-bleed vintage engraving (desaturated, `sepia(0.6)`, `contrast(1.2)`) used as the background of Section 3, at `opacity: 0.15`

## Prompts for Implementation

Build rinji.net as a **six-chapter leather codex** that unrolls under the reader's cursor with deliberate, unhurried depth. The core experience: every scroll reveals a new layer of a physical object — not a website navigated, but a folio examined.

**Parallax depth system:**
```css
.layer-leather-bg    { --parallax-speed: 0.3; }
.layer-ornaments     { --parallax-speed: 0.5; }
.layer-rule-lines    { --parallax-speed: 0.7; }
.layer-body-text     { --parallax-speed: 1.0; }
```
Use `transform: translateY(calc(var(--scroll-y) * var(--parallax-speed) * -1))` on each layer. Measure `--scroll-y` via a single `scroll` listener writing to a CSS custom property on `:root`.

**Tilt-3D on section panels:**
Every `.chapter-panel` gets `tilt-3d` behavior: mouse position within the panel maps to `perspective(1200px) rotateX(${-y*2}deg) rotateY(${x*2}deg)` where x,y are normalized `−1…1` cursor offsets within the bounding box. The leather texture panel visually bows in the hand of the reader. Reset to `rotateX(0) rotateY(0)` with `transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)` on `mouseleave`.

**The Seal (opening section):**
The SVG seal draws itself on load via `stroke-dasharray` / `stroke-dashoffset` animation: total path length measured via `getTotalLength()`, animated from `offset === length` to `offset === 0` over 2400ms with `easing: cubic-bezier(0.4, 0, 0.2, 1)`. After the draw completes (2400ms), the gold fill fades in over 600ms: `fill-opacity: 0 → 1`.

**Hand-drawn marginalia animation (Section 4):**
SVG `<path>` elements representing ink strokes are hidden off-screen left. When their section enters the viewport (IntersectionObserver at `threshold: 0.1`), each stroke animates its `stroke-dashoffset` from full-length to 0 in sequence, with 80ms delays between strokes, 400ms per stroke. The visual result is ink writing itself in the margin as the reader descends.

**Index section (Section 5):**
Pure CSS, no JavaScript. Two-column grid. Each entry: `display: flex; justify-content: space-between`. Between term and page number, a `::after` pseudo-element with `content: ""`, `border-bottom: 1px dotted #8B6B3D`, `flex: 1`, `margin: 0 8px 4px`. Page numbers: `font-variant-numeric: oldstyle-nums`, `color: #C9A84C`.

**Color logic — gold must earn its presence:**
Gold (`#C9A84C`) is used ONLY for: headings, rule lines, page reference numbers, interactive hover states, the seal ornament, and the stamp footer. Never as a background, never on body text. The discipline of its use is the discipline of actual gilding.

**Avoid completely:** hero CTAs, pricing tables, testimonial carousels, statistics grids, team photo grids, notification badges, social media share buttons, gradient mesh blobs, frosted glass cards.

## Uniqueness Notes

1. **First gold-black-luxury + hand-drawn combination in the corpus.** Frequency analysis shows `gold-black-luxury` at 2% and `hand-drawn` at 58% — but every `hand-drawn` design in the corpus uses it as "warm sketchbook." rinji.net inverts this: hand-drawn here means copperplate engraving discipline, the hand of a master printer, not a friendly illustrator. The combination of gold-black-luxury precision with hand-drawn ink craft has no precedent in the existing 436 designs.

2. **Parallax deployed as archaeological depth, not decorative motion.** Frequency shows `parallax` at 75% — heavily overused. rinji.net reframes the pattern: each depth layer represents a physical layer of the codex (leather binding, vellum pages, ink, gold leaf). The parallax is not a visual trick but a material metaphor. This narrative justification for motion is absent in all other parallax implementations in the corpus.

3. **Index section as a primary typographic experience.** No design in the corpus uses a scholarly concordance/index as a full section with leader dots, oldstyle numerals, and small-caps entries. This is the rarest layout in the registered vocabulary and it places rinji.net in the 0% segment of the index-format motif.

4. **Tilt-3D on leather panels that physically bow.** `tilt-3d` appears at 6% in the corpus, but exclusively on cards and UI components. Applying it to full-width leather-textured chapter panels — so the entire section bows like a physical folio held at an angle — is an unreported combination.

5. **Self-drawing SVG seal as a temporal opening ritual.** The opening experience (seal draws itself over 2.4 seconds before the page content is readable) enforces a pace dictated by the object, not the user. This adversarial patience is the tonal opposite of the 89% `photography`-led hero sections in the corpus. The site demands the reader wait for it.

**Planned seed:** aesthetic: hand-drawn, layout: parallax-sections, typography: grotesque-neo, palette: gold-black-luxury, patterns: tilt-3d, imagery: leather-texture, motifs: vintage, tone: scholarly-intellectual

**Avoided overused patterns (from frequency analysis):** `parallax` as decorative-only (75%), `hand-drawn` as warm-sketchbook (58%), `stagger` as default reveal (50%), `photography` hero (87%), `warm` palette (89%), `vintage` as surface decoration only (35%).
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:48:33
  domain: rinji.net
  seed: numerals, and small-caps entries
  aesthetic: rinji.net is a **leather-bound compendium of the irrefutable** — imagined as a p...
  content_hash: d293f8cfd80d
-->