EWMenn

Overview

EWMenn is a precision industrial machinery manufacturer serving the fastener and component production industries across Germany and Europe. The design system embodies **Technical Minimalism**—a philosophy that prioritizes clarity, functional hierarchy, and industrial authenticity over decorative flourish. The brand personality is authoritative yet approachable: engineers and procurement specialists trust EWMenn's interface because it mirrors the precision of their machines. The UI evokes confidence through restrained use of a warm golden accent (#fad500) against a neutral, light industrial palette, creating visual focus without distraction. Voice: direct, specification-focused, never marketing-speak. Example: "AF 3 delivers 120 parts per minute with ±0.05mm tolerance—see the spec sheet."

Colors

The color system is rooted in industrial clarity: a bright, neutral white (#ffffff) canvas with cool grays (#333333 on-surface, #777777 on-surface-variant) for text and secondary content. The primary accent is a warm golden yellow (#fad500, RGB 250, 181, 0)—used exclusively on call-to-action buttons, carousel indicators, and brand highlights. This color appears in the live computed styles as the primaryCta background and signals urgency and precision. Secondary blue (#00448b, RGB 0, 68, 139) provides a technical, corporate counterpoint and is used for secondary buttons and informational elements. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f5 surface-dim, #dddddd surface-container, #cccccc surface-container-high) to create subtle depth wi

Typography

The type system uses open_sansregular (Open Sans) as the primary family, with Helvetica Neue as a fallback—both chosen for their technical clarity and universal rendering across manufacturing environments. The hierarchy spans from display (60px, 700 weight) down to label-sm (12px, 500 weight), with consistent line-height ratios (1.13–1.5) to ensure readability on both desktop workstations and mobile devices on the factory floor. Headlines (36–40px) use 600 weight to command attention without heaviness; body text (14–18px) uses 400 weight for legibility in dense specification sheets. Letter-spacing is minimal (-0.02em on display, 0em on headlines) to maintain the compact, technical feel. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) on small labels (12px) placed over carousel images or bu

Layout

The layout uses a fixed 12-column grid with a max-width of 1199px, centered on the viewport. The gutter is 24px (md spacing), applied consistently between columns and sections. Page rhythm follows a 40px (lg spacing) vertical cadence for section separation—hero carousel, then three-column card grid, then footer—creating a predictable, scannable flow. The container max-width of 1199px accommodates both desktop workstations (1920px) and tablet views (768px+) without awkward scaling. Horizontal padding on the container is 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets. The carousel occupies the full container width with a 4px border-radius on the image container, reinforcing the technical aesthetic. Card grids use 24px gaps (md spacing) between items. White-space is ge

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle surface-color progression rather than dramatic layering. The base elevation uses no shadow (flat surface at #ffffff). Level 1 (standard cards, inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, 3px offset shadow that suggests a thin paper layer above the background. Level 2 (modals, dropdowns) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a larger blur radius (24px) and offset (8px) to indicate greater separation. Inset shadows (inset 0 -1px 0 rgba(0, 0, 0, 0.25)) are used on button-pressed states and form inputs

Shapes

The shape philosophy is **Technical Precision**—sharp corners dominate, with strategic rounding only where interaction or visual softness is warranted. Buttons use 20px border-radius (rounded.xl) to signal clickability and reduce visual harshness on primary CTAs; secondary buttons use 4px (rounded.DEFAULT) for a more austere, technical feel. Form inputs use 4px border-radius to align with the grid-based aesthetic. Cards and containers use 4px or 6px (rounded.DEFAULT or rounded.md) to maintain the industrial, modular appearance. The carousel indicators use 50% border-radius (rounded.full) to cr

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses #fad500 background with white text (20px, 400 weight), 48px height, 12px 32px padding, and 20px border-radius. On hover, the background shifts to #f5c200 (a 5% darkening) with a 150ms ease-in-out transition—no shadow change, maintaining flatness. On active/pressed state, use #e6b000 (a 10% darkening) with the inset shadow (inset 0 -1px 0 rgba(0, 0, 0, 0.25)) to suggest depression. **button-secondary** uses #00448b background with white text, 48px height, 12px 24px padding, and 4px border-radius. Hover state darkens to #003366 with the same 150ms transition. Both button variants disable at 50% opacity with cursor: not-allowed.

Containers & Surfaces **card** uses #dddddd background (surface-containe

Do's and Don'ts

**Do**

• Do use #fad500 exclusively on primary CTAs and carousel indicators to maintain focus and brand recognition.
• Do apply 4px border-radius to form inputs, cards, and containers to reinforce the technical, grid-based aesthetic.
• Do use 24px (md spacing) as the default gap between columns and sections to maintain rhythm and scannability.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on cards and dropdowns for subtle, consistent elevation.
• Do use open_sansregular at 14–18px for body text to ensure legibility on both desktop and mobile industrial devices.
• Do transition all interactive states (hover, focus, active) over 150ms with ease-in-out timing for responsive feedback.
• Do use #333333 for primary text instead of pure black (#000000) to reduce eye strain in industrial environments.

**Don't**

• Don't use rounded corners larger than 20px on any element except full circles (50% border-radius)—it softens the technical brand.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12)—deeper shadows conflict with the flat, industrial aesthetic.
• Don't use secondary blue (#00448b) on primary CTAs; reserve it for secondary buttons and informational elements only.
• Don't mix font families; open_sansregular is the only approved typeface—Helvetica Neue is fallback only.
• Don't apply text-shadow to body text; use it only on small labels (12px) over busy backgrounds to maintain contrast.
• Don't use opacity below 0.6 for inactive states; maintain sufficient contrast for accessibility (WCAG AA minimum 4.5:1).
• Don't exceed 1199px container max-width; wider layouts break the grid-based, modular visual system.