Alfred Schnüttgen Metallwarenfabrik

Overview

Alfred Schnüttgen is a 70-year-old German precision metal fabrication house serving industrial clients across sectors with stamped, pressed, and drawn components. The design system embodies 'Technical Warmth'—a philosophy that marries rigorous industrial precision with approachable, family-business authenticity. The brand personality is direct, confident, and grounded: it speaks in clear technical language without corporate jargon, celebrates craftsmanship and heritage, and treats clients as partners in problem-solving. The UI evokes trust through deep navy (#232c77) anchoring every interaction, paired with a vibrant tertiary accent (#4a63f4) that signals innovation and forward momentum. The emotional response is one of competence and reliability—users feel they are engaging with a serious, capable manufacturer who has earned their reputation through decades of precision work.

The voice is precise, factual, and occasionally warm. Schnüttgen avoids hyperbole; instead, it leads with specifics: materials, tolerances, certifications, and proven track records. Example sentence in brand voice: 'Wir fertigen Stanzteile mit Toleranzen bis ±0,05 mm – seit 1956 der Standard in unserer Werkstatt.' The vocabulary favors technical terms (Oberflächentechnik, Umformteile, Baugruppen) without becoming inaccessible, and the tone respects the intelligence of manufacturing engineers and procurement professionals who are the primary audience.

Colors

The color system is anchored by a deep, authoritative navy primary (#232c77) that appears on all CTAs, navigation highlights, and key interactive elements. This color conveys stability, precision, and industrial heritage—it is the visual signature of the brand. Secondary color (#141943) is a darker navy used for text-heavy sections and secondary navigation, creating visual hierarchy through depth rather than contrast. The tertiary accent (#4a63f4) is a bright, energetic blue-violet that signals innovation, technical capability, and forward-thinking—it appears on hero sections, featured product cards, and calls-to-action that emphasize new services or capabilities. The warning/accent gold (#cc974d) is reserved for highlights, badges, and status indicators that require attention without alar

Typography

The type system uses InstrumentSans exclusively, a geometric sans-serif that balances technical precision with approachability. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major page titles, commanding attention through scale and negative letter-spacing that tightens the letterforms for impact. Headline-lg (40px, 600 weight, -0.02em) is used for section headers and prominent product names. Headline-md (32px, 700 weight, -0.01em) appears on hero overlays and card titles, where the bold weight and tight spacing reinforce technical authority. Title-lg (20px, 600 weight) is the workhorse for subsection headers and form labels. Body-lg (18.4px, 400 weight, 28px line-height) is the primary reading size for hero copy and long-form content, with generous l

Layout

The page layout uses a 12-column grid with a max-width of 1420px, centered on the viewport. The grid is fluid on mobile (single column, 24px gutter) and expands to full 12 columns on desktop (24px gutter maintained). Hero sections span full-width with 80px vertical padding and 24px horizontal gutter, creating breathing room around the primary headline. Content sections use a 2-column or 3-column layout depending on content type: product cards typically occupy 4 columns (3 per row on desktop), while feature sections use 6-column blocks for text + image pairings. White-space philosophy emphasizes clarity over density: section separation uses lg spacing (40px) between major blocks, md spacing (24px) between subsections, and sm spacing (12px) between related elements. The container max-width o

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the industrial aesthetic. Level 1 (Base): no shadow; surfaces sit flush on the white background. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and modals at rest. This soft, spread shadow (8px blur, 3px offset) creates subtle lift without drama. Level 3 (Elevated/Hover): box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), applied on card-hover and button-hover states. The increased opacity (0.5 vs 0.15) and tighter blur (6px vs 8px) signal interactivity and focus. Transitions between

Shapes

The shape philosophy is 'Technical Precision with Approachable Curves'—sharp where it matters (inputs, cards), rounded where it invites interaction (buttons, badges). Buttons use border-radius: 160px (full pill shape), creating a soft, inviting call-to-action that contrasts with the geometric precision of the rest of the UI. This rounded button style appears on all primary CTAs (height 48px, padding 12px 24px) and secondary buttons (same dimensions, transparent background with 1px border). Cards and containers use border-radius: 10px (md), a subtle rounding that softens the industrial grid wit

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12px vertical and 24px horizontal padding. Primary buttons (background: #232c77, text: #ffffff, border-radius: 160px) appear on all major CTAs: 'Kontakt', 'Anfrage', 'Mehr erfahren'. On hover, the background shifts to #4a63f4 (primary-container) with a 200ms ease-in-out transition. Secondary buttons (background: transparent, border: 1px solid #9d9fa5, text: #232c77, border-radius: 8px) are used for less prominent actions like 'Abbrechen' or 'Zurück'. On hover, secondary buttons gain a background-color: #e9ecef. All buttons use label-md typography (14.4px, 400 weight) and disable pointer-events when in a loading or disabled state, with opacity reduced to 0.5.

Containers & Surfaces Ca

Do's and Don'ts

**Do**

• Do use primary navy (#232c77) on all primary CTAs and navigation highlights—it is the visual signature of the brand and must appear consistently across all touchpoints.
• Do apply the full 48px button height with 160px border-radius on primary actions; this generous rounding invites engagement and differentiates CTAs from secondary UI.
• Do maintain the 24px gutter and lg (40px) section spacing throughout the page; this rhythm creates visual breathing room and reinforces the precision aesthetic.
• Do use InstrumentSans exclusively for all typography; the geometric consistency strengthens the technical brand identity and ensures legibility at all sizes.
• Do apply the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and inputs at rest, and transition to Level 3 (0 3px 6px rgba(0, 0, 0, 0.5)) on hover over 300ms for smooth, natural depth shifts.
• Do use the tertiary accent (#4a63f4) sparingly on hero sections and featured product cards to signal innovation without overwhelming the navy-anchored hierarchy.

**Don't**

• Don't use rounded corners greater than 10px on cards or containers; excessive rounding softens the technical precision and dilutes the industrial brand identity.
• Don't apply shadows to text elements; instead, rely on color contrast (16:1 on light, 4.5:1 on dark) and typography weight to establish hierarchy.
• Don't mix typefaces; InstrumentSans is the sole font family. System fonts or serif alternatives break the geometric consistency and weaken brand recognition.
• Don't use the secondary navy (#141943) on primary CTAs; it is reserved for text-heavy sections and footer areas. Primary CTAs must always use the primary navy (#232c77).
• Don't exceed a container max-width of 1420px; wider layouts reduce readability and dilute the focused, precision-driven aesthetic.
• Don't apply the error color (#cc2727) to warnings or informational messages; reserve it exclusively for validation failures and destructive actions like 'Delete' or 'Cancel Order'.