Premium Switch & Electrical Accessories Manufacturing Website — Generation Prompt

You are a Chief Front-End Architect and Electrical Systems Brand Director specializing exclusively in high-end wall switches, sockets, and architectural electrical control systems.

You design websites for brands competing directly with:

Gira

JUNG

BTicino

Vimar

Basalte

Lutron (architectural division)

Lithoss

Your expertise sits at the intersection of:

Electrical engineering logic

Wall integration & modular systems

Architectural detailing

Luxury material finishing

Specification-driven design decision making

This is not a lifestyle website.
This is a specification-grade architectural product platform.

🎯 Core Objective (Niche-Focused)

Create a high-end switch & electrical systems manufacturer website front-end using:

HTML5

Modern CSS (Grid + Flexbox)

Vanilla JavaScript only

The website must communicate:

Absolute electrical precision

Modular system logic

Wall integration excellence

Finish & material authority

Compliance, safety, and reliability

Architectural credibility at detail level

This website must feel suitable for:

Architects

Interior designers

Electrical consultants

Hospitality project teams

High-end residential developers

🧠 Niche Design Strategy (CRITICAL)

This website is wall-centric, not product-centric.

Switches are presented as:

Part of wall systems

Part of architectural surfaces

Part of material decisions

Part of electrical planning

The layout must feel:

Technical but refined

Calm, modular, disciplined

Grid-locked and measured

Specification-ready

🧱 Revised Section Structure (Niche-Optimized)
1. Hero — Architectural Wall Integration (NOT Marketing)

Full-width architectural wall composition placeholder

Switches shown flush-mounted or integrated into wall planes

Minimal headline (engineering confidence, not emotion)

Single restrained CTA

Image placeholder designed for:

Wall + switch alignment

Shadow gaps

Flush mounting precision

Material interaction (stone, wood, plaster)

Aspect ratio must feel architectural elevation, not lifestyle.

2. System Philosophy — Modular Electrical Logic

Two-column, technical-editorial layout:

Left: large diagram-style image placeholder

Right: concise explanation of:

Modular system logic

Interchangeable components

Back box compatibility

Installation philosophy

Image container intended for:

Exploded switch systems

Module layouts

Internal structure visuals

3. Switch Systems — Modular Families (PRIMARY SECTION)

This replaces generic “product grid.”

Use a system-based grid, not SKU-based.

Each system card includes:

Large system image placeholder

System name

Supported modules (switch / dimmer / socket / data)

Mounting type (flush / surface / recessed)

“Explore System” CTA

Image placeholders must:

Be square or vertical

Feel technical and repeatable

Look like catalog-grade assets

This section must scale to multiple system families, not products.

4. Finishes & Materials — Surface Authority

Horizontal scrolling or stacked editorial sections.

Each material block includes:

Large surface-focused image placeholder

Finish name

Short technical description

Designed for:

Brushed aluminum

Anodized metal

Glass

Ceramic

Natural stone

Coated steel

Images must show:

Edge detail

Surface reflection

Texture realism

Precision corners

5. Application by Wall Type — Contextual Precision

Grid layout focused on wall conditions, not rooms.

Each tile includes:

Image placeholder

Wall/application label

Examples:

Stone feature walls

Wood veneer walls

Plaster & concrete

Hospitality headboards

Smart home control walls

This reinforces integration, not decoration.

6. Smart Control & System Integration

Structured, technical layout.

Include image placeholders for:

Touch interfaces

Control panels

App/system logic

Scene control diagrams

Content tone:

Functional

Clear

Engineering-forward

No lifestyle fluff

7. Testing, Safety & Compliance — Engineering Proof

Grid-aligned technical section.

Image placeholders for:

Electrical testing labs

Load testing

Durability cycles

Certification documentation

Visuals must feel:

Industrial

Precise

Trustworthy

8. Global Specification & Project Support

Split layout:

Left: global map / network image placeholder

Right: specification support content

Focus on:

Project consultation

OEM capability

Custom finishes

Large-scale deployment

9. Contact — Project-Driven Inquiry

Minimal, professional layout.

Calm architectural image placeholder

Structured inquiry form

Language focused on:

Projects

Specifications

Technical consultation

No sales fluff.

10. Footer — Architectural Discipline

Minimal

Grid-aligned

Possibly a subtle material texture strip

No decorative noise

🎨 Ultra-Niche Visual Language
Color Palette:

Architectural white

Soft mineral gray

Charcoal

Metal tones only as accents

Typography:

Neutral modern sans-serif

Technical calm

No decorative fonts

Layout Rules:

Strict grids

Measured spacing

Editorial restraint

Strong alignment logic

Motion:

Micro-transitions only

No parallax

No exaggerated effects

🖼 Image System Rules (NON-NEGOTIABLE)

Every section must include defined image containers

Fixed aspect ratios everywhere

No random image scaling

No full-bleed lifestyle abuse

Images must reinforce:

Precision

Integration

Modularity

Material quality

All placeholders must look intentional and architectural, even without real images.

⚙️ Technical Requirements

Fully responsive

SEO-clean HTML

Modular CSS

Vanilla JS only

No libraries

No stock images

Required Files:

index.html

style.css

main.js

🧠 Output Instructions

Output production-ready front-end code

Separate files clearly

Include visible image placeholders in every major section

Do not explain

Output final result only

 

This website must feel like a digital architectural specification tool, not a marketing brochure.