MHD Müller-Habbel GmbH

Overview

MHD Müller-Habbel GmbH is a professional forestry technology manufacturer serving demanding operators across Europe. The brand embodies 'Industrial Minimalism'—a design philosophy that strips away ornament to reveal raw material authenticity, technical precision, and uncompromising durability. The visual language is deliberately austere: a pure black canvas (#000000) anchored by warm, earthy taupe accents (#9b9185) that evoke soil, timber, and the forest floor. This palette creates an atmosphere of competence and gravitas, where every interface element feels engineered rather than decorated. The UI evokes the sensation of operating heavy machinery—direct, responsive, and stripped of distraction.

The brand voice is technical yet accessible, confident without arrogance. Tone: matter-of-fact, precise, occasionally dry. Vocabulary emphasizes performance metrics ('Maximale Leistung', 'Zuverlässigkeit'), mechanical capability, and operational mastery. The brand never apologizes or hedges; it states facts. Example sentence in brand voice: 'Der 8H GTE Hybrid liefert maximale Leistung bei geringem Verbrauch—konstruiert für anspruchsvolle Forsttechniker, die keine Kompromisse akzeptieren.'

Colors

The color system is built on a foundation of absolute black (#000000) paired with a sophisticated warm neutral primary (#9b9185). This taupe-gray acts as the signature accent—appearing on all interactive elements (buttons, links, form focus states) and creating visual hierarchy against the dark canvas. The secondary accent is a technical blue (#0045a5), reserved for system actions, consent dialogs, and secondary CTAs, evoking precision and trust. Tertiary green (#4c9b51) is used sparingly for success states and affirmative actions. The surface stack progresses from pure black (#000000) through carefully calibrated grays (#0f0f0f, #131313, #1f1f1f, #2a2a2a) to create subtle depth without lightening the overall mood. On-surface text is pure white (#ffffff) for maximum legibility on dark back

Typography

Sofia Sans Condensed is the sole typeface, chosen for its geometric precision and industrial character. The type system uses weight and size to create hierarchy rather than font switching. Display (60px, 700 weight) anchors hero sections with commanding presence; headline-lg (48px, 500 weight) introduces major sections; body-lg (22px, 400 weight) serves as the default reading size, reflecting the large, legible type common in technical documentation. Label-md (14px, 600 weight) is applied to all button text and form labels, with letter-spacing of 0.01em to add mechanical precision. Line-height is consistently generous (1.33–1.5 unitless) to ensure readability on dark backgrounds and reduce eye strain during extended use. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels (labe

Layout

The layout uses a fluid 12-column grid with a maximum container width of 1520px, allowing the design to scale gracefully from mobile to ultra-wide displays. The page rhythm is governed by lg spacing (40px) for section separation, creating breathing room between major content blocks. Gutter width is fixed at 24px, providing consistent horizontal padding on all sides. The hero section spans full viewport height with a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) over background imagery, ensuring text legibility while preserving visual drama. Content sections below the fold use md spacing (24px) for internal padding and sm spacing (12px) for component-level gaps. The design favors generous white space—no section should feel cramped. Container max-width of 1520px prevents text lines from

Elevation & Depth

Depth is achieved through layering and shadow rather than color gradation. The base layer (Level 1) is the pure black background (#000000) with no shadow. Level 2 (standard cards and containers) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the background. Level 3 (modals, elevated panels, and interactive overlays) uses box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), a more pronounced shadow that signals modal priority and focus. Hover states on interactive elements (buttons, list items) introduce a transient shadow of 0 3px 8px rgba(0, 0, 0, 0.15) with a 200ms ease

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are minimal and purposeful, never decorative. Buttons and form inputs use rounded.DEFAULT (0.5rem / 8px) for subtle softening that reduces visual harshness without compromising precision. Cards and larger containers use rounded.md (0.75rem / 12px) to signal containment without drawing attention. The logo and icon elements remain sharp (0px radius) to emphasize technical authenticity. Badges and pills use rounded.full (9999px) only when they represent discrete, self-contained concepts (status indicators, tags). This graduated approac

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: {colors.primary} (#9b9185), text-color: {colors.on-primary} (#000000), padding: 12px 24px, height: 44px, and a 2px solid border in the primary color. On hover, the background shifts to {colors.primary-fixed-dim} (#9b9185 at 85% opacity) with a 150ms ease transition. The button-secondary variant uses a transparent background with a 2px primary-colored border and white text, inverting on hover to a 10% primary overlay. Both variants use rounded.DEFAULT (8px) for subtle softening. All buttons must include a focus state with outline: 2px solid {colors.primary} and outline-offset: 2px for keyboard navigation accessibility.

Containers & Surfaces Cards use backgroundColor: rgba(0,

Do's and Don'ts

**Do**

• Do use the primary taupe (#9b9185) exclusively on all primary CTAs, form focus states, and active navigation indicators—it is the visual signature of the brand.
• Do maintain generous spacing (lg: 40px for sections, md: 24px for containers) to preserve the minimalist, uncluttered aesthetic that defines MHD's technical authority.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels over photographic backgrounds to ensure legibility without compromising the dark, industrial mood.
• Do use Sofia Sans Condensed exclusively; its geometric precision reinforces the engineering-focused brand identity and ensures consistency across all touchpoints.
• Do transition all interactive elements (buttons, inputs, list items) over 150–200ms with ease timing functions to provide tactile feedback without animation excess.

**Don't**

• Don't use color gradients or multi-color overlays; the system relies on shadow geometry and opacity alone to convey depth and hierarchy.
• Don't apply rounded corners larger than rounded.md (12px) to structural elements; excessive rounding contradicts the industrial minimalist aesthetic and signals softness rather than precision.
• Don't mix primary (#9b9185) and secondary (#0045a5) accents in the same component or section; they are mutually exclusive by role and mixing them creates visual confusion.
• Don't reduce line-height below 1.33 unitless on body text; the dark background demands generous vertical spacing for readability and reduces eye strain during extended use.
• Don't use system fonts or generic sans-serif fallbacks; Sofia Sans Condensed is non-negotiable for maintaining the brand's geometric, technical character across all platforms.