Elektro Aberl GmbH

Overview

Elektro Aberl GmbH represents a 'Technical Professionalism' aesthetic—a design language that prioritizes clarity, trustworthiness, and precision while remaining approachable and modern. The brand serves electrical engineering professionals and businesses seeking expert consultation on smart home systems, security technology, and industrial electrical solutions. The visual identity combines a vibrant teal accent (#00b3ab) with warm orange highlights (#f39200) against a clean, neutral light gray background (#f8f8f8), creating a palette that feels both energetic and professional. The UI evokes confidence and expertise: users should feel they're working with specialists who understand complex technical requirements and can translate them into intuitive solutions.

The brand voice is direct, knowledgeable, and solution-oriented. Elektro Aberl speaks in the language of electrical engineering—precise, methodical, outcome-focused—but never condescending. Vocabulary emphasizes capability, partnership, and innovation. Example sentence in brand voice: 'Wir planen Ihre Elektroinstallation mit maximaler Effizienz und Sicherheit—von der Beratung bis zur Inbetriebnahme.'

Colors

The color system is built on a foundation of professional neutrality with strategic accent deployment. Primary (#00b3ab, a sophisticated teal) is reserved exclusively for interactive elements—call-to-action buttons, active navigation states, focus indicators, and key links. This color appears sparingly but decisively, commanding attention without overwhelming. Secondary (#f39200, a warm orange) serves as a supporting accent for highlights, badges, and secondary actions, creating visual rhythm and warmth. Tertiary (#e74c3c, a professional red) is used for error states, alerts, and critical information requiring immediate attention.

The surface stack is anchored in light neutrals: surface (#f8f8f8) provides the page background, surface-container (#f5f5f5) is used for card backgrounds and co

Typography

The type system employs Lato for all headings and labels, paired with Helvetica/Arial for body text, creating a clear hierarchy between structural elements and content. Display (60px, 700 weight, -0.02em tracking) is reserved for hero headlines and major page titles. Headline-lg (40px, 700 weight) anchors section introductions. Headline-md (28px, 700 weight) marks subsections. Title-lg (20px, 600 weight) introduces card titles and form labels. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent content. Body-md (16px, 400 weight, 24px line-height) is the default for body copy, ensuring readability at 14px computed size on the rendered page. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and navigation items. L

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on large displays while maintaining focus. The page uses a fluid-to-fixed approach: on screens below 1024px, the grid adapts to 8 columns; below 768px, it collapses to 4 columns. Horizontal gutters are consistently 24px (md spacing), creating breathing room between grid columns. Vertical rhythm is established through lg spacing (40px) between major sections, md spacing (24px) between subsections, and sm spacing (12px) between related elements within a component. The body background is set to surface (#f8f8f8), with card containers using surface-container (#f5f5f5) to create subtle visual layering without harsh contrast. White space is treated as a design element—never fill

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, directional lighting. The elevation scale consists of three levels: sm (0 1px 5px rgba(0, 0, 0, 0.15)) for cards and standard containers, md (0 4px 12px rgba(0, 0, 0, 0.12)) for elevated cards and modals on hover, and lg (0 16px 40px rgba(0, 0, 0, 0.16)) for floating elements like sticky headers or prominent modals. Shadows use a 15% opacity black rather than pure black, maintaining a softer, more professional appearance. Interactive elements (buttons, input fields) receive sm elevation by d

Shapes

The shape philosophy is 'Refined Pragmatism'—rounded corners are used strategically to soften the technical aesthetic without introducing unnecessary ornamentation. Buttons and primary interactive elements use lg radius (12px), creating a friendly, approachable feel while maintaining professional polish. Card containers and secondary surfaces use md radius (8px), balancing visual softness with structural clarity. Input fields and form elements use DEFAULT radius (6px), a subtle rounding that suggests interactivity without distraction. Badges and small accent elements use full radius (9999px),

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (background: #00b3ab, text: white, 12px 24px padding, 44px height, 12px border-radius) are used for main CTAs like 'Kontakt aufnehmen' or 'Anfrage stellen'. On hover, the background transitions to #008b84 over 200ms, accompanied by elevation increase to md shadow. Secondary buttons (background: #f39200, same dimensions) are used for alternative actions or less critical paths. Ghost buttons (transparent background, 2px primary border, primary text) are used for tertiary actions or cancel operations. All buttons include a 1px focus ring at 3px offset when keyboard-focused, using rgba(0, 179, 171, 0.3) for visibility.

Containers & Surfaces Cards are the primary content container. Standard cards (background

Do's and Don'ts

**Do**

• Do use primary (#00b3ab) exclusively for interactive elements and CTAs—never as a background or body text color.
• Do maintain 24px gutters and 40px section spacing to create visual breathing room and hierarchy.
• Do apply 12px border-radius to all buttons and 8px to cards for consistent, professional softness.
• Do use Lato for all headings and labels to establish clear structural hierarchy; reserve Helvetica for body content.
• Do include focus rings (3px primary-color ring at 10% opacity) on all interactive elements for keyboard accessibility.
• Do transition hover states over 200ms using ease-in-out timing for smooth, professional interactions.
• Do pair primary (#00b3ab) with secondary (#f39200) only in separate components—never in the same button or card.

**Don't**

• Don't use primary color for backgrounds, body text, or non-interactive elements—it must remain reserved for CTAs and focus states.
• Don't apply border-radius values below 6px or above 16px except for full-radius badges; maintain the refined pragmatism aesthetic.
• Don't stack multiple shadows on a single element; use only one shadow from the elevation scale (sm, md, or lg).
• Don't mix Lato and Helvetica within the same heading or label; use Lato for structure, Helvetica for body only.
• Don't use tertiary (#e74c3c) for anything other than errors, alerts, and critical information requiring immediate attention.
• Don't apply hover effects lasting longer than 200ms or shorter than 150ms; maintain the professional interaction tempo.
• Don't use surface-variant (#dddddd) for text; it's reserved for borders and dividers only.