48 lines
3.2 KiB
Markdown
48 lines
3.2 KiB
Markdown
# 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.
|