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-o