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.
Saturated Blue (#011dff): A high-intensity blue used for specific high-impact accents and digital-first elements.
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.

3.2 KiB Raw Blame History