Fashion Boutique Theme

Brand Voice: Modern, sophisticated, confident, feminine, editorial Target Feel: High-end fashion magazine meets accessible boutique

Usage

Apply phases in order:

• "Apply fashion-styling phase 1" → Foundation

• "Apply fashion-styling phase 2" → Layout

• "Apply fashion-styling phase 3" → Homepage & Products

• "Apply fashion-styling phase 4" → Cart, Checkout & Auth

• "Apply fashion-styling phase 5" → Dashboard & Static Pages

Clear context between phases if needed.

Phase 1: Foundation

Files:

src/app/globals.css src/lib/fonts.ts tailwind.config.ts

Colors (globals.css)

Add these CSS variables:

Name HSL Role

blush 350 60% 75% Primary accent

champagne-gold 45 50% 70% Secondary accent

soft-ivory 40 30% 98% Background

pearl 40 20% 96% Card backgrounds

midnight 220 25% 15% Text, dark sections

whisper-pink 350 40% 95% Subtle backgrounds

wine 350 50% 35% Sale, errors

stone 30 10% 50% Secondary text

Fonts (fonts.ts)

Role Font Usage

Primary Cormorant Garamond Headings, titles

Secondary Inter Body, buttons

Tailwind Config

• Map all color variables

• Set border-radius to 2px (minimal rounding)

• Add font-primary and font-secondary

CSS Utilities (globals.css)

.text-gradient-fashion { background: linear-gradient(135deg, hsl(350 60% 65%), hsl(45 50% 70%), hsl(350 60% 75%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.shimmer-fashion { background: linear-gradient(110deg, transparent 20%, hsl(45 60% 85% / 0.3) 40%, hsl(350 60% 90% / 0.4) 50%, hsl(45 60% 85% / 0.3) 60%, transparent 80%); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; }

Phase 2: Layout & Navigation

Files:

src/components/Navigation/StickyNavbar.tsx src/components/Navigation/Navbar.tsx src/components/Navigation/NavbarLinks.tsx src/components/Navigation/MobileLinks.tsx src/components/Navigation/CustomerDropdown.tsx src/components/Footer.tsx src/app/(auth)/(dashboard)/layout.tsx

Styling Rules

Backgrounds: bg-soft-ivory or bg-pearl

Text: text-midnight headings, text-midnight/70 body Borders: border-blush/20 or border-stone/20

Hovers: Transition to blush or champagne-gold

Navigation Pattern

{/* Link with underline animation */} <a className="relative font-secondary text-sm text-midnight hover:text-blush transition-colors"> Link Text <span className="absolute bottom-0 left-1/2 w-0 h-[1px] bg-blush transition-all duration-300 group-hover:w-full group-hover:left-0" /> </a>

Footer Pattern

<footer className="bg-soft-ivory border-t border-blush/20"> <div className="h-[1px] bg-gradient-to-r from-transparent via-blush/30 to-transparent" /> {/* Content */} </footer>

Dashboard Sidebar

<aside className="bg-pearl border border-blush/10 p-6"> <h2 className="font-primary text-xl text-midnight mb-4">My Account</h2> <div className="h-[1px] bg-gradient-to-r from-blush/40 to-transparent mb-4" /> {/* Nav links */} </aside>

Phase 3: Homepage & Products

Files:

src/app/(storefront)/page.tsx src/components/Hero.tsx src/components/subtitle.tsx src/components/Homepage/CategorySection.tsx src/components/Homepage/AboutMeSection.tsx src/components/Product/ProductCarousel.tsx src/components/ProductCard.tsx src/components/PriceDisplay.tsx src/components/ImageSlider.tsx src/components/imageSliderWithZoom.tsx src/components/Product/ProductDetail.tsx src/components/Product/WishlistButton.tsx src/components/Product/Breadcrumbs.tsx src/components/Product/SortOptions.tsx src/components/Product/Pagination.tsx src/app/(storefront)/products/[...slug]/page.tsx src/app/(storefront)/product/[slug]/page.tsx

Section Header Pattern

<div className="flex items-center justify-center gap-4 mb-6"> <div className="w-16 h-[1px] bg-gradient-to-r from-transparent to-blush/60" /> <div className="w-2 h-2 rounded-full border border-blush/60" /> <div className="w-16 h-[1px] bg-gradient-to-l from-transparent to-blush/60" /> </div> <h2 className="text-3xl md:text-4xl font-primary text-midnight text-center"> Section Title </h2>

Hero Pattern

<section className="relative min-h-[70vh] bg-soft-ivory"> {/* Image with overlay */} <div className="absolute inset-0 bg-gradient-to-t from-midnight/40 via-transparent to-transparent" />

<div className="relative z-10"> <h1 className="text-5xl md:text-7xl font-primary text-soft-ivory tracking-tight"> Headline </h1> <button className="px-8 py-4 bg-soft-ivory text-midnight font-secondary text-sm tracking-wider uppercase hover:bg-blush transition-colors"> Shop Now </button> </div> </section>

Product Card Pattern

<div className="group relative bg-soft-ivory overflow-hidden"> {/* Image */} <div className="aspect-[3/4] overflow-hidden"> <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" /> </div>

{/* Sale badge */} <span className="absolute top-3 left-3 px-2 py-1 bg-wine text-soft-ivory text-xs font-secondary uppercase"> -30% </span>

{/* Wishlist button */} <button className="absolute top-3 right-3 p-2 bg-soft-ivory/80 text-midnight hover:text-blush transition-colors"> <Heart className="w-5 h-5" /> </button>

{/* Content */} <div className="p-4"> <h3 className="font-primary text-lg text-midnight">Product Name</h3> <p className="text-sm font-secondary text-stone">Brand</p> <div className="mt-2 flex items-center gap-2"> <span className="font-secondary text-midnight">€99.00</span> <span className="font-secondary text-stone line-through text-sm">€129.00</span> </div> </div> </div>

Category Card Pattern

<a className="group relative aspect-[3/4] overflow-hidden"> <img className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" /> <div className="absolute inset-0 bg-gradient-to-t from-midnight/70 via-midnight/20 to-transparent" /> <div className="absolute bottom-6 left-6"> <h3 className="font-primary text-2xl text-soft-ivory">Category</h3> <span className="text-sm font-secondary text-soft-ivory/70">24 products</span> </div> </a>

Phase 4: Cart, Checkout & Auth

Files:

src/app/(storefront)/cart/page.tsx src/components/Cart/Cart.tsx src/components/Cart/CartItem.tsx src/components/Cart/CartPage.tsx src/components/Cart/AddToCartButton.tsx src/components/Cart/CheckoutButton.tsx src/components/Cart/CampaignAddedCartItems.tsx src/components/Checkout/CheckoutSteps.tsx src/components/Checkout/CustomerDataForm.tsx src/components/Checkout/SelectShipmentMethod.tsx src/components/Checkout/StripeCheckoutPage.tsx src/components/Checkout/PaytrailCheckoutPage.tsx src/components/Checkout/PaytrailPaymentSelection.tsx src/app/(storefront)/payment/success/[orderId]/page.tsx src/app/(auth)/login/page.tsx src/app/(auth)/register/page.tsx src/components/Auth/Loginform.tsx src/components/Auth/RegisterForm.tsx src/components/Auth/ForgotPasswordForm.tsx src/components/Auth/ResetPasswordForm.tsx

Button Patterns

{/* Primary CTA */} <button className="w-full px-8 py-4 bg-midnight text-soft-ivory font-secondary text-sm tracking-wider uppercase transition-all duration-300 hover:bg-blush hover:text-midnight"> Add to Cart </button>

{/* Secondary */} <button className="px-8 py-4 border border-midnight/30 text-midnight font-secondary text-sm tracking-wider uppercase hover:border-blush hover:bg-blush/10 transition-all"> Continue Shopping </button>

Form Input Pattern

<div className="space-y-2"> <label className="text-sm font-secondary text-midnight">Email</label> <input className="w-full px-4 py-3 bg-pearl border border-stone/20 text-midnight placeholder:text-stone/50 focus:outline-none focus:ring-2 focus:ring-blush/50 transition-all" /> </div>

Card with Corner Accents

<div className="group relative bg-soft-ivory p-6"> {/* Border */} <div className="absolute inset-0 border border-blush/10 pointer-events-none group-hover:border-blush/25 transition-colors" />

{/* Corner accents */} <div className="absolute top-0 left-0 w-4 h-4 border-l border-t border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" /> <div className="absolute top-0 right-0 w-4 h-4 border-r border-t border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" /> <div className="absolute bottom-0 left-0 w-4 h-4 border-l border-b border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" /> <div className="absolute bottom-0 right-0 w-4 h-4 border-r border-b border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />

{/* Content */} </div>

Checkout Steps Pattern

<div className="flex items-center justify-center gap-4"> {/* Completed step */} <div className="w-8 h-8 rounded-full bg-blush text-midnight flex items-center justify-center"> <Check className="w-4 h-4" /> </div>

{/* Line */} <div className="w-12 h-[1px] bg-blush/50" />

{/* Current step */} <div className="w-8 h-8 rounded-full border-2 border-blush text-midnight flex items-center justify-center font-secondary text-sm"> 2 </div>

{/* Line */} <div className="w-12 h-[1px] bg-stone/30" />

{/* Future step */} <div className="w-8 h-8 rounded-full border border-stone/30 text-stone flex items-center justify-center font-secondary text-sm"> 3 </div> </div>

Toast Styling

{/* Success */} className="bg-blush/10 border border-blush/30 text-midnight"

{/* Error */} className="bg-wine/10 border border-wine/30 text-wine"

Phase 5: Dashboard & Static Pages

Files:

src/app/(auth)/(dashboard)/mypage/page.tsx src/app/(auth)/(dashboard)/myorders/page.tsx src/app/(auth)/(dashboard)/mywishlist/page.tsx src/app/(auth)/(dashboard)/myinfo/page.tsx src/components/CustomerDashboard/EditCustomerForm.tsx src/app/(storefront)/about/page.tsx src/components/Aboutpage/AboutHero.tsx src/components/Aboutpage/AboutBlock.tsx src/components/Aboutpage/AboutCTA.tsx src/app/(storefront)/contact/page.tsx src/components/Contactpage/ContactForm.tsx src/app/(storefront)/privacy-policy/page.tsx src/app/(storefront)/terms/page.tsx src/app/(storefront)/gallery/page.tsx

Page Header Pattern

<div className="mb-8"> <div className="flex items-center gap-3 mb-2"> <div className="w-2 h-2 rounded-full border border-blush/60" /> <h1 className="text-2xl md:text-3xl font-primary text-midnight">Page Title</h1> </div> <p className="font-secondary text-midnight/60 ml-5">Page description</p> </div>

Status Badges

{/* Pending */} <span className="px-3 py-1 bg-champagne-gold/20 text-midnight border border-champagne-gold/40 text-xs font-secondary uppercase"> Pending </span>

{/* Paid/Success */} <span className="px-3 py-1 bg-blush/20 text-midnight border border-blush/40 text-xs font-secondary uppercase"> Paid </span>

{/* Shipped */} <span className="px-3 py-1 bg-blush/30 text-midnight border border-blush/50 text-xs font-secondary uppercase"> Shipped </span>

Empty State Pattern

<div className="relative bg-soft-ivory p-12 text-center"> {/* Border */} <div className="absolute inset-0 border border-blush/10 pointer-events-none" />

{/* Corner accents */} <div className="absolute top-0 left-0 w-8 h-8 border-l border-t border-blush/30" /> <div className="absolute top-0 right-0 w-8 h-8 border-r border-t border-blush/30" /> <div className="absolute bottom-0 left-0 w-8 h-8 border-l border-b border-blush/30" /> <div className="absolute bottom-0 right-0 w-8 h-8 border-r border-b border-blush/30" />

<Icon className="w-16 h-16 text-midnight/20 mx-auto mb-6" /> <h3 className="text-xl font-primary text-midnight mb-3">No items yet</h3> <p className="text-sm font-secondary text-midnight/60 mb-6">Description text</p> <a href="/products" className="inline-flex px-8 py-3 bg-midnight text-soft-ivory font-secondary text-sm tracking-wider uppercase hover:bg-blush hover:text-midnight transition-all"> Start Shopping </a> </div>

About Page Blocks

{/* Alternating layout */} <div className="grid md:grid-cols-2 gap-12 items-center"> <div className={reverse ? "md:order-2" : ""}> <img className="w-full aspect-[4/5] object-cover" /> </div> <div> <span className="text-xs tracking-[0.2em] uppercase font-secondary text-stone">Our Story</span> <h2 className="mt-2 text-3xl font-primary text-midnight">Headline</h2> <div className="mt-2 w-12 h-[1px] bg-gradient-to-r from-blush to-transparent" /> <p className="mt-6 font-secondary text-midnight/70 leading-relaxed">Content</p> </div> </div>

Quick Reference

Typography

font-primary → Headings (Cormorant Garamond) font-secondary → Body/buttons (Inter)

text-midnight → Dark text text-midnight/70 → Body text text-stone → Muted text text-soft-ivory → Light text (on dark bg)

Backgrounds

bg-soft-ivory → Main background bg-pearl → Cards, sections bg-midnight → Dark sections bg-blush/10 → Subtle highlight

Accents

border-blush/20 → Subtle borders border-blush/40 → Corner accents bg-blush → Hover states bg-wine → Sale badges bg-champagne-gold → Premium accents

Decorative

{/* Circle */} <div className="w-2 h-2 rounded-full border border-blush/60" />

{/* Gradient line */} <div className="h-[1px] bg-gradient-to-r from-blush/40 to-transparent" />

{/* Center line */} <div className="h-[1px] bg-gradient-to-r from-transparent via-blush/30 to-transparent" />

Checklist

• Phase 1: Foundation (3 files)

• Phase 2: Layout & Navigation (7 files)

• Phase 3: Homepage & Products (17 files)

• Phase 4: Cart, Checkout & Auth (20 files)

• Phase 5: Dashboard & Static (14 files)