# Design Language for completengine.com ## Aesthetics and Tone Completengine.com presents a concurrent event simulation engine through a **Scandinavian** design philosophy -- the principle that functional beauty emerges from restraint, natural materials, and honest construction. Where simulation engines typically showcase themselves with overwhelming dashboards and data fireworks, Completengine takes the opposite approach: clean surfaces, generous breathing room, and a quiet confidence that lets the engineering speak for itself. The visual identity draws from Nordic design houses (Muuto, HAY, Bang & Olufsen) -- objects that are beautiful precisely because nothing is unnecessary. The **navy-metallic** palette grounds this Scandinavian lightness with industrial seriousness: brushed steel surfaces, deep nautical blues, and polished aluminum accents suggest precision engineering without coldness. The tone is **professional** -- competent, direct, and respectful of the viewer's intelligence. No hype, no buzzwords, just clearly presented capability. ## Layout Motifs and Structure The layout uses a **portfolio-grid** composition -- engine capabilities, use cases, and technical demonstrations are presented as a curated portfolio of work, each item a "project" that demonstrates the engine's power. The grid is asymmetric and spacious, with generous margins that reflect Scandinavian negative-space philosophy. **Primary structure:** - **Navigation header (72px, sticky):** A clean horizontal bar with the "completengine" wordmark (lowercase, humanist sans, navy on white) flush left and minimal text navigation flush right. No hamburger menus, no icons -- just words. A thin 1px rule (#D0D5DC) separates the nav from content below. - **Hero section (85vh):** Not full-viewport -- deliberately stops short to show a sliver of the content below, inviting scroll. The hero contains a single generative-art visualization (a real-time canvas rendering of concurrent event streams as flowing particle lines in navy and silver) occupying the right 55% of the viewport. The left 45% contains the headline and a two-sentence description in humanist type. No buttons. No CTAs. - **Portfolio grid (main body):** An asymmetric CSS Grid (grid-template-columns: 1fr 1fr 1fr, grid-template-rows: auto, with select items spanning 2 columns) with 32px gaps. Each portfolio item is a white card with no border, only a subtle shadow (0 2px 12px rgba(20, 40, 70, 0.06)). Cards contain: a generative-art header visualization (unique per card), a title in navy, and a brief description. The grid has 80px padding on each side. - **Technical deep-dive (full-width, alternating):** Between grid sections, full-width panels with a #F5F7FA background contain longer-form technical narratives -- how the event loop works, how concurrency is managed, how simulations scale. These use single-column text (max-width: 680px, centered) with generous line-height. - **Footer:** Minimal -- logo, copyright, three links. 120px padding top and bottom. The restraint is the design. ## Typography and Palette **Fonts:** - **Headlines:** "Source Serif 4" (Google Fonts) -- a humanist serif with a warm, authoritative quality designed by Frank Grießhammer. Weight 600 for headlines, 400 for subheadings. Size: clamp(28px, 4vw, 48px). Letter-spacing: -0.015em. Its humanist axis (note the organic stress angles and calligraphic details) provides warmth that prevents the Scandinavian minimalism from feeling sterile. - **Body text:** "Source Sans 3" (Google Fonts) -- the sans-serif companion to Source Serif, creating a harmonious pairing with shared design DNA. Weight 400 for body, 600 for emphasis. Line-height: 1.75. Size: clamp(16px, 1.5vw, 18px). The generous line-height reflects Scandinavian typographic tradition of giving text room to breathe. - **Technical labels:** "Source Code Pro" (Google Fonts) -- completing the Source superfamily trilogy for code snippets and technical annotations. Weight 400. Size: 14px. Used sparingly and always on a light gray background (#F0F2F5). **Palette:** - **Nordic White** #FAFBFC -- Primary background, clean and airy - **Deep Navy** #1B2B4B -- Primary text and accent color, the engine's core identity - **Brushed Steel** #8B95A5 -- Secondary text, metadata, and subtle UI elements - **Polished Aluminum** #C8CED8 -- Borders, dividers, and card shadows - **Metallic Silver** #E2E6EC -- Alternating section backgrounds, light surface variation - **Signal Blue** #3B6BCA -- Interactive element accent -- links, active states, focus rings - **Warm Ash** #6B5E52 -- Tertiary text tone for pulled quotes, adding warmth to the metallic palette - **Deep Graphite** #0D1520 -- Used only for the darkest contrast needs (footer, code blocks) ## Imagery and Motifs **Core visual motifs:** - **Generative art event visualizations:** Each portfolio card and section header features a unique generative-art composition created with HTML Canvas or SVG. These visualizations represent concurrent event streams: multiple particle trails (thin lines, 1px, in Deep Navy and Signal Blue at varying opacities) flow across a white field, occasionally intersecting and creating interference patterns (subtle opacity accumulation at crosspoints). Each visualization has a different configuration (particle count, flow direction, density) to represent different simulation scenarios. - **Nature-derived structural elements:** Scandinavian design draws heavily from nature. Section dividers use thin SVG horizon-line illustrations -- simplified Nordic landscapes (mountain silhouettes, forest treelines, fjord outlines) rendered in a single stroke of Polished Aluminum. These are barely-there decorative elements that add organic warmth without demanding attention. - **Tilt-3d card interaction:** Portfolio cards respond to mouse position with a **tilt-3d** effect -- subtle perspective rotation (max 4 degrees on each axis) driven by cursor position relative to card center. The card's box-shadow shifts correspondingly (translateX/Y matching the tilt direction), creating a floating-paper illusion. On mobile, this activates on device tilt (DeviceOrientationEvent). - **Metallic surface textures:** Key UI elements (buttons, selected cards, the nav bar on scroll) gain a subtle metallic sheen -- a linear-gradient overlay (transparent→rgba(200,210,220,0.15)→transparent at 45deg) that shifts position on hover, simulating brushed-metal light reflection. - **Scandinavian dot grid:** A barely-visible dot grid pattern (3px circles at 48px intervals, Polished Aluminum at 20% opacity) sits on the primary white background, adding structure without visual weight -- referencing the dot-grid notebooks favored by Scandinavian designers. ## Prompts for Implementation **Full-screen narrative opening:** The page loads with Nordic White (#FAFBFC) fill. The generative-art hero visualization initializes immediately -- particle lines begin flowing from the right edge, building density over 3s until the full composition is visible. Meanwhile, the headline text on the left side fades in cleanly (opacity 0→1 over 800ms, no transform -- just a pure fade, Scandinavian-simple). The subtitle follows 400ms later. No bouncing, no springing, no dramatic reveals -- just calm, confident appearance. **Portfolio grid tilt-3d experience:** Cards in the portfolio grid respond to cursor proximity even before hover -- as the mouse moves across the grid, nearby cards begin tilting subtly toward the cursor (2-degree lean) using JS: calculate distance from cursor to each card center, apply proportional transform. Direct hover increases tilt range to 4 degrees and adds a smooth box-shadow expansion. Cards lift slightly (translateZ(8px) in a perspective(1000px) container). **Generative art variation:** Each portfolio card's header canvas runs a different seed of the same generative algorithm. Algorithm parameters (particle count: 20-80, flow angle: 0-360, line opacity: 0.1-0.4, color: navy or signal-blue) are deterministic per card index, ensuring consistent but varied visuals. Cards near the viewport run at full framerate; distant cards pause their animation (Intersection Observer) for performance. **Storytelling flow:** Content follows a quiet narrative: "What it does" (hero with generative viz) → "What it enables" (portfolio grid of use cases) → "How it works" (technical deep-dives in single-column) → "Who uses it" (minimal testimonial quotes in Warm Ash italic). Avoid CTA-heavy layouts, pricing blocks, and stat-grids. The portfolio format itself demonstrates capability -- no need to claim it. **Scroll-aware navigation:** As the user scrolls past the hero, the navigation bar gains a subtle metallic bottom-border (1px, linear-gradient from Polished Aluminum to transparent) and a light backdrop-filter: blur(8px). This transition is smooth (300ms) and understated. ## Uniqueness Notes **Differentiators from other designs:** 1. **Scandinavian minimalism applied to simulation engine:** The deliberate restraint -- no dark mode, no neon, no data-dashboard aesthetics -- positions Completengine as a refined tool for serious engineers, differentiated by what it chooses not to show. 2. **Generative-art as product demonstration:** Using real-time generative visualizations of concurrent event streams (particle flows, interference patterns) as decorative card headers doubles as subtle product demonstration -- the art IS the engine's output. 3. **Source superfamily typographic system:** Using Source Serif 4 + Source Sans 3 + Source Code Pro creates a unified type ecosystem with shared DNA across serif, sans, and mono -- a level of typographic cohesion unique among the designs. 4. **Nature horizon-line section dividers:** Minimal Nordic landscape SVG illustrations (single-stroke mountain/forest/fjord silhouettes) as section dividers embed Scandinavian nature philosophy into the page structure without competing with content. **Seed/Style:** scandinavian + portfolio-grid + humanist + navy-metallic + tilt-3d + generative-art + nature + professional **Avoided overused patterns:** Avoided centered-only layout (used asymmetric portfolio grid), avoided parallax/scroll-triggered/cursor-follow (used tilt-3d instead), avoided warm/gradient palette (used cool navy-metallic), avoided mono typography dominance (used humanist serif-sans pairing). **Preferred underused elements:** Incorporated tilt-3d pattern (10%), generative-art imagery (3%), portfolio-grid layout (not yet frequently used), and professional tone (3%).