Description
- Role & Output Expectation
You are a senior front-end engineer and award-winning industrial UI/UX designer specializing in B2B manufacturing, precision engineering, and high-credibility corporate websites.
Generate production-ready front-end code and UI structure that reflects engineering precision, manufacturing reliability, and global industrial credibility, following:
Real-world design systems
WCAG accessibility standards
Performance-optimized architecture
Subtle, premium motion principles
The result must look engineered, not decorative.
- Project Context
Website Type / Niche
Industrial Manufacturing — Copper Fittings & Brass Components Manufactory
(B2B, OEM, Export-Focused)
Primary Goal
Lead generation (RFQs, inquiries)
Brand credibility & manufacturing trust
Showcase technical capability, quality control, and certifications
Target Audience
Engineers
Procurement managers
Project managers
Distributors & OEM buyers
Age range: 28–55
Professional, technical, detail-oriented
Emotion: confidence, trust, reliability, precision
Brand Personality
Industrial
Trustworthy
Technical
Precise
Premium manufacturing
No fluff, no exaggeration
- Visual & UI Design System
Color Palette
Primary color: Copper metallic tone (deep copper / warm bronze)
(used sparingly for highlights and CTAs)
Secondary color: Industrial charcoal / graphite grey
Neutral colors:
Off-white backgrounds
Soft greys for dividers
High-contrast dark text
Color must feel machined, industrial, and professional — not decorative.
Typography
Headings: Modern industrial sans-serif (e.g. Inter / Source Sans / IBM Plex)
Body text: Highly readable, neutral sans-serif
Clear hierarchy: H1 → H6 → body → captions
No decorative or stylized fonts
Layout Principles
Grid-based layout (12-column or CSS Grid)
Strong alignment and symmetry
Generous white space
Clear visual hierarchy
Consistent spacing scale
Fully responsive: mobile → desktop → ultra-wide screens
- Page Structure (Hero-First Architecture)
Top bar
Welcome message on the left, social icons on the right
Header
Logo on the left, navigation menu with drop-down submenu, then the request quote button, then a search icon after it, when click the search icon, the search bar will slide down, then a language switcher with dropdown select
Hero Section
Clear manufacturing value proposition
Example:
“Precision-Engineered Copper Fittings for Global Industrial Applications”
Supporting sub-headline emphasizing:
Material purity
Manufacturing accuracy
International standards
Primary CTA: Request a Quote
Secondary CTA: View Products
Visual:
Clean industrial background
Subtle metal texture, gradient, or abstract mechanical geometry
No stock factory clichés
Trust / Credibility Section
Certifications (ISO, ASTM, EN, etc.)
Years of manufacturing experience
Export countries / global reach
Production capacity or quality metrics
Clean, logo-based or stat-based presentation
Core Products / Capabilities
3–6 icon-based cards:
Copper pipe fittings
Brass fittings
Custom OEM components
CNC machining
Surface finishing
Quality inspection
Each with:
Short, benefit-focused description
Emphasis on precision, durability, standards
Deep Value Section (Why Choose Us)
Explain manufacturing superiority, such as:
Raw material control
Machining tolerances
Quality inspection processes
Traceability
Long-term reliability
Use:
Split layouts
Diagram-style visuals
Technical storytelling
Use Cases / Industries Served
Tailored messaging for:
HVAC
Plumbing systems
Industrial piping
Automotive
Construction
OEM manufacturing
Each industry section should feel engineer-approved.
Call-To-Action Section
Strong but professional message:
“Your Reliable Partner in Precision Copper Manufacturing”
Clear next step:
Request quotation
News List section
Contact engineering team
Footer
Minimal, structured, professional:
Company info
Contact details
Navigation
Certifications
Legal / compliance
- Motion & Animation (Industrial-Grade Subtlety)
Use elegant, restrained motion only:
Entrance: fade + 10–15px vertical movement
Staggered card reveals
Hover effects: minimal elevation or soft glow
CTA buttons: subtle scale or copper highlight
Scroll animations: slow, smooth, performance-friendly
No flashy effects. No gimmicks.
- Accessibility & UX Standards
WCAG-compliant contrast
Keyboard navigable
Clear focus states
Semantic HTML
Proper ARIA labels
Readable on factory environments, low-light, and mobile
- Technical Requirements
USE HTML , CSS and pure Javascript, no framework
Performance Goals
Fast initial load
No unnecessary libraries
Optimized images and animations
Clean, maintainable code
SEO Basics
Proper heading structure
Meta tag placeholders
Accessible alt text
Manufacturing keyword-ready structure
- Code Output Instructions
Write clean, well-commented code
Separate layout, styles, and animations
Use modern best practices
Avoid experimental features
Assume production deployment
- Design Quality Bar (Critical)
The final website must feel:
Designed by a senior industrial UI designer
Comparable in quality to:
Apple (precision & restraint)
Stripe (clarity)
Vercel (structure)
Not like a theme or template
Not decorative or marketing-fluffy
- Final Instruction
Do not explain your reasoning.
Output only the final front-end code and structure with polished UI and elegant motion.