# Design Language for rational.quest ## Aesthetics and Tone rational.quest channels the visual language of **surrealist logic** -- the uncanny precision of Rene Magritte's paradoxes crossed with the clinical sterility of a scientific instrument catalog from a parallel dimension. The site feels like stepping into a thought experiment rendered as physical space: everything is impossibly clean and measured, yet fundamentally wrong in ways that take a moment to register. Imagine the interior of an optometrist's office where the eye charts contain philosophical axioms, the walls are slightly concave, and the floor appears to recede infinitely downward through frosted glass. The tone is **professional** in the way a chess grandmaster is professional -- composed, deliberate, quietly intimidating. There is no warmth, no friendliness, no invitation. The site presents itself as a fact of existence rather than a product seeking attention. The surreal elements are never whimsical or playful; they are delivered with the deadpan severity of a legal brief describing impossible events. This is rationality pushed past its own breaking point, where logic loops back on itself and produces hallucinations. The primary inspirations are: Magritte's "The Treachery of Images" (the gap between representation and reality), Stanley Kubrick's interior compositions in "2001: A Space Odyssey" (sterile symmetry concealing the incomprehensible), the architectural photography of Candida Hofer (vast institutional spaces devoid of humans), and the information design of Edward Tufte (data presented with surgical elegance). ## Layout Motifs and Structure The layout follows a strict **single-column** vertical descent -- no sidebars, no split panels, no grid diversions. The column occupies exactly 680px (clamped with `max-width: 680px; width: 90vw`) centered in the viewport, but the centering is purely mathematical, never visually "centered" in the cozy web-design sense. The column is the only structure; everything outside it is void. **The Descent Architecture:** The page is organized as a vertical sequence of discrete "propositions" -- numbered sections (P1, P2, P3...) that descend like steps in a logical proof. Each proposition occupies exactly one viewport height (`min-height: 100vh`) and contains a single visual statement plus its textual annotation. The transitions between propositions are not scrolled through smoothly; instead, a **blur-focus** transition occurs at each boundary: as one proposition exits the viewport, it dissolves into a Gaussian blur (`filter: blur(12px)`) while the next proposition resolves from blur into sharp focus over 600ms. This creates the sensation of refocusing one's eyes between thoughts. **Spatial Relationships:** - Between each proposition, a thin horizontal rule (`1px solid #6B5CE7`) spans exactly 38.2% of the column width (golden ratio proportion), centered, with 120px of vertical breathing space above and below - Text blocks are left-aligned within the column, never justified, never centered - Images and visual elements are always full-column-width (680px), creating a rhythm of narrow text and wide visuals - The very first and very last propositions have no blur transition -- they snap into existence, bookending the proof **Navigation:** There is no visible navigation. The only interactive element is a small proposition counter in the bottom-right corner of the viewport (`position: fixed`), displaying "P3/7" in monospace, which serves as both progress indicator and the only persistent UI element. Clicking a proposition number scrolls to that section. ## Typography and Palette **Typography:** - **Display / Proposition Numbers:** "Fredoka" (Google Fonts) at weight 600 -- a rounded, geometric sans-serif with soft terminals and generous counter spaces. Used exclusively for the proposition labels (P1, P2, P3...) at `6rem` / `96px`, color #6B5CE7 (the violet anchor). The playful roundness of Fredoka in an otherwise austere context creates productive dissonance: these soft, almost childlike numerals labeling rigorous logical steps. Set with `letter-spacing: 0.08em` to give each character room, `line-height: 1`. - **Body / Annotation Text:** "Nunito" (Google Fonts) at weights 300-600 -- another rounded sans-serif but with more conventional proportions and excellent readability at body sizes. Used at `1.125rem` / `18px` for all body text, weight 300 for primary text (the lightness reinforcing the ethereal quality), weight 600 for emphasis. Color: #2C2A4A on light backgrounds, #E8E6F0 on dark backgrounds. `line-height: 1.72`, `letter-spacing: 0.01em`. Paragraphs separated by `2rem` vertical space. - **Captions / Metadata:** "Nunito" at weight 400, `0.8125rem` / `13px`, color #8A87A8, all-caps with `letter-spacing: 0.14em`. Used for the proposition counter, image captions, and any incidental text. **Palette (Complementary):** The palette operates on a violet/amber complementary axis -- two colors that vibrate against each other at maximum chromatic tension, grounded by deep blue-blacks and lifted by pale lavenders. | Role | Hex | Description | |------|-----|-------------| | Void (primary background) | #0F0E1A | Near-black with a violet undertone -- the darkness between thoughts | | Surface (card/section bg) | #1A1833 | Slightly lighter void, used for proposition containers | | Violet anchor | #6B5CE7 | Saturated blue-violet, the primary accent -- used for proposition numbers, rules, interactive states | | Violet glow | #9B8FFF | Lighter violet for hover states and the blur-focus glow halo | | Amber complement | #E7A84B | Warm amber-gold, used sparingly as the complementary shock -- only for the single most important element on the page | | Pale ground | #E8E6F0 | Cool lavender-white for body text on dark backgrounds | | Deep text | #2C2A4A | Dark violet-navy for text on light proposition backgrounds | | Grain tint | #8A87A8 | Muted violet-gray for captions, metadata, and the grain overlay tint | The complementary relationship is never blended or softened. Violet and amber exist in strict opposition -- they never appear in the same gradient, never mix. When amber appears (sparingly, perhaps 2-3 times on the entire page), it should feel like a flare in a dark room. ## Imagery and Motifs **Grain Overlay as Atmospheric Layer:** The entire page carries a persistent film-grain overlay achieved through a CSS pseudo-element on the ``: ```css body::after { content: ''; position: fixed; inset: 0; background-image: url('data:image/svg+xml,...'); /* inline noise SVG */ opacity: 0.06; pointer-events: none; mix-blend-mode: overlay; z-index: 9999; } ``` The grain is subtle but omnipresent -- it gives the ultra-clean digital surfaces a tactile, photographic quality, as though the screen itself is a printed surface with physical texture. The grain density increases slightly in darker areas (achieved by layering a second pseudo-element with `mix-blend-mode: multiply` and `opacity: 0.03`). **Wave-Form Motifs:** The primary decorative element is the sine wave, rendered as SVG paths with varying frequencies and amplitudes. These waves appear: 1. **As section dividers** -- instead of the thin horizontal rules at certain transitions, a single-stroke sine wave (`stroke: #6B5CE7; stroke-width: 1px; fill: none`) oscillates gently across the column width, with 3-5 complete cycles. The wave animates slowly (`animation: wave-drift 12s linear infinite`) shifting its phase, creating the illusion of gentle lateral motion. 2. **As background texture** -- behind certain propositions, a field of overlapping sine waves at different frequencies creates a moire-like interference pattern, rendered at very low opacity (`opacity: 0.04`) in #9B8FFF. This evokes oscilloscope readings, sound visualization, and the mathematical substrate beneath rational thought. 3. **As the hero visual** -- the opening proposition features a large-scale wave-form composition: multiple sine waves of increasing frequency stacked vertically, transitioning from slow (1 cycle across the viewport) at the top to rapid (40+ cycles) at the bottom, creating a visual representation of increasing complexity. Rendered in #6B5CE7 with the grain overlay producing an almost serigraph-like quality. **Impossible Geometry:** Select propositions contain simple geometric illustrations that depict logically impossible objects -- a Penrose triangle, a Necker cube that flips orientation on hover, an Escher-inspired staircase that loops. These are rendered as clean SVG line drawings (`stroke: #E8E6F0; stroke-width: 1.5px; fill: none`) and animated with subtle rotation or perspective shifts on scroll. They reinforce the surreal-rational theme: perfect geometric precision describing impossible realities. **No Photography:** The site contains zero photographic imagery. All visuals are generated through SVG, CSS, and mathematical forms. This is a world of pure abstraction -- geometry, waveforms, and impossible shapes. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a completely black (#0F0E1A) viewport. After a 400ms pause, the film grain fades in (`opacity: 0 -> 0.06` over 800ms), giving the screen its tactile texture. Then, the hero wave-form composition draws itself from left to right using `stroke-dasharray` / `stroke-dashoffset` animation over 2.4 seconds -- each sine wave beginning its draw 200ms after the previous one, cascading from slow waves at top to rapid waves at bottom. As the waves complete, the domain name "rational.quest" fades in from blur (`filter: blur(20px) -> blur(0)` over 1s) in Fredoka at `4vw`, positioned below the wave-form field. The text color is #E8E6F0. **Blur-Focus Scroll Transitions:** As the user scrolls, each proposition employs the blur-focus pattern: the current section remains sharp, but as it begins to exit the viewport (when its top edge passes 20% from the top of the viewport), it progressively blurs (`filter: blur(0) -> blur(12px)`) while its opacity drops from 1 to 0.6. Simultaneously, the next proposition resolves from its resting blurred state (`blur(12px), opacity: 0.6`) into sharp focus. This is driven by `IntersectionObserver` with threshold arrays (`[0, 0.1, 0.2, ... 1.0]`) calculating interpolation values. The effect creates a dreamlike quality where only the current thought is in focus, and all others dissolve into the periphery. **Wave Animation Details:** The sine-wave section dividers use SVG `` elements with `d` attributes computed via JavaScript to create smooth sine curves. The phase-shift animation is achieved by incrementally modifying the path data in a `requestAnimationFrame` loop (not CSS animation, for smoother mathematical precision). Each wave has a unique frequency (1.5-4 Hz visual frequency across the column width) and amplitude (8-20px), and they drift at slightly different speeds, creating organic phase relationships. **The Amber Moment:** Exactly one element on the page uses the amber complement #E7A84B: a single sentence within one of the middle propositions -- the thesis statement of the site. This sentence renders in Fredoka weight 600 at `1.5rem` with `color: #E7A84B`. It is the only warm color on the entire page. Its appearance should feel like a match being struck in a dark room. A subtle `text-shadow: 0 0 40px rgba(231, 168, 75, 0.3)` gives it a faint glow against the void background. **Proposition Counter (Fixed UI):** The proposition counter sits at `bottom: 2rem; right: 2rem; position: fixed`. It displays the current proposition number and total (e.g., "P3/7") in Nunito weight 400 at 13px, color #8A87A8, with `letter-spacing: 0.14em`. On hover, each number becomes clickable and turns #6B5CE7. The counter has a subtle backdrop: `background: rgba(15, 14, 26, 0.8); backdrop-filter: blur(8px); border-radius: 4px; padding: 6px 10px`. **Impossible Object Interactions:** The Necker cube illustration responds to cursor proximity (not click): as the cursor moves within 200px of the SVG, it triggers a perspective flip using CSS `transform: rotateY(180deg)` with `transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1)`. The Penrose triangle rotates continuously at `animation: slow-spin 30s linear infinite`. These interactions are quiet -- no sound, no particle effects, no celebration. Just geometry behaving impossibly. **Performance Notes:** The grain overlay uses a small (200x200px) tiling SVG noise pattern rather than a full-viewport canvas, keeping GPU cost minimal. Wave animations are limited to 2-3 visible waves at any time (others are paused when off-screen via IntersectionObserver). All blur effects use `will-change: filter` and are hardware-accelerated. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images with overlay text, hamburger menus, footer link columns, social media icons, newsletter signup forms, cookie banners. ## Uniqueness Notes **Differentiators from other designs:** 1. **Blur-Focus as Primary Navigation Paradigm:** No other design in the portfolio uses depth-of-field blur as the scroll transition mechanism. While 96% of designs use scroll-triggered animations and 75% use parallax, rational.quest replaces these with a camera-focus metaphor where only the current section is sharp and all others exist in bokeh-like softness. This is optically unique and thematically resonant with the concept of rational focus -- attending to one proposition at a time. 2. **Zero Photography / Pure Mathematical Visuals:** While 95% of designs use minimal imagery and 72% use photography, rational.quest uses exclusively generated visuals -- sine waves, impossible geometry SVGs, and interference patterns. Every visual element is mathematically defined, reinforcing the rationality theme while the surreal aesthetic subverts it through impossible objects and phase-shifting wave fields. 3. **Single Amber Accent as Narrative Device:** The complementary palette is deployed asymmetrically -- violet saturates the entire design, but amber appears exactly once, on a single sentence. This transforms a color choice into a storytelling beat. No other design in the portfolio uses its complementary accent with this level of restraint, making the amber moment a genuine visual event rather than a recurring pattern. 4. **Proposition-Based Vertical Proof Structure:** The page is organized as a logical proof (P1, P2, P3...) rather than as marketing sections (Hero, Features, Testimonials, CTA). This structural metaphor is unique in the portfolio and directly encodes the domain's theme into the information architecture itself. 5. **Deadpan Surrealism in Professional Tone:** The surreal elements (impossible geometry, wave hallucinations, blur-dissolve transitions) are delivered without any playful or whimsical framing. The professional tone treats these impossibilities as mundane facts, creating a distinctive uncanny valley between corporate sobriety and dream logic that no other design attempts. **Chosen Seed / Style:** aesthetic: surreal, layout: single-column, typography: playful-rounded, palette: complementary, patterns: blur-focus, imagery: grain-overlay, motifs: wave-forms, tone: professional **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with surreal (2%) - centered layout (99%) -- using single-column with left-aligned text - mono typography (99%) -- using playful-rounded (Fredoka + Nunito) - warm palette (100%) -- using cool violet/amber complementary - scroll-triggered as primary (96%) -- using blur-focus (2%) as primary transition - minimal imagery (95%) -- using grain-overlay (2%) and generated wave-forms - vintage motifs (88%) -- using wave-forms (2%) - friendly tone (98%) -- using professional (9%)