# Design Language for chloengine.com ## Aesthetics and Tone A watercolor game engine -- the technical precision of an engine rendered through the soft, bleeding edges of aquarelle painting. Chloengine.com presents game development tools as if they were brushstrokes on wet paper: features dissolve into each other, color bleeds define section boundaries, and the entire experience feels like turning pages in an artist's sketchbook that happens to contain technical specifications. Cool gray foundations anchor the painterly elements, preventing the watercolor softness from becoming saccharine. The tone is calm-serene: this is a meditative space where game creation feels like painting, not engineering. ## Layout Motifs and Structure The layout uses modular-blocks: self-contained rectangular sections of varying sizes arranged in a loose grid (max-width 1200px, centered). Large feature blocks span the full width, while smaller detail blocks sit in 2x or 3x column arrangements. Each block has generous internal padding (48px) and no visible borders -- separation comes from watercolor wash backgrounds that bleed at the edges using CSS gradient masks. The hero section is a single full-width block with the engine name in slab-serif over a watercolor wash background. Feature blocks use a consistent structure: left-aligned heading, body text, and an interactive code/visual preview. Blocks are separated by 40px gaps. Sharp angular details appear as diagonal corner cuts (8px clip-path) on selected feature blocks, creating subtle geometric tension against the soft watercolor backgrounds. Navigation is a horizontal bar with text links separated by vertical pipe characters. ## Typography and Palette **Typography:** - **Headlines:** "Bitter" (Google Fonts) -- a slab-serif designed for comfortable screen reading with a warm, approachable character. Used at 2rem-4rem, weight 700, letter-spacing: -0.01em, line-height 1.15. - **Body:** "Hind" (Google Fonts) -- a clean sans-serif with open forms and neutral personality. Used at 1rem-1.1rem, weight 400, line-height 1.7. - **Code:** "Source Code Pro" (Google Fonts) -- a monospace designed for clarity in code display. Used at 0.85rem, weight 400, within code blocks with #2a2d32 background. **Palette:** - Slate: #4a5568 (cool slate gray) -- headings, primary text - Light Gray: #a0aec0 (silver) -- secondary text, borders - Wash Blue: #7fb3d3 (watercolor blue) -- primary wash backgrounds, links - Wash Sage: #8fbc8f (watercolor sage) -- secondary wash backgrounds - White: #fafbfc -- page background, card surfaces - Code Dark: #2a2d32 -- code block backgrounds - Accent Sharp: #e06060 (watercolor red) -- sharp-angle corner accents, emphasis ## Imagery and Motifs Watercolor wash backgrounds are created with layered CSS radial gradients: large overlapping circles of #7fb3d3 and #8fbc8f at 8-15% opacity with feathered edges (using gradient stops that fade to transparent). Lens-flare effects appear as small circular highlights (CSS radial-gradient, 60px diameter) positioned at corner intersections where blocks meet, in #7fb3d380. Sharp angular motifs contrast the softness: selected blocks have clip-path: polygon() corner cuts that create 45-degree diagonal edges, and thin diagonal SVG lines (1px, #a0aec0) cross between sections as compositional accents. Game engine motifs include simplified geometric renderings of game objects: cubes, spheres, and planes drawn as thin-line SVG wireframes in #4a5568 at 20% opacity, floating in watercolor wash backgrounds. ## Prompts for Implementation Build the page as a serene gallery of game engine capabilities. The hero section loads with its watercolor wash background expanding from center -- radial gradient scaling from 0% to 100% over 1.5 seconds. Feature blocks fade-reveal on scroll: opacity 0 to 1 with a gentle scale(0.98) to scale(1) over 600ms, staggered at 100ms intervals. Watercolor wash backgrounds subtly shift their gradient positions on scroll (2-3% movement), creating a breathing-paper effect. Code blocks within feature sections have a soft glow: box-shadow in #7fb3d320 at 12px spread. Lens-flare highlights at block intersections pulse gently (opacity 0.3 to 0.6, 3s cycle). The sharp diagonal corner cuts on featured blocks create moments of geometric precision that prevent the watercolor softness from losing structure. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. The experience should feel like browsing an illustrated manual where every page is a watercolor study. ## Uniqueness Notes 1. **Watercolor game engine aesthetic:** No other design presents technical game engine content through watercolor painting techniques, creating a radical softness for a hard-tech topic. 2. **CSS radial-gradient watercolor washes:** Using layered radial gradients to simulate watercolor backgrounds is a distinctive technical approach unique to this site. 3. **Sharp geometric cuts against watercolor softness:** The 45-degree clip-path corner cuts create a deliberate tension between painterly bleed and engineering precision. 4. **Wireframe game objects in wash backgrounds:** Thin-line SVG cubes and spheres floating in watercolor washes bridge the gap between artistic and technical identity. Document chosen seed/style: aesthetic: watercolor, layout: modular-blocks, typography: slab-serif, palette: cool-grays, patterns: fade-reveal, imagery: lens-flare, motifs: sharp-angles, tone: calm-serene Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)