# Design Language for concengine.net ## Aesthetics and Tone A brutalist cathedral of concurrent computation -- raw concrete surfaces and towering monolithic type create a space of austere power where the Concurrent Event Simulation Engine commands reverence. The visual identity channels the uncompromising weight of Brutalist architecture: massive type blocks serve as load-bearing walls, leather-textured surfaces suggest worn engineering manuals, and organic blob shapes float like clouds between concrete pillars. The immersive scroll experience draws users downward through vertical chambers of content. The tone is dreamy-ethereal despite the brutalist shell -- there's a poetic quality to the way engine concepts unfold in this monumental space. ## Layout Motifs and Structure The layout uses immersive-scroll: the page is a single continuous vertical column (max-width 900px, centered) where each section fills at least 80vh, creating a series of immersive chambers. Content within each chamber is centered both vertically and horizontally (flexbox). Between chambers, organic blob SVG shapes in muted warm tones act as transitional decorations. The hero section fills 100vh with a single massive word centered vertically. Subsequent sections alternate between text-dominant and diagram-dominant, with generous 120px vertical padding. Navigation is minimal: a small floating dot indicator on the right edge showing scroll progress. No traditional nav bar -- the experience is purely scroll-driven. Leather-texture backgrounds (CSS gradient simulation) appear on featured code blocks and pull-quote sections. ## Typography and Palette **Typography:** - **Headlines:** "Libre Baskerville" (Google Fonts) -- a refined serif revival with authoritative presence. Used at 2.5rem-6rem, weight 700, letter-spacing: -0.02em, line-height 1.1. - **Body:** "Libre Franklin" (Google Fonts) -- a clean, neutral sans-serif that contrasts the serif headlines. Used at 1.05rem, weight 400, line-height 1.8. - **Code:** "Fira Code" (Google Fonts) -- for engine API examples. Used at 0.85rem, weight 400, with leather-toned backgrounds. **Palette:** - Concrete: #d4cdc4 (warm concrete) -- primary background - Leather: #8b6f47 (worn leather) -- feature sections, code backgrounds - Dark: #2a2018 (deep brown) -- primary text, borders - Warm: #c4a87c (aged parchment) -- secondary backgrounds - Blob: #b8a088 (sandy beige) -- organic blob decorations - Accent: #5a4030 (dark leather) -- links, emphasis - Light: #ede8e0 (pale warm) -- alternate section backgrounds ## Imagery and Motifs Leather textures are simulated with CSS: layered radial-gradient in browns with a subtle noise overlay (SVG feTurbulence) creating a worn-book-cover effect on feature sections. Organic blob shapes float between content sections: large (200-400px) SVG forms with smooth curves in #b8a088 at 30% opacity, positioned asymmetrically. These blobs drift slowly (CSS animation, 20s cycle, translateY +/- 10px) suggesting gentle movement in still air. Ripple effects appear on click: circular CSS animations expanding outward from click point in #8b6f47 at 20% opacity. Concrete surface textures use a very subtle grain (CSS noise at 2% opacity) across the primary background. No photographs, no icons -- only typography, texture, and organic forms. ## Prompts for Implementation Build the page as a vertical descent through a brutalist engine hall. The hero presents "CONCENGINE" in Libre Baskerville at 6rem, vertically and horizontally centered in 100vh of warm concrete space. As the user scrolls, content sections fade in with a slow reveal (opacity 0 to 1 over 600ms, triggered at 30% viewport entry). Organic blobs between sections provide visual breathing room and gentle movement. The scroll progress indicator on the right edge is a thin vertical line that fills with #8b6f47 as the user descends. Leather-textured code blocks have ripple effects on interaction -- clicking triggers a expanding circle animation from the click point. The immersive scroll experience should feel contemplative: long pauses between content, generous whitespace, no rush. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. This is a meditative technical descent, not a product showcase. ## Uniqueness Notes 1. **Brutalist leather cathedral:** No other design combines brutalist architecture aesthetics with leather textures for a concurrent engine, creating a monumental tactile experience. 2. **Organic blob transitional decorations:** Floating sandy-beige blobs between concrete content sections create an unexpected softness within brutalist framing. 3. **Immersive vertical descent structure:** The 80vh minimum section heights with centered content create a chamber-by-chamber exploration unique to this design. 4. **Click-triggered ripple effects on leather surfaces:** The tactile ripple interaction on textured code blocks bridges physical and digital materiality. Document chosen seed/style: aesthetic: brutalist, layout: immersive-scroll, typography: serif-revival, palette: warm, patterns: ripple, imagery: leather-texture, motifs: organic-blobs, tone: dreamy-ethereal Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)