e-tib.com/docs/STYLEGUIDE.md

Styleguide: E-TIB Rework

Dieser Styleguide definiert die visuellen Rahmenbedingungen für das neue E-TIB Next.js-Rework auf Basis des "Systematic Atomic" Paradigmas der Mintel-Standardisierung.

1. Markenidentität und Ästhetik

Vibe: "Premium Industrial" Eindruck: Robust, verlässlich, extrem professionell (Top Modern), mit einem Hauch von High-End-Engineering.

Das Design darf nicht verspielt wirken. Es basiert auf großen, markanten und sehr klaren Flächen sowie technischer Präzision.

2. Farbpalette

Die Tailwind-Konfiguration bildet die Identität exakt ab:

• E-TIB Corporate Grün (Primary):
  • Base: #117c61 (Kerngewicht für Buttons, Links, Hero-Akzente)
  • Dark: #0d5d49 (Hover-Status)
  • Light: #149d7b (Subtile UI-Elemente)
• Secondary (Dunkles Grün):
  • Base: #225522
• Neutral / Hintergrund:
  • Light Background: #fafafa
  • Dark Background / Contrast: #333333
  • Pure Black (Text): #1a1a1a

3. Typografie

Das Rework nutzt eine "Brute Simplicity"-Typografie gepaart mit Fluid-Skalierung, um absolute Klarheit aufzubauen.

• Schriftarten: Inter, system-ui, sans-serif (Google Font per Next-Font injiziert)
• Hierarchie:
  • <h1>: Extreme Präsenz, kurze Headlines (z. B. DIE EXPERTEN FÜR KABELTIEFBAU).
  • P-Text: Lesefreundlich und luftig formatiert mit Line-Height 1.6 bis 1.7.

4. Grid System & UI Patterns

• Full Viewport Immersions: Cinematic Videos im Headbereich nehmen den vollen Viewport ein und haben ein dunkles Overlay, um den hellen Text durchbrechen zu lassen.
• Grids: Einsatz einer modernen Architektur analog zum "Bento-Grid"-Ansatz. Dies zeigt die Kompetenzen kompakt und technisch ansprechend auf einem Blick (mit leichten Shadow-[0 4px 6px ...] Effekten).
• Abrundungen (Border Radius): Standardisierte, leichte Abrundungen.
  • Buttons und Forms: 0.5rem (rounded)
  • Große Kompetenz-Kacheln: 0.75rem (rounded-lg) bis 1.5rem (rounded-2xl)

5. Animationen & Micro-Interactions

Framer Motion treibt sämtliche Bewegungen an. Prinzipien:

1. Glassmorphism Fade-ins: Boxen der Unter-Unternehmen (E-TIB GmbH, Bohrtechnik) schweben durch Scroll-Trigger elegant ins Bild (Ease-Industrial Kurve).
2. Hover States: Klar und direkt. Keine Wipp- oder Bouncy-Effekte, sondern hartes Feedback mit kurzen Transitions.
3. Timeline Scroll-Wave: Einträge aus der Firmengeschichte werden asynchron bei Sichtbarkeit eingeflogen.

6. Fotografie & Footage

• Das Hero-Video darf keine Bedienelemente haben (Autoplay, muted, loop) und wird so integriert, wie von schleicher-gruppe.de gelobt.
• Die Fotografien sind kontrastreich und idealerweise etwas entsättigt, um das Corporate Grün noch stärker wirken zu lassen.