# Design Language for resar.one ## Aesthetics and Tone resar.one channels an isometric aesthetic — the geometric precision of axonometric projection applied to the Reasoner singular identity platform. The site constructs — every element rendered in consistent 30-degree isometric perspective, creating a miniature world where reasoning processes are visible as architectural structures. Inspiration draws from the isometric game design of Monument Valley, the architectural projections of Superstudio, the pixel-perfect isometric art of eBoy, and the spatial design of SimCity's urban systems. The tone is elegant-sophisticated — refined, articulate language that presents the Reasoner with the precision and grace of a well-constructed argument. ## Layout Motifs and Structure The layout uses an **organic-flow** architecture — content flowing in a natural, organic rhythm that resists rigid grids in favor of content-determined composition. **Organic Flow Architecture:** - Content flows naturally without strict grid constraints - Width varies by content type: text at 680px, visuals at 900px - Generous, irregular spacing (60-100px) between sections - Feature works: full viewport moments - Container: variable width (680-900px) centered - The organic flow creates the natural quality of reasoning finding its own path **Section Sequence:** 1. **Construct:** Hero with commissioner-versatile title on gold-black-luxury isometric gradient, watercolor soft color washes, crystalline faceted reasoning markers 2. **Architecture:** Reasoning structures in organic flow — ripple interactive disturbance responses with watercolor gentle color treatments 3. **Atrium:** Featured reasoning in full-viewport moment with crystalline multi-faceted markers and watercolor immersive color atmosphere 4. **Foundation:** Supporting logic in focused flow with crystalline precise markers 5. **Keystone:** Footer as structural completion — elegant-sophisticated closing with crystalline settled markers and refined farewell ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile variable sans at 2.2rem-3rem, weight 700. Its adaptable forms create the precision-engineering quality of typography that adjusts to its context like a well-reasoned argument. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Commissioner" at 1rem, weight 500 for reasoning labels and structural annotations. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Luxury Black:** #0c0a08 — deep luxury black for backgrounds - **Gold Surface:** #1c1810 — warm dark gold for panels - **Rich Gold:** #c8a040 — rich gold for primary accent - **Dark Gold:** #a07828 — deeper gold for secondary accent - **Gold Light:** #e8d8a8 — light gold for highlights - **Cream Text:** #f0e8d0 — warm cream for text - **Shadow Gold:** #382c18 — gold shadow for secondary text - **Border Gold:** rgba(200,160,64,0.1) — gold tint border ## Imagery and Motifs **Watercolor Soft Color Washes:** Reasoning sections feature watercolor-style background washes — radial-gradient with feathered edges (rgba(200,160,64,0.04) at center, transparent at 60%) creating the soft quality of watercolor pigment spreading on wet paper. Multiple overlapping washes at different positions. **Ripple Disturbance Responses:** Interactive elements generate ripple effects — expanding circle (0 to 60px radius) from interaction point in Rich Gold at 0.05 opacity fading over 400ms. The ripple creates the stone-in-water quality of reasoning that sends waves through connected ideas. **Crystalline Reasoning Markers:** Faceted diamond shapes (10-14px) with gradient fills (linear-gradient from Rich Gold to Gold Light) as reasoning-stage indicators and quality markers. The crystalline quality gives reasoning conclusions the precious, valued appearance of carefully refined insights. **Gold-Black-Luxury Atmosphere:** Background uses deep black with warm gold illumination — radial-gradient(at 40% 30%, rgba(200,160,64,0.03), transparent 35%), radial-gradient(at 60% 70%, rgba(160,120,40,0.02), transparent 30%). The luxury palette creates the precious quality of reasoning treated as valuable intellectual craft. **Isometric Building Blocks:** Decorative isometric cubes (CSS transform: rotateX(30deg) rotateY(-30deg), 20-30px) in Rich Gold at 0.06 opacity as section accents. The blocks create the structural quality of reasoning built from logical building blocks. ## Prompts for Implementation Build the page as an isometric reasoning architecture. Organic flow: .reason-section { margin: 0 auto; padding: var(--section-pad, 80px) 24px; } .reason-text { max-width: 680px; margin: 0 auto; } .reason-visual { max-width: 900px; margin: 0 auto; } .reason-full { width: 100vw; margin-left: calc(-50vw + 50%); } Ripple: .ripple-zone { position: relative; overflow: hidden; } /* JS: on click, create expanding circle at click position, fade over 400ms */ Watercolor wash: .wash-bg { position: relative; } .wash-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 40% 40%, rgba(200,160,64,0.04), transparent 60%), radial-gradient(at 60% 60%, rgba(160,120,40,0.03), transparent 50%); pointer-events: none; } Crystalline: .reason-marker { width: 12px; height: 12px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: linear-gradient(135deg, #c8a040, #e8d8a8); } Isometric block: .iso-block { width: 24px; height: 24px; background: rgba(200,160,64,0.06); transform: rotateX(30deg) rotateY(-30deg); transform-style: preserve-3d; } AVOID: Standard identity platforms, corporate profile pages, and minimal personal sites. Let isometric precision and elegant-sophisticated refinement create a Reasoner platform where identity is presented as a carefully constructed architecture of logical insight and valued intellectual craft. ## Uniqueness Notes 1. **Isometric for Reasoner identity:** Axonometric precision makes reasoning feel like architectural construction of logical structures. 2. **Organic-flow as natural reasoning:** Content-determined composition creates the quality of reasoning finding its own path rather than following imposed structure. 3. **Watercolor as soft insight:** Gentle color washes create the contemplative quality of ideas emerging softly before crystallizing. 4. **Gold-black-luxury as valued reasoning:** Precious palette treats intellectual craft as something genuinely valuable and worth preserving. 5. **Ripple as connected thinking:** Expanding circles visualize reasoning that sends waves through interconnected ideas. **Seed/Style:** aesthetic: isometric, layout: organic-flow, typography: commissioner-versatile, palette: gold-black-luxury, patterns: ripple, imagery: watercolor, motifs: crystalline, tone: elegant-sophisticated **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 isometric aesthetic, organic-flow layout, gold-black-luxury palette, watercolor imagery, and elegant-sophisticated tone.