# Design Language for reasr.one ## Aesthetics and Tone reasr.one inhabits the quiet, sun-warmed interior of a landscape painter's field studio -- a place where half-finished watercolor studies are pinned to a clothesline strung between wooden easel legs, where jars of tinted water catch the late-afternoon light and throw amber refractions across a scarred pine worktable, and where the smell of wet cotton rag paper mingles with the dry warmth of sunbaked linen. The aesthetic is **watercolor** in its truest material sense: not the digitally simulated watercolor of Instagram filters, but the unpredictable, gravity-driven behavior of pigment suspended in water meeting absorbent fiber. The tone is **grounded-earthy** -- unhurried, tactile, and rooted in the physical world. There is no urgency here, no countdown timer, no conversion funnel. The experience feels like turning over a smooth river stone in your hand, or running your thumb along the deckled edge of handmade paper. Every interaction has weight and texture. The site communicates through the quiet authority of craft rather than the loudness of marketing. It speaks in the visual language of someone who has spent years observing how pigment bleeds along the grain of cold-pressed paper, how a loaded brush leaves a bead of color at the end of a stroke that dries darker than the rest, how water finds its own paths through a wash and leaves behind tide marks of concentrated pigment. The overall mood draws from the tradition of plein air watercolor painting -- Turner's atmospheric Venice studies, Winslow Homer's Bahamas seascapes, the Japanese suiboku-ga ink wash tradition. But this is not nostalgic or backward-looking; it is the aesthetic of an ancient medium encountering a new surface. The watercolor metaphor extends beyond visual decoration into the fundamental interaction model: content flows horizontally like a wash across paper, elements bleed into one another at their edges, and the user's passage through the site leaves subtle traces, like water stains on a painting table. ## Layout Motifs and Structure The layout follows a **horizontal-scroll** architecture -- the entire site unfolds as a single, continuous horizontal panorama, like unrolling a Chinese hand scroll painting (changquan) or a Japanese emakimono narrative scroll. The user moves through content by scrolling horizontally (via mousewheel, trackpad gesture, or touch swipe), progressing from left to right as one reads a visual story painted across a continuous ground. **Structural Framework:** - **The Scroll Ground:** The total page width extends to approximately 8000-12000px, divided into loosely defined "panels" that are each 100vw to 200vw wide. There are no hard panel boundaries; instead, content areas bleed into one another like adjacent washes on wet paper. The vertical height is locked to 100vh -- no vertical scrolling at all. All content lives within the viewport height, arranged horizontally. - **The Grid Understructure:** Beneath the flowing watercolor surface, a subtle **grid-lines** system provides structural order. Thin lines in `#D4C4A8` (dried-straw) at 0.3px weight form a 12x8 grid across each viewport-width panel. These grid lines are barely visible -- they function like the pencil underdrawing that a watercolorist sketches before laying down washes. They appear at 8% opacity on the background and serve as alignment guides for content positioning. When content elements are near a grid intersection, the nearby grid lines brighten to 25% opacity, creating a subtle "snap-to-grid" visual feedback. - **Panel Flow Zones:** Each horizontal panel contains content arranged in one of three compositional modes, cycling to maintain visual rhythm: 1. **Wash Panel:** A single large watercolor wash (CSS gradient + SVG filter turbulence) dominates the panel, with text floating within it in a single block. Used for introductory statements or thematic transitions. 2. **Study Panel:** Multiple smaller content blocks arranged in a loose, sketchbook-like composition -- a heading here, an illustration there, a text block slightly rotated at 1-2 degrees. Mimics the scattered arrangement of studies pinned to a studio wall. 3. **Line Panel:** Content organized along strong horizontal or diagonal ruled lines, with line-illustration elements integrated into the layout. The most structured of the three modes. - **Horizontal Progress Indicator:** A thin line at the very bottom of the viewport (2px height) shows scroll progress. This line is rendered as a watercolor stroke -- it is not a solid bar but a textured, slightly uneven mark in `#8B6B4A` (raw umber) that grows from left to right, complete with variation in thickness and tiny pigment blooms at irregular intervals. - **Vertical Rhythm Within Panels:** Although horizontal scrolling dominates, each panel's internal layout uses a vertical rhythm based on a 32px baseline grid. Text blocks, illustrations, and decorative elements all align to this baseline, creating a sense of calm, measured order within the flowing horizontal movement. ## Typography and Palette **Typography:** - **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- an old-style serif with pronounced stroke contrast, delicate hairlines, and a distinctive calligraphic quality that echoes the hand of a brush. Used at 3.5rem-6.5rem for primary headings and panel titles. Weight: 600 (SemiBold) for display, 300 (Light) for secondary headings where the delicate hairlines become almost impossibly fine, like a single-hair rigger brush dragging diluted pigment across rough paper. Letter-spacing: 0.04em at display sizes, giving each letter room to breathe as if spaced by hand. Line-height: 1.08. - **Body Text:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with moderate contrast and brushed curves rooted in calligraphy. Weight 400 (Regular) for body copy at 1.05rem-1.15rem, weight 700 (Bold) for emphasis. Line-height: 1.72, intentionally generous to evoke the open, airy spacing of text in art exhibition catalogs. Letter-spacing: 0.01em. Body text is set in `#3D3229` (bistre) -- the brownish-black of concentrated watercolor pigment, softer than pure black, more grounded than gray. - **Kinetic-Animated Type System:** Headlines employ a **kinetic-animated** approach: when a panel scrolls into view, the headline text is revealed character by character, each letter appearing with a subtle watercolor "bloom" effect. Each character starts as a concentrated dot of color (`#8B6B4A`, raw umber) that expands outward in a circular wash, and as the wash clears (opacity fading from center outward over 400ms), the letterform is revealed beneath. Characters stagger at 60ms intervals. Once revealed, headline text subtly shifts position by 1-2px in response to horizontal scroll velocity, as if floating on the surface of water -- this micro-movement never stops, creating a gentle, perpetual kinetic quality. For section subtitles, text assembles from scattered fragments: individual words start at random positions within a 40px radius of their final location and drift into place over 800ms with an ease-out-cubic curve. - **Accent / Labels:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a geometric skeleton, used for navigational elements, labels, captions, and the horizontal progress indicator text. Weight 500 (Medium) at 0.75rem-0.85rem. All-uppercase with 0.12em letter-spacing for labels. This typeface provides a clean, contemporary counterpoint to the organic serif headings, functioning like the printed labels in a museum -- precise and institutional against the expressiveness of the art. **Palette:** The palette is **warm**, drawn from the actual pigments and materials of watercolor painting: | Role | Name | Hex | Source | |------|------|-----|--------| | Background (paper) | Cold-Pressed White | `#F5EDE0` | The warm ivory of high-quality watercolor paper -- not pure white, but the slightly yellowed, creamy tone of cotton rag | | Primary text | Bistre | `#3D3229` | The concentrated residue of burned beechwood, historically used as a drawing ink; softer and warmer than black | | Primary accent | Raw Umber | `#8B6B4A` | A natural earth pigment, warm brown with golden undertones; the workhorse of landscape watercolor palettes | | Secondary accent | Burnt Sienna | `#C67D4A` | Raw sienna heated to produce a reddish-orange earth tone; warm, luminous, evocative of sunlit terracotta | | Tertiary accent | Yellow Ochre | `#D4A84B` | Another natural earth pigment; golden, opaque, the color of late-afternoon sunlight on sandstone | | Wash tint | Sap Green (diluted) | `#A8B88C` | A transparent botanical green, here shown at mid-dilution; the color of new leaves seen through a glass of water | | Grid lines / structure | Dried Straw | `#D4C4A8` | The neutral warm tone of dried grass; used at low opacity for structural elements | | Deep accent | Indigo (warm) | `#3A4A5C` | A warm-leaning indigo, the color of a watercolorist's darkest dark before it dries lighter than expected | ## Imagery and Motifs **Line-Illustration System:** The primary imagery mode is **line-illustration** -- specifically, the kind of confident, single-weight contour drawing that watercolorists produce as underdrawings before laying washes. These are not polished vector illustrations; they are loose, slightly trembling lines that suggest form rather than define it, created with SVG `` elements that use subtle randomization in their control points. Line illustrations appear throughout the site as: 1. **Botanical Contours:** Loose drawings of plant forms -- seed pods, unfurling ferns, cross-sections of flowers -- rendered as single continuous lines in `#8B6B4A` (Raw Umber) at 1.5px stroke width. These are positioned at panel transitions, growing along the boundary between content areas like vines growing along a garden wall. On scroll, the SVG paths animate using `stroke-dashoffset`, drawing themselves into existence as the user approaches, with a drawing speed that matches the scroll velocity. 2. **Landscape Sketches:** Minimal horizon lines and terrain contours that span the full width of Wash Panels, positioned at approximately 60% viewport height. These are not detailed landscapes but gestural marks -- a single undulating line suggests distant mountains, a few vertical strokes indicate a tree line. They are rendered in `#D4C4A8` (Dried Straw) at 40% opacity, so they read as ghost images beneath the content, like pencil lines showing through a transparent wash. 3. **Object Studies:** Small, isolated drawings of the tools and objects of watercolor painting -- a jar of water with a brush resting in it, a half-squeezed tube of paint, a folded rag, a palette with dried pigment circles. These appear in Study Panels as decorative vignettes, always at the margins of content blocks, always slightly rotated (2-5 degrees), always in `#3D3229` (Bistre) at 60% opacity. **Grid-Lines as Visual Motif:** The **grid-lines** motif functions as a dual-purpose element: structural armature and decorative pattern. Beyond the background grid described in Layout, grid lines manifest as: - **Wash Boundaries:** Where a watercolor wash effect meets clean paper, a thin grid-line (0.5px, `#D4C4A8`) traces the boundary, as if the painter used a ruler to mask one edge of the wash. This creates a tension between the organic bleed of the wash and the precision of the ruled line. - **Annotation Marks:** Small cross-hairs (`+` marks in `#8B6B4A` at 30% opacity) appear at grid intersections near content elements, evoking the registration marks on a printer's proof or the coordinate points on a surveyor's map. These marks fade in and out gently (opacity oscillating between 15% and 30% over 3-second cycles), creating a quiet, breathing rhythm across the page. - **Ruled Guide Lines:** Horizontal lines at 0.3px weight extend from the left edge of text blocks outward to the left by 60-120px, terminating in a small perpendicular tick mark. These evoke the ruled guidelines that calligraphers and draftsmen use, and they emphasize the baseline alignment of the typographic system. **Watercolor Wash Effects:** CSS-only watercolor wash effects created through layered radial and conic gradients combined with SVG `` and `` filters. Each wash is composed of 3-5 overlapping radial gradients in palette colors at 15-40% opacity, displaced by turbulence to create organic, non-repeating shapes. Washes do not tile or repeat; each panel's wash is unique. On scroll, washes shift very slowly (parallax at 0.05x scroll speed), creating a sense that the pigment is still wet and settling. ## Prompts for Implementation **Full-Screen Horizontal Narrative:** The entire site must be implemented as a horizontal scroll experience using CSS `overflow-x: scroll` on the body or a full-viewport wrapper, with `overflow-y: hidden`. The mousewheel event should be intercepted to convert vertical wheel delta into horizontal scroll position, using a smooth interpolation (lerp at 0.08 factor) to prevent jerky movement. Touch devices should use native horizontal swipe. The scroll must feel like slowly unrolling a paper scroll -- weighted, smooth, with gentle momentum. **The Opening Sequence:** On initial load, the viewport shows only `#F5EDE0` (Cold-Pressed White) paper texture. After 300ms, from the center of the viewport, a single watercolor bloom begins: a small dot of `#8B6B4A` (Raw Umber) expands outward as a soft radial gradient, reaching approximately 200px diameter over 1.2 seconds. As it expands, it loses opacity at the center, leaving behind the site title "reasr.one" in Cormorant Garamond 600 at 4.5rem, each character revealed as the wash passes over it. The wash continues to expand and fade until it dissolves completely at the viewport edges, leaving only the title and a single thin horizontal line extending left and right from the title toward the viewport edges -- this line is the first visible grid-line, and it serves as a visual invitation to scroll. Below the title (at 70% viewport height), a single line of Space Grotesk 500 at 0.8rem reads "scroll to unfold" in `#8B6B4A` at 50% opacity. This text gently oscillates left-right by 8px over a 4-second cycle, suggesting the direction of movement. **Panel Transitions:** As the user scrolls horizontally, panels do not snap into place; they flow continuously. However, at panel boundaries, a **fade-reveal** transition occurs: the incoming panel's content elements start at 0% opacity and translate 30px in the scroll direction (rightward), then ease into their final positions over 600ms as they cross the 60% viewport threshold from the right edge. This fade-reveal is staggered: background washes appear first, then grid-line structures, then line-illustrations, then text -- a sequence that mirrors the watercolor painting process (wash first, drawing last). **Watercolor Wash Rendering (CSS + SVG):** Each wash panel background uses an inline SVG filter: ``` ``` Applied to a `
` containing 3-5 layered `radial-gradient` backgrounds in palette colors. The filter displaces the gradient edges to create organic, watercolor-like boundaries. Each panel uses a different `seed` value to ensure visual variety. **Kinetic Typography Implementation:** Headline animation uses the Intersection Observer API (configured for horizontal scroll) to detect when a headline element crosses the 40% viewport threshold from the right. On intersection, a JavaScript function: 1. Splits the headline into individual `` elements per character 2. For each character, creates a pseudo-element `::before` with a radial gradient in `#8B6B4A` at 80% opacity 3. Animates the pseudo-element: scale from 0 to 3 over 400ms (ease-out), opacity from 0.8 to 0 over the same duration 4. Simultaneously fades the character itself from 0 to 1 opacity, starting at 200ms (midway through the bloom) 5. Each character's animation starts 60ms after the previous one The perpetual micro-movement of revealed headlines is achieved with a continuous `requestAnimationFrame` loop that applies `translateX` and `translateY` offsets based on a Perlin noise function seeded with the character's index, producing slow, organic drift of 1-2px amplitude. **Line-Illustration Path Drawing:** SVG botanical contours use `stroke-dasharray` set to the total path length and `stroke-dashoffset` initially equal to the path length (fully hidden). As the element's horizontal position approaches the viewport center (tracked via scroll position), `stroke-dashoffset` is interpolated toward 0, drawing the path. Drawing speed is proportional to scroll velocity: fast scrolling draws quickly, slow scrolling draws slowly, and stopping mid-draw leaves the illustration partially completed until scrolling resumes. This creates a direct, tactile connection between the user's input and the visual result. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hamburger menus, sticky headers, footer link columns, testimonial carousels, hero sections with stock photography. The site has no calls to action, no conversion goals, no user accounts. It exists purely as a visual and spatial experience. **Bias toward:** Full-screen narrative immersion, continuous horizontal flow, tactile interaction metaphors, craft-based visual language, natural materials as design references. ## Uniqueness Notes **Differentiators from other designs:** 1. **True Horizontal Scroll Architecture:** At only 1% frequency in the design corpus, horizontal-scroll layout is one of the most underused patterns available. While virtually every other design in the portfolio uses a vertical scroll model with centered content (99% frequency), reasr.one completely abandons vertical scrolling in favor of a continuous horizontal panorama. This fundamentally changes the user's spatial relationship with the content -- reading left-to-right rather than top-to-bottom, like unrolling a painted scroll rather than turning pages. The locked viewport height (100vh) and extended horizontal width (8000-12000px) create a cinematic widescreen ratio that no vertical design can achieve. 2. **Kinetic-Animated Typography with Watercolor Materiality:** At 2% frequency, kinetic-animated typography is deeply underused. Most designs in the corpus rely on static typography or simple fade-in animations. reasr.one's type system is genuinely kinetic -- characters bloom into existence through simulated watercolor expansion, then continue to drift subtly on Perlin noise curves after revealing. The animation is not decorative overlay; it is integral to the reading experience, making each headline a small performance that unfolds in time. The watercolor bloom reveal (pigment expanding, clearing, revealing the letterform) has no precedent in the existing designs. 3. **Line-Illustration as Primary Imagery with Scroll-Linked Drawing:** At 2% frequency, line-illustration is one of the least used imagery modes. Combined with scroll-velocity-linked SVG path drawing, the illustrations become interactive -- they are not pre-rendered static images but marks that the user effectively "draws" through their scroll input. This creates a uniquely participatory visual experience where the user's movement through the site leaves visible traces (completed drawings) behind them, like a brush dragging across paper. 4. **Watercolor Material Simulation via Pure CSS/SVG:** Rather than using pre-rendered watercolor texture images (which would be static and repetitive), all watercolor effects are generated in real-time using CSS gradients displaced by SVG turbulence filters. Each panel's wash is procedurally unique (different seeds), and the washes shift subtly on scroll, maintaining the illusion that pigment is still settling. This approach is technically distinctive and produces visuals that cannot be achieved with image assets alone. 5. **Grounded-Earthy Tone Without Nature-Photography Cliches:** At 3% frequency, the grounded-earthy tone is uncommon. But more importantly, reasr.one achieves earthiness through material reference (pigments, paper, water, wood) rather than through the expected nature photography or botanical decoration that "earthy" typically implies. The palette is literally derived from natural earth pigments (Raw Umber, Burnt Sienna, Yellow Ochre, Bistre) -- real substances that watercolorists grind and mix. This gives the warmth an authenticity that a generic "warm palette" cannot match. **Chosen Seed:** aesthetic: watercolor, layout: horizontal-scroll, typography: kinetic-animated, palette: warm, patterns: fade-reveal, imagery: line-illustration, motifs: grid-lines, tone: grounded-earthy **Avoided Overused Patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), scroll-triggered patterns (96%), minimal imagery (95%), vintage motifs (88%), friendly tone (98%). The design intentionally avoids every pattern above 50% frequency in the corpus, except for the warm palette (100%) which is reinterpreted through specific earth-pigment references rather than generic warm tones.