Create a luxury, high-end brand website in the spirit of Chanel, Patek Philippe or Rolls-Royce: quiet, assured and expensive through space, precision and restraint.
Brief
Subject: Maison Verane — a Geneva watchmaker producing fewer than 300 hand-finished timepieces a yearCopy is sparse and exact: collection names, materials, technical details, limited quantities, the atelier's address. Never write "luxury", "premium" or "exclusive" in the copy itself; show itQuiet, assured and expensive through space, precision and restraint, in the spirit of Chanel, Patek Philippe or Rolls-RoyceDesign Tokens
Use these exact values. Where the spec is silent, stay consistent with them.
colors:
accent: "#c9a96e"
background: "#0c0c0c"
border: "color-mix(in srgb, #f5f0e8 10%, #0c0c0c)"
champagne: "color-mix(in srgb, #c9a96e 35%, #ffffff)"
faint: "color-mix(in srgb, #f5f0e8 48%, #0c0c0c)"
muted: "color-mix(in srgb, #f5f0e8 64%, #0c0c0c)"
surface: "color-mix(in srgb, #f5f0e8 3%, #0c0c0c)"
text: "#f5f0e8"
effects:
heroLight: "radial-gradient(ellipse 34% 52% at 68% 48%, text at 8.5%, transparent 72%), radial-gradient(ellipse 70% 80% at 68% 50%, gold at 4.5%, transparent 70%) over the background"
metal: "linear-gradient(135deg, gold, champagne, gold), for 1px lines, the button border and the monogram only"
vignette: "radial-gradient(ellipse at center, transparent 38%, background at 60%) over photos"
fonts:
body:
fallback: "system-ui, sans-serif"
family: Jost
weights: [200, 300, 400]
display:
fallback: "'Bodoni Moda', Didot, Georgia, serif"
family: Cormorant Garamond
weights: [300, 400]
layout:
breakpoints:
columns: 1000px
hero: 900px
mobile: 600px
nav: 760px
container: "full width with the gutters; content grids max 1440px, footer max 1280px"
gutter: "clamp(20px, 5vw, 64px)"
motion:
durations:
colour: 600–700ms
heroReveal: 800ms
kenBurns: 20s
navBackground: 800ms
pieceZoom: 1.4s
easings:
all: "cubic-bezier(0.2, 0.6, 0.2, 1)"
kenBurns: "ease-in-out, infinite, alternate"
radii:
everything: 0
shadows:
everywhere: none
spacing:
section: "clamp(150px, 14vw, 200px) top and bottom"
type:
body:
font: body
lineHeight: 1.8
size: 16px; ledes 17px at weight 200
tracking: 0.01em
weight: 300
caption:
font: body
lineHeight: 1.4
size: "10–11px, uppercase"
tracking: 0.34em
weight: 400
display:
font: display
lineHeight: 1.08
size: "clamp(46px, 6.2vw, 98px)"
tracking: 0.005em
weight: 300
headline:
font: display
lineHeight: 1.08
size: "clamp(34px, 3.8vw, 58px)"
tracking: 0.005em
weight: 300
title:
font: display
lineHeight: 1.1
size: 30px
tracking: 0
weight: 300
Style Rules
Space is the luxury: clamp(150px, 14vw, 200px) between sections, generous gutters, one idea per screenGold is jewellery, not paint: 1px hairlines, the monogram, the button border, references, citations and hover underlinesHeadings in the heading font at weight 300 with a roman first line and an italic second; body in Jost 300, ledes at 200 and mutedSmall text is tracked uppercase at 10–11px with 0.3–0.46em letter-spacing; never used as an eyebrow above a headingThe product is the hero: drawn watches on dark radial grounds, photographs dark and desaturatedMotion is slow: 600–1400ms with a soft ease, hover underlines and zooms onlyEverything centred or in calm two-column splits; no cards, boxes or rounded cornersPage Layout
full width inside clamp(20px, 5vw, 64px) gutters; dark ground, gold hairlines
COLLECTION ATELIER HERITAGE M A I S O N V E R A N E BOUTIQUES APPOINTMENTS CONTACT
Time, finished ◯ detailed SVG watch, ← hero, 100svh
by hand. (italic) 82svh tall, soft light
sentence, max 32ch
[ DISCOVER ] (metallic border) │ scroll cue
[ photo 4:3, 7fr, Ken Burns ] Two-line headline / paragraph / specs 2×2 ← showcase ×3, alternating
specs / paragraph / headline [ photo 4:3, 7fr ]
[ photo 4:3 ] headline / …
──────────── metallic rule ──────────── ← heritage
⚜ monogram
The house on the / Quai … (italic)
three paragraphs, centred, 600px
1871 287 / 14 41,206
──────────── metallic rule ────────────
Six references ← collection
[ ◯ watch ] [ ◯ watch ] [ ◯ watch ] name / REF. / material / edition
[ ◯ watch ] [ ◯ watch ] [ ◯ watch ]
▓▓▓▓▓▓▓▓▓▓ dark photo ▓▓▓▓▓▓▓▓▓▓ │ / "italic quote" / │ / CITE ← quote, 100svh
━━━━ metallic top border ━━━━ ⚜ WORDMARK / GENÈVE PARIS LONDON TOKYO / links / legal ← footer
Sections
Navigation — Fixed, a three-column grid (1fr / auto / 1fr) with 28px vertical padding inside the gutters: left links, the centred wordmark, right links. After scrolling it takes the background at 86% with a 12px blur and a gold-16% bottom hairline over 800msContent:Left: Collection, Atelier, HeritageRight: Boutiques, Appointments, ContactComponents:Wordmark: the house name in the heading font at 400, clamp(17px, 1.5vw, 22px), uppercase with 0.46em trackingLinks: 11px uppercase with 0.34em tracking in the text at 86%; a 1px metallic underline grows from the left over 700ms on hover and focusMobile: Under 760px the wordmark sits on its own row above the two link groups at 10pxHero — 100svh, padding 140px and the gutter, 90px bottom, over the hero light; a 1440px grid of 5fr / 6fr: copy left (sub 36px below, max 32ch, button 60px below), watch rightContent:Headline: 3–5 words on the house's essenceOne sentence naming the piece's materials, calibre and editionButton: 'Discover'Components:Headline: two lines in the display size, the second in italicButton: 'Discover', 11px uppercase 0.42em tracking, padding 18px 54px, a 1px metallic border (border-image); hover adds a gold-8% fill and champagne text over 700msWatch: the hero SVG at min(82svh, 820px) tallScroll cue: a 1px × 72px line fading into gold at the bottom centreMobile: Under 900px one centred column with the watch first at 54svhMotion: The copy fades in from translateY(14px) over 800ms once; nothing else animates on loadProduct Showcase — Three features stacked with the section padding between themContent:Three features on craft, each a two-line headline (second line italic) with a number, one paragraph, and four specs with exact valuesComponents:Feature: a 4:3 photo in a 7fr column and text in 5fr (alternating sides); the text max 660px with clamp(24px, 7vw, 128px) side paddingSpecs: a two-column list under a hairline: labels 10px uppercase 0.32em in faint, values in the heading font at 23px weight 300, rows split by hairlinesMobile: Under 900px photo (4:5) above text, text padding 64px 24px 0Motion: Each photo scales from 1 to 1.08 over 20s, alternating, ease-in-outHeritage — A centred 600px column: rule, the monogram 64px above the headline, paragraphs in lede style, facts 80px below, rule; 88px padding inside the rulesContent:The monogramA two-line headline naming the founding placeThree short paragraphs: founding, the ledger or tradition, what has not changedFour facts: founded, pieces this year, craftspeople, a long-running countComponents:Rules: 1px metallic hairlines at 75% above and below the columnFacts: a 2 × 2 grid, each a number in the heading font at clamp(40px, 4vw, 52px) over a 10px uppercase labelMobile: Same column inside 24px guttersCollection — Section padding inside the gutters; the head clamp(80px, 8vw, 120px) above a 1440px grid of 3 columns with clamp(56px, 5vw, 88px) row and clamp(20px, 2.4vw, 40px) column gapsContent:A centred headline naming how many referencesSix pieces with names, reference numbers, case and dial materials and edition sizesComponents:Piece media: 4:5, radial-gradient(ellipse 58% 50% at 50% 46%, surface lifted toward the text by 4%, surface, background), a 1px text-6% border; the SVG watch inset 7% top and bottomMeta, centred, 30px below: the name in the heading font at 30px, the reference in 11px gold uppercase 0.3em, the material in muted 15px, the edition in faint 12px'View': 11px uppercase champagne with a metallic underline, appearing 30px from the bottom on hover and focusMobile: Two columns under 1000px, one under 600px; on touch screens 'View' shows at 85%Motion: Hover scales the watch to 1.05 over 1.4s and fades 'View' in over 700msQuote — 100svh, the photo behind with the quote treatment and a stronger vignette; the quote centred with 60px around itContent:One quote of 15–25 words from a craftsperson or the founderName and roleComponents:Hairlines: vertical 1px × 96px lines in the metallic gradient above and below the quoteQuote: the heading font in italic 300 at clamp(32px, 4.4vw, 64px), line-height 1.22, max 920pxCite: 11px gold uppercase 0.4emMobile: Same, smaller type through the clampFooter — A 1px metallic top border, padding clamp(110px, 11vw, 150px) and the gutter, 48px bottom, max 1280px: the mark centred, boutiques clamp(88px, 9vw, 128px) below, the links row, legal 36px below in faint 12pxContent:Monogram and wordmarkFour boutiques with addresses and phonesSix links© year and the legal entityComponents:Boutiques: four columns, each a city in 11px gold uppercase 0.34em and an address with phone in muted 15px weight 200Links: a centred row between hairlines, 11px uppercase 0.3em with the metallic hover underlineMobile: Boutiques two columns under 1000px, one centred column under 600pxImagery & Icons
Hero and collection watches are detailed inline SVG: case and bezel in cream and gold hairlines, a dial in the piece's own colour (blue enamel, ivory, onyx, slate, green lacquer, champagne), applied indices, dauphine hands, a crown and a strap suggestionThree showcase photos and the quote background from picsum.photos with a seed each, treated grayscale(0.88) sepia(0.16) contrast(1.08) brightness(0.56) (the quote at brightness 0.4), under a radial vignetteThe monogram: the house initials interlaced in an inline SVG with the metallic gradient, 68px (52px in the footer)Implementation Notes
The nav scroll state is the only script besides the hero reveal triggerDon'ts
No gold fills, gold text blocks or gold gradients on surfaces; the metallic gradient is for 1px lines and the monogram onlyNo eyebrow labels, badges or 'Limited' tagsNo second accent colour, no colour photographyNo busy motion: no fade-ups on every section, no parallax, nothing faster than 600msNo rounded corners, cards or shadowsNo fonts, colours, radii or shadows outside the design tokens and rules aboveNo sections, features or effects that this spec doesn't listNo placeholder copy (lorem ipsum, "Elevate your workflow"): every word comes from the subjectNo pill-shaped eyebrow labels above headings and no gradient text, unless this spec asks for themNo grid of identical icon cards: vary size and emphasis by importanceQuality Floor
Mobile-first and responsive from 360px to 1440px and wider, with no horizontal scrollingText contrast meets WCAG 2.1 AA: 4.5:1 for body text, 3:1 for large textSemantic landmarks (header, nav, main, section, footer), one h1, descriptive alt textEvery interactive element has hover, visible focus and active states and works from the keyboardHonour prefers-reduced-motion: keep opacity fades, drop movementTech Stack
Framework: HTML/CSS/JS — Deliver one self-contained index.html: styles in a <style> block, scripts in a <script type="module"> block, no build step.Styling: Vanilla CSS — Plain CSS. Declare every design token as a custom property on :root (--color-accent, --font-display, --radius-card…) and use only those properties for colours, fonts, radii, shadows and timing.Language: JavaScript — JavaScript as ES modules; no TypeScript.UI library: None — No component library: build every component from the design tokens.Motion: CSS only — CSS transitions and keyframes only, with durations and easings from the design tokens.Icons: Inline SVG — Inline SVG icons drawn for this style, with one stroke width and corner treatment across the page.Acceptance Checklist
Gold appears only as hairlines, the monogram, the button border, small references and hover underlines; never as a fillHeadings use the heading font at weight 300 with an italic second line; body copy is Jost at 200–300Section padding is clamp(150px, 14vw, 200px)The hero watch is a detailed inline SVG at up to 82svh tall, lit by a soft radial lightPhotos are desaturated and dark with a vignette, and drift with a 20s Ken Burns zoomNavigation is a centred wordmark between two groups of small tracked uppercase linksThe collection shows six SVG watches on dark radial grounds with name, reference, material and editionNo eyebrow labels above headingsOnly the hero copy reveals on load (800ms); other sections are stillUnder reduced motion the Ken Burns stops and hover zooms and underlines are instant
