# Design Language for concengine.net ## Aesthetics and Tone Concengine.net is the developer community and open-source hub for the Concengine concurrent event simulation engine. The aesthetic is **Bauhaus** -- the revolutionary art school that declared "art and technology, a new unity." But this Bauhaus is transplanted from Dessau to a coastal greenhouse: the strict geometric forms are softened by **floral-botanical** motifs and a **coastal-blend** palette of ocean blues, sandy neutrals, and seafoam greens. Imagine Laszlo Moholy-Nagy's compositions overgrown with seaside wildflowers -- circles become seed heads, rectangles become planters, and the primary-color triad is replaced by the subtle chromatic variations of a tide pool. The tone is **conversational** -- Concengine.net speaks like a fellow developer at a seaside conference, relaxed but knowledgeable, using first-person plural ("we built this because...") and occasional humor. The Bauhaus structure keeps the conversation organized; the botanical-coastal warmth keeps it human. ## Layout Motifs and Structure The layout uses a **broken-grid** composition -- elements deliberately overlap, break alignment, and layer atop each other, channeling the Bauhaus experimental spirit. Unlike a rigid grid, the broken-grid creates visual tension and dynamism that reflects concurrent events competing for attention. **Primary structure:** - **Navigation band (56px, sticky):** A horizontal strip in Sandy Dune (#E8DCC8) with the "concengine.net" wordmark in bold condensed type (left-aligned) and navigation links (right-aligned). Three small Bauhaus-inspired shapes (circle, square, triangle) in coastal colors serve as decorative markers between nav items. - **Hero overlap zone (100vh):** The hero section breaks the grid immediately. A large circular container (60vmin, border-radius: 50%, overflow: hidden) positioned at right-center contains a generative-art animation (flowing coastal particle streams). A rectangular text block (max-width: 480px) overlaps the circle from the left, breaking the circle's edge by 80px. The text block sits on a white surface (#FEFAF5) with a 4px left border in Tide Pool Teal. This overlap is the broken-grid manifesto: content doesn't respect containers. - **Feature blocks (broken-grid body):** Content sections use deliberately misaligned blocks. A text block might span columns 2-7 of a 12-column grid, while an adjacent illustration block spans columns 5-11 -- they overlap in columns 5-7, with the illustration sitting behind (z-index: -1, opacity: 0.15) or the text sitting in a solid-background card that clips over the image. Each feature section uses a different overlap pattern. - **Botanical margin illustrations:** Delicate floral SVG illustrations (coastal wildflowers -- sea lavender, thrift, beach roses) grow from the edges of content blocks, their stems extending into the broken-grid gaps. These are purely decorative, positioned absolutely, and never block text. - **Community garden footer:** The footer is styled as a "garden" -- community links, contributor avatars, and project stats arranged in organic clusters (positioned with slight rotations and varied sizes) on a Sandy Dune background, with larger botanical illustrations framing the section. ## Typography and Palette **Fonts:** - **Headlines:** "Bebas Neue" (Google Fonts) -- a bold, condensed display face with strong vertical rhythm and maximum visual impact. All-uppercase inherently. Weight 400 (its single weight). Size: clamp(36px, 6vw, 84px). Letter-spacing: 0.03em. Its geometric construction (near-perfect circles and straight lines in letterforms) aligns with Bauhaus geometric philosophy, while its boldness brings the energetic, approachable character needed for conversational tone. - **Body text:** "Work Sans" (Google Fonts) -- a clean, geometric sans-serif with friendly proportions and excellent readability. Weight 400 for body, 600 for emphasis. Line-height: 1.7. Size: clamp(15px, 1.5vw, 17px). Its geometric foundations harmonize with Bebas Neue while providing comfortable extended reading. - **Code/Technical:** "Red Hat Mono" (Google Fonts) -- a mono font with slightly rounded terminals that adds warmth to code blocks. Weight 400. Size: 14px. Displayed on a Seafoam Light background (#E8F0EC) with 16px padding and 6px border-radius. **Palette:** - **Coastal White** #FEFAF5 -- Primary background, warm white like bleached driftwood - **Sandy Dune** #E8DCC8 -- Secondary background, warm sand tone - **Tide Pool Teal** #2A8A7A -- Primary accent, the vibrant teal-green of shallow coastal water - **Deep Current Blue** #1A4A6A -- Secondary accent, the deeper blue of offshore waters - **Seafoam Light** #C8E0D8 -- Tertiary accent, pale green for code blocks and subtle highlights - **Driftwood Brown** #5A4A3A -- Primary text color, warm dark brown - **Beach Rose Pink** #D4868A -- Quaternary accent for botanical illustrations and hover states - **Kelp Green** #4A6A48 -- Used for botanical illustration strokes and nature motifs - **Salt Spray Gray** #9A9890 -- Secondary text, metadata, and de-emphasized content ## Imagery and Motifs **Core visual motifs:** - **Generative-art coastal simulations:** The hero circle and section backgrounds feature generative art created with HTML Canvas -- particle systems that simulate coastal water flows. Particles (2-3px circles) in Tide Pool Teal and Deep Current Blue flow in Perlin-noise-driven currents, creating organic wave patterns. These visualizations metaphorically represent concurrent event streams flowing through the engine. Each section's generative art uses different flow parameters (speed, density, direction) to represent different engine capabilities. - **Floral-botanical margin growth:** Delicate SVG botanical illustrations of coastal flora (sea lavender with tiny purple clusters, pink thrift with round flower heads, beach rose with five-petal blooms) are positioned at content-block edges, growing outward into the broken-grid negative space. These illustrations use thin strokes (1px) in Kelp Green and Beach Rose Pink, with small leaf fills at 20% opacity. New flowers "bloom" as sections enter the viewport -- petals appear one by one via CSS animation (opacity 0→1, staggered by 100ms per petal). - **Bauhaus shape system:** Three geometric shapes recur throughout: Circle (represents continuous processes -- event loops, always-running services), Square (represents discrete events -- individual messages, snapshots), Triangle (represents directional flow -- data pipelines, queue consumption). These shapes appear at 32px size in the coastal palette as category markers, section ornaments, and interactive indicators. - **Slide-reveal content panels:** Content blocks enter the viewport with **slide-reveal** animations -- panels slide in from the left or right (translateX: -60px→0 or translateX: 60px→0, opacity: 0→1, 500ms, ease-out). The direction alternates per section, creating a back-and-forth rhythm that mirrors ocean waves. Overlapping elements have staggered slide timings (200ms offset) so the overlap is revealed progressively. - **Broken-grid overlap shadows:** Where content blocks overlap, the top element casts a colored shadow onto the element beneath -- not a gray drop-shadow but a tinted one (box-shadow: 8px 8px 0 rgba(42, 138, 122, 0.12) for teal-tinted, or 8px 8px 0 rgba(212, 134, 138, 0.12) for rose-tinted). These colored shadows reinforce the broken-grid layering while adding coastal-palette warmth. ## Prompts for Implementation **Full-screen narrative opening:** The page loads with Coastal White fill. The hero circle fades in from center (scale: 0.9→1, opacity: 0→1, 800ms). Simultaneously, the generative coastal particles begin flowing inside the circle -- starting sparse and increasing density over 2s. The text block **slide-reveals** from the left (translateX: -80px→0, 600ms, starting at 400ms delay). The three Bauhaus shapes (circle/square/triangle) pop in at the navigation bar with a quick scale animation (0→1.1→1, 200ms each, staggered by 100ms). The opening sequence feels like a tide coming in -- elements arriving in waves. **Broken-grid scroll experience:** As the user scrolls, content blocks slide-reveal from alternating sides. Left-aligned text blocks come from the left; right-aligned illustrations come from the right. Where they overlap, the back element is already in place (reduced opacity) when the front element slides over it, creating a dynamic layering effect. Each overlap creates a momentary visual collision that resolves into a stable composition -- reflecting concurrent events resolving in the engine. **Botanical bloom on scroll:** Margin botanical illustrations have their petals, leaves, and stems as individual SVG elements. As each illustration enters the viewport (Intersection Observer, threshold: 0.5), the stem draws first (stroke-dashoffset animation, 400ms), then leaves unfold (scale 0→1 from attachment point, 200ms each), then flower petals appear (opacity 0→1, 100ms per petal, staggered). The full bloom takes ~1.5s and creates a gentle, life-affirming moment in the scroll experience. **Conversational content voice:** Text sections use an informal, first-person developer voice: "We started Concengine because event simulation shouldn't require a PhD." Code examples are introduced with casual phrasing: "Here's the fun part --" or "This is where it gets interesting." Pull-quotes from community members are styled in Bebas Neue at medium size with a botanical leaf marker instead of quotation marks. **Storytelling structure:** The page follows a conversational arc: "Hey, we made this thing" (hero + introduction) → "Here's why it matters" (feature blocks with overlapping generative art) → "Here's how to use it" (code examples in slide-reveal panels) → "Join the garden" (community footer). Avoid CTA-heavy layouts, pricing blocks, and stat-grids. The broken-grid dynamism is the energy; the botanical softness is the invitation. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus geometry meets coastal botany:** The deliberate collision of Bauhaus geometric rigor (circles, squares, triangles as a system) with organic coastal wildflower illustrations creates a visual tension unique to this design -- structure and nature coexisting in the broken-grid gaps. 2. **Broken-grid as concurrency metaphor:** Content blocks deliberately overlapping and competing for spatial attention mirrors the concurrent event model the engine simulates -- visual composition as product demonstration. 3. **Colored overlap shadows:** Using palette-tinted drop shadows (teal and rose tints) instead of gray shadows at grid-overlap points creates a warm, chromatic depth effect unique to this design's coastal aesthetic. 4. **Botanical bloom scroll animation:** Individual flower parts (stems, leaves, petals) animating sequentially as SVG elements creates a micro-narrative of growth at every scroll milestone -- each section arrival is accompanied by a tiny floral celebration. **Seed/Style:** bauhaus + broken-grid + bebas-bold + coastal-blend + slide-reveal + generative-art + floral-botanical + conversational **Avoided overused patterns:** Avoided centered/card-grid layout (used broken-grid with deliberate overlaps), avoided parallax/scroll-triggered/cursor-follow (used slide-reveal as primary motion), avoided warm/gradient palette (used coastal-blend), avoided photography imagery (used generative-art and botanical SVG). **Preferred underused elements:** Incorporated broken-grid layout (13%), slide-reveal pattern (3%), generative-art imagery (3%), floral-botanical motifs (not yet used in prior designs), and conversational tone (not frequently used).