# KLZ Cables Design Styleguide

This styleguide defines the visual language and design principles for the KLZ Cables digital presence. It focuses on the intersection of industrial reliability and sustainable energy.

## 1. Design Philosophy

The design should feel **Industrial yet Modern**, **Reliable**, and **Sustainable**. It balances technical precision with organic, human touches.

- **Precision**: Clean lines, structured grids, and clear typography represent the engineering excellence of the products.
- **Sustainability**: Use of the "Accent Green" and organic "Scribble" elements to highlight green energy initiatives.
- **Heritage**: Integration of historical references (e.g., Felten & Guilleaume) to establish trust and long-term reliability.

## 2. Visual Language

### 2.1 Typography Principles
- **Clarity First**: Use highly legible sans-serif typefaces (Inter).
- **Hierarchy**: Bold, large headings for impact; structured subheadings for technical clarity.
- **Emphasis**: Use italics and hand-drawn highlights (Scribbles) sparingly to draw attention to key sustainable concepts.

### 2.2 Color Strategy
- **Trust (Primary Blue)**: Deep, vibrant blue used for core branding and primary actions. Represents stability and the flow of electricity.
- **Growth (Accent Green)**: A bright, energetic green used exclusively for highlights related to renewable energy and the future.
- **Foundation (Neutrals)**: A range of blacks, dark grays, and clean whites to provide a professional, industrial backdrop.

### 2.3 Imagery & Media
- **Scale**: Use wide-angle, high-resolution imagery to show the scale of energy projects (wind farms, solar parks).
- **Motion**: Subtle background videos in hero sections to create a sense of ongoing energy and progress.
- **Technical Detail**: Macro shots of cables to showcase quality and material composition.
- **Reflection**: Use subtle reflections for product images to give them a premium, tangible feel.

## 3. Layout & Composition

### 3.1 The "Sticky Narrative"
For long-form technical or "About" content, use a split-screen layout where the narrative title remains fixed while the detailed points scroll. This keeps the user oriented within the context.

### 3.2 Content Overlays
When presenting news or blog content, overlay text directly on high-quality imagery with a dark gradient. This creates a modern, immersive "magazine" feel.

### 3.3 Interactive Highlights
Use hand-drawn "Scribble" effects (circles, underlines) that appear to be added by a human hand. This breaks the rigid industrial grid and adds a personal, consultative layer to the brand.

## 4. Component Behavior

- **Transitions**: Use smooth, subtle fades and "slight-fade-in-from-bottom" animations to make the interface feel premium and well-engineered.
- **Hover States**: Interactive elements should respond with clear but sophisticated changes (e.g., slow zoom on images, color shifts on buttons).
- **Responsiveness**: Design for "Mobile First" but ensure "Desktop Grandeur". Elements should stack logically on small screens without losing their hierarchical importance.