# Design Language for reasr.one ## Aesthetics and Tone reasr.one channels an inflated-3d aesthetic — the pillowy, volumetric quality of inflated soft forms applied to the Reasoner singular identity platform. The site puffs — rounded, ballooned surfaces catching light, soft shadows implying physical depth, and the tactile invitation of forms that look squeezable and real. Inspiration draws from the inflatable sculptures of Jeff Koons, the soft architecture of Snarkitecture, the puffy typography experiments of ANTI Design Studio, and the volumetric UI of Apple's visionOS spatial design. The tone is zen-contemplative — meditative, present-moment language that treats the singular reasoner as worthy of focused, unhurried attention. ## Layout Motifs and Structure The layout uses a **layered-depth** architecture — content arranged in stacked depth planes that create the volumetric quality of inflated objects floating at different distances in contemplative space. **Layered Depth Architecture:** - Content at 3-4 depth planes (far, mid, near, foreground) - Cards with strong box-shadow depth indicators - Feature elements floating closest to viewer - Generous spacing allowing depth perception - Container: max-width: 900px centered with depth layering - The depth creates the spatial quality of inflated objects floating in 3D contemplative space **Section Sequence:** 1. **Inflate:** Hero with garamond-classic title on burnt-orange inflated gradient, neon-glow soft luminous edges, wave-forms organic flowing accents 2. **Reason:** Core reasoning in layered depth — border-animate interactive connection highlights with neon-glow soft-edge illumination 3. **Expand:** Featured reasoning in foreground depth with wave-forms flowing composition and neon-glow immersive glow 4. **Settle:** Supporting content in mid-depth layer with wave-forms calming lines 5. **Deflate:** Footer as gentle release — zen-contemplative closing with wave-forms resolved curves and meditative farewell ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.4rem-3.2rem, weight 700. Its elegant, time-tested serif forms create the contemplative-authority quality of reasoning expressed through centuries-proven typography. - **Body Text:** "Lora" (Google Fonts) — readable serif at 0.95rem, weight 400, line height 1.8. - **Accent:** "EB Garamond" at 1.1rem, weight 400, italic for reasoning annotations and contemplative notes. - **Labels:** "Inter" (Google Fonts) at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Burnt Cream:** #f8ece0 — warm burnt cream for backgrounds - **Burnt Surface:** #ecdcc8 — warm surface for panels - **Burnt Orange:** #d87830 — rich burnt orange for primary accent - **Burnt Sienna:** #a85828 — deeper sienna for secondary accent - **Burnt Copper:** #c89858 — warm copper for tertiary accent - **Text Burnt:** #281c10 — deep warm for body text - **Shadow Burnt:** #907050 — burnt shadow for secondary text - **Border Burnt:** rgba(216,120,48,0.1) — orange tint border ## Imagery and Motifs **Neon-Glow Soft Luminous Edges:** Inflated panels feature soft edge glow — box-shadow: 0 8px 32px rgba(216,120,48,0.08), 0 2px 8px rgba(216,120,48,0.04), inset 0 1px 0 rgba(255,255,255,0.1). The soft glow creates the light-catching quality of inflated surfaces reflecting ambient illumination. **Border-Animate Connection Highlights:** Reasoning connections feature animated borders — border-bottom transitioning from 0 to 2px in Burnt Orange over 350ms ease-out on scroll-into-view. The growing borders visualize reasoning connections forming as understanding develops. **Wave-Forms Organic Flow:** Gentle organic curves (SVG paths, 1px stroke) in Burnt Orange at 0.04 opacity flowing between reasoning sections. CSS animation: slow undulation (path variation over 8s ease-in-out infinite). The waves create the meditative quality of thoughts flowing like breath between contemplative moments. **Burnt-Orange Inflated Atmosphere:** Background uses warm burnt tones with volumetric light — radial-gradient(at 50% 30%, rgba(216,120,48,0.04), transparent 40%), radial-gradient(at 40% 70%, rgba(200,152,88,0.02), transparent 35%). The warm glow creates the sunset-lit quality of inflated forms catching golden-hour light. **Pillow Shadow Depth:** Content panels with strong pillow-like shadows — box-shadow: 0 16px 48px rgba(40,28,16,0.06), 0 4px 12px rgba(40,28,16,0.04). Border-radius: 16px creating the rounded, inflated quality of soft volumetric forms. The pillow shadows create the tactile quality of objects with real physical depth. ## Prompts for Implementation Build the page as an inflated-3d zen reasoning space. Layered depth: .depth-layer { max-width: 900px; margin: 0 auto; padding: 80px 24px; position: relative; } .depth-far { z-index: 1; opacity: 0.7; transform: scale(0.96); } .depth-mid { z-index: 2; opacity: 0.85; } .depth-near { z-index: 3; } .depth-fore { z-index: 4; transform: scale(1.02); } Border-animate: .reason-link { border-bottom: 0px solid #d87830; transition: border-bottom-width 350ms ease-out; } .reason-link.visible { border-bottom-width: 2px; } Pillow shadow: .inflated-card { border-radius: 16px; box-shadow: 0 16px 48px rgba(40,28,16,0.06), 0 4px 12px rgba(40,28,16,0.04); background: #ecdcc8; padding: 28px; } Neon edge glow: .glow-panel { box-shadow: 0 8px 32px rgba(216,120,48,0.08), 0 2px 8px rgba(216,120,48,0.04), inset 0 1px 0 rgba(255,255,255,0.1); } Wave forms: .zen-wave path { stroke: rgba(216,120,48,0.04); stroke-width: 1; fill: none; } .zen-wave { animation: zenFlow 8s ease-in-out infinite; } AVOID: Standard identity platforms, corporate profile pages, and minimal personal sites. Let inflated-3d tactility and zen-contemplative meditation create a reasoning space where the singular Reasoner identity is presented with the volumetric depth and golden-hour warmth of forms that invite extended contemplation. ## Uniqueness Notes 1. **Inflated-3d for singular identity:** Pillowy volumetric forms make the reasoning platform feel tangible and inviting rather than flat and digital. 2. **Layered-depth as contemplative space:** Multiple depth planes create the spatial quality of thoughts floating at different distances. 3. **Pillow shadows as physical depth:** Strong, soft shadows create the real-object quality of inflated forms sitting in physical space. 4. **Burnt-orange as golden hour:** Warm sunset tones create the contemplative quality of reasoning done in the calm of evening light. 5. **Border-animate as forming understanding:** Growing borders visualize reasoning connections developing through patient contemplation. **Seed/Style:** aesthetic: inflated-3d, layout: layered-depth, typography: garamond-classic, palette: burnt-orange, patterns: border-animate, imagery: neon-glow, motifs: wave-forms, tone: zen-contemplative **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 inflated-3d aesthetic, layered-depth layout, burnt-orange palette, neon-glow imagery, and zen-contemplative tone.