# Design Language for p9.rs ## Aesthetics and Tone p9.rs inhabits the space between a half-remembered childhood picture book and the interior of a tide pool at golden hour -- a place where soft creatures drift through amber light, where typography floats on invisible currents, and where every surface carries the warm, dusty grain of a Super 8 film projected onto a linen screen. The aesthetic is **playful-dreamy**: not the sugar-rush playfulness of bounce animations and candy colors, but the slower, gentler playfulness of a mobile spinning above a crib, of paper boats released onto a sunset river, of soap bubbles catching fire-orange reflections before they vanish. The domain name itself -- p9.rs -- reads like a whispered abbreviation, a shorthand for something intimate. The two-letter TLD (.rs) grounds it in code and systems, but the "p9" prefix carries the mystery of Plan 9 from Bell Labs, of the ninth planet, of protocols that never quite arrived. This tension between the systematic and the dreamlike defines the entire visual language: everything is precisely composed (editorial grids, measured whitespace, refined serifs) yet rendered through a haze of grain, warmth, and gentle animation that makes the precision feel like something remembered rather than computed. The tone is **dreamy-ethereal** -- the voice of someone describing a landscape they saw once in a dream, with the confidence of someone who has been there but the softness of someone who knows they cannot return. Text is sparse. Silence is generous. Every element enters the viewport as though it is surfacing from deep water, slowly, with the patience of something that has been waiting a long time to be seen. ## Layout Motifs and Structure The layout follows an **editorial-flow** architecture -- a rhythm borrowed from long-form literary magazines where text, imagery, and negative space alternate in a considered sequence that guides the eye downward like a river following its own gradient. There is no rigid grid in the conventional sense; instead, content adheres to a fluid column system where the primary reading column occupies roughly 55% of the viewport width, offset slightly left of center, while secondary elements (pull quotes, floating imagery, decorative wave-form motifs) inhabit the remaining space to the right. **Editorial Flow Architecture:** - **Opening Spread (Viewport 1):** The full viewport is a single, breathing composition. The domain "p9.rs" is set large in Libre Baskerville Italic at the upper-left quadrant, positioned at approximately 18% from top, 12% from left. Below it, a single subheading line in Nunito Sans Light. The remaining 60% of the viewport is empty -- warm burnt-orange to deep umber gradient behind film-grain texture. A single Lottie animation of a slow-moving wave form plays in the lower-right quadrant, looping infinitely: an undulating sine curve rendered in thin cream lines against the warm background, breathing in and out at roughly 0.3Hz. No navigation is visible. No buttons. Just the name, the line, the wave, and the grain. - **First Text Block (Viewport 2):** As the user scrolls, a block of body text fades in from 15% opacity to full over 400ms, triggered at 30% scroll-into-view. The text column is narrow (max-width: 540px) and left-aligned within the editorial offset. To the right of this text column, separated by at least 80px of breathing room, a vertical decorative element appears: a tall, thin SVG wave-form pattern that echoes the Lottie animation from the hero but rendered static, in burnt sienna (#A0522D) at 30% opacity, stretching the full height of the text block. - **Pull Quote Interruption (every 2-3 text blocks):** A pull quote breaks the flow, set in Libre Baskerville Italic at 2.2rem, colored in the accent pumpkin (#E8751A), with generous letter-spacing (0.02em). The pull quote spans the full width of the content area (not just the text column), creating a moment of expansion before the flow contracts again. A horizontal wave-form SVG underlines the quote -- not straight, but gently undulating, drawn via path-animation over 1.2 seconds when it enters the viewport. - **Image Zones (between major sections):** Full-bleed horizontal bands where the grain-overlay texture intensifies to 40% opacity and the background shifts to a deeper tone (#3D1C02). These zones contain no photography -- instead, they hold large-scale Lottie animations of abstract wave compositions: multiple sine waves at different frequencies and amplitudes, layered, in cream and pale orange, drifting slowly. These are contemplative pauses, the visual equivalent of a paragraph break in a poem. - **Final Spread (Last Viewport):** The content column narrows to a single line of closing text, centered, in Nunito Sans at 0.9rem. Below it, the wave-form Lottie from the hero returns, larger now, occupying the full width, a slow farewell animation that loops as the user reaches the end. **Spacing System:** - Section margins: 12vh between major content blocks - Paragraph margins: 2.5rem - Line height for body: 1.85 - Line height for headlines: 1.2 - Maximum content width: 900px (the editorial column within that: 540px) ## Typography and Palette **Typography:** - **Display / Headlines:** "Libre Baskerville" (Google Fonts) -- italic variant, weight 400. Baskerville is the typeface of dreaming scholars: its transitional serifs carry the precision of Enlightenment rationalism, but the italic variant introduces a lean, a tilt, a sense of forward momentum that softens the formality into something almost confessional. The hairline serifs and the generous x-height make it supremely legible at large sizes while maintaining the refined, literary character that editorial-flow demands. Used at 3rem-5rem for primary headings, always in sentence case, always italic. Letter-spacing: -0.01em at display sizes. The italic slant (roughly 12 degrees) creates a rightward visual pull that harmonizes with the leftward offset of the text column -- the typography leans right while the layout leans left, producing a subtle dynamic tension. - **Body Text:** "Nunito Sans" (Google Fonts) -- weight 300 (Light) for body, weight 400 (Regular) for emphasis. Nunito Sans is a rounded humanist sans-serif with soft terminals that never feel sharp or aggressive. Its generous letter-spacing at small sizes (0.01em at 1rem) and its open counters make it breathe on screen. The roundness of Nunito Sans plays against the sharpness of Libre Baskerville's serifs -- soft body text flowing between sharp, elegant headlines. Body size: 1.05rem. Color: #4A2810 (dark umber) on light backgrounds, #F5E6D0 (warm cream) on dark backgrounds. - **Accent / Captions / Metadata:** "Libre Baskerville" (Google Fonts) -- regular (non-italic) weight 400, at 0.8rem. Small caps where available via `font-variant: small-caps`. Used for dates, tags, navigation labels, and any text that serves a structural rather than narrative role. Color: #8B5E3C (medium burnt sienna) at 70% opacity. **Palette:** The palette is **burnt-orange** -- a warm, autumnal spectrum that ranges from deep chocolate-umber through terracotta and burnt sienna to bright pumpkin, with cream and pale gold as relief tones. The emotional register is: sunset through a dusty window, autumn leaves on still water, the inside of a clay kiln after the fire has died. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Ground | Dark Umber | #2C1503 | Deepest background, footer, image zones | | Primary Background | Warm Cocoa | #3D1C02 | Main background for dark sections | | Secondary Background | Burnt Earth | #5C2E0E | Card backgrounds, hover states | | Text on Dark | Warm Cream | #F5E6D0 | Primary body text on dark backgrounds | | Text on Light | Dark Umber | #4A2810 | Primary body text on light backgrounds | | Light Background | Parchment | #FBF0E0 | Light section backgrounds, alternate zones | | Primary Accent | Pumpkin | #E8751A | Headlines, pull quotes, active states, links | | Secondary Accent | Burnt Sienna | #A0522D | Decorative elements, wave-forms, borders | | Tertiary Accent | Pale Gold | #D4A855 | Subtle highlights, Lottie stroke colors | | Grain Tint | Sepia Mist | #C8956040 | Film-grain overlay color (with alpha) | **Gradient:** - Hero gradient: `linear-gradient(165deg, #3D1C02 0%, #5C2E0E 40%, #2C1503 100%)` - The 165-degree angle creates a diagonal warmth that moves from upper-left to lower-right, matching the editorial flow direction. ## Imagery and Motifs **Grain Overlay as Primary Texture:** Every surface in the design carries a film-grain overlay -- a noise texture applied as a full-viewport pseudo-element (`::after`) with `mix-blend-mode: soft-light` and opacity between 15-40% depending on the section. The grain is not uniform white noise; it is tinted sepia (#C89560 at low opacity), giving it the warm, dusty quality of aged 16mm film stock. The grain is generated via CSS using a small repeating SVG noise pattern (8x8px tile) combined with a subtle CSS animation that shifts the background-position by 1-2px every 120ms, creating a gentle film-flicker effect without being distracting. Implementation: ```css .grain-overlay::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,..."); /* 8x8 noise tile */ background-repeat: repeat; mix-blend-mode: soft-light; opacity: 0.2; pointer-events: none; animation: grain-shift 80ms steps(4) infinite; } ``` **Lottie Wave Animations as Visual Anchors:** The primary imagery mode is Lottie-driven abstract wave-form compositions. No photography, no icons, no illustrations in the traditional sense. Instead, every visual element is a mathematically generated wave: 1. **Hero Wave:** A single Lottie animation containing 3 layered sine waves at different frequencies (0.5Hz, 0.8Hz, 1.2Hz) and amplitudes, rendered as thin stroked paths in Warm Cream (#F5E6D0) and Pale Gold (#D4A855). The waves drift horizontally at approximately 20px/second. Total animation duration: 8 seconds, looping. Canvas size: responsive, full-width, 200px height. 2. **Section Divider Waves:** Between major content blocks, a shorter Lottie animation plays -- a single wave that draws itself from left to right over 1.5 seconds (triggered on scroll-into-view), then holds its completed state. Stroke: Burnt Sienna (#A0522D), 1.5px width, no fill. 3. **Background Wave Field:** In the deep-dark image zones, a full-viewport Lottie containing 8-12 overlapping waves at very low opacity (5-15%) creates a sense of depth and slow movement, like looking down into deep water. Colors: Pumpkin (#E8751A) and Pale Gold (#D4A855) at fractional opacities. **Wave-Form Motifs as Decorative Elements:** Static SVG wave-forms appear throughout the design as decorative accents: - Vertical wave borders alongside text columns (single sine path, 30% opacity) - Horizontal wave underlines beneath pull quotes (animated via `stroke-dasharray` / `stroke-dashoffset`) - Small wave glyphs used as section markers (in place of traditional bullets or ornaments) - The favicon itself: a tiny wave-form rendered at 32x32, burnt orange on transparent **Film-Grain Intensification on Interaction:** When the user hovers over interactive elements (links, cards), the grain overlay opacity in the immediate vicinity increases from 20% to 35% over 300ms, creating the sensation of "zooming in" on aged film stock -- the closer you look, the more grain you see. This is achieved by layering a local grain pseudo-element on each interactive component. ## Prompts for Implementation **Full-Screen Narrative Wave Experience:** The site opens to a full-viewport scene: the warm cocoa-to-deep-umber gradient fills the screen, immediately textured by the film-grain overlay. The domain "p9.rs" appears at the upper-left in Libre Baskerville Italic at 4.5rem, colored Warm Cream (#F5E6D0). It does not animate in -- it is already present, as if the page loaded mid-dream and you arrived partway through. After a 1.5-second pause, the hero Lottie wave animation begins in the lower-right quadrant, fading from 0 to full opacity over 800ms. The waves drift. The grain flickers. Nothing else happens. The user must choose to scroll. **Scroll-Triggered Editorial Unfolding:** As the user scrolls, each content block enters via a gentle fade-and-rise animation: `opacity: 0 -> 1` combined with `translateY(24px) -> translateY(0)` over 500ms, eased with `cubic-bezier(0.25, 0.1, 0.25, 1.0)`. The trigger point is 25% into the viewport. Stagger between sibling elements: 120ms. This creates a slow, dreamy cascade -- content surfacing from below like objects rising through amber liquid. **Wave-Form Path Drawing:** Every horizontal wave-form SVG that separates sections uses a scroll-triggered `stroke-dashoffset` animation. The wave path has a total length calculated via `getTotalLength()`, and `stroke-dasharray` is set to that length. On scroll-trigger, `stroke-dashoffset` transitions from the total length to 0 over 1.2 seconds, creating the effect of the wave being drawn in real-time from left to right. The easing is `ease-out` -- fast start, gentle deceleration, as if the wave is losing energy. **Lottie Integration Notes:** Use `lottie-web` (bodymovin) loaded via CDN. Each Lottie animation is initialized with `renderer: 'svg'` for crisp scaling, `loop: true` for ambient animations, and `autoplay: false` for scroll-triggered instances (controlled via Intersection Observer). The Lottie JSON files should be lightweight (under 15KB each) -- these are simple path animations, not complex character rigs. **Typography Cascade:** Headlines cascade from italic Libre Baskerville at display sizes into Nunito Sans Light body text. The transition should feel like a voice lowering from a theatrical whisper to a conversational murmur. No bold text in body copy. Emphasis is achieved through italic Libre Baskerville inline, never through weight changes. Links are colored Pumpkin (#E8751A) with no underline by default; on hover, a wave-form SVG underline draws itself beneath the link text over 300ms. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Sharp corners on any element (minimum border-radius: 2px, prefer 4-6px) - Pure white (#FFFFFF) or pure black (#000000) anywhere -- all whites are warm cream, all blacks are deep umber - Photography or realistic imagery of any kind - Sudden or jarring animations (ease everything, minimum 300ms duration) - More than two typefaces on any single viewport - Horizontal rules or conventional dividers (use wave-forms instead) ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Lottie-Driven Wave Ecosystem:** No other design in the portfolio uses Lottie animations as the sole imagery system. At 1% pattern frequency, lottie-animation is nearly untouched. Here, Lottie is not a decorative add-on but the foundational visual language -- every image, every divider, every decorative element is a wave-form animation. The site contains zero static images, zero photographs, zero illustrations. Everything moves, slowly, like water. 2. **Burnt-Orange Chromatic Identity:** The burnt-orange palette sits at 1% frequency across the portfolio, making it one of the rarest color schemes. Most designs default to warm-gradient or muted tones. p9.rs commits fully to the terracotta-pumpkin-umber spectrum with no cool-tone relief -- no blues, no greens, no grays. The entire experience is bathed in sunset warmth, creating a chromatic consistency that most designs avoid because it risks monotony. Here, monotony is the point: the monochromatic warmth induces a meditative state. 3. **Film-Grain as Living Texture:** While grain-overlay appears at 2% in the imagery frequency, no other design uses grain as an interactive, animated, variable-opacity element. The flickering grain animation (stepping every 120ms) combined with hover-intensification creates a texture that is alive -- it responds to the user's presence, it changes density across sections, and it provides the film-stock materiality that grounds the abstract wave-form imagery in something physical and nostalgic. 4. **Zero-Photography Editorial Flow:** The editorial-flow layout (6% frequency) is typically paired with photography-heavy imagery. p9.rs inverts this expectation by running an editorial layout with no photographs whatsoever -- the visual rhythm that would normally be carried by images is instead carried by Lottie wave animations and gradient-tinted breathing spaces. This creates a reading experience closer to a poetry chapbook than a magazine. 5. **Baskerville-Refined Typography in Dreamy Context:** The baskerville-refined typography category (2% frequency) is typically deployed in scholarly or formal contexts. Here, Libre Baskerville Italic is used not for authority but for intimacy -- the italic lean creates a sense of private address, as if the text is a handwritten letter rather than a typeset page. Pairing it with Nunito Sans (soft, rounded) rather than the expected geometric sans creates an unexpected warmth. **Documented Seed/Style:** `aesthetic: playful, layout: editorial-flow, typography: baskerville-refined, palette: burnt-orange, patterns: lottie-animation, imagery: grain-overlay, motifs: wave-forms, tone: dreamy-ethereal` **Patterns Avoided (Overused per Frequency Analysis):** - `scroll-triggered` at 97% (used sparingly for fade-in only, not as the primary animation strategy) - `parallax` at 76% (completely absent from this design) - `stagger` at 60% (used at minimal 120ms intervals only for text blocks, not as a dominant pattern) - `centered` layout at 99% (layout is deliberately offset-left editorial flow) - `warm` palette at 100% (while the palette IS warm, the specific burnt-orange sub-family is at 1%) - `mono` typography at 99% (no monospace fonts anywhere in the design) - `minimal` imagery at 94% (replaced entirely with Lottie wave animations) - `photography` imagery at 73% (zero photographs) - `vintage` motifs at 86% (wave-forms at 1% frequency chosen instead) - `friendly` tone at 98% (dreamy-ethereal at 2% chosen instead)