Veyra — Modern Fashion E-Commerce Website

Create a complete, production-quality, visually exceptional fashion e-commerce website called Veyra using only vanilla HTML, CSS, and JavaScript.

The final website must look like a real contemporary fashion brand created by an experienced e-commerce design team.

This is NOT a generic online shop template.

The website should communicate:

• Modern fashion
• Editorial taste
• Confidence
• Minimalism
• Premium quality
• Strong visual identity
• Easy product discovery
• Excellent mobile shopping

Avoid generic marketplace styling, excessive card borders, giant rounded UI, excessive gradients, random animations, cluttered filters, and cheap-looking promotional banners.

The finished website should be convincing enough that a real independent fashion brand could replace the placeholder content and use the design professionally.

---

1. REQUIRED FILES

Create exactly:

• index.html
• style.css
• script.js

Keep all HTML in index.html.

Keep all CSS in style.css.

Keep all JavaScript in script.js.

Correctly link the files.

The website must work immediately when these three files are placed in the same directory.

No installation, compilation, package manager, framework, or development server should be required.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• Node packages
• external JavaScript libraries
• backend code
• databases
• build tools

Use inline SVG icons where appropriate.

This must remain a true static website.

---

3. BRAND IDENTITY

Brand:

VEYRA

Tagline:

Everyday pieces, considered differently.

Veyra is a fictional contemporary fashion label focused on refined essentials, modern silhouettes, neutral colors, and versatile wardrobe pieces.

The brand should feel:

• Editorial
• Modern
• Calm
• Confident
• International
• Minimal
• Premium without being flashy

Do not make it feel like a luxury jewelry brand.

Do not make it feel like a mass-market discount store.

---

4. VISUAL DIRECTION

Create a refined editorial fashion aesthetic.

Suggested palette:

• Soft white
• Warm off-white
• Charcoal
• Black
• Stone gray
• Muted taupe
• One restrained accent tone

Use black primarily for typography and contrast rather than making the entire website dark.

Let photography carry most of the visual personality.

Use:

• Strong whitespace
• Large editorial imagery
• Fine borders
• Clean typography
• Precise spacing
• Minimal controls
• Subtle motion

Avoid excessive shadows.

Avoid putting every product inside a bordered card.

---

5. TYPOGRAPHY

Typography should feel like a contemporary fashion magazine.

Use an elegant display style for:

• Campaign titles
• Collection names
• Editorial statements

Use a clean modern sans-serif style for:

• Navigation
• Product names
• Prices
• Filters
• Buttons
• Body text

Create strong hierarchy.

Use CSS clamp() for responsive typography.

Keep product metadata understated.

---

6. ANNOUNCEMENT BAR

Create a slim announcement bar.

Example:

Complimentary shipping on orders over $120

Add a small secondary message:

Easy returns within 14 days

Do not make the bar visually aggressive.

---

7. NAVIGATION

Create a polished sticky navigation.

Include:

• VEYRA logo
• New Arrivals
• Women
• Men
• Collections
• Journal

Right side:

• Search
• Account
• Wishlist
• Bag

Use inline SVG icons where appropriate.

Show a small cart count badge.

After scrolling, give the navigation a slightly elevated white background with a thin border.

---

8. MOBILE NAVIGATION

Create a premium mobile menu.

Include:

• New Arrivals
• Women
• Men
• Collections
• Journal
• Search
• Account

Also include:

• Bag
• Wishlist

Requirements:

• Accessible hamburger
• Smooth panel animation
• Escape closes menu
• Selecting link closes menu
• Body scroll locking
• Large touch targets
• Correct ARIA state

---

9. HERO CAMPAIGN

Create a visually strong fashion campaign hero.

Do NOT use a generic centered title over a plain product image.

Use an editorial split or layered composition.

Include:

Small label:

SPRING / SUMMER 2026

Main headline:

Quiet form. Strong presence.

Supporting copy:

“A study in clean lines, soft structure, and pieces made to move through everyday life.”

Primary CTA:

Shop New Collection

Secondary CTA:

View Lookbook

Use large fashion photography featuring modern minimal clothing.

---

10. HERO IMAGE DIRECTION

Use high-quality fashion placeholder imagery showing:

• Editorial clothing
• Neutral styling
• Natural light
• Minimal architecture
• Clean compositions
• Modern silhouettes

Avoid:

• Wedding dresses
• Prom dresses
• Costume fashion
• Overly flashy luxury imagery
• Generic stock-office models

Maintain consistent art direction.

---

11. CATEGORY ENTRY

Create a simple editorial category section.

Show three large visual entries:

Women

Modern wardrobe essentials.

Men

Refined everyday dressing.

Accessories

Finishing pieces with purpose.

Each category should use a large image and minimal copy.

Avoid tiny category cards.

---

12. NEW ARRIVALS

Create:

New Arrivals

Show at least 8 products.

Example products:

Structured Overshirt

$89

Relaxed Tailored Trousers

$78

Soft Rib Tank

$42

Minimal Knit Polo

$64

Wide-Leg Trousers

$82

Cropped Utility Jacket

$110

Everyday Shirt

$68

Leather Crossbody

$95

Use fictional pricing.

---

13. PRODUCT DATA

Each product should contain demo data for:

• Name
• Category
• Gender/category
• Price
• Original price where sale applies
• Color
• Available sizes
• Image
• Secondary image
• New badge
• Sale badge
• Short description
• Product code

Store the sample product data in JavaScript where practical.

Use this data for filtering, quick view, search, and cart interactions.

---

14. PRODUCT GRID

Create a sophisticated product grid.

Each item should show:

• Large product image
• Secondary image on hover where appropriate
• Product name
• Price
• Color count
• New/Sale label if applicable
• Wishlist button
• Quick View action

Do not over-containerize the product cards.

Use photography as the primary structure.

---

15. PRODUCT FILTERS

Create useful filters:

• Category
• Size
• Color
• Price
• Availability

Add sorting:

• Featured
• Newest
• Price: Low to High
• Price: High to Low

Implement everything with vanilla JavaScript using demo product data.

Do not reload the page.

---

16. MOBILE FILTER EXPERIENCE

On mobile, filters should open in a dedicated panel or drawer.

Requirements:

• Clear selected state
• Apply Filters button
• Clear All button
• Filter result count
• Accessible close control
• Body scroll lock

Do not squeeze all filters into one horizontal row.

---

17. SEARCH

Create an elegant search overlay.

When the search icon is clicked, open a search interface.

Include:

• Search input
• Suggested terms
• Product results
• Empty state

Suggested searches:

• Linen
• Jacket
• Trousers
• Black
• New Arrivals

Filter sample product data in real time.

Support Escape to close.

---

18. PRODUCT QUICK VIEW

Create an accessible Quick View modal.

Include:

• Large product image
• Secondary thumbnail images
• Product name
• Price
• Description
• Color
• Size selector
• Quantity
• Add to Bag
• Wishlist

For size options, use:

• XS
• S
• M
• L
• XL

Some products can have limited sizes.

Disable unavailable sizes visually and accessibly.

---

19. SIZE SELECTION

Require size selection before adding applicable clothing products to the bag.

If the user clicks Add to Bag without selecting a size, show a clear inline message:

Please select a size.

Do not use browser alert boxes.

---

20. CART / BAG

Create a functional frontend shopping bag drawer.

When a product is added, open or update the bag.

Show:

• Product image
• Name
• Selected size
• Color
• Quantity
• Price
• Remove button

Allow:

• Increase quantity
• Decrease quantity
• Remove item

Update:

• Cart count
• Subtotal

Use localStorage so bag state can persist across refreshes if available.

Handle localStorage failures gracefully.

---

21. CART SUMMARY

Show:

Subtotal

Shipping:

Calculated at checkout

Estimated total

Add:

Checkout

button.

Because this is a static demo, clicking Checkout should NOT pretend to process payment.

Show a polished message:

“Checkout is not connected in this demonstration storefront.”

---

22. WISHLIST

Create frontend wishlist functionality.

Allow users to:

• Save products
• Unsave products
• See active state

Persist via localStorage where possible.

Update aria-pressed.

Do not require an account.

---

23. FEATURED COLLECTION

Create a large editorial section:

The Form Collection

Heading:

Designed around movement.

Use one large campaign image and several product details.

Explain the collection using concise brand copy around:

• Structure
• Comfort
• Layering
• Neutral tones

CTA:

Explore the Collection

---

24. SHOP THE LOOK

Create:

Shop the Look

Show a full fashion look image.

Place 3–4 subtle product markers over the image.

Clicking a marker should reveal:

• Product name
• Price
• Quick add/view action

On mobile, do not rely on tiny hotspot interactions.

Provide a product list underneath the image.

---

25. EDITORIAL LOOKBOOK

Create a lookbook section with varied image sizes.

Title:

City / Light / Form

Use 6–8 editorial photographs.

Include small look numbers such as:

01 02 03

Create a premium magazine-like grid.

Clicking an image can open a simple accessible lightbox.

---

26. BESTSELLERS

Create a compact bestseller section.

Show 4 products.

Use a different layout from New Arrivals.

For example, use horizontal product cards or a larger first product.

---

27. BRAND STORY

Create:

About Veyra

Heading:

Fewer pieces. Better choices.

Write realistic brand copy explaining:

• Considered collections
• Versatile design
• Quality-focused materials
• Everyday use
• Small, focused seasonal releases

Do not make unverifiable sustainability claims.

Use a large studio/fabric image.

---

28. MATERIALS SECTION

Create:

Made to be worn often.

Show material stories such as:

• Organic-style cotton placeholder
• Linen blend
• Fine knit
• Responsible synthetic blend

Be careful with claims.

Unless verified, use phrasing such as:

“Selected for comfort, structure, and durability.”

Do not claim certifications.

---

29. STYLE JOURNAL

Create:

Journal

Add 3 editorial articles.

Examples:

Building a Smaller Wardrobe

Style Notes

Three Ways to Wear the Overshirt

How to Wear

Inside the Spring Collection

Studio

Each includes:

• Image
• Category
• Date
• Title
• Short excerpt
• Read Story link

---

30. NEWSLETTER

Create a visually strong newsletter section.

Heading:

Inside Veyra

Copy:

“New collections, studio notes, and early access.”

Field:

• Email

CTA:

Join the List

Frontend validation only.

After valid input, show:

“Email captured for this demo. No real subscription has been created.”

---

31. BENEFITS STRIP

Create a minimal service strip.

Include:

Complimentary Shipping On qualifying orders

Easy Returns Within 14 days

Secure Checkout Demo messaging only

Customer Care Monday–Friday

Do not claim a real secure payment implementation.

---

32. FOOTER

Create a refined fashion footer.

Include:

VEYRA

Tagline:

Everyday pieces, considered differently.

Columns:

Shop

• New Arrivals
• Women
• Men
• Accessories
• Collections

Help

• Delivery
• Returns
• Size Guide
• Contact

About

• Our Story
• Journal
• Materials
• Careers

Legal

• Privacy
• Terms
• Cookies

Social:

• Instagram
• TikTok
• Pinterest

Add dynamic copyright year.

---

33. JAVASCRIPT FUNCTIONALITY

Implement:

• Mobile navigation
• Search overlay
• Product search
• Product filtering
• Sorting
• Mobile filter drawer
• Product quick view
• Product image switching
• Size selection
• Quantity controls
• Add to bag
• Cart drawer
• Cart totals
• Item removal
• Wishlist
• LocalStorage persistence
• Shop-the-look interactions
• Lookbook lightbox
• Newsletter validation
• Scroll reveals
• Dynamic year

Use clean vanilla JavaScript.

---

34. PRODUCT INTERACTIONS

All product interactions should feel realistic.

Examples:

When Add to Bag is clicked:

1. Validate size if needed.
2. Add correct product variant.
3. Update bag count.
4. Update subtotal.
5. Show brief confirmation.
6. Optionally open the bag drawer.

Do not create fake server requests.

---

35. PRODUCT IMAGE INTERACTIONS

Desktop:

• Smooth primary/secondary image transition
• Subtle scale
• Quick View reveal

Mobile:

• No hover-dependent behavior
• Keep product information immediately accessible

Do not use aggressive image zoom.

---

36. EMPTY STATES

Create polished empty states.

Examples:

No search result:

Nothing matched your search. Try another term.

No filter result:

No pieces match those filters.

Empty bag:

Your bag is currently empty.

Wishlist empty:

Save pieces you want to revisit.

Do not leave blank UI.

---

37. RESPONSIVE DESIGN

Design intentionally for:

• 320px
• 375px
• 430px
• Tablet
• Laptop
• Desktop
• Large desktop

On mobile:

• Maintain strong fashion imagery
• Use 2-column product grid where space permits
• Fall back to 1 column on very small screens if needed
• Make product names/prices readable
• Use full-width cart/filter drawers
• Keep size controls touch-friendly
• Simplify editorial image overlaps
• Ensure all modals fit the viewport

No horizontal overflow.

---

38. ACCESSIBILITY

Use semantic HTML.

Ensure:

• One H1
• Logical heading order
• Meaningful alt text
• Accessible navigation
• Accessible search overlay
• Accessible filter controls
• Accessible Quick View
• Accessible cart drawer
• Keyboard-friendly wishlist controls
• Proper form labels
• Visible focus states
• Good contrast
• Correct aria-expanded
• Correct aria-pressed

Manage focus when opening modal/dialog-style interfaces where practical.

---

39. SEO

Create professional fashion brand SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add Organization structured data.

Optionally add sample Product structured data only where values are clearly demo/fictitious and technically valid.

Do not create fake ratings or reviews in structured data.

---

40. PERFORMANCE

Keep the website lightweight.

Requirements:

• No frameworks
• No external JavaScript libraries
• Lazy-load below-the-fold images
• Use stable image aspect ratios
• Avoid layout shift
• Efficient product filtering
• Efficient DOM updates
• No unnecessary animation loops
• No background video

---

41. IMAGE DIRECTION

Use high-quality remote placeholder imagery for:

• Fashion models
• Shirts
• Jackets
• Trousers
• Knitwear
• Accessories
• Fabric details
• Editorial campaigns

Keep visual direction consistent:

• Neutral
• Architectural
• Clean
• Contemporary
• Natural light
• Premium styling

Avoid random mismatched product images.

Every image should have meaningful alt text.

---

42. MOTION DIRECTION

Use restrained fashion-editorial motion.

Suitable:

• Image fade
• Soft slide
• Product hover transition
• Drawer transitions
• Quick View fade
• Text reveal
• Lightbox transition

Avoid:

• Bounce
• Spinning
• Particle effects
• Excessive parallax
• Constant floating animation

Respect prefers-reduced-motion.

---

43. CSS QUALITY

Organize CSS:

1. Variables
2. Reset
3. Base
4. Typography
5. Layout
6. Announcement
7. Navigation
8. Hero
9. Categories
10. Products
11. Filters
12. Modals
13. Bag
14. Lookbook
15. Journal
16. Newsletter
17. Footer
18. Animation
19. Responsive
20. Reduced motion

Use:

• CSS custom properties
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern responsive CSS

Avoid excessive !important.

---

44. JAVASCRIPT QUALITY

Write clean, maintainable JavaScript.

Use:

• A clear product dataset
• Reusable rendering helpers
• Reusable money formatting
• Reusable modal/drawer logic where sensible
• Safe localStorage helpers
• Missing-element guards

Do not pollute the global scope unnecessarily.

There must be no console errors.

---

45. CONTENT QUALITY

Do not use Lorem Ipsum.

Write believable fashion product descriptions and brand copy specifically for Veyra.

Avoid generic phrases like:

• Elevate your style
• Unleash your confidence
• Fashion redefined
• Luxury meets comfort
• Timeless elegance

Use restrained editorial language.

---

46. VISUAL RHYTHM

Do NOT make the entire website one giant product grid.

Use a sequence like:

Editorial hero

→ Large categories

→ New arrivals

→ Campaign statement

→ Featured collection

→ Shop the Look

→ Product grid

→ Lookbook

→ Brand story

→ Bestsellers

→ Journal

→ Newsletter

→ Footer

The experience should feel like a real fashion brand, not an admin catalog.

---

47. FINAL QUALITY CHECK

Before returning code, verify:

• All three files connect
• Mobile menu works
• Search works
• Filters work
• Sorting works
• Quick View works
• Size validation works
• Cart works
• Cart quantity works
• Subtotal updates correctly
• Wishlist works
• LocalStorage errors are handled
• Shop-the-look works
• Lightbox works
• Newsletter validation works
• All anchors work
• No undefined variables
• No console errors
• No horizontal overflow
• Mobile shopping flow is usable
• Keyboard interactions work
• Reduced motion is supported
• No prohibited dependencies are used

Fix any problems before returning the code.

---

48. FINAL OUTPUT FORMAT

Return exactly three complete code sections:

index.html

Provide the complete HTML.

style.css

Provide the complete CSS.

script.js

Provide the complete JavaScript.

Do NOT use:

“remaining code”

“continue here”

“add products”

“same pattern”

Do not provide pseudo-code.

Do not omit implementation to save response length.

Everything must be complete and immediately usable.

The final Veyra website should feel editorial, modern, commercially realistic, responsive, polished, highly visual, easy to shop, and screenshot-worthy enough to look like a real contemporary fashion e-commerce brand.