SIMULIA PowerFLOW

Overview

SIMULIA PowerFLOW is an enterprise-grade computational fluid dynamics platform designed for engineers and product development teams at Fortune 500 manufacturers. The design system embodies 'Technical Clarity'—a philosophy that marries the precision of scientific visualization with the accessibility of modern enterprise software. The aesthetic is deliberately corporate yet approachable: deep blues (#0870d3, #005686) convey trust and technical authority, while generous whitespace and clear typography reduce cognitive load in data-dense interfaces. The brand personality is confident, precise, and solution-oriented—never breathless or casual. Example sentence: 'PowerFLOW's Lattice Boltzmann solver delivers aerodynamic predictions 40% faster than traditional CFD, enabling design iteration before prototype build.'

Colors

The color system is anchored in a dual-blue strategy: Primary Blue (#0870d3) serves as the action color for all CTAs, interactive states, and focus indicators, while Corporate Blue (#005686) anchors navigation, headers, and secondary UI elements. The palette is deliberately restrained—only three accent colors (primary, secondary corporate, and error red #e32b2e) prevent visual noise in complex data dashboards. Surface colors range from pure white (#ffffff) for primary content areas to light grey (#f4f6f8) for container backgrounds, with a deep navy (#04315d) reserved for hero sections and high-contrast overlays. All interactive elements use the primary blue (#0870d3) with a hover state darkening to #075cad (inverse-primary), providing clear feedback without jarring transitions. Error state

Typography

The type system uses a single typeface family—3ds (with Arial fallback)—across all scales, reinforcing brand consistency and reducing cognitive friction. Display and headline weights (600–700) are reserved for page titles and section headers, using negative letter-spacing (-1.3px to -0.8px) to create visual density and authority. Body text (16px, 400 weight, 24px line-height) is optimized for readability in technical documentation and feature descriptions, with generous line-height preventing eye strain in long-form content. Labels and buttons use 600 weight at 16px to ensure interactive elements stand out without oversizing. All type sizes scale responsively: headlines compress from 55px (desktop) to 32px (mobile), while body text remains at 16px minimum for accessibility. Apply text-shad

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus on desktop (1600px+). Horizontal padding follows a three-tier system: 16px on mobile (< 768px), 32px on tablet (768px–1279px), and 64px on desktop (1280px+), creating breathing room that scales with viewport. Section separation uses lg spacing (40px) between major content blocks, md spacing (24px) between subsections, and sm spacing (12px) between related elements. The gutter width is fixed at 32px, providing consistent column gaps. White-space is treated as a design element, not wasted space—negative space around CTAs, form fields, and data visualizations improves scannability and reduces decision fatigue. Container backgrounds

Elevation & Depth

Depth is conveyed through a three-level shadow system that avoids the 'floating card' aesthetic common in consumer apps. Level 1 (sm elevation: 0px 1px 6px 1px rgba(0, 0, 0, 0.1)) is applied to cards and contained elements at rest, providing just enough separation from the background to indicate interactivity. Level 2 (md elevation: 0px 6px 8px 4px rgba(0, 0, 0, 0.08)) is reserved for hover states and modals, signaling elevation without visual drama. Level 3 (lg elevation: -2px 0 4px rgba(0, 0, 0, 0.24)) is used exclusively for carousel navigation buttons and persistent UI chrome, creating a s

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used strategically to soften technical interfaces without introducing playfulness. Buttons and primary CTAs use a 25px border-radius (rounded.xl), creating a pill-shaped form that signals 'clickable' without ambiguity. Cards and containers use 6px (rounded.DEFAULT), a subtle rounding that reduces visual harshness while maintaining a professional appearance. Input fields and form elements use 6px, matching card radius for visual consistency. Navigation and dropdown menus use 0px (sharp corners), reinforcing their role as stru

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #0870d3 background with white text, 16px label-md weight, 12px vertical padding, and 24px horizontal padding, creating a 48px total height for touch targets. Hover state transitions to #075cad (inverse-primary) over 200ms using cubic-bezier(0.4, 0, 0.2, 1), providing smooth feedback without animation jank. Secondary buttons use a 2px border at #0870d3 with transparent background, allowing them to sit alongside primary buttons without competing for attention. Ghost buttons (used for tertiary actions) have no border or background, only text color at #0870d3, with a hover background of #e3e7ec (surface-container-high) appearing on interaction. All buttons include a focus ring: 3px solid rgba(8, 112, 211, 0.1)

Do's and Don'ts

**Do**

• Do use Primary Blue (#0870d3) exclusively for CTAs, links, and focus states—never use it for backgrounds or decorative elements.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; use 12px (sm spacing) only for nested elements.
• Do apply 6px border-radius to all cards and form elements; reserve 25px (pill-shape) exclusively for buttons.
• Do use the 3-level shadow system (sm/md/lg) for elevation; never create custom shadows or use blur > 4px.
• Do ensure all interactive elements have a visible focus ring (3px rgba(8, 112, 211, 0.1)) for keyboard accessibility.
• Do use 1px borders at #c4c7c8 (outline-variant) for card and input boundaries; never use 2px or thicker borders except in focus states.

**Don't**

• Don't use Corporate Blue (#005686) for CTAs or interactive elements—reserve it for navigation and headers only.
• Don't apply shadows > 8px spread or blur > 4px; the system uses subtle elevation, not floating-card aesthetics.
• Don't mix typeface families; 3ds (with Arial fallback) is the only approved font across all scales and weights.
• Don't create custom color combinations; use only the defined palette (primary, secondary, tertiary, error, and surface stack).
• Don't use rounded corners on navigation elements or structural UI; sharp corners (0px) signal non-interactive chrome.
• Don't animate transitions longer than 300ms or use easing functions other than cubic-bezier(0.4, 0, 0.2, 1); faster feedback feels more responsive.