# Design Language for concengine.com ## Aesthetics and Tone A neubrutalist workshop bench for the Concurrent Event Simulation Engine -- raw, unfinished surfaces where engine components are laid out for inspection with unflinching honesty. The visual identity embraces neubrutalism's commitment to exposing structure: thick borders reveal the grid, oversized type dominates without apology, and colors clash productively in an analogous range of warm oranges and yellows. Photography of actual mechanical components (gears, pistons, circuit boards) grounds the digital engine in physical reality. The tone is raw-authentic: no polish, no pretense, just the engine laid bare. ## Layout Motifs and Structure The layout is asymmetric: a dominant left column (65% width) hosts primary content while a narrower right column (30% width, with 5% gap) carries supplementary details, code snippets, and metadata. This asymmetry creates visual tension and reading hierarchy. Content blocks have thick 4px black borders and sharp corners (border-radius: 0). Some blocks intentionally overlap by 8-12px using negative margins, creating the neubrutalist stacking effect. The hero section uses oversized typography pushed flush against the left margin with no padding, text clipping at the viewport edge on mobile. Section transitions use abrupt color changes -- no gradients, no fades, just hard cuts between background colors. Navigation is a vertical stack on the left (desktop) or horizontal scroll on mobile, with chunky rectangular buttons. ## Typography and Palette **Typography:** - **Headlines:** "Rubik" (Google Fonts) -- a playful-rounded sans-serif with friendly geometry that softens the neubrutalist edges. Used at 3rem-6rem, weight 700-900, letter-spacing: -0.02em, line-height 0.95. - **Body:** "IBM Plex Sans" (Google Fonts) -- a neutral yet characterful sans-serif for technical body content. Used at 1rem-1.1rem, weight 400, line-height 1.7. - **Code:** "IBM Plex Mono" (Google Fonts) -- matching the body face family for cohesive code display. Used at 0.85rem, weight 400. **Palette (Analogous):** - Hot: #ff6b35 (bright orange) -- primary sections, hero background - Warm: #ffa62b (amber) -- secondary sections, hover states - Light: #ffe66d (pale yellow) -- tertiary sections, highlights - Black: #1a1a1a -- borders, text, shadows - White: #fefefe -- text on colored backgrounds, card surfaces - Gray: #f0f0f0 -- code block backgrounds ## Imagery and Motifs Photography of mechanical components is treated with high-contrast black-and-white processing and displayed in sharp-cornered frames with 4px black borders. Tech motifs include engine-inspired decorative elements: gear-tooth border patterns (repeating SVG), piston-like vertical dividers between columns, and flywheel-inspired circular loading indicators. Elastic animations give interactive elements a mechanical springiness -- buttons compress on click (scale 0.94) and bounce back with overshoot. Background textures use a subtle diagonal hatch pattern (1px lines at 45 degrees, #1a1a1a at 3% opacity) suggesting technical drawings. No gradients, no blur, no softness -- every element is crisp and mechanical. ## Prompts for Implementation Build the page as a brutalist engine inspection interface. The hero section presents "CONCENGINE" in Rubik at 6rem, flush-left with no left padding, the text overflowing the container on smaller viewports (overflow: hidden clips it dramatically). Content blocks snap into view with elastic spring animations -- blocks compress horizontally (scaleX 0.95) then expand to full width with overshoot over 400ms. The asymmetric two-column layout creates a natural reading flow where primary content draws the eye left while supplementary data sits in peripheral vision on the right. Overlapping blocks (negative margins) create a stacked-paper effect. Navigation buttons use a press animation: translateY(2px) and box-shadow reduction on mousedown. Photography breaks the monotony of text with high-contrast mechanical imagery. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. This is an engine's technical inspection, not a marketing site. ## Uniqueness Notes 1. **Neubrutalist engine workshop:** No other design applies raw neubrutalist aesthetics to concurrent simulation engines with mechanical photography, grounding digital concepts in physical reality. 2. **Flush-left overflow hero text:** Text that clips at the viewport edge creates a distinctive brutalist tension unique to this site. 3. **Gear-tooth SVG border patterns:** Using mechanical gear-tooth repeating patterns as decorative borders bridges the engine theme with neubrutalist design language. 4. **Elastic mechanical spring animations:** The compress-and-bounce interaction pattern mimics physical spring mechanisms, reinforcing the engine metaphor. Document chosen seed/style: aesthetic: neubrutalism, layout: asymmetric, typography: playful-rounded, palette: analogous, patterns: elastic, imagery: photography, motifs: tech, tone: raw-authentic Avoided overused patterns: corporate aesthetic (76%), mono typography (98%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)