wip

docs/STYLEGUIDE.md

@@ -0,0 +1,46 @@
+# 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.