# Design Language for toron.day ## Aesthetics and Tone toron.day draws from the contradiction of wet pigment meeting electric light -- watercolor washes rendered in colors so saturated they feel radioactive, as if someone spilled highlighter fluid into a Renaissance painter's water cup. The visual direction channels the accidental beauty of watercolor blooms and bleeds, where pigment pools at edges and feathers into unexpected gradients, but rejects the soft pastels typically associated with the medium. Instead, every wash pulses with dopamine-bright neons: hot magenta bleeding into electric chartreuse, cyan pooling against vivid coral. The inspiration is the work of artists like Akira Isogawa's neon-dyed textiles, the fluorescent watercolors of Jen Stark, and the controlled chaos of ink dropped into wet paper photographed under UV light. The tone is approachable-casual -- like a friend showing you their sketchbook over coffee, narrating each spread with genuine enthusiasm rather than curatorial distance. There is no corporate veneer, no aspirational detachment. The voice is warm without being saccharine, knowledgeable without being pedantic. Every element feels touched by a human hand, even when technically precise. The overall mood sits at the intersection of an artist's studio on a sunny afternoon and a late-night creative session under neon signage -- simultaneously relaxed and electrically alive. The watercolor aesthetic is not decorative wallpaper but structural: washes define section boundaries, color bleeds create navigation cues, and the unpredictable behavior of wet-on-wet pigment informs the animation language. Negative space is not emptiness but breathing room -- the ma (間) principle from Japanese aesthetics, where the pause between elements carries as much meaning as the elements themselves. ## Layout Motifs and Structure The layout follows the ma-negative-space philosophy, where generous emptiness is the dominant compositional force. Rather than filling every pixel, the design treats the viewport as a sheet of wet watercolor paper: content exists as deliberate marks placed with intention, surrounded by vast expanses of white (or near-white tinted paper) that give each element room to resonate. **Spatial Architecture:** - **The Paper Field:** The base layer is a subtly textured off-white (#FAF7F2) that mimics cold-pressed watercolor paper, with a faint grain visible at scale. This is not a flat white but a living surface with tooth and warmth. A very subtle CSS noise texture at 3% opacity gives it tactile presence. - **Ink Drop Hero:** The opening viewport presents a single large watercolor bloom animation at center -- not a traditional hero image but an abstract wash that expands from a point, feathering outward like ink dropped into water. The domain name "toron.day" appears letter by letter within the bloom, each character arriving as the pigment reaches its position. Below this, 60vh of pure negative space before any content begins. - **Breath Sections:** Content is organized into isolated "breath" modules separated by minimum 40vh of empty space. Each module is a self-contained thought: a single image with caption, a short paragraph, a typographic statement. No module exceeds 50% of the viewport width. Modules alternate between left-aligned (with 55% right margin) and right-aligned (with 55% left margin), creating a gentle diagonal reading path down the page. - **Watercolor Dividers:** Between breath sections, thin watercolor wash stripes (8px tall, full viewport width) bleed horizontally with color animations -- the hue shifting slowly along the stripe like chromatography, separating the neon palette into its component frequencies. These are CSS gradient animations, not images. - **Floating Anchors:** Navigation is not a fixed header but a set of 4-5 small circular watercolor dots fixed to the right edge of the viewport, each a different neon color. Hovering a dot causes a wash of that color to softly bleed across 20% of the viewport from the right edge, revealing the section name in Libre Baskerville italic. Clicking scrolls smoothly to the section. - **Terminal Pause:** The page ends with 80vh of empty paper-textured space below the last content module, with only a single small watercolor mark at the very bottom center -- a period, a breath, a deliberate stopping point. ## Typography and Palette **Typography:** - **Headlines:** "Libre Baskerville" (Google Fonts) -- the refined serif that anchors the baskerville-refined typographic identity. Used at weight 700 for headlines, sized between `clamp(2rem, 4vw + 0.5rem, 5rem)`. The sharp, high-contrast serifs of Baskerville create elegant tension against the organic watercolor backgrounds. Headlines are set in near-black (#1A1A1A) with `letter-spacing: 0.02em` and `line-height: 1.15`. Selected headlines use a CSS `background-clip: text` technique with animated watercolor gradients behind the letterforms, making the text itself appear painted. - **Body Text:** "Libre Baskerville" at weight 400 (regular) for body copy, sized at `clamp(1rem, 1.1vw + 0.4rem, 1.25rem)` with generous `line-height: 1.85` to honor the ma-negative-space principle at the typographic level. Body text color is a soft charcoal (#3D3D3D) rather than pure black, reducing contrast to match the gentle paper texture. Paragraph max-width is capped at 38em for optimal reading measure. - **Accent / Labels:** "Karla" (Google Fonts) -- a grotesque sans-serif with humanist warmth, used at weights 400-600 for navigation labels, captions, dates, and metadata. Sized at `clamp(0.75rem, 0.9vw + 0.2rem, 0.95rem)` in uppercase with `letter-spacing: 0.12em`. Color varies per section using the neon palette. Karla's clean geometry contrasts with Baskerville's traditional serifs, grounding the watercolor expressiveness in contemporary functionality. **Palette:** The dopamine-neon palette is deployed against an off-white paper ground, creating maximum chromatic impact through contrast with near-neutral surroundings: | Role | Color | Hex | Usage | |------|-------|-----|-------| | Paper Ground | Warm White | #FAF7F2 | Background, negative space | | Ink Base | Near Black | #1A1A1A | Headlines, primary text | | Body Text | Soft Charcoal | #3D3D3D | Body copy, secondary text | | Neon Magenta | Hot Pink | #FF2D7B | Primary accent, first wash layer | | Neon Chartreuse | Electric Lime | #BDFF00 | Secondary accent, hover states | | Neon Cyan | Bright Aqua | #00F0FF | Tertiary accent, navigation dots | | Neon Coral | Vivid Salmon | #FF6B4A | Quaternary accent, watercolor dividers | | Neon Violet | Deep Purple | #9B59FF | Highlight accent, selected states | | Wash Tint | Pale Rose | #FFF0F3 | Subtle section background tinting | All neon colors are used at full saturation only in small doses -- watercolor dots, thin divider stripes, text accents, hover bleeds. They never fill large areas at full opacity. Instead, watercolor wash effects use these colors at 8-25% opacity over the paper ground, creating the illusion of diluted pigment that has dried on textured paper. ## Imagery and Motifs **Photography Through Watercolor:** The imagery strategy combines photography with watercolor treatment -- real photographs are displayed with CSS effects that make them appear as if painted in watercolor. The treatment pipeline: 1. Base image displayed with `mix-blend-mode: multiply` against a white-to-neon gradient overlay 2. Edge softening via `mask-image: radial-gradient(ellipse 85% 85% at center, black 60%, transparent 100%)` creating feathered, non-rectangular photo boundaries 3. A subtle `filter: saturate(1.4) contrast(0.9)` push toward the neon palette 4. A CSS pseudo-element overlay with a watercolor paper texture at 15% opacity using `mix-blend-mode: overlay` The result: photographs that look like they were printed onto watercolor paper and then partially washed over with pigment, their edges dissolving into the page rather than sitting in hard-edged rectangles. **Vintage Motifs Through a Neon Lens:** The vintage motif manifests not as sepia nostalgia but as the concept of "vintage process" -- the handmade, imperfect, analog quality of watercolor technique itself. Visual elements reference: - Visible brush strokes rendered as SVG paths with stroke-dashoffset animations that draw themselves on scroll - Paint splatter marks (small SVG circles with irregular edges) scattered at section transitions, colored in neon palette at 30% opacity - Drip marks along the left margin -- thin vertical lines with bulbous endpoints, like paint running down a tilted canvas, animated to slowly elongate as the user scrolls - A "color swatch" strip in the footer showing all five neon colors as small rectangular patches with torn-paper edges, referencing an artist's test palette **Lottie Animation Integration:** Three key Lottie animations define the motion identity: 1. **Ink Drop Bloom** (hero): A looping animation of watercolor pigment dropping into water and expanding, rendered in the neon magenta-to-cyan gradient. Plays once on load, then loops subtly at 0.3x speed. 2. **Brush Stroke Reveal** (section transitions): A horizontal brush stroke that sweeps across the viewport as a section transition, the Lottie animation triggered at scroll position, painting a neon wash that then fades to reveal content beneath. 3. **Drip Cycle** (ambient): Small Lottie animations of paint drips that trigger randomly along the page margins during idle moments, adding life to the negative space without requiring user interaction. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must open as a full-viewport immersive watercolor canvas. On initial load, the screen shows only the paper-textured background (#FAF7F2). After 300ms, the Ink Drop Bloom Lottie animation triggers at viewport center, expanding a neon magenta wash outward in organic, irregular patterns over 2.5 seconds. As the bloom reaches approximately 40% viewport coverage, the domain name "toron.day" begins appearing letter by letter in Libre Baskerville 700, each character fading in with 150ms stagger as if the ink is seeping through paper to form letterforms. The bloom continues expanding to roughly 60% coverage, then its opacity gradually reduces from 100% to 12% over 3 seconds, leaving a faint watercolor ghost behind the fully-visible title. **Scroll Behavior and Pacing:** The entire scroll experience is deliberately slow. Use `scroll-behavior: smooth` with generous easing. Each breath section begins invisible (opacity: 0, translateY: 30px) and resolves into view over 800ms with an ease-out-cubic curve when its Intersection Observer fires at 0.3 threshold. The Brush Stroke Reveal Lottie plays between sections, triggered when the midpoint between two breath modules crosses the viewport center. The stroke is neon chartreuse (#BDFF00) at 20% opacity, sweeping left-to-right over 1.2 seconds. **Watercolor Wash Hover Effects:** When the user hovers over any interactive element, a soft watercolor bleed emanates from the cursor position. This is achieved with a radial gradient pseudo-element (`::after`) positioned at the mouse coordinates via CSS custom properties (`--mouse-x`, `--mouse-y`), using `background: radial-gradient(circle 120px at var(--mouse-x) var(--mouse-y), rgba(255,45,123,0.15), transparent)` with a 400ms transition. The color rotates through the five neon accent colors based on which section the user is in. **Photography Treatment on Scroll:** Photographs begin fully desaturated (`filter: grayscale(1)`) and as they scroll into view, the color gradually returns via an Intersection Observer ratio mapped to the grayscale filter value -- at 0% visible they are fully gray, at 100% visible they reach `filter: saturate(1.4) contrast(0.9)`. This creates the metaphor of pigment gradually bleeding into the paper as the image enters the frame. The feathered mask edges are always present, ensuring photos never have hard rectangular boundaries. **Navigation Dot Interaction:** The 5 floating navigation dots (positioned fixed at `right: 2vw`, vertically centered) are 12px diameter circles, each filled with one of the five neon colors. On hover, the dot scales to 16px and a watercolor wash of its color bleeds leftward using `background: linear-gradient(to left, rgba(color, 0.2), transparent)` across 20vw width, with the section name appearing in Karla uppercase at the left edge of the wash. The active section's dot has a subtle pulse animation: `@keyframes dotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }` at `animation: dotPulse 3s ease-in-out infinite`. **Ambient Paint Drips:** After 10 seconds of page idle time (no scroll, no mouse movement), small Lottie drip animations begin triggering at random positions along the left and right margins (within 5vw of each edge). Each drip is a thin vertical line that grows downward by 30-80px over 2 seconds, colored in a random neon palette color at 25% opacity. Maximum 3 drips visible simultaneously. Any user interaction immediately stops new drips and existing ones complete their animation naturally. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus, sticky headers, card-based grids, multi-column text layouts, background video, parallax scrolling of images, gradient hero sections with centered white text. ## Uniqueness Notes **Differentiators from other designs:** 1. **Watercolor-as-Architecture:** While watercolor appears in only 7% of existing designs, none use it as a structural layout principle. In toron.day, watercolor behavior (bleeding, pooling, feathering, drying) dictates how content appears, transitions, and occupies space. The washes are not decorative backgrounds but functional UI elements -- navigation feedback, section dividers, scroll progress indicators, and content reveal mechanisms. 2. **Ma-Negative-Space as Primary Composition:** At only 2% frequency, the ma-negative-space layout is radically underused. toron.day makes emptiness the dominant visual element -- 60-70% of the page is intentional void. This directly contradicts the 99% centered layout pattern and the 96% scroll-triggered animation pattern (since most of the scroll distance covers empty space, not animated content). The breathing room between modules is not laziness but deliberate pacing that forces the viewer to slow down. 3. **Dopamine-Neon on Paper Ground:** The combination of full-saturation neon colors (#FF2D7B, #BDFF00, #00F0FF, #FF6B4A, #9B59FF) against a warm paper-textured off-white is visually unprecedented in the existing portfolio. Most neon palettes (5% frequency) are deployed against dark backgrounds. By placing neons on light paper at low opacity (8-25%), the design creates the unique visual of fluorescent watercolor -- impossible in physical media, distinctly digital, yet evoking analog craft. 4. **Lottie-Driven Ambient Motion:** With lottie-animation at only 2% frequency, the three bespoke Lottie animations (Ink Drop Bloom, Brush Stroke Reveal, Drip Cycle) provide a motion language entirely distinct from the dominant scroll-triggered (96%) and parallax (73%) patterns. The idle-triggered drip animations are particularly unique -- motion that responds to user inaction rather than action, rewarding patience and stillness. 5. **Photography Dissolving Into Painting:** Rather than displaying photographs in standard rectangular frames (the 72% photography imagery norm), toron.day dissolves photographic edges through radial gradient masks and applies watercolor treatments that blur the boundary between photograph and painting. The scroll-driven desaturation-to-color transition adds temporal dimension -- images literally develop like a Polaroid as they enter view. **Seed Documentation:** - aesthetic: watercolor (7% frequency - underused) - layout: ma-negative-space (2% frequency - very underused) - typography: baskerville-refined (3% frequency - underused) - palette: dopamine-neon (5% frequency - underused) - patterns: lottie-animation (2% frequency - very underused) - imagery: photography (72% frequency - common, but applied uniquely via watercolor dissolution) - motifs: vintage (89% frequency - common, but reinterpreted as "vintage process/analog craft" rather than sepia nostalgia) - tone: approachable-casual (3% frequency - underused) **Avoided Overused Patterns:** - Avoided: centered layout (99%), instead using alternating left/right breath modules with massive margins - Avoided: scroll-triggered animations (96%) as primary motion, instead using Lottie and idle-triggered animations - Avoided: mono typography (99%), instead using Libre Baskerville serif + Karla sans pairing - Avoided: friendly tone (99%), instead using approachable-casual which is warmer and less performative - Avoided: playful aesthetic (96%), instead committing to watercolor as a specific, technique-driven visual language - Avoided: warm palette (100%) as generic warmth, instead using high-saturation neons that read as electric rather than cozy