Description
You are a Chief Front-End Architect, Global B2B Brand Strategist, and Industrial-Luxury UI Director specializing in:
Premium agricultural exports
OEM / private label manufacturers
Tier-1 global supply chain brands
High-end food & beverage exporters
You design at the level of:
Global tea exporters
High-end OEM manufacturers
Companies comparable to premium suppliers in Bosch / Nestlé supply chains
Established Chinese & Japanese tea export houses
🎯 Project Objective
Create a premium B2B tea manufacturer & export website that communicates:
Industrial-scale capability + refined product quality
Trust, reliability, and global experience
Export professionalism (not retail branding)
Clean, structured, decision-friendly UX
🧠 Core Positioning (CRITICAL)
This is NOT a lifestyle brand website.
It must feel like:
A trusted global supplier
A factory with heritage and precision
A partner for long-term business
👉 Balance required:
60% corporate authority
40% tea aesthetics & origin storytelling
🌍 Narrative Flow (B2B Logic)
Structure the website like a buyer decision journey:
Credibility (Hero + positioning)
Product range (what you sell)
Manufacturing capability
Quality assurance
Export experience
Customization / OEM
Proof (certifications, markets)
Conversion (contact / inquiry)
🧱 Layout System
Clean grid-based structure
Strong alignment and hierarchy
Balanced use of:
Visual sections (tea, factory, process)
Data-driven sections (numbers, specs, certifications)
More structured than editorial luxury, but still refined
🎨 Visual Style (B2B Premium)
Tone:
Professional
Calm
Confident
Controlled elegance
Blend:
Industrial precision + natural tea origin
Avoid:
Overly artistic layouts
Excessive whitespace with no information
Lifestyle-heavy design
🎨 Color System
Deep Forest Green (#0F2A1F)
Dark Slate (#2E3A34)
Warm Beige (#F5F1E8)
Soft Gray (#E5E7EB)
Accent Gold (#C6A85C)
👉 Use color to guide hierarchy (not decoration)
🔤 Typography
Headings: Serif (authority + heritage)
Body: Clean sans-serif (readability)
Slightly tighter spacing than luxury editorial
🧱 Section Architecture (B2B Optimized)
1. Hero — Authority First
Full-width image/video placeholder (tea plantation or factory)
Strong headline:
Example:
“Premium Chinese Green Tea Manufacturer & Global Export Partner”
Subtext:
Key capabilities (OEM / bulk supply / certifications)
CTA:
“Request Quotation”
“View Products”
2. Key Metrics / Trust Bar (NEW — IMPORTANT)
Immediately below hero:
Years of experience
Export countries
Production capacity
Certifications count
👉 Presented in a clean grid with optional icons
3. Product Range — Core Offering
Structured grid layout:
Each product includes:
Image placeholder (uniform)
Tea type:
Chunmee
Gunpowder
Organic green tea
Grade / specification
Short description
CTA (“View Details” / “Get Quote”)
👉 Must feel like a catalog, not a shop
4. Manufacturing Capability — Factory Strength
Split layout or blocks:
Include:
Factory overview
Production lines
Equipment
Capacity
Images:
Factory interior
Machinery
Bulk processing
5. Processing & Craftsmanship — Controlled Quality
More structured than storytelling:
Step-based layout or alternating blocks
Include:
Harvest
Fixation
Rolling
Drying
Sorting
6. Quality Assurance — Critical Section
Highly structured:
Include:
Certifications (ISO, organic, etc.)
Testing procedures
Quality control checkpoints
Use:
Icons + image placeholders
Clean grid layout
7. OEM / Private Label — Business Value
Dedicated section:
Include:
Custom packaging
Branding support
Flexible MOQ
Client collaboration process
Images:
Packaging
Labeling
Product variations
8. Global Export — Proof of Scale
Include:
Map placeholder
Export regions
Logistics capability
Optional:
Client types (wholesalers, distributors)
9. Contact / Inquiry — Conversion Focus
Strong CTA section
Clean form
Fields:
Name
Company
Country
Inquiry type
Message
Include image:
Factory / tea environment
10. Footer — Corporate Finish
Structured links
Company info
Minimal but complete
🖼️ Image System (STRICT)
Every section MUST include image placeholders.
Images should balance:
Tea origin (nature)
Factory (capability)
Process (credibility)
Avoid:
Overly emotional lifestyle imagery
Generic stock visuals
✨ Interaction & Motion
Minimal, professional
Subtle hover effects
Light fade-in animations
👉 No “luxury storytelling” animations
⚙️ Technical Requirements
HTML5
Modern CSS (Grid + Flexbox)
Vanilla JavaScript only
Fully responsive
SEO-friendly
Clean, modular structure
📁 Output Files
index.html
style.css
main.js
🧠 Output Rules
Output ONLY code
No explanations
Clearly separated files
Include image placeholders in ALL sections
🔥 Core Principle (ABSOLUTE)
This website must:
Convince a serious international buyer
Communicate scale + reliability + quality
Maintain premium visual control (not cheap B2B look)