# Design Language for reasr.one ## Aesthetics and Tone `reasr.one` occupies the precise intersection where Victorian ornamental confidence collides with contemporary coastal clarity — an imagined reading room at the very edge of a sea cliff, where wrought-iron filigree window frames let in salt-bleached light and the sound of waves. The site is conceived as a **bold reading experience**: not a gentle invitation to peruse, but a commanding statement that reading, annotation, and comprehension are acts of power. The Victorian-ornate aesthetic here refuses the sepia nostalgia trap. Instead it operates as a structural language — the elaborate border, the typographic ornament, the layered frame — pressed into service for a site about *active reading* and *semantic understanding*. Ornamentation is used the way a ship's figurehead is used: as a declaration of purpose, not decoration for decoration's sake. The tone is **bold-confident**: declarative headlines, no hedging copy, no softening qualifiers. The site asserts. It does not propose. The coastal color palette keeps this confidence from becoming aggressive — salt-washed teals and chalk whites give every bold declaration room to breathe. Mood board anchors: - A Victorian-era Mucha poster reprinted on bleached linen - The deep-inked embossed cover of a 19th-century natural history atlas - Sunlight through salt-crusted glass at low tide - The moment a magnifying glass snaps a text passage into absolute clarity ## Layout Motifs and Structure The structural concept is **layered depth**: the page is built as three simultaneously visible planes that each scroll at different rates, creating the sensation of reading through glass, through frame, and into content simultaneously. **Plane 1 — The Surround (fixed/slow parallax):** A richly ornamental border layer that stays at the edges of the viewport — intricate SVG filigree patterns in deep teal ink, functioning like the elaborate borders of a Victorian botanical atlas. This plane moves at 0.1× scroll speed. **Plane 2 — The Ground (medium parallax):** Soft bokeh-blurred coastal scene — sea and horizon rendered as pure abstracted luminosity at 0.4× scroll speed. Not a photograph. A CSS + canvas blur simulation of chalk-white light through salt-mist. **Plane 3 — The Stage (standard scroll):** The content layer, which moves at 1× speed. Text panels appear as heavy-bordered cards — thick rule lines, serif-ornament dividers, inset shadows that make each content block feel like a mounted plate in a Victorian reference volume. **Composition rules:** - Never a standard sidebar/content two-column layout — instead, content panels are offset asymmetrically from a diagonal grid, as if laid out by a compositor who understood optical weight, not CSS grid - Large-scale typographic ornaments (`❧`, `✦`, `§`, `¶`, `❦`) function as section markers and visual anchors, rendered at `clamp(80px, 8vw, 140px)` in #2E6B7A (coastal-deep-teal) - One full-viewport "reading hall" section where text is centered in a tall vertical frame with ornamental pilasters on either side — the user feels they are standing in a library, not browsing a webpage - Particle effect layer floats above all three planes: luminous sea-spray particles (bokeh-shaped, soft-edged, off-white to pale aquamarine) drift upward from the bottom of the viewport at all times, behind content but above the bokeh ground ## Typography and Palette **Typography — Humanist system (three fonts, all Google Fonts):** - **Display & Wordmark:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display), weights 700–900, roman and italic. Used for the site name, section headers, and the dramatic pull-quotes that appear at full viewport width. At display sizes (`clamp(56px, 7vw, 120px)`), Playfair's modulated stroke contrast and ball terminals read as elegant authority — a humanist serif with Victorian-era formal energy. - **Body Text:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond), weight 400 (regular) and 500 (medium), roman and italic. EB Garamond is the typeface of 16th-century humanist scholarship — precise, economical, warm. Body text set at `18px / 1.75` line-height, max-width `660px` measure, justified with `text-align: justify` and `hyphens: auto` for the columnar reading-hall feel. - **Labels & UI Elements:** [Jost](https://fonts.google.com/specimen/Jost), weight 300 (light) and 600 (semibold). Jost's geometric clarity provides contrast to the historical warmth of Garamond — labels, navigation items, and data annotations use Jost at `11–13px` tracked wide with `letter-spacing: 0.15em`. This creates the Victorian "printed label" versus "typeset text" distinction. **Color palette — coastal-blend:** | Role | Name | Hex | |------|------|-----| | Ground / sea-mist | Chalk Shore | `#F2F4F3` | | Deep accent / filigree ink | Coastal Teal | `#2E6B7A` | | Warm mid-tone / text panels | Driftwood Cream | `#EDE8DC` | | Body text | Deep Kelp | `#1C2E35` | | Ornament highlight | Copper Verdigris | `#7DA89B` | | Particle / bokeh light | Sea Foam Luminance | `#C8E6E8` | | Danger / accent call | Coral Cliff | `#C4614A` | All backgrounds: `#F2F4F3` or `#EDE8DC`. No true white. No pure black. The entire palette is salt-washed, as if every color has been left facing a coastal window for three seasons. ## Imagery and Motifs **Bokeh background (no stock photography):** The background is not a photograph but a pure CSS + `canvas` simulation of a bokeh coastal scene. Soft circular gradients (`radial-gradient`) of `#C8E6E8`, `#F2F4F3`, and `#7DA89B` overlap at large radii (`200–600px`) with low opacity (`0.08–0.25`), creating the impression of light through salt-mist glass. A subtle, very slow Perlin-noise-driven canvas layer (`requestAnimationFrame`, 0.2fps effective update rate) makes the bokeh shimmer as if the scene is gently moving. No raster images required. **Victorian SVG filigree ornaments:** Generated as inline SVG path data — interlocking acanthus scrolls, fleur-de-lis flourishes, and double-ruled borders with corner rosettes. These appear as the viewport border layer (Plane 1), as dividers between content sections, and as watermark-scale background decorations behind major headings at 3% opacity. **Particle effects — sea-spray constellation:** A `canvas` overlay occupies the full viewport at `pointer-events: none`. On each frame, `~200` particles (circular, radius `2–8px`, color sampled from `#C8E6E8`→`#F2F4F3` gradient, opacity `0.3–0.7`) drift upward with subtle horizontal oscillation (sine wave, period `3–8s`, amplitude `15–40px`). Particles are born at random x-positions along the bottom edge and expire when they reach the top. The effect reads as sea-spray caught in coastal light — alive enough to feel immersive, slow enough to never distract from reading. **Lottie animation — reading lens reveal:** A single Lottie JSON animation plays on page load: an illustrated magnifying glass (Victorian brass-and-glass aesthetic, hand-drawn line style in `#2E6B7A`) zooms into view, its lens catching a bokeh flare of `#C8E6E8`, then dissolves as the main content fades in. Duration: 2.4 seconds. After first load, the animation is skipped via `localStorage` flag. The Lottie player is loaded from CDN (`https://unpkg.com/@lottiefiles/lottie-player`) — the JSON itself is a compact 12KB inline definition. **Typographic ornaments as motifs:** `❧` (aldus leaf) separates major sections. `✦` (four-pointed star) punctuates pull-quotes. `¶` (pilcrow) marks paragraph leads in the "reading hall" section. All rendered in `#2E6B7A` at sizes between `24px` and `140px` depending on structural role. ## Prompts for Implementation Build `reasr.one` as a **single-page vertical scroll with three canvas/CSS depth planes and one Lottie overlay**. The structure is a reading experience, not a marketing page — there are no pricing blocks, no stat-grids, no CTA-heavy sections. **Page architecture (top to bottom, single scroll):** 1. **Lottie intro overlay** — Full-viewport dark overlay (`#1C2E35` at 0.94 opacity) with centered Lottie magnifying-glass animation. Fades out after 2.4s, revealing the page beneath. `localStorage.getItem('reasr_intro_seen')` skips on repeat visits. 2. **Reading Hall header** — Full viewport height. Playfair Display wordmark `REASR` at `clamp(80px, 12vw, 200px)`, centered, `#2E6B7A`. Below it: `.one` in Jost 300 at `clamp(20px, 2.5vw, 36px)` tracked `0.4em`. Beneath that, a single EB Garamond italic line: *"Read with intention. Understand with depth."* at `clamp(18px, 2vw, 28px)`. The Victorian SVG filigree border rings the entire section. Bokeh plane shimmers behind. Particles rise throughout. 3. **Manifesto section** — Off-center, asymmetric card mounted on a `20deg` diagonal ruled line. EB Garamond body text, 3 paragraphs, `660px` measure, justified. Pull-quote at full width: a single Playfair Display bold sentence at `clamp(36px, 4vw, 64px)`, flanked by `❧` ornaments at `56px`. Card background `#EDE8DC`, thick `3px` border `#2E6B7A`, inset shadow `0 0 0 8px #F2F4F3`. 4. **Three capability panels** — Offset layout: first panel flush-left with right margin of 40%, second panel centered, third panel flush-right with left margin of 40%. Each is a tall vertical card with a large-scale typographic symbol as the "illustration" (`§`, `✦`, `¶`). Jost 600 label above, Playfair Display heading, EB Garamond body. Coral Cliff (`#C4614A`) used here once, as a thin `2px` border accent on the active/hovered panel — never as a fill color. 5. **Reading depth section** — The "reading hall" effect: two thin vertical rules (`2px`, `#7DA89B`) run the full height of the section, framing a 700px center column. Text within reads like a Victorian encyclopedia entry, EB Garamond 18px justified, with a `❦` drop cap at `120px` for the opening paragraph. Victorian pilaster ornaments (SVG) cap the top and bottom of the column. 6. **Footer** — Minimal: Jost 300 at `12px`, tracked `0.2em`. `reasr.one` in `#2E6B7A`. Copyright line. No nav links. A final `✦` ornament centered above the footer text. **Animation specifics:** - Particle canvas: `requestAnimationFrame`, capped at 30fps via `performance.now()` delta-time check - Parallax planes: driven by `scroll` event listener, `translateY` transforms on Plane 1 (`0.1 * scrollY`) and Plane 2 (`0.4 * scrollY`) - Lottie: `autoplay`, `loop: false`, `speed: 1.0`; dismiss on click or after 2.4s timeout - Victorian filigree border: CSS `position: fixed`, `z-index: 10`, `pointer-events: none`, SVG fill `#2E6B7A` at `opacity: 0.85` **Technical stack:** - One HTML file, one CSS file, one JS file (≤ 250 lines) - No CSS framework - Lottie player loaded from CDN - All SVG ornaments inline in HTML - Canvas API for bokeh simulation and particle system - No bundler, no build step, no framework **Avoid:** - CTA buttons with hover-fill animations (use underline-only hover for links) - Pricing tables, stat counters, testimonial carousels - Sticky navigation bar - Any photography or raster imagery - Full-bleed dark backgrounds (the darkness lives only in the Lottie intro and in text) ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic: `victorian-ornate` - layout: `layered-depth` - typography: `humanist` - palette: `coastal-blend` - patterns: `lottie-animation` - imagery: `bokeh-background` - motifs: `particle-effects` - tone: `bold-confident` **Differentiators from the 416-design corpus:** 1. **Victorian-ornate at 1% — the only coastal-Victorian fusion in the corpus.** The frequency analysis shows `victorian-ornate` at 1% and `coastal-blend` at 2%; no other design combines them. Victorian ornamentation is almost always paired with dark/warm/luxury palettes. Here the filigree works in teal on chalk-white — a completely unprecedented color pairing for the aesthetic, transforming Victorian authority into coastal clarity rather than gothic weight. 2. **Bokeh simulation without photography.** Photography dominates at 87% of the corpus. `reasr.one` achieves a rich, luminous, atmospheric background using only CSS radial gradients and canvas noise — no raster images anywhere. This makes the bokeh effect a live, shimmering system rather than a static asset, and eliminates photography from the corpus-dominant pattern entirely. 3. **Lottie as narrative introduction, not decoration.** `lottie-animation` appears at 3% in the corpus, but the typical use is as a small icon animation or loading indicator. Here, a full-viewport Lottie overlay functions as a cinematic title card — a magnifying glass reveal that sets the conceptual frame before the site is even seen. The Lottie animation is the front door, not a UI flourish. 4. **Layered-depth parallax with three independent scroll planes.** The corpus shows standard parallax patterns, but a full three-plane depth system — filigree border fixed, bokeh ground slow, content stage standard — with each plane independently composited creates genuine spatial depth. Combined with particles on a fourth canvas layer, the site has four simultaneously visible depth planes, an architectural complexity not found in the reference designs reviewed. 5. **Humanist typography at rare frequency.** The humanist typography slot (EB Garamond as body, Playfair Display as display, Jost as label) does not appear in the top frequency bands. The combination deliberately places a 16th-century humanist revival face (EB Garamond) in dialogue with a Victorian-style display serif (Playfair Display) — creating typographic "historical depth" that mirrors the layered-depth visual concept. **Patterns avoided based on frequency analysis:** - `hand-drawn` (57%) — not used; filigree is vector-precise, not sketchy - `editorial` (53%) — not used; the layout rejects editorial grid conventions - `photography` (87%) — entirely eliminated; bokeh is simulated - `minimal` (44%) imagery — the opposite; the site is ornamentally rich - `parallax-scroll` used differently — not the standard hero-image parallax but a true multi-plane depth system - `typewriter-effect` (4%) — not used; all text is statically set