# Design Language for reasoner.dev ## Aesthetics and Tone reasoner.dev channels a surreal aesthetic — the dream-logic visual language of Surrealist art applied to a reasoning engine developer platform. The site reasons through impossibility — Magritte's visual paradoxes applied to logical systems, Escher's impossible geometries mapped to reasoning chains, and the productive tension between rational process and irrational imagination. Inspiration draws from the visual paradoxes of Rene Magritte, the impossible constructions of M.C. Escher, the dream landscapes of Salvador Dali, and the surrealist photography of Man Ray. The tone is grounded-earthy — practical, rooted language that anchors surreal visuals in solid, implementable developer guidance. ## Layout Motifs and Structure The layout uses a **hexagonal-honeycomb** architecture — content organized in a honeycomb pattern that creates the molecular quality of reasoning nodes connecting in non-linear, organic structures. **Hexagonal Honeycomb Architecture:** - CSS Grid with hexagonal clip-path on cells - Cell size: 280px with 4px gaps - Offset rows creating honeycomb alignment - Feature cells span equivalent of 2 hexagons - Container: max-width: 1100px centered - The honeycomb creates the neural-network quality of reasoning nodes in connected patterns **Section Sequence:** 1. **Dream Gate:** Hero with geometric-sans title on candy-bright surreal gradient, data-viz reasoning chain visualizations, crystalline faceted logic markers 2. **Reason Nodes:** Developer tools in honeycomb grid — fade-reveal interactive node illumination with data-viz connecting chain visualizations 3. **Paradox:** Featured tool in expanded hexagonal cluster with crystalline multi-faceted accents and data-viz immersive chain diagram 4. **Logic Garden:** API documentation in flowing honeycomb with crystalline index markers 5. **Wake:** Footer as dream ending — grounded-earthy closing with crystalline settled markers and practical farewell ## Typography and Palette **Typography:** - **Headlines:** "Outfit" (Google Fonts) — geometric sans at 2.2rem-3rem, weight 700. Its clean, geometric forms create the logical-precision quality of a reasoning engine's output rendered in authoritative typography. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for reasoning engine code and API examples. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Dream Violet:** #1c1030 — deep dream violet for backgrounds - **Dream Surface:** #281840 — rich violet for panels - **Candy Magenta:** #e848a8 — bright candy magenta for primary accent - **Candy Cyan:** #38d8e0 — vivid candy cyan for secondary accent - **Candy Lime:** #98e838 — bright candy lime for tertiary accent - **Dream Light:** #e8daf0 — soft light for text - **Shadow Dream:** #382850 — dream shadow for secondary text - **Border Dream:** rgba(232,72,168,0.1) — magenta tint border ## Imagery and Motifs **Data-Viz Reasoning Chains:** Reasoning processes visualized through connected node diagrams — small circles (8px) connected by curved SVG paths (1.5px stroke) in Candy Magenta and Candy Cyan. Nodes pulse on hover (scale 1.0 to 1.3 over 200ms). The chains create the visual quality of watching a reasoning engine trace logical connections. **Fade-Reveal Node Illumination:** Honeycomb cells illuminate sequentially — opacity 0 to 1 with scale(0.95) to scale(1.0) over 400ms ease-out, staggered by calc(var(--cell-index) * 80ms). The sequential reveal creates the reasoning-chain quality of logic illuminating one node at a time. **Crystalline Logic Markers:** Faceted diamond shapes (10-14px) with gradient fills (linear-gradient from Candy Magenta to Candy Cyan) as reasoning-stage indicators and section markers. The crystalline quality gives logic markers the precious, valued appearance of rational conclusions. **Candy-Bright Surreal Gradient:** Background uses vivid surreal color mixing — radial-gradient(at 30% 40%, rgba(232,72,168,0.04), transparent 35%), radial-gradient(at 70% 60%, rgba(56,216,224,0.03), transparent 30%), radial-gradient(at 50% 80%, rgba(152,232,56,0.02), transparent 25%). The candy brightness creates the dream-landscape quality of surrealist imagination applied to rational systems. **Impossible Geometry Accents:** SVG decorative elements depicting visually impossible shapes — Penrose triangles, impossible cubes (30-50px) in Candy Cyan at 0.06 opacity. The impossible shapes create the Escher quality of rational systems that contain beautiful paradoxes. ## Prompts for Implementation Build the page as a surreal reasoning engine laboratory. Honeycomb: .reason-grid { display: grid; grid-template-columns: repeat(auto-fill, 280px); gap: 4px; justify-content: center; max-width: 1100px; margin: 0 auto; padding: 80px 24px; } .hex-cell { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); aspect-ratio: 1.155; padding: 32px; } .hex-cell:nth-child(even) { transform: translateX(140px); } Fade-reveal: .hex-cell { opacity: 0; transform: scale(0.95); transition: all 400ms ease-out; transition-delay: calc(var(--cell-index) * 80ms); } .hex-cell.visible { opacity: 1; transform: scale(1.0); } Reasoning chain: .chain-node { width: 8px; height: 8px; border-radius: 50%; background: var(--node-color, #e848a8); transition: transform 200ms ease; } .chain-node:hover { transform: scale(1.3); } .chain-link { stroke: var(--link-color, rgba(232,72,168,0.3)); stroke-width: 1.5; fill: none; } Crystalline: .logic-marker { width: 12px; height: 12px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: linear-gradient(135deg, #e848a8, #38d8e0); } Impossible shape: .penrose svg { stroke: rgba(56,216,224,0.06); stroke-width: 1.5; fill: none; } AVOID: Standard developer tool dashboards, corporate reasoning platforms, and minimal API documentation. Let surreal dream-logic and grounded-earthy guidance create a reasoning engine platform where logical systems are presented with the beautiful impossibility of Escher and the practical clarity of excellent documentation. ## Uniqueness Notes 1. **Surreal for reasoning engine:** Dream-logic visuals create the productive tension between rational process and irrational imagination. 2. **Hexagonal-honeycomb as neural network:** Non-linear honeycomb creates the molecular quality of reasoning nodes in organic connection patterns. 3. **Data-viz as reasoning chains:** Connected node diagrams visualize the real-time quality of watching a reasoning engine trace logic. 4. **Impossible geometry as paradox:** Penrose triangles and impossible shapes celebrate the beautiful paradoxes within rational systems. 5. **Candy-bright against deep violet:** Vivid accent colors on dark backgrounds create the surreal-dream quality of imagination illuminating darkness. **Seed/Style:** aesthetic: surreal, layout: hexagonal-honeycomb, typography: geometric-sans, palette: candy-bright, patterns: fade-reveal, imagery: data-viz, motifs: crystalline, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses surreal aesthetic, hexagonal-honeycomb layout, candy-bright palette, data-viz imagery, and grounded-earthy tone.