# Design Language for reasoner.dev ## Aesthetics and Tone `reasoner.dev` is a **neomorphic oracle chamber** — a place where logical inference meets classical mystery. Imagine a marble hall deep in a Hellenistic library, where the columns are soft-extruded UI panels lit from within by cold phosphorescent glow. The walls are veined Carrara marble, but the veins are not static: they shift slowly, as if the stone is thinking. The aesthetic is simultaneously ancient and computational — Aristotle's syllogisms rendered in pressed shadow and diffuse light. The tone is **mysterious-moody**: hushed authority, the feeling of entering a space where important thinking happens. There is no noise, no urgency, no color shouting. Every surface breathes with barely perceptible depth — neumorphic panels that seem carved from the background material, shadows both inward and outward, as if the UI components are runes pressed into warm stone. The visitor feels like they have unlocked a private reasoning engine, not clicked a product landing page. The triadic palette is drawn from archaic pigment: **charcoal-ash** as dominant (#1C1B22), **deep verdigris** as primary accent (#2D6B5C), and **antique bone gold** as counterpoint (#B8935A). These three form a cold-warm-muted triad that avoids the electric saturation overused elsewhere. Vein highlights pulled from the marble motif use a near-white alabaster (#E8E2D5) sparingly for text and fine structural lines. Neomorphism here is NOT the pastel soft-UI trend — it is **dark neomorphism**: pressed into near-black, with dual shadow systems (dark shadow at #0D0C11, light shadow at #2A293A) creating an illusion of depth carved from obsidian. Every panel looks hewn. Every button looks like it could be pressed in stone. ## Layout Motifs and Structure The primary structure is a **dark dashboard** with a persistent left oracle rail (240px, collapsible) and a main content plane that occupies the remainder. This is NOT a generic analytics dashboard — it is an **inference workspace**, a philosophical instrument panel. The left rail holds: the site sigil at top (a geometric marble-inlaid emblem), followed by a vertical navigation of reasoning modes — Infer, Deduce, Prove, Refute, Synthesize. Each nav item is a neomorphic chip, pressed into the rail surface, with verdigris-glow state on active. The rail bottom holds a minimal status line showing a slowly incrementing "reasoning depth" counter. The main content plane uses a **staggered asymmetric column structure**: a primary column at 65% width left-aligned, and a secondary annotation margin at 30% right. They do NOT have equal weight — the primary is dominant, the margin is whisper-thin, used for footnotes, cross-references, and collage fragments. A 5% gutter between them holds a hairline rule in verdigris (#2D6B5C at 30% opacity) that pulses subtly on scroll. Within the primary column, **content stagger** is used precisely: alternating blocks are indented by 32px on alternating sides — not random, but following a marble frieze rhythm: left, center, right, center, left. This gives the page a processional quality, like moving through a colonnaded hall. Each stagger step takes 180ms on entry (a deliberate slow reveal, not the frantic 60ms stagger seen at 50% of the corpus). The hero section occupies the full main plane viewport height. It contains no image — only a slow marble-vein SVG animation (150s loop, imperceptible in real time), a three-line statement in the display font, and a single verdigris underline that grows from left to right over 2 seconds after load. ## Typography and Palette **Type system (Google Fonts only, verified):** - **Display / Hero — `Cormorant Garamond`** (variable, wght 300–700, ital). Set at 72px, weight 300, tracking -0.02em, italic. This is the classical serif voice — refined, archaic, slightly cold. Hero statements are 3 lines maximum, set in italic 300 weight against the dark background. On hover, the weight axis ticks from 300 to 500 over 300ms — a slow solidifying, as if the thought becoming confident. H1 only; every other heading uses the secondary face. - **Subheadings / UI Labels — `Space Grotesk`** (variable, wght 300–700). Set at 14–18px uppercase, letter-spacing 0.12em, weight 400. Space Grotesk is the rational counterpart to Cormorant's classicism — geometric, slightly condensed, reading like a modern logician's handwriting. Section labels, rail navigation items, and annotation column text all use Space Grotesk. - **Body / Reasoning text — `Lora`** (variable, wght 400–700). Set at 17px, line-height 1.75, weight 400. Lora is a contemporary serif designed for screen reading — it carries the classical tradition but without oldstyle eccentricities that hurt readability. Body paragraphs in the primary column are Lora. Pull-quotes are Lora italic 500. - **Monospace / Inference code — `JetBrains Mono`** (variable, wght 100–800). Used for logical notation, proof blocks, and any symbolic reasoning displayed. 14px, weight 300, letter-spacing 0.04em. **Palette (verified hex values):** - `#1C1B22` — Obsidian ground: primary background for dashboard, left rail, and all neomorphic surfaces - `#2D6B5C` — Verdigris: primary accent, active states, the living color of the system - `#B8935A` — Antique gold: counterpoint accent, used for critical highlights, the sigil, and marble-vein intersections - `#0D0C11` — Shadow depth: the dark shadow in neomorphic dual-shadow system - `#2A293A` — Elevation shadow: the light shadow in neomorphic system (slightly lighter than background) - `#E8E2D5` — Alabaster: primary text color, fine hairlines, marble highlight veins - `#1E2E2A` — Deep verdigris ground: hover states on nav items, pressed neomorphic states **Neomorphic shadow formula for dark mode:** ``` box-shadow: -6px -6px 12px #2A293A, 6px 6px 12px #0D0C11; ``` Pressed/active state inverts (inset shadows). Corner radius: 8px consistently across all panels. ## Imagery and Motifs The primary visual motif is **marble-classical**: veined stone rendered as SVG path animations. 1. **Marble Vein System (SVG, procedural paths).** The hero background and the left rail top-area hold slowly-animated SVG vein structures. Each vein is a cubic bezier path, 0.8px stroke, in `#E8E2D5` at 8% opacity, with occasional nodes in `#B8935A` at 15% opacity where veins intersect (these are the "thoughts"). Veins drift at imperceptible speed: each control point moves ±6px over 120–180 seconds via CSS keyframe animation with random-offset delays per vein. The total impression is a stone that breathes. 2. **Collage Fragments (positioned absolutely in annotation margin).** The right annotation margin holds 3–5 archival collage fragments per page: torn-edge fragments of classical engravings (Raphael school sketches, geometric proofs from Euclid's Elements, Aristotle manuscript pages) rendered as grayscale PNGs with `mix-blend-mode: luminosity` and 12% opacity. They do not distract — they haunt. Each fragment is positioned with slight rotation (±4°) and has a subtle drop-shadow in verdigris. 3. **The Oracle Sigil.** Top of left rail: a geometric emblem composed of an equilateral triangle (representing syllogism: major premise, minor premise, conclusion) inscribed in a circle, with a small central void. The triangle's three vertices hold the three palette accent colors as tiny filled circles. SVG, 48×48px, no animation except a 4s opacity pulse between 85% and 100%. 4. **Pressed Panel Iconography.** Navigation icons are custom SVG glyphs (12px) in a semi-classical style: not pixel-art, not flat-design generic, but hand-drawn geometric shapes recalling astronomical instruments. Astrolabe circles for "Infer", intersecting lines for "Deduce", a right-angle for "Prove", a strikethrough arc for "Refute", a convergent diagram for "Synthesize". 5. **Marble Tile Texture (CSS background).** A subtle repeating SVG texture applied to the main content plane at 3% opacity: diagonal crosshatch lines at 0.5px, spaced 24px, rotated 30°. This gives the dark surface a stone-cut quality without competing with content. ## Prompts for Implementation Build `reasoner.dev` as a **dark neomorphic reasoning instrument** — the digital equivalent of a private philosophical library with computational bones. **Architecture: single HTML page, three zones.** Zone 1 — Left Oracle Rail (240px fixed, `position: sticky`, 100vh): - Sigil at top with 4s pulse animation - Five nav chips (Infer, Deduce, Prove, Refute, Synthesize), each a neomorphic pressed chip with dual-shadow formula above. Active chip shows verdigris left border (3px solid #2D6B5C) and inner glow (box-shadow inset version). - Reasoning depth counter at bottom: monospaced, slowly incrementing integer via `setInterval(+1, 800ms)`, labeled "depth" in Space Grotesk 10px uppercase. It never resets. Counts as long as the page is open. - Rail background: `#1C1B22` with marble vein SVG positioned absolutely in top-right corner of rail, clipped to rail bounds. Zone 2 — Hero Plane (full viewport height of main content area): - No image, no video, no stock photography. - Background: dark obsidian with marble vein animation (full viewport width animated SVG, 150s loop). - Three-line statement in Cormorant Garamond italic 300: line 1 at 72px, line 2 at 56px (slightly smaller, indented 2 em), line 3 at 40px (further indented 4 em). This creates a waterfall hierarchy. - Single verdigris underline growing from left (CSS clip-path or width animation, 2s ease-in-out, triggered on load after 800ms delay). - No CTA button. No hero image. No stat grid. Just the statement. Zone 3 — Main Content Plane (staggered columns): - Primary column (65%) + annotation margin (30%) + gutter hairline (5%). - Content sections use the marble-frieze stagger rhythm: sections alternate 0px / 32px / 64px / 32px / 0px left indent within the primary column. - Stagger entry: `transform: translateY(24px); opacity: 0` → `translateY(0); opacity: 1` over 180ms, `ease-out`, triggered by IntersectionObserver at 20% threshold. NOT a rapid fire cascade — each block waits for the previous to finish before entering (sequential, not simultaneous). - Annotation margin: fixed 30% column to the right. Contains collage fragments (absolutely positioned, `mix-blend-mode: luminosity`) and pull-quote fragments in Lora italic 500 at 13px, `#E8E2D5` at 60% opacity. **Storytelling arc (5 sections, no pricing, no CTA-grid):** 1. **The Inquiry** — What does it mean to reason well? Opens with the three-line hero statement. Body: Lora 17px, two paragraphs about the nature of inference. Annotation: a fragment of Euclid's parallel postulate. 2. **The Method** — Four neomorphic panels arranged in a 2×2 grid within the primary column. Each panel represents a reasoning mode (Deduction, Induction, Abduction, Analogical). Panel text in Space Grotesk 14px uppercase label + Lora 15px body. Each panel has the dual-shadow formula. NO hover enlargement — only a subtle verdigris border glow on hover (box-shadow adds outer verdigris glow: `0 0 16px #2D6B5C40`). 3. **The Archive** — A staggered list of 6 reasoning artifacts: historical proofs, logical notation examples, syllogism structures. Each artifact is a neomorphic row: 100% wide, 72px tall, with a left accent line in verdigris, a Space Grotesk label, and a Lora one-line description. On hover, the accent line expands from 3px to 8px over 200ms. Annotation margin here holds the Aristotle manuscript fragment collage image. 4. **The Engine** — A centered full-width code block (JetBrains Mono) showing a symbolic logic proof. Syntax highlighting uses only two colors: verdigris (#2D6B5C) for operators, alabaster (#E8E2D5) for terms. No rainbow syntax coloring. The block has the neomorphic panel treatment, inset shadows, and a slow type-on effect: characters appear one at a time over 4 seconds if IntersectionObserver triggers on entry. 5. **The Threshold** — Final section. Single centered paragraph in Cormorant Garamond italic 500, 36px, `#E8E2D5`. Three sentences. No contact form. No email collection. Just an ending: the oracle has spoken. Below it: the oracle sigil centered, 80×80px, at 40% opacity, no animation. **Animation budget:** 4 concurrent animations max (marble vein SVG, depth counter setInterval, IntersectionObserver stagger triggers, type-on effect). Never run all simultaneously. The marble veins run always; the rest trigger on scroll arrival. Performance over spectacle. **AVOID:** Hero image carousel. Pricing table. Feature grid with icons. "Get started" CTA button. Bright gradient backgrounds. Any typography below 13px. The word "powerful". Drop caps with color fills. Parallax on scroll (already at 75% in registry — skip it). ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: neomorphism, layout: dashboard, typography: eclectic-hybrid, palette: triadic, patterns: stagger, imagery: collage, motifs: marble-classical, tone: mysterious-moody. **Differentiators from the existing corpus:** 1. **Dark neomorphism, not pastel neomorphism.** The corpus's 2% neomorphism usage has defaulted to light-mode soft-UI. `reasoner.dev` inverts the entire convention: obsidian-black ground, dual dark shadows, marble-vein veining instead of pastel gradients. This is the first dark-mode neomorphic design in the registry — a genuinely unexplored combination. 2. **Classical-logical narrative structure.** Every other dashboard design in the registry uses metrics, analytics panels, or SaaS feature lists. `reasoner.dev` uses syllogistic reasoning stages (Infer, Deduce, Prove, Refute, Synthesize) as the primary navigation and storytelling arc. The "data" is philosophical, not numerical. This is not a tech product dashboard — it is an **oracle chamber** wearing dashboard chrome. 3. **Marble vein as living data.** The marble-classical motif (2% frequency, underused) is used not as a texture but as an animated inference diagram — vein intersections represent logical nodes, vein paths represent inference chains. The static decoration becomes a dynamic structural metaphor. No other design in the registry has animated SVG marble as a semantic system. 4. **Eclectic-hybrid serif/grotesque/mono stack with deliberate role separation.** The three-font stack (Cormorant Garamond for classical display, Space Grotesk for rational UI, Lora for body inference text) enacts the site's premise: classical intuition (serif display) moderated by logical structure (grotesque labels) expressed in readable prose (screen-optimized serif body). The typography IS the argument about reasoning. 5. **Sequential stagger, not simultaneous cascade.** The 50% stagger pattern in the corpus runs as simultaneous cascades — all items fire at once, staggered by delay. `reasoner.dev` implements true sequential stagger: each block waits for the previous to finish before beginning entry. The result is processional and deliberate — matching the mysterious-moody tone rather than the energetic feel of a typical stagger cascade.