# Design Language for p9r.st ## Aesthetics and Tone p9r.st is **a single sheet of heavy cotton-rag paper, caught mid-fold, lit by a low desk lamp at 4 p.m.** The domain reads aloud as "paper" — and the site takes that literally and obsessively: every surface on the page is a piece of physical paper, with weight, grain, deckled edges, the faint translucency you see when light passes through 120gsm stock, and the soft canyon-shadows of a crease. This is **skeuomorphic origami** — not the glossy iOS-2010 kind of skeuomorphism (no leather stitching, no felt, no green baize), but a **dry, papery, studio-photography skeuomorphism**: matte fibre, honest shadows, the slightly bruised look of cardstock that has been folded and unfolded a few times. The tone is **quiet, tactile, grounded-earthy** — the unhurried calm of a bookbinder's bench or a stationery atelier in Kyoto. Nothing glows. Nothing is neon. There are no gradients-as-decoration; the only gradients on the page are the genuine ones cast by raking light across a folded ridge. The mood is **patient and analog** — a site that behaves like an object you can pick up, turn over, and crease along a marked line. It should feel less like a "landing page" and more like **the moment before you fold something** — the held breath of a flat sheet that knows it is about to become a crane, a box, a boat, a hat. Reference touchstones: the photography in *Paper Made!* craft books; Akira Yoshizawa's wet-folding diagrams; the deckled edge of Fabriano paper; the way a single overhead lamp turns a white sheet into a relief map of ridges and valleys; vintage Crane & Co. letterpress sample books; the matte, shadow-forward product shots of MD Paper notebooks. ## Layout Motifs and Structure The page is built on a **fold grid**, not a column grid. Imagine the standard origami "preliminary base" crease pattern superimposed on the viewport: a square divided by mountain and valley folds into triangles and smaller squares. Section breaks in p9r.st are never horizontal rules — they are **crease lines**: thin, slightly irregular, with a 1px highlight above and a 2–3px soft shadow below, exactly as a fold catches light. Content sits *on the facets* between creases, and each scroll step "folds" the previous facet down and "unfolds" the next one up. - **The held-breath hero.** Above the fold (pun fully intended): one enormous flat sheet occupying the whole viewport, dead center, with the faintest pre-scored crease lines printed on it in pale grey — a crease pattern waiting to be activated. The wordmark "p9r.st" sits letterpressed (debossed) into the sheet's upper-left, small. Generous **ma** (間) — negative space — surrounds it; the sheet does not touch the viewport edges, it floats on a darker paper "desk" surface with a soft contact shadow. - **Facet sections.** Five or six content facets, each one a quadrilateral (some rectangular, some trapezoidal) tilted a few degrees off true so it reads as a plane in 3D space rather than a flat div. Text is set inside generous margins on each facet, as if typeset for letterpress with a wide gutter. - **The crease seam.** Between every facet, a full-width crease: a 70% width hairline that does NOT span edge to edge (paper folds don't reach the trimmed margin), with its lighting flipped on alternating seams (mountain fold / valley fold) so the page reads as a real zig-zag accordion when you squint. - **No card grid. No bento box. No dashboard.** If something needs to be a "set" of items (e.g. a small index of fold types), they are **stacked sheets** — overlapping rectangles with offset contact shadows, like a pile of paper on the desk, not a tidy grid of cards. - **Right margin "registration marks."** A thin vertical column along the right edge carries small printer's registration crosses and a fold-step counter (01 / 06, 02 / 06 …) — the only "navigation" — echoing the step numbers in an origami diagram. Layout vocabulary claimed: **ma-negative-space** (15%), **stacked-sections** (2%), **layered-depth** (10%) — and a fold-grid concept that the corpus does not appear to use at all. ## Typography and Palette **Fonts — Google Fonts only. Two voices: a precise diagram-caption serif, and a sturdy specimen-book grotesque.** - **Display / wordmark / facet headings — *Spectral* (serif-revival, weights 300 & 600, with italic).** Spectral is a screen-first serif with sharp, low-contrast strokes that read like the captions printed beside origami diagram steps. Used debossed (letterpress) for "p9r.st", and for the short title on each facet, set large but never gigantic — paper instructions are calm, not shouty. Tracking slightly open, like type pressed into soft stock. - **Body / instructions / step numbers — *IBM Plex Mono* (mono / tech-mono, weights 400 & 500).** A monospaced face for the diagram-instruction feel: "valley-fold along the dashed line", "rotate 90°", "open and squash". Monospace also lets the step counters and registration numbers in the right margin align perfectly like a printer's job ticket. Used at modest sizes with comfortable line-height. - **Optional accent — *Cormorant Garamond* (elegant-serif, italic only)** for a single pull-quote about paper, if one is used — high-contrast, delicate, like an engraver's flourish on a sample-book cover. **Palette — warm paper neutrals plus one ink and one fold-shadow blue. No neon, no rainbow gradient.** - `#F4EFE3` — **Cotton Rag.** The primary sheet color: warm, slightly creamy white with a fibre tint. - `#E6DECB` — **Manila.** Secondary sheet / kraft-leaning facet, and the underside of folds. - `#D8CDB3` — **Toned Stock.** Deeper paper tone for the "desk" surface the sheet rests on, and for stacked-sheet shadows. - `#2B2722` — **Walnut Ink.** Near-black warm brown for all text — the color of old fountain-pen ink on aged paper, never pure #000. - `#7C8B93` — **Fold Shadow.** A cool, desaturated slate-blue used ONLY in the gradients of crease shadows and the contact shadow under the floating sheet — the single cool note, so creases read as real cast shadow against the warm paper. - `#B5482E` — **Vermilion Registration.** A muted printer's red, used sparingly for registration crosses, the active step number, dashed valley-fold guide lines, and link underlines. This is the page's only saturated accent and it should appear in tiny doses. - `#9C9176` — **Pencil Grey.** Soft graphite tone for the pre-scored crease-pattern lines printed faintly on the hero sheet (dashed = valley, dotted = mountain). Contrast pairing: Walnut Ink on Cotton Rag for everything readable; Vermilion only for marks and accents; Fold Shadow strictly atmospheric. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Everything is CSS-and-SVG paper:** layered radial/linear gradients for the raking-light relief, fine SVG fibre-noise filters for grain, hand-drawn SVG crease lines, and box-shadows tuned to look like real contact shadows. - **The crease-pattern overlay.** A faint SVG diagram on the hero sheet: the classic origami "bird base" or "waterbomb base" crease pattern, lines in Pencil Grey — dashed for valley folds, alternating dash-dot for mountain folds, with small arc-arrows in Vermilion showing fold direction. On load, a couple of these lines "draw" themselves (path-draw-svg) and the sheet gives one slow, shallow fold-and-unfold breath. - **Deckled edges.** Every sheet has a torn-cotton deckle on at least one side — an irregular SVG mask, never a clean rectangle. The "desk" surface beneath is a clean cut; the sheets on it are deckled. - **Fold-step diagrams as section dividers.** Each crease seam carries a tiny inline diagram in the right margin: a 24×24 SVG square showing the fold state at that step (flat → first fold → triangle → … ) — like the running thumbnails in a real origami booklet. - **Watermark.** Hold-to-light effect: when a facet is hovered/active, a faint translucent watermark (a paper-mill style oval mark, or a tiny crane silhouette) glows through the sheet — lighter, not darker — as if backlit. - **Folded objects, abstract and minimal.** The only "illustration" allowed: simple flat-shaded SVG renders of a folded crane, a box, a paper boat, a fortune-teller (cootie catcher), each made of two or three flat tones from the palette plus one Fold-Shadow gradient on the crease. They appear small, resting on facets, casting offset contact shadows. No outlines unless a 1px Walnut hairline. - **Pressure-debossed type.** The wordmark and facet titles look pressed *into* the paper: a light highlight on the upper-left of each glyph, a Fold-Shadow inner-shadow on the lower-right — letterpress on cotton stock. - **Dust & specks.** A barely-visible scattering of tiny darker flecks (paper fibre, eraser crumbs) fixed to the desk surface, parallaxing very slightly slower than the sheets. ## Prompts for Implementation Build p9r.st as **one HTML file, one CSS file, one JS module** — a single vertical scroll that behaves like turning the pages of an origami instruction booklet, or like a long accordion-folded sheet being opened one facet at a time. There is **no CTA, no pricing block, no stat grid, no testimonial row, no email signup, no contact form, no "Get Started" button.** There is only the sheet, the creases, and the steps. **Narrative structure — six facets, vertical scroll, "fold" transitions:** 1. **Flat Sheet (hero).** Full viewport. The cotton-rag sheet floats on the toned-stock desk with a soft contact shadow. Faint pre-scored crease pattern printed on it in Pencil Grey. Debossed "p9r.st" upper-left; one line of mono text lower-center: *"a single sheet, before it becomes anything."* On load: two crease lines draw themselves; the sheet does one slow 1.5° fold-breath and settles. A small Vermilion "01 / 06" appears in the right margin. 2. **First Crease — "the valley fold."** As you scroll past the first seam, the hero facet rotates away on a horizontal axis (CSS 3D, perspective ~1400px, transform-origin at the crease line) — a real downward fold — and the next manila facet unfolds up to meet it. Short Spectral heading; a few lines of Plex Mono describing what a valley fold is, metaphorically applied to "shortening a URL" — folding distance out of a thing so two far-apart points touch. A 24px diagram thumbnail in the margin shows the fold state. 3. **Second Crease — "mountain fold."** Lighting on this seam is flipped (ridge highlight where the previous one had a trough). Facet tilts a few degrees off-true. Content: the idea that a fold seen from the front is a valley and from the back is a mountain — same crease, two truths — illustrated by a small flat-shaded SVG crane appearing, resting on the facet, casting an offset shadow. 4. **Squash Fold.** A more complex move: the facet appears to "open and flatten" — a brief CSS animation where a triangular flap rotates open and presses down into a new shape. Three stacked deckled sheets (offset contact shadows) slide in here as a tiny index of "what people fold": *crane · box · boat · fortune-teller* — each a small SVG, each on its own sheet, no grid, just an honest pile. 5. **Reverse Fold — "inside-out."** Background desk tone deepens slightly (lamp dimming as the afternoon goes). The facet flips its visible face — front paper becomes back paper (Cotton Rag → Manila underside) — with the Fold-Shadow gradient sweeping across the crease as it inverts. A single Cormorant Garamond italic pull-quote, centered, lots of ma around it: something quiet about paper holding the memory of every fold. 6. **The Finished Form.** The accordion is fully open: all facets visible as a gentle zig-zag down the page (small parallax: nearer facets move a touch faster). The final facet shows the completed folded object (the crane, fully assembled, flat-shaded, larger now), resting in negative space, one long contact shadow. Beneath it, debossed and small: the wordmark again, plus the mono line *"p9r.st — everything folds down."* A faint watermark crane glows through the sheet on hover. Footer: registration crosses, "06 / 06", nothing else. **Motion & interaction notes:** - All transitions are **slow, weighted, spring-damped** — paper has mass; nothing snaps. Easing like a sheet settling: a gentle overshoot then rest. - **Scroll drives the folds** (scroll-triggered): each seam is a hinge; scrolling rotates the facet above it down and the facet below it up, with `backface-visibility` revealing the manila underside mid-rotation. - **Cursor = the lamp.** Moving the pointer subtly shifts the highlight/shadow direction of the nearest crease and the contact shadow under sheets — as if you're tilting the desk lamp. Very restrained, a few degrees of shadow-angle, no glow. - **Hover on a facet** = hold-to-light: the watermark fades up (lighter), the paper grain seems to brighten faintly. - **path-draw-svg** for crease lines and fold arrows; **stagger** the step-number reveals in the right margin; **fade-reveal** body text rising a few px as each facet unfolds. - Respect `prefers-reduced-motion`: folds become simple cross-fades, the sheet sits still, watermarks still work on hover. - Grain via SVG `feTurbulence` at low opacity over every paper surface — never a flat fill. - Performance is **not** a concern; layer the gradients and shadows generously to sell the physicality. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Skeuomorphism reframed as dry studio-paper, not glossy 2010-iOS skeuo.** Skeuomorphic sits at only 4% in the aesthetic frequency table, and what little exists tends toward leather/felt/chrome. p9r.st is skeuomorphic about *one* material — cotton-rag paper — and renders it with matte fibre, honest cast shadows, and deckled edges. No glassmorphism (80% of corpus — explicitly refused), no neon, no decorative gradient (95% of corpus uses gradient palettes; here the *only* gradients are real fold-shadows). 2. **A fold grid instead of a column/card grid.** Card-grid is 90% and bento-box 14%; p9r.st has neither. Sections are facets of a folded sheet, dividers are crease lines with flipped lighting, and the whole page is a vertical accordion. Stacked-sections (2%) and ma-negative-space (15%) carry the structure instead. 3. **Origami instruction booklet as the interaction model.** No CTA, no pricing, no stats, no testimonials — refusing the CTA-heavy convention entirely. Navigation is a printer's-ticket step counter ("03 / 06") and registration crosses in the right margin. The literal reading of the domain ("paper") drives every visual and motion decision. 4. **Cursor-as-desk-lamp, not cursor-as-spotlight.** Cursor-follow is 89% of the corpus but almost always a glowing orb or magnetic blob. Here the cursor only nudges the *angle of cast shadows* across creases — a lighting model, not a particle. 5. **Palette of paper neutrals + a single muted printer's vermilion + one cool fold-shadow slate.** Warm palettes are 98% but typically warm-as-cozy-gradient; this is warm-as-actual-paper-fibre (#F4EFE3 / #E6DECB / #D8CDB3) with Walnut Ink (#2B2722) text and exactly one saturated accent (#B5482E) used in homeopathic doses. Chosen seed / style: **skeuomorphic origami paper, ma-negative-space layout, serif-revival + tech-mono typography, warm paper neutrals palette, scroll-triggered fold transitions, paper-aged imagery, layered-depth motifs, grounded-earthy tone** — i.e. *aesthetic: skeuomorphic, layout: ma-negative-space, typography: serif-revival, palette: warm-earthy, patterns: scroll-triggered, imagery: paper-aged, motifs: layered-depth, tone: grounded-earthy*. Avoided patterns from the frequency analysis: glassmorphism (80%), hand-drawn (96%), photography imagery (98%), card-grid (90%), gradient palette as decoration (95%), cursor-follow glow (89%), parallax-everything (91%), counter-animate stat grids, typewriter hero text used as gimmick.