Atelier

1. COLORS — Use exactly these hex tokens: --bg: #FAFAF8 (page background, gallery warm white), --surface: #F4F1EC (bone panels, cards, newsletter and feature sections), --dark: #0A0A0A (ink black; full-bleed editorial sections, footer, primary button fill, manifesto band), --text: #0A0A0A (all body and heading ink), --muted: #6B6B6B (secondary text, nav links, captions, eyebrow labels), --border: #D8D4CD (hairline 1px dividers, card edges, form borders). Text on dark sections uses rgba(250,250,248,1) as foreground and rgba(250,250,248,0.45) for muted copy, rgba(250,250,248,0.35) for footer column headers, rgba(250,250,248,0.3) for fine print, rgba(250,250,248,0.08) for footer hairline borders. No chromatic color anywhere — high contrast and whitespace alone carry the luxury. Palette mood: austere Parisian gallery light at closing time. 2. TYPOGRAPHY — Load from Google Fonts: "Cormorant Garamond" (weights 300, 400, 500, italic variants) and "Inter" (weights 400, 500). All heading elements use Cormorant Garamond; all body, label, button, and caption text uses Inter. Sizes and specs: H1 96px / weight 300 / line-height 0.98 / letter-spacing -0.01em (italic em in the headline via <em> tag); H2 52–60px / weight 400 / line-height 1.05–1.08 / letter-spacing -0.01em; H3 28–36px / weight 400 / line-height 1.15–1.2 / letter-spacing 0; H4 22px / weight 500 / line-height 1.3 / letter-spacing 0; Body-L 19px / weight 400 / line-height 1.6; Body 15–16px / weight 400 / line-height 1.65–1.75; Eyebrow/label 11–12px / weight 500 / letter-spacing 0.12–0.16em / UPPERCASE / color --muted; Caption 11px / weight 400 / letter-spacing 0.04–0.06em. The italic <em> inside H1 and H2 is critical — it creates the high/low editorial contrast. Never use bold weights for headings; the luxury lives in lightness. 3. PAGE SECTIONS — Render sections in this exact order: sticky nav → hero (full editorial: thin rule + 3-col grid with season eyebrow and 96px H1 spanning two columns, followed by 16:7 full-bleed campaign image with italic caption bottom-right) → marquee (italic serif ticker: "SS '25 Collection · Made in France · Single-fabric construction · Available by appointment · Bespoke orders open" looping infinitely at 40s) → principles (3-column grid, each cell has a large light roman numeral I/II/III in Cormorant at 80px color --border, then H3 and 14px body) → feature alternating (bone #F4F1EC background; two rows: image left/text right, then image right/text left, each a 3:4 aspect ratio image beside italic H2 + eyebrow + body + underlined uppercase CTA link) → manifesto band (full-bleed #0A0A0A, centered italic blockquote 48px Cormorant, attribution cite in uppercase Inter 12px at rgba(250,250,248,0.4)) → editorial logos (centered Cormorant italic paragraph naming Vogue Paris, Financial Times, Colette, Dover Street Market, 10 Corso Como, Wallpaper*, Monocle) → testimonials (centered eyebrow + Cormorant H2 + single large italic pull-quote with typographic opening curly-quote character, attribution in uppercase 12px Inter) → newsletter CTA (bone #F4F1EC background, centered italic Cormorant H2 "Only what is worth saying", short body, single-border email form: input + black button joined in one rectangle) → footer (full-bleed #0A0A0A, 3-column grid: brand column 2fr + two link columns 1fr each). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The oversized Cormorant Garamond display headline at 96px weight 300, with one word wrapped in <em> for italic contrast, is the single defining element of this aesthetic. It sits in a 3-column hero grid at desktop: column 1 holds the season eyebrow stack, columns 2–3 (grid-column: span 2) hold the H1. CSS: font-family: 'Cormorant Garamond', Georgia, serif; font-size: 96px; font-weight: 300; line-height: 0.98; letter-spacing: -0.01em; color: #0A0A0A. No border-radius, no shadow, no backdrop-filter — the editorial type is entirely flat. Below the headline, a 16:7 full-bleed band (background: #0A0A0A; aspect-ratio: 16/7; width: 100%; overflow: hidden) functions as the campaign image, with an absolute-positioned italic caption (bottom: 24px; right: 28px; font-family Cormorant; font-size 14px; font-style italic; color: rgba(250,250,248,0.5)). This zero-decoration, maximum-scale typographic approach defines the entire aesthetic — restraint IS the signature. 5. COMPONENT SPECS — Primary button (.btn-inv): background #0A0A0A, color #FAFAF8, padding 10px 20px, border-radius 0, font-family Inter, font-size 12px, font-weight 500, letter-spacing 0.08em, text-transform uppercase, border none; hover: opacity 0.8, transition opacity 0.2s linear. Secondary/ghost link: font-size 12px, font-weight 500, letter-spacing 0.10em, text-transform uppercase, color #0A0A0A, text-decoration underline, text-underline-offset 4px; no background, no border-radius. Cards / principles cells: background #FAFAF8, border-radius 0, padding 48px 36px, no box-shadow, separated by 1px gap on a --border (#D8D4CD) background grid to create hairline dividers between cells. Feature image blocks: border-radius 0, aspect-ratio 3/4, background #0A0A0A, overflow hidden. Nav: height 64px, position sticky, top 0, z-index 100, background rgba(250,250,248,0.94), backdrop-filter blur(10px), border-bottom 1px solid #D8D4CD — this blur-on-scroll effect is always active (not toggled by JS), giving a frosted-glass feel while keeping the lettermark legible. 6. COPY VOICE — Target audience: discerning fashion buyers, editors, and collectors who are exhausted by trend cycles and over-communicated brands. Their core pain: every luxury label markets the same mythology; they want proof of restraint, not a promise of it. Write with the quiet authority of a maison that does not need to sell. Four example lines that must appear verbatim or as close variants: headline "Cut from the cloth of constraint"; feature H2 "Le Manteau Blanc" with sub "SS '25 · Look 01"; manifesto quote "We do not design. We remove everything that is not the garment — until the garment is all that remains."; newsletter eyebrow "The atelier letter" with subhead "Only what is worth saying". Five banned phrases for this template: "Shop the collection" as the primary call to action (context-free); "Premium quality"; "Timeless elegance"; "Crafted with care"; "Discover our story". All copy must be specific — name the fabric (double-faced Italian cashmere), name the origin (Nihon Menpu Japanese cotton poplin), name the quantity (twelve weeks, three letters per year, four tailors, same address since 1982). 7. BACKGROUND ZONES — Three distinct background levels are used. Zone 1: #FAFAF8 (warm gallery white) — applied to <body>, hero section, principles section, logos section, testimonials section; this is the default page tone. Zone 2: #F4F1EC (bone) — applied to the feature-alternating section (background: var(--surface)) and the newsletter CTA section; these sections receive no other decoration, the bone tone alone signals warmth and containment. Zone 3: #0A0A0A (ink black) — full-bleed to viewport edge for the hero campaign image band (width: 100%, no wrap padding), the manifesto section (padding 160px 0, background #0A0A0A), and the footer (background #0A0A0A). No gradients are used as decorative elements; the two gradient linear-gradient(160deg,#1a1a1a,#0A0A0A) and linear-gradient(180deg,#1a1412,#0A0A0A) serve only as image placeholders for the dark editorial image blocks. No texture, no pattern — the tonal shift between zones IS the visual hierarchy. 8. SCROLL ANIMATIONS — All animating elements carry class .reveal (opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1)). When the IntersectionObserver fires at threshold 0.12, the class .in-view is added (opacity: 1; transform: none). Stagger siblings using data-delay attributes: data-delay="1" adds transition-delay: 0.1s, data-delay="2" adds 0.2s, data-delay="3" adds 0.3s. Elements that animate: hero rule line, hero top grid, hero full-bleed band (data-delay="1"), each principles cell (staggered 0/1/2), each feature row, manifesto blockquote + cite, logos paragraph, testimonial eyebrow + H2 + pull-quote + attribution, newsletter eyebrow + H2 + body + form wrapper. Slide distance is 24px (translateY(24px) → translateY(0)). Observer implementation: new IntersectionObserver(callback, {threshold: 0.12}), unobserve after first trigger. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Three breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. Hero grid collapses: desktop 3-column (1fr 1fr 1fr, H1 spans columns 2–3) → tablet/mobile 1-column (H1 full width, eyebrow above). Principles grid: 3-col desktop → 1-col tablet and mobile (cells stack, each full width). Feature alternating rows: 2-col (1fr 1fr) desktop → 1-col tablet and mobile (image stacks above text; reversed row uses order: unset to restore natural DOM order). Footer grid: 3-col (2fr 1fr 1fr) desktop → 1-col mobile (all columns stack). H1 sizes: 96px desktop → 60px tablet → 44px mobile. Feature H2: 52px desktop → 36px mobile. Manifesto blockquote: 48px desktop → 28px mobile. Newsletter H2: 56px desktop → 38px mobile. Nav links (.nl): visible on desktop/tablet → display:none on mobile (≤767px). Email form: flex-direction row with joined border on desktop → flex-direction column on mobile, each child gets border-top: 1px solid var(--border), outer container keeps border: 1px solid var(--border). Body text stays 15–16px at all breakpoints. All section padding is 0 80px on desktop; reduce to 0 24px on mobile via .wrap override. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally ensure the nav element is position: sticky; top: 0; z-index: 100 so it does not scroll away, and that the hero-full div (the 16:7 campaign band) is a direct child of <section class="hero"> outside the .wrap container so it bleeds full viewport width: use width: 100% with no horizontal padding on its parent chain. The marquee animation must use @keyframes with transform: translateX(0) to translateX(-50%) on a doubled content set so the loop is seamless. 11. SEMANTIC HTML — Document structure: <header> is not used; instead <nav> sits directly as the first child of <body> (sticky positioning). <main> wraps all content sections, each as <section> with a descriptive class: section.hero, section.marquee (or div.marquee), section.principles, section.feat-sec, section.manifesto, section.logos, section.testi-sec, section.cta-sec. <footer> is the final element. Exactly one <h1> exists in the document, inside section.hero. Heading hierarchy: h1 in hero → h2 in features, testimonials, newsletter CTA → h3 in principles cells. SEO: <title> = "Atelier — Cut from the Cloth of Constraint" (48 chars, under 60). <meta name="description"> = "Atelier is a luxury fashion house devoted to the art of the uncomplicated. Each piece is made from a single fabric, cut by a single hand, in a single French atelier." (164 chars — trim to 155 if needed). og:image should reference a full-bleed 16:7 campaign shot at minimum 1200×630px. Every <img> gets descriptive alt text naming the garment, fabric, and colorway (e.g. alt="Le Manteau Blanc — double-faced ivory cashmere coat, SS 25 collection"). Focus outlines: :focus-visible { outline: 1.5px solid #0A0A0A; outline-offset: 2px; } on all interactive elements. 12. FOOTER STRUCTURE — The footer uses background: #0A0A0A, color: rgba(250,250,248,1), padding: 80px 0 48px. Three-column grid inside .foot-top: column 1 is 2fr (brand column) containing the serif wordmark "Atelier" at 28px Cormorant Garamond weight 400 letter-spacing 0.12em uppercase, followed by a 13px body paragraph in rgba(250,250,248,0.45) describing the maison ethos. Column 2 is 1fr (Collections): column header "Collections" in 10px Inter uppercase letter-spacing 0.14em color rgba(250,250,248,0.35); links: SS '25, AW '24, Archive, Bespoke — each in 16px Cormorant italic weight 400 color rgba(250,250,248,0.6), hover color rgba(250,250,248,1), transition color 0.2s. Column 3 is 1fr (Maison): header "Maison"; links: About, Craftsmanship, Stockists, Contact — same spec. Below .foot-top a border-top: 1px solid rgba(250,250,248,0.08) separates the bottom bar (.foot-bot): flex row space-between, two <p> tags in 11px Inter letter-spacing 0.06em color rgba(250,250,248,0.3) — left: "© 2025 Atelier Paris SAS · 12 rue de la Roquette, Paris 75011"; right: "Privacy · Terms · Sustainability". No social icons. No newsletter input in footer (newsletter lives in its own bone section above footer). 13. UNIQUE INTERACTIVE — The marquee ticker is the primary interactive motion element: a <div class="marquee"> containing <div class="marquee-inner"> which holds all ticker items duplicated (10 items total, original 5 + duplicate 5) so the loop is seamless. CSS animation: animation: mqe 40s linear infinite; @keyframes mqe { from { transform: translateX(0) } to { transform: translateX(-50%) } }. Each .mq-item is font-family Cormorant Garamond, font-size 16px, font-style italic, color #6B6B6B, letter-spacing 0.04em; items separated by gap: 56px in a flex row with white-space: nowrap. The marquee element has overflow: hidden, padding: 14px 0, border-top: 1px solid #D8D4CD, border-bottom: 1px solid #D8D4CD. There is no pause-on-hover behavior. The secondary interaction is the product image hover on .feat-img: transform: scale(1.04), transition: transform 700ms cubic-bezier(0.65,0,0.35,1) — the scale applies to the inner image/background div, not the container (which has overflow:hidden to clip the scale). No accordions, tabs, or modals exist in this template. ARIA: the marquee div should carry aria-label="Atelier brand statements ticker" aria-live="off" to prevent screen readers from reading the looping content continuously. — Prompt set generated with Claude Sonnet 4.6 —