Premium Apparel Website Build

# Design and Build a Luxury Apparel Website: QRIOSITY

## 1. Brief

**Brand:** QRIOSITY
**Tagline (starter copy, replaceable):** Fashion for Curious Minds.

QRIOSITY is a high-end apparel line. The website must feel classic, elegant, and quietly confident from the first click. Quality should be communicated through restraint: balanced typography, generous space, tasteful motion, and close-up imagery of fabric and craft.

**Scope:** Three pages only: **Home, Catalog, Contact.** Every detail should reflect a luxury brand.

**Client-supplied assets:** Logo files, brand palette, and starter copy. Use them as given. Where anything is missing, use clearly marked placeholders.

---

## 2. Art Direction

**Reference mood:** Heritage fashion houses and modern luxury maisons. Think quiet editorial elegance: refined, unhurried, and precise.

**Avoid:** Loud streetwear energy, gradients, drop shadows, stock-photo feel, clutter, gimmicky effects, and anything that looks like a template.

### Color
Use the client's brand palette. If none is supplied, default to:

| Token | Value |
|---|---|
| Ivory (background) | `#F6F2EA` |
| Ink (text) | `#111111` |
| Warm grey (secondary) | `#8C867C` |
| Accent (gold or deep burgundy, one only) | `#A88B4A` |

The accent is used sparingly: thin rules, hover states, small details, under 5% of any screen.

### Typography
- **Headings:** An elegant high-contrast serif (e.g. Cormorant Garamond, Playfair Display, or similar) in light to regular weight, with generous letter-spacing on small caps.
- **Body/UI:** A clean, refined sans (e.g. Jost, Inter, or similar), 15–17px, 1.7 line-height.
- **Labels and navigation:** Small uppercase, +0.12em tracking.
- Fluid `clamp()` sizing, with a clear hierarchy and no more than two typefaces.

### Layout
- Balanced, symmetrical-leaning composition, wide margins, and generous vertical rhythm (120–180px between desktop sections, 72–96px on mobile).
- Hairline 1px dividers and consistent alignment throughout.
- Full-bleed imagery used sparingly for emphasis.

### Motion (tasteful, never showy)
- Slow fades and gentle upward reveals (600–900ms, `cubic-bezier(0.22, 1, 0.36, 1)`).
- Soft image transitions and a refined link-underline effect.
- Fully respect `prefers-reduced-motion`. No motion may slow the site or block interaction.

### Photography
High-resolution, natural-light, editorial imagery with an emphasis on fabric texture, stitching, drape, and detail. Use neutral placeholders until real photography is supplied, and never imply a placeholder is the brand's own.

---

## 3. Pages

### 3.1 Home: a refined landing experience
- **Header:** Logo centered or left, minimal navigation (Home, Catalog, Contact). Transparent over the hero, turning solid ivory with a subtle blur on scroll. Clean mobile menu.
- **Hero:** Full-screen, image-led, with a restrained headline and a single understated CTA to the Catalog. Slow, subtle image motion (a soft zoom or fade).
- **Brand statement:** A short, centered editorial block in serif type (starter copy supplied by the client).
- **Featured pieces:** Three to four items from the catalog in a refined layout, linking to the Catalog page.
- **Craftsmanship moment:** One image-and-text section highlighting material and detail (fabric close-up plus short copy).
- **Footer:** Logo, short tagline, navigation, social icons, copyright.

### 3.2 Product Catalog: visual storytelling first
- **Layout:** Elegant grid or masonry with consistent spacing and high-quality imagery. No filtering and no review modules.
- **Zoom/hover:** A smooth, fluid zoom on hover (desktop) and tap-to-expand or pinch-zoom (mobile), so fabric texture and stitching can be appreciated up close. Zoom must stay sharp with no pixelation, using high-resolution source images loaded on demand.
- **Product details:** Image, name, and short description. Price and an optional "Enquire" link are included if the client wants them.
- **Easy updates:** Each product is managed through the CMS with name, images, description, and display order.

### 3.3 Contact Us
- **Form:** Concise and on-brand with name, email, subject, and message. Includes inline validation, a spam-protection measure (e.g. honeypot or reCAPTCHA), clear success and error states, and delivery to the client's email.
- **Location map:** An embedded map (e.g. Google Maps) styled to suit the brand where possible.
- **Social icons:** Clean, minimal icons linking only to active profiles.
- **Details:** Email, phone, and address, as supplied by the client.

---

## 4. Platform and CMS
Use the platform you're most comfortable with (WordPress, Shopify, or a framework with a headless CMS), as long as **adding or editing a product later is effortless for a non-technical owner.** Adding a product should take no more than a simple form: upload images, add a title and description, and publish. Also make key page content (hero text, brand statement, contact details, social links) editable without touching code.

---

## 5. Technical Requirements
- **Responsive:** Mobile-first, and flawless on modern desktop and mobile browsers.
- **Accessibility:** Semantic HTML, WCAG AA contrast, keyboard navigation, visible focus states, and alt text on all images.
- **Performance:** Optimized WebP/AVIF images with responsive `srcset`, lazy loading below the fold, font subsetting, minimal JavaScript, and a target of Lighthouse 90+ on mobile.
- **On-page SEO:** Unique title and meta description per page, Open Graph and Twitter card tags, a clean heading hierarchy, a sitemap, robots.txt, a favicon, and descriptive image alt text.
- **Security:** No exposed keys; secrets kept in environment variables; HTTPS enforced.
- **Integrity:** No fake reviews, testimonials, sales numbers, or scarcity claims.

---

## 6. Process and Deliverables
1. **Design mock-ups** for all three pages (desktop and mobile) for approval before the build.
2. **Responsive front-end build** with CMS integration.
3. **SEO setup and page-speed optimization** before hand-off.
4. **Live site**, deployed.
5. **Zipped source/theme files.**
6. **Clear written instructions** for adding and editing products in the future.

---

## 7. Acceptance Criteria
1. The site renders perfectly on modern desktop and mobile browsers.
2. Catalog images load in web-optimized formats and zoom fluidly without pixelation.
3. All text, links, and forms are proofread and fully functional.
4. The final handover includes the live site, zipped source/theme files, and clear instructions for future product additions.

**Final standard:** An online presence worthy of a premium fashion label: calm, precise, and unmistakably luxurious.