# Design Language for PPSS.ee ## Aesthetics and Tone PPSS.ee is **a pressed-leaf scrapbook taped to the inside of a 1996 plastic stationery folder** — the kind a Tallinn schoolchild kept in a desk drawer between birch-leaf summers and rye-bread winters. The doubled P's are two pressing-plates clamping a single specimen; the doubled S's are the curling pull-tabs of two adhesive lamination pouches; the lowercase `.ee` is the small printed inventory label glued to the bottom-right corner. The site reads, top to bottom, like *one long page of a kept album*, scrolled rather than turned. The dominant aesthetic is **skeuomorphic** — but explicitly *not* the iOS-2007 chrome-and-leather skeuomorphism that the corpus already gestures at via leather-texture and chrome-metallic. PPSS.ee is **paper-and-plastic skeuomorphism**: the soft gloss of a No. 6 lamination pouch, the matte fibre of recycled card-stock, the slightly tacky sheen of a fresh sticker peeled from its backing 14 seconds ago. Light comes from a single overhead desk-lamp fixed at 11 o'clock — every shadow is the same length, every shadow is warm. The tone is **approachable-casual**: an album made by a *person*, not a brand. Lowercase voice. Soft jokes in the margins, written by hand in pencil. There is a single pressed birch leaf on every section, never the same one twice — each is a distinct SVG specimen with its own asymmetric vein-tree and a tiny brown bruise where the press came down too hard. The reader is invited to lean in close, the way you lean in close to read someone's diary by the kitchen window. Mood vector: **soft-bright-quiet**. Not melancholic. Not playful. The Estonian summer at 9:43 p.m. when the sky is still pale-rose and the linden flowers are starting to drop. PPSS.ee is *that* color of light, frozen and laminated. ## Layout Motifs and Structure Strictly **single-column**. One column, 38rem wide on desktop (clamped 18rem → 38rem on mobile/tablet), centered on a much wider cream-paper background that extends beyond the viewport. **No hero. No nav bar. No CTA strip. No footer columns.** The page is a vertical roll-out, scrolled top-to-bottom in a single uninterrupted line — like flipping pages of an album by tilting it forward. The column is built as a **vertical stack of nine "leaves"**, where each leaf is a discrete card-object with its own physical metaphor: 1. **Leaf 1 — the cover label.** A 64×40mm rectangle of cream card with a hand-typed serial — *PPSS / ee / № 0001* — and a small thumbprint of grey ink in the top-right corner. Tilted -1.4°. 2. **Leaf 2 — the dedication slip.** A torn rectangle of mint paper (#D4ECDF), 100% width of column, taped at all four corners with translucent washi tape (CSS `clip-path` triangles, 32% opacity). One-sentence dedication, handwritten font. 3. **Leaf 3 — the first pressed birch leaf.** A 22cm SVG specimen, pinned with a single brass pin (CSS `radial-gradient` + box-shadow) through its top notch. Body text wraps around it on the right. 4. **Leaf 4 — the index card.** A standard A6 lined index card (#FAF6E8 with horizontal rules at 8mm intervals via repeating linear-gradient). Body text typed on the lines, slightly off-baseline. 5. **Leaf 5 — the polaroid square.** A 3.5×3.5in polaroid frame containing a CSS-painted scene (dawn pastel sky, silhouetted tree). Scribbled caption on the bottom strip in Caveat. 6. **Leaf 6 — the postage scrap.** A torn rectangle of stamp-edged kraft paper showing a partial Estonian commemorative postmark (SVG, dated *9.V.2026*). Cancellation lines drawn in #5C5346. 7. **Leaf 7 — the sticker page.** A loose grid of seven die-cut stickers (leaf, mushroom, mitten, tea-glass, cat, sun, moth), each peelable on hover. 8. **Leaf 8 — the ribbon-bound bundle.** A small stack of three folded letters tied with cotton ribbon (#E9C7BA), the topmost letter half-unfolded showing a fragment of body text. 9. **Leaf 9 — the back-cover pocket.** A tucked envelope flap revealing a folded square of graph paper with a tiny pencil-drawn map of the site in the form of a route through a forest. **Spacing law.** Leaves abut at a vertical rhythm of 96px on desktop, 64px on mobile — each gap is *deliberately* visible cream paper, never shaded background, never zero-margin. The single column sits on a backdrop of warm-cream linen-grain (`#F4ECDD` SVG-noise tile) extending to the viewport edges, so every leaf reads as *placed onto* the page rather than *part of* the page. **Tilt law.** Every leaf is rotated by a *prime-numbered fraction of a degree* — -2.3°, +1.7°, -0.3°, +2.9°, -1.9°, +0.7°, -2.1°, +1.3°, -1.1°. No leaf is upright. The total angular sum of all nine leaves is exactly **-1.1°**, leaving the album feeling *almost* settled but never quite. ## Typography and Palette **Fonts (Google Fonts only — three faces, one each for display, hand, and body):** - **Display / Section headings — `Bagel Fat One` (400)**, used at clamp(2.4rem, 7vw, 4.6rem) for the nine leaf-titles. This is the **retro-display** anchor of the site: a chunky, marshmallow-soft, late-1970s-rounded children's-book title face. It carries the entire skeuomorphic-cute weight of the brand. Letter-spacing -0.02em. Color **#3F4B3A** (deep moss). Each heading is set with a 1.5px lighter inner highlight (`text-shadow: 0 -1.5px 0 #6B7A66 inset`-style trick via paint-order on the SVG version) to mimic the way a vinyl die-cut sticker catches the lamp. - **Hand / Margin notes — `Caveat` (400 and 600)**, for the dedication slip, polaroid caption, postcard signature, and approximately twelve marginalia notes scattered between leaves. Set at 1.05rem in **#5C5346** (pencil-graphite warm). Caveat is the only animated face on the site — every Caveat block uses an SVG `path` `stroke-dasharray` write-on animation triggered when the leaf scrolls into the viewport, taking 0.9s per phrase, with a deliberate pause between words. - **Body — `Fraunces` (300 and 400, optical-size 14)**, for the prose on leaves 3, 4, 6, 8, and 9. Fraunces' soft-flair serifs read like an early-1970s children's-encyclopaedia text face — warm but legible at small sizes. Body color **#3A3733** (slightly warm near-black). Set at 1.0625rem with 1.7 line-height. Drop-cap on the first body block: a 4-line Bagel-Fat-One letter sitting in **#C97B5C** (warm terracotta clay). **Palette — pastel, eight named colors:** - **Cream Paper** `#F4ECDD` — the album backdrop and the natural surface of every uncolored leaf. - **Mint Slip** `#D4ECDF` — the dedication leaf and the leaf-organic primary highlight. - **Birch Bone** `#EFE5D2` — index-card stock, slightly warmer than the cream backdrop, for layered contrast. - **Linden Petal** `#F2D6D2` — polaroid frame edge and ribbon accents. - **Tea Brown** `#A88A6A` — washi-tape, postage cancellation lines, leaf-vein primary. - **Moss Deep** `#3F4B3A` — display headings, leaf-veins on the largest specimen. - **Pencil Graphite** `#5C5346` — handwriting, marginalia, fine ink. - **Clay Terracotta** `#C97B5C` — drop caps, sticker accents, the single warm voice in an otherwise cool-pastel chorus. Strict rule: **no pure black, no pure white, no saturation above 38%.** Every color is slightly desaturated as if seen through the soft yellowing of a 30-year-old pouch laminate. ## Imagery and Motifs No photography. No 3D renders. No stock illustration. Every image is **either a hand-drawn SVG specimen or a CSS-painted texture**, fitting the album-of-pressed-things conceit. **The six recurring visual motifs:** 1. **The Birch Leaf.** PPSS.ee is anchored by **leaf-organic** as its primary motif — and specifically by *Betula pendula* (silver birch), Estonia's most quietly characteristic tree. Three distinct SVG specimens are drawn from scratch: a small spring leaf (32mm, light Mint Slip with darker Moss Deep veins), a midsummer leaf (54mm, Mint Slip body with tea-brown bruise spots), and a late-autumn leaf (78mm, Birch Bone body with Clay Terracotta margins where chlorophyll has retreated). Each leaf's vein-tree is *asymmetric* — left and right halves never mirror — and is drawn with a 0.6px Tea Brown stroke at varying opacity to mimic ink absorbed by paper fibre. Specimens recur at leaves 3, 5, 7, and 9 — never the same specimen twice. 2. **Washi Tape.** Translucent strips of pale-pink and mint paper tape attach every floating element to its underlying paper. CSS gradients with semi-transparent edges, slight rotational offsets (3°–7°), and a paper-fibre noise overlay. Edges are *torn* via SVG `clip-path` with a hand-drawn jagged path — never machine-cut. 3. **Pressed-flower fragments.** Tiny drawn details — a single linden flower (#F2D6D2), a pressed clover (#D4ECDF), a sprig of fennel (#3F4B3A) — scattered as 8–14mm decorations in the gutters between leaves. Each is positioned by hand, never algorithmically distributed; they cluster near the corners of leaves that mention nature in their text and disappear from leaves that don't. 4. **Stamp & Cancellation.** Leaf 6's postage scrap is a precise SVG of a fictitious *Eesti Post* commemorative stamp celebrating *Pärandi Press Society* — a 1×1.4cm rectangle showing a stylized pressed leaf (drawn with SVG, in Mint Slip on Birch Bone), with denomination *0,80 €* in the lower-right and the wavy cancellation lines crossing it diagonally in Tea Brown. The cancellation date *9.V.2026* is hand-drawn rather than typeset. 5. **Index-Card Ruling.** Leaf 4 carries faint horizontal rules at exactly 8mm intervals (`repeating-linear-gradient(0deg, transparent 0 7.7mm, #C9BFA8 7.7mm 7.85mm, transparent 7.85mm 8mm)`) and a single vertical red margin-line at 14mm from the left (`#D8A4A0`). Body text is typed *slightly off the baseline* — by 1.5px on alternate lines — to look like a real typewriter strike. 6. **The Pencil Map.** Leaf 9's tucked-envelope reveals a 9×11cm graph-paper square (graph squares 4mm, in Birch Bone on Cream Paper, ruling color `#D6C9A8`), on which a hand-drawn pencil route winds from a pin marked *PPSS* through nine numbered stops (one per leaf), each stop drawn as a tiny SVG icon (leaf, slip, leaf, card, polaroid, stamp, sticker, ribbon, pocket). The route is a single SVG `path` drawn with `stroke-dasharray` animation triggered when leaf 9 enters the viewport — the pencil draws the complete map over 4.2s. ## Prompts for Implementation Build PPSS.ee as **a single nine-leaf vertical scroll album** in one HTML, one CSS, one JS — no framework. Treat it as *one continuous slow scroll downward through a kept album*, not a marketing page. The visitor is opening someone's pressed-leaf scrapbook at the kitchen table. **Backdrop construction.** `body` has a tiled SVG paper-fibre noise (`feTurbulence baseFrequency=0.92, octaves=2`, lightened to ~6% alpha and tinted Cream Paper) repeated 1024×1024px. Above this, a single gentle radial gradient at 11 o'clock — `radial-gradient(ellipse 70vw 90vh at 18% 4%, rgba(255,243,217,0.45), transparent 60%)` — fakes the warm desk-lamp. The body has `min-height: 100vh` and `overflow-x: hidden`; horizontal scroll is forbidden. **Column construction.** A single `
` element, `max-width: 38rem`, `margin: 0 auto`, `padding: 6rem 1.5rem 8rem`. Inside it, nine `
` elements stacked with `margin-bottom: 6rem` (96px desktop / 64px mobile). Each leaf has `transform: rotate()` and a `box-shadow` triple-stack (a 0.5px hairline, a 4px soft drop, an 18px diffuse warm-tint) that gives it the lift of a paper card pasted onto the page. **The skeuomorphic detail layer.** Every leaf has a CSS pseudo-element overlay carrying: - A 0.5px hairline `border` in a slightly darker tint of its own surface color - An inset top-edge highlight (`inset 0 1px 0 rgba(255,255,255,0.4)`) to mimic a lamination edge catching light - A subtle inner grain via a fine `repeating-linear-gradient` at 3° angle, ~3% alpha - Two to four pieces of washi tape as separate pseudo-elements, each at a different rotation, each with a paper-fibre noise overlay **Border-animate ritual.** This is the single sustained motion of the site, and it earns the **border-animate** seed term. Each leaf, when it enters the viewport, draws its own border in real-time using SVG `` overlays with `pathLength=100` and `stroke-dasharray: 100; stroke-dashoffset: 100;` animated to 0 over 1.4s. The stroke is Tea Brown 0.8px, drawn with subtle wobble (a hand-shake `filter: url(#paper-jitter)` SVG turbulence displacement, baseFrequency 0.65, scale 0.7) so it reads as *a fountain pen tracing the edge*, not a CSS animation. After the border completes, the leaf's content fades up word-by-word: each word in body prose is a `` with `opacity: 0` and a staggered `transition-delay` of 18ms × index, capped at 600ms total per leaf. **Pressed-leaf veins.** The largest birch specimen on leaf 3 has its vein-tree built as a single SVG `path` with `stroke-dasharray` animation; on enter, the central midrib draws first (over 0.8s), then secondary veins fan outward (each 0.3s, staggered 60ms). The leaf's color also subtly shifts during draw — saturation moves from 18% to 32% over 1.6s — as if the leaf is "remembering" its summer green for a moment before settling back into its pressed-pastel state. **Sticker peel interaction.** Leaf 7 holds seven die-cut stickers in a soft `grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))`. On hover, each sticker's bottom-right corner curls upward via `transform: perspective(400px) rotateX(28deg)` originating from the top-left, while a CSS-painted underside (a slightly darker tint of the sticker's color) is revealed beneath. The peel is bidirectional (uncurl on mouseleave) and easing is `cubic-bezier(0.34, 1.56, 0.64, 1)` to give it a gentle paper-spring overshoot of 6%. **Pencil-map draw.** Leaf 9's graph-paper map uses an `IntersectionObserver` to detect first entry, then animates a single SVG `path` with `stroke-dasharray` over 4.2s (Tea Brown stroke, 0.9px, slightly tapered via `stroke-linecap: round` and a faint shadow filter to mimic graphite smudge). After the path completes, each numbered waypoint icon fades in sequentially over 1.4s total. **Caveat write-on.** All Caveat handwriting blocks are SVG-rendered (text converted to paths at build time, since `stroke-dasharray` on text doesn't reliably work cross-browser). Each phrase animates over 0.8–1.2s on viewport-enter, with 220ms pauses between phrases when there are multiple lines. Stroke is Pencil Graphite 1.1px. **Cursor-follow leaf-fall.** A *single*, deliberately understated background animation: every 11 seconds, one tiny drawn birch-leaf (10–18px, randomly chosen from the three specimens) drifts diagonally across the viewport from the top-right corner toward the bottom-left, on its own `` layer behind everything. It rotates slowly (one rotation per 9s), parallaxes with cursor X by 8px maximum, and fades from 0.45 to 0 alpha. Never more than one leaf at a time. The page must be readable, not festive. **No CTAs. No pricing. No stat grids. No testimonial blocks. No team grid. No contact form. No sticky header.** This is a quiet album, not a landing page. If a "contact" gesture is required, it appears as a single hand-written line on leaf 9, beside the pencil map: *"write back: [petsi.s@ppss.ee](mailto:petsi.s@ppss.ee)"* in Caveat — never as a styled button. **Mobile.** Everything stays single-column (it already was). Tilt-prime angles are halved on screens < 600px to keep the album from drifting off the narrow column. Margins compress 96px → 64px. The cursor-follow leaf-fall is disabled on touch devices in favor of a 22-second-cycle ambient float originating from a fixed top-right point. **Storytelling arc.** The nine leaves tell one slow story: cover → dedication → first specimen → field notes → a remembered afternoon → a remembered place → the small things kept → letters not yet sent → a map of where it all happened. Body copy on each leaf advances a single soft thread; the visitor finishes the page having read about thirty short sentences and pressed nothing. ## Uniqueness Notes **Differentiators (eight specific choices that exist nowhere else in the corpus):** 1. **Paper-and-plastic skeuomorphism, not chrome-and-leather.** Skeuomorphic appears in the corpus vocabulary but is essentially unused (0% in the frequency analysis). Where the corpus does brush against tactile-material design, it goes either *leather + crystal* (MMIDDL.com, light-academia) or *chrome + bubble* (GGOGGL.com, Y2K). PPSS.ee is the **first paper-laminate skeuomorph in the batch** — soft pouch-glossy, recycled-fibre, not glossy-rich. 2. **A literal album-of-leaves driven by the doubled letters.** PP = pressing-plates, SS = adhesive pull-tabs, .ee = inventory label. No other site in the corpus uses its TLD as a *physical object label glued to the page*. The doubled-letter / domain-component reading is sustained as the foundational visual conceit, not a clever opener. 3. **Strict single-column with a 38rem cap and zero hero.** Single-column is rare in the corpus (most layouts trend full-bleed at 80%, asymmetric at 55%, card-grid at 45%). PPSS.ee is the **only album-style single-column-narrow site in the batch**, deliberately rejecting the full-bleed default. The viewport edges are never used; everything important fits inside the column. 4. **Prime-numbered tilts summing to -1.1°.** Each of nine leaves is rotated by a distinct prime fraction of a degree, and the angular sum is *almost-but-not-quite* zero. No other site in the corpus uses a layout law that is itself a tiny mathematical poem about imperfection. 5. **leaf-organic motif treated taxonomically.** leaf-organic appears at only 5% in the corpus (frequency analysis, motifs). PPSS.ee makes it the *primary* and *only* motif by drawing three taxonomically distinct *Betula pendula* SVG specimens — spring/midsummer/autumn — each with asymmetric vein-trees and bruise-spots, never repeated. The corpus's other leaf usages are decorative; PPSS.ee's is *botanical*. 6. **Border-animate as a fountain-pen ritual, not a CSS-keyframe trick.** border-animate is at 10% in the corpus. PPSS.ee is the only site in the batch that animates borders via SVG `stroke-dasharray` *with hand-shake displacement turbulence* so the border looks drawn-by-pen, not rendered-by-engine. The wobble is the signature. 7. **Pastel + retro-display + approachable-casual is an unused tone triplet.** Pastel sits at 10%, retro-display at 5%, approachable-casual is essentially absent from the corpus tone register. Their intersection — *soft children's-book Bagel Fat One on dim pastel paper, lowercase voice* — is unique to PPSS.ee. The site reads as a teenager's album, not a brand's landing page. 8. **An animated pencil-map of itself as the closing artifact.** Leaf 9 ends the album with a hand-drawn route diagram of the album the visitor has just scrolled, drawn live in pencil over 4.2s upon viewport entry. No other site in the corpus closes by *redrawing itself* as a small map. The map's nine waypoints are a literal mirror of the nine leaves, making the page self-referential without ever being clever-cute. **Chosen seed:** *aesthetic: skeuomorphic, layout: single-column, typography: retro-display, palette: pastel, patterns: border-animate, imagery: collage, motifs: leaf-organic, tone: approachable-casual.* **Avoided patterns from frequency analysis:** - Avoided **photography** (95% saturation in corpus) — every image is hand-drawn SVG or CSS texture. - Avoided **full-bleed** (80%) — strict 38rem column with visible cream margins on every viewport. - Avoided **mono typography** (85%) — three faces, none monospaced, prioritizing *Bagel Fat One* (retro-display, 5% in corpus) and *Fraunces* (warm humanist serif, not in current top-of-list). - Avoided **gradient palette** (85%) and **warm palette** (80%) as primary drivers — colors are flat-pastel and *cool-leaning* (Mint Slip, Birch Bone, Pencil Graphite), with Clay Terracotta as a single warm accent confined to drop caps and sticker details. - Avoided **parallax** (85%) and **cursor-follow** (40%) as central animation devices — used only for one quiet 11-second leaf-fall in the background. - Avoided **hand-drawn aesthetic** (80%) — PPSS.ee is *paper-skeuomorphic*, not *sketchy-drawn*. The drawn elements are *botanical specimens* and *typeset album furniture*, not loose marker doodles. - Avoided **card-grid layout** (45%) and **dashboard** (30%) — content is a vertical narrative stack, not a grid of equally weighted blocks. - Avoided **nature motif as scenic backdrop** (25% nature, 25% tropical-fish) — leaves here are *pressed and labelled*, treated as taxonomy and memory, not landscape.