Description
Luxury Tea Manufactory – Corporate Website Generator
You are a senior front-end architect and luxury brand UI/UX designer with deep expertise in heritage manufacturing, premium food & beverage brands, and corporate B2B websites.
Your task is to generate a production-ready front-end corporate website for a luxury tea manufactory. Use HTML, CSS, and JavaScript in separate files; don’t use any JavaScript framework.
The output must reflect heritage, authority, restraint, and quiet luxury.
This is a corporate brand website, not an e-commerce store and not a startup landing page.
NON-NEGOTIABLE QUALITY BAR
The design must feel timeless, not trendy
Comparable to heritage European luxury brands
Calm, editorial, museum-like composition
No template layouts
No flashy visuals
No startup aesthetics
No exaggerated animations
If the result feels generic, loud, playful, or marketing-driven, it has failed.
BRAND CONTEXT (FIXED)
Industry: Luxury Tea Manufactory / Tea Processing & Export
Business Type: Corporate / B2B / Heritage Brand
Primary Objectives:
Establish long-term credibility
Communicate craftsmanship and scale
Attract global distributors and partners
Position the brand as authoritative and refined
Target Audience:
International tea buyers
Luxury hospitality groups
Corporate procurement teams
Industry professionals and connoisseurs
BRAND PERSONALITY (ENFORCE STRICTLY)
Calm
Cultured
Heritage-driven
Meticulous
Natural
Quietly luxurious
Confident but restrained
Explicitly avoid:
Bright colors
Playful language
Sales hype
“Startup” UI patterns
Over-animation
Trend-driven design elements
VISUAL DESIGN SYSTEM (MANDATORY)
Color Language
Deep tea green
Aged charcoal
Warm off-white / parchment tones
Subtle brass or copper accents (very limited)
Muted earth tones only
Typography
Headings: editorial serif with heritage character
Body: neutral, highly readable sans-serif
Clear hierarchy with generous spacing
No decorative or novelty fonts
Layout Philosophy
Editorial and corporate
Strong negative space
Grid-based structure
Slow visual rhythm
Balanced symmetry with restrained asymmetry
REQUIRED SITE STRUCTURE
Generate a single cohesive corporate website with the following sections in this logical order:
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
Philosophical, non-sales headline
Subheadline explaining manufactory expertise
Single dignified CTA (e.g. “Corporate Inquiries”)
Subtle background texture or natural gradient
Heritage & Legacy
Narrative storytelling
Years of experience, origin, lineage
Calm, archival tone
Manufactory & Craftsmanship
Step-based tea processing explanation
Emphasis on precision, quality control, scale
Balance of tradition and modern engineering
Featured Products
Use two rows and four columns grid
Sustainability & Responsibility
Ethical sourcing
Environmental stewardship
Certifications displayed quietly
Corporate Capabilities
Export markets
Production capacity
Private labeling
Custom blending
Quality assurance standards
Global Presence & Partnerships
Geographic reach
International positioning
Professional, restrained visuals
Corporate Call-to-Action
Minimal, dignified CTA
Focus on long-term collaboration
No urgency or sales language
News section
Footer
Formal structure
Corporate contact details
Certifications and legal information
MOTION & INTERACTION RULES (STRICT)
Motion must be nearly invisible and intentional.
Allowed:
Slow fade-in + subtle vertical movement (8–16px)
Gentle staggered reveals
Soft hover transitions
Forbidden:
Bounce, elastic, or playful motion
Parallax overload
Fast or dramatic animations
Motion should feel:
✔ Calm
✔ Museum-like
✔ Premium
✔ Effortless
ACCESSIBILITY & USABILITY
WCAG-compliant contrast
Keyboard navigation
Clear focus states
Large readable typography
Motion must never distract
TECHNICAL OUTPUT REQUIREMENTS
Front-end only
Use modern best practices
Clean, semantic HTML
Maintainable CSS
Lightweight JavaScript if needed
SEO-ready structure
Performance-optimized assets
Should include all the images from Unsplash
OUTPUT INSTRUCTIONS (CRITICAL)
Output only the final front-end code and structure
Do not explain decisions
Do not include commentary
Use calm, corporate language throughout
The result must feel ready for a real heritage tea manufactory
FINAL OVERRIDING DIRECTIVE
Design with editorial restraint, heritage confidence, and quiet luxury.
Nothing trendy. Nothing loud. Nothing unnecessary.