# Design Language for p9r.xyz ## Aesthetics and Tone p9r.xyz is read aloud as **"paper"** — and the entire site behaves like a single, very large, very quiet sheet of handmade kozo paper laid flat on a low table in raking afternoon light. The aesthetic is **japanese zen portfolio**: not the gift-shop "zen" of bamboo borders and stock stones, but the austere, *karesansui*-rock-garden discipline of a Kyoto temple veranda — where 90% of the composition is deliberately empty, where the few objects present are placed with agonizing care, and where the most expensive material in the room is the *space around* the objects, not the objects themselves. The mood is **zen-contemplative bordering on devotional**: hushed, slow-breathing, almost wordless. The site treats paper not as a UI metaphor (no "cards", no "sheets" stacked into z-depth piles) but as a *substance with grain, deckled edges, fiber, translucency, and memory of folds*. Where most sites in this corpus reach for warmth and gradient, p9r.xyz is **cool, matte, and flat** — the warmth here is the warmth of *recycled rag paper*, a barely-there cream, not a sunset. Conceptually the page is **one continuous scroll that mimics the act of unfolding a single piece of paper** — it begins folded small and tight at the top, and as you descend the paper opens, creases relax, and the final state is a fully-flattened sheet bearing one ink-brushed mark. Every transition is a *fold or an unfold*, never a slide, fade, or zoom. ## Layout Motifs and Structure The layout is **single-column, ma-negative-space taken to an extreme**: one narrow content channel (max 540px wide) running down the optical center of an otherwise empty paper field, with **massive vertical breathing room** — minimum 38vh of emptiness between any two content blocks. There is **no top navigation, no header bar, no footer, no sidebar**. Navigation, where it exists at all, is a single hairline vertical rule on the left margin with a small filled square that travels down it as you scroll — a *bookmark ribbon*, nothing more. **The fold-grid.** The page is divided into seven horizontal "panels" the way a brochure is divided by its folds. Each panel boundary is rendered as an actual **crease line**: a 1px valley-fold shadow (a thin dark line with a 2px soft highlight directly above it) spanning the full viewport width. The content channel ignores these creases — text flows past them — but the *paper substrate* visibly bends at each one, with a faint CSS gradient suggesting the sheet catching light differently on either side of the fold. **Composition rules:** - Content is set **flush-left within the 540px channel, ragged-right**, never justified, never centered (only the single final brush-mark is centered). - Each panel carries **at most one idea** — a short paragraph, or a single folded-paper figure, or one line of large type. Never two. - The channel is offset **4% left of true center**, leaving a wider right margin — the way a calligrapher leaves room for a colophon. - **No boxes, no borders, no fills, no shadows on content** — only the paper itself has shadow. Text sits *directly on the fiber*. - The final panel is **deliberately almost entirely empty**: one centered ink mark, 120px wide, in the lower third, with nothing else for 60vh above it. ## Typography and Palette **Type system (Google Fonts only):** - **Primary text face — `Zen Kaku Gothic New`** (weights 300, 400, 500). A modern Japanese-designed humanist sans with low contrast, generous counters, and a calm, almost monastic evenness. Used for all body copy, captions, and the bookmark numerals. Set at body 17px / 1.95 line-height — *very* loose leading, like ruled meditation paper. Tracking `0.01em`. The looseness is the point: the eye must travel slowly. - **Display / large-statement face — `Shippori Mincho`** (weights 400, 600). A serif (mincho) with delicate, brush-derived terminals and visible "ink-pool" weight at stroke ends. Used only for the three or four oversized single-line statements that anchor whole panels, set 44px–72px, weight 400, with `letter-spacing: 0.04em` and a slightly raised baseline. It should read like an inscription, not a headline. - **Micro-label / metadata face — `Zen Kaku Gothic New` at 300, 11px, `letter-spacing: 0.22em`, uppercase Latin** — used for the bookmark panel numbers (01 / 02 / …) and a single line of colophon at the very bottom. No third "fun" face. No mono. Three faces, two families, total restraint. **Palette — matte, cool-leaning, paper-true (8 values):** - `#F4F1E8` — *kozo cream*: the base paper field. Not white, not warm-beige — a desaturated oat with a hair of green, the color of unbleached mulberry paper. - `#EAE6D8` — *deckle shadow*: the slightly darker tone used inside fold valleys and along deckled edges. - `#FBFAF4` — *highlight ridge*: the near-white that sits on the raised side of every crease. - `#2B2A26` — *sumi ink*: the near-black for all body text — a warm-cool-neutral charcoal, never pure `#000`. - `#6C6A60` — *graphite annotation*: a mid grey for captions, the bookmark rule, and secondary text. - `#8C9A86` — *temple moss*: a single muted sage, the *only* chromatic accent — used for the bookmark square, link underlines, and the fold-line highlight tint. Used sparingly, perhaps four times on the entire page. - `#B3492E` — *vermilion seal*: a deep cinnabar red used **exactly once**, for the final hanko-style stamp mark near the bottom. Its rarity is what gives it weight. - `#D8D3C2` — *fiber fleck*: the tone of the tiny visible plant-fiber inclusions scattered across the paper texture. The palette is intentionally close-valued and quiet — there is no high contrast except sumi-on-cream for text and the lone vermilion stamp. No gradients of color; only gradients of *light across a fold*. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Every visual is either CSS-rendered paper physics or hand-built SVG line work in sumi ink.** - **The paper substrate itself** — the hero "image." A full-page layer combining: a very subtle SVG turbulence/fractal-noise filter at ~3% opacity for fiber tooth; a sparse scatter of 40–60 tiny irregular `fiber-fleck` shapes (3–8px, rotated, low opacity); **deckled edges** on the left and right of the sheet drawn as a wavy SVG clip-path so the paper never reaches the true viewport edge — there is always a thin band of darker void beyond the deckle. - **Seven origami figures**, one per panel, drawn as **single-weight (1.25px) sumi-ink SVG line drawings** of classic folds, *shown mid-fold rather than complete*: (01) a flat square with two ghosted crease lines; (02) a triangle base; (03) the "preliminary base"; (04) a half-folded crane wing; (05) the crane, nearly complete; (06) the crane finished, tiny, in the upper corner of the panel; (07) — nothing; the paper has been *unfolded again*, lying flat, bearing only the memory-creases as faint grey lines and the single vermilion seal. The narrative arc: fold up, then let go. - **Crease lines as the recurring decorative motif** — thin, precise, paired light/dark hairlines appear not only at panel boundaries but as faint diagonal "memory" lines fanning out from where figures were folded. - **The hanko / seal mark** — the one moment of color: a hand-drawn SVG of an irregular vermilion stamp impression (slightly broken edges, uneven ink coverage) containing a single abstract glyph. It is the page's signature and its only "logo." - **The traveling bookmark square** — a 7px filled `temple-moss` square that slides down the left hairline rule as the user scrolls, snapping gently to each panel's vertical anchor. - Absolutely **no icons** (no hamburgers, no arrows except one delicate hand-drawn downward chevron at the very top inviting the first scroll), no buttons, no badges. ## Prompts for Implementation Build p9r.xyz as **a single HTML file, one CSS file, one small ES module** — no framework, no build step, no service worker. The page is a 70–90 second meditation: scrolling slowly down a single sheet of handmade paper as it folds itself into a crane and then unfolds again. There is **no CTA, no pricing, no stat grid, no testimonials, no contact form, no email capture, no FAQ, no logo wall, no newsletter, no chat widget, no cookie banner**. Resist every instinct toward those. This is a *full-screen narrative experience*, not a marketing page. **Storytelling structure (seven panels, vertical scroll, fold/unfold transitions only):** 1. **Panel 01 — The square.** Almost empty. The kozo-cream field, deckled edges visible, fiber flecks scattered. Centered low: a small SVG of a plain paper square with two faint ghost-crease lines, and beneath it in Shippori Mincho 44px: *"a sheet remembers every fold."* A tiny hand-drawn chevron pulses once, inviting downward motion. The first crease line waits at the bottom of the viewport. 2. **Panel 02 — First fold.** As this panel enters, the *whole paper substrate visibly creases* at the boundary above (a CSS transform: a subtle perspective bend, animated on scroll). The triangle-base SVG appears, drawn on via `path-draw-svg` stroke animation — the line *being drawn* as if folded into being. One short Zen Kaku Gothic paragraph (≤ 40 words) about how paper holds tension without breaking. 3. **Panel 03 — The preliminary base.** The preliminary-base SVG. Large Shippori Mincho line: *"tension, then release."* The bookmark square has now traveled a third of the way down its rail. 4. **Panel 04 — Wing forming.** Half-folded crane wing SVG, larger now, occupying more of the channel. The memory-crease "fan" lines appear faintly behind it. Short paragraph. 5. **Panel 05 — Nearly a crane.** The near-complete crane, the most detailed SVG, drawn on slowly. This is the visual climax — but kept small and calm, never triumphant. 6. **Panel 06 — The crane, finished, small.** The completed crane SVG shrinks to ~80px and settles into the *upper* corner of an otherwise vast empty panel. Beneath the emptiness, low and small: *"and then — flat again."* in Shippori Mincho. 7. **Panel 07 — The unfolded sheet.** Almost the entire panel is the bare cream field with only faint grey memory-creases. In the lower third, centered (the *only* centered element on the page), the vermilion hanko seal fades in — not slides, not zooms, just a slow opacity bloom like ink wicking into fiber — with one line of 11px tracked-out colophon beneath it. Then nothing. 40vh of empty paper below. The page simply *ends*, like a held breath let go. **Motion & interaction notes:** - **Every transition is a fold or an unfold.** Use CSS 3D perspective on a parent wrapper so the paper substrate appears to physically bend at crease lines as they cross the viewport center. No `translateX` slides. No scale-zoom. No parallax of multiple layers at different speeds — there is *one* layer (the paper) and it bends; that is the only depth cue. - **SVG figures draw themselves on** (`stroke-dasharray` / `stroke-dashoffset` animated on scroll-into-view) at a *deliberately slow* rate — 1.6s+ — so it reads as a hand folding, not a loading spinner. - **Scroll feels slightly resistant** — implement gentle scroll-snap to each panel anchor with a long, eased settle (no bouncy spring; an `ease-out` over ~600ms). The user should feel they are *turning a page of a heavy book*, not flicking a feed. - **The bookmark square** travels the left hairline rule continuously, with the current panel number (01–07) appearing 10px to its right in 11px tracked uppercase, fading in/out as it snaps. - **Respect stillness.** No autoplay, no looping ambient animation, no idle "wobble." When the user stops scrolling, the page is *completely motionless*. The only living thing is the bookmark and the figure currently drawing itself. - **Sound: none.** Do not add audio. - Cursor: default arrow, no custom cursor, no cursor-follow effects, no magnetic buttons — they would violate the stillness. **Build hints:** `prefers-reduced-motion` disables the fold-bend and renders all SVGs already-complete. The paper noise texture is a single inline SVG `` with `feTurbulence` — no image files. Deckled edges via `clip-path: path(...)` on the substrate. Total payload should be tiny. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **"Paper" rendered as a physical substance with fold-memory, not as a stack-of-cards UI metaphor.** The corpus is saturated with `card-grid` (91%) and `glassmorphic-cards`; p9r.xyz has *zero* cards, zero stacked sheets, zero z-depth pile-ups. Instead the entire page is one continuous sheet that bends at brochure-fold creases. The "paper" idea is taken literally and physically rather than as decoration. 2. **An anti-warmth, anti-gradient palette in a corpus that is 98% warm and 95% gradient.** p9r.xyz uses matte, cool-leaning, close-valued paper tones with **no color gradients at all** — only gradients of *light across a fold*. The single chromatic accent (temple moss) appears ~4 times; the single warm-bright value (vermilion) appears exactly *once*. This is a deliberate departure from the dominant gradient-mesh / warm-sunset convention. 3. **Ma-negative-space pushed past convention.** While `ma-negative-space` exists at 16% and `single-column` at 17%, p9r.xyz combines them with a temple-veranda extremism — 38vh+ of emptiness between blocks, a near-empty final panel, one-idea-per-panel — that reads as devotional restraint rather than mere minimalism. No header, no footer, no nav bar, no buttons, no icons (save one chevron). 4. **A narrative that *peaks then deliberately deflates*** — fold up to a crane, then unfold flat again, ending on bare paper and a held breath. Most narrative-scroll sites build to a climactic CTA or reveal; this one's emotional arc is *letting go*, and it ends on emptiness on purpose. 5. **Every transition is a fold or unfold** — no slides, fades, zooms, or multi-layer parallax (parallax is 91% in the corpus; p9r.xyz uses none). The single-layer paper-bend is the only depth cue, which is, as far as the frequency analysis shows, an unused approach. **Chosen seed/style:** `japanese zen portfolio` — *aesthetic: zen, layout: ma-negative-space, typography: serif-revival (Shippori Mincho) + humanist (Zen Kaku Gothic New), palette: muted, patterns: path-draw-svg, imagery: paper-aged, motifs: leaf-organic (origami fold-lines), tone: zen-contemplative.* **Avoided patterns from frequency analysis:** card-grid (91%), parallax (91%), cursor-follow (89%), magnetic (82%), glassmorphism (80%), warm palette (98%), gradient palette (95%), photography (98%), full-bleed CTA layouts, stat grids, hero-dominant marketing structure.