Bender Armaturen

Overview

Bender Armaturen is a family-run German manufacturer of valves and fittings, founded in 1934, serving craft and heavy industry. The interface is a corporate industrial system: a deep navy canvas and generous white space carry an engineering-grade reliability message, with full-bleed foundry photography supplying the warmth and human scale of the work. The aesthetic movement is Industrial Heritage Modernism: ordered, sober and precise, with the only ornament being the wave-shaped section dividers that echo molten metal.

The voice is factual, confident and understated, favouring the vocabulary of tradition and proof: "Zuverlässigkeit", "Präzision", "seit 1934". Sentences are short and declarative, and claims are anchored in heritage rather than hype. Example sentence: "Armaturen made in Germany. Deutsche Ingenieurskunst seit 1934."

Colors

Primary (#00213d) is the navy used for brand-level structure: header and hero overlays, body emphasis and the darkest text on light surfaces. Secondary (#005aab) is the cobalt accent used for links, the blue gradient field behind the hero and active states. Tertiary (#d6a419) is a muted gold reserved for highlights and status badges and never used for body copy. Body text is #231f1f on a #ffffff page and #f4f5f5 bands, which keeps contrast above 14:1. Primary CTAs are white (#ffffff) rectangles with dark text on photographic or navy backgrounds, so the white block itself is the call to action. Gradients are used only in the hero, running from #00213d through #005aab into transparency over the photograph; do not introduce gradients elsewhere.

Typography

A single geometric sans, Futura LT, is used across the system. Weight 700 is reserved for display and headlines (h1 at 50px / 65px, h2 at 39px / 51px) and is set in uppercase only in the hero. Body copy is weight 400 at 18px / 27px, which is intentionally large for an industrial audience. Labels and CTAs use weight 300 at 18px with letter-spacing 0.5px to keep them light against the bold headings. Apply a text-shadow of 0 2px 4px rgba(0,0,0,0.15) only to white headline text sitting over the photographic hero; never on solid backgrounds.

Layout

The grid is fixed-width with a 1320px container maximum and a 12-column model with a 30px gutter. Sections alternate between full-bleed photography and white or #f4f5f5 bands, separated by SVG wave shapes about 80px tall. Use the lg spacing (16px) between related text lines, md (15px) inside cards, and 2xl (30px) between content blocks. Whitespace is generous in the hero (sections of roughly 100px vertical padding) and tighter in the navigation, where links sit 22px apart.

Elevation & Depth

Depth is conveyed mainly by colour blocking, not shadows. Where elevation is needed, use 0 10px 20px -10px rgba(35,31,31,0.25), a soft downward shadow that lifts cards off the #f4f5f5 band. Small utility elements may use 0 0 2px 2px rgba(0,0,0,0.6) as a focus or outline ring. Layer order is: Level 1 base (#f4f5f5 band), Level 2 card (#ffffff with the soft shadow), Level 3 overlay (navy at 80% opacity over imagery). No backdrop-filter is used.

Shapes

Shape language is Architectural Sharpness. Buttons and the header CTA are fully square (0px radius), reinforcing the engineering character. Cards use 4px and inputs use 4px, slightly softening the grid. The 14px radius is reserved for large feature containers and the 9999px pill is used only for small badges and the language switcher. Keep rounding minimal so the system reads as precise rather than playful.

Components

Action Elements Primary CTAs are white rectangles (#ffffff, 0px radius) with #231f1f text at Futura LT 300, 18px, letter-spacing 0.5px, padded 22px 45px for a 48px height. On hover, invert to the navy #00213d background with white text over a 200ms ease transition. The header "Ansprechpartner" button uses the same treatment at 50px height.

Containers & Surfaces Cards are #ffffff on the #f4f5f5 band with a 4px radius, 15px internal padding and the soft shadow 0 10px 20px -10px rgba(35,31,31,0.25). On hover, lift to #e0e0e0 over 200ms; do not translate.

Inputs & Interaction Inputs use a white surface with a 1px solid #9e9e9e border, 4px radius and 10px padding, and switch to a 2px #005aab border on focus. Navigation links are white 18px text on the navy hero with a chevron rota

Do's and Don'ts

**Do**

• Do use white rectangular buttons as the primary call to action, since they are the most visible element on navy and photographic backgrounds.
• Do reserve #005aab for links and active states so the cobalt keeps its signalling meaning.
• Do keep corners at 0px for buttons and 4px for cards to preserve the engineered look.
• Do pair large Futura LT headlines with generous body line-height of 27px at 18px.

**Don't**

• Don't use #d6a419 gold for body copy or large text areas; it is an accent for highlights and status only.
• Don't add gradients outside the hero, as the system uses flat colour blocking everywhere else.
• Don't round primary buttons; pill shapes are reserved for small badges.
• Don't place white text on the #f4f5f5 band, which fails contrast.