Atelier Vermillion — Editorial Burgundy Agency Website
An editorial, print-inspired agency studio website on a warm cream canvas: a tall Fraunces serif headline with burgundy italic accent words beside stacked case-study image cards, framed by gold hairlines, with a scrolling stat marquee, alternating asymmetric case studies, a dark pull-quote band, a burgundy contact section, and a giant clamp-scaled footer wordmark.
Summary
An editorial, print-inspired agency studio website on a warm cream 'paper' canvas with a deep burgundy + gold accent system. A sticky translucent nav sits above an asymmetric hero where a tall Fraunces serif headline (with two burgundy italic accent words) pairs with a stacked column of case-study image cards, a status pill, dual pill CTAs, a trust row, and an infinite scrolling stat marquee. Below: a two-column section intro, two alternating asymmetric case studies (image-left / image-right) framed by gold hairlines, a dark full-bleed pull-quote band, a four-up stat counter strip, a two-column services block, a three-step numbered process, a burgundy contact band with a cream form card, and a near-black footer that ends on a giant clamp-sized VERMILLION wordmark.
Style
Editorial print-magazine aesthetic rendered for the web: a warm cream paper background with a faint dotted grain, a tall Fraunces serif display face for headlines (mixed with true italic accent words) over a clean Inter grotesque body, a deep burgundy primary with a darker burgundy hover, and a muted gold reserved for hairline rules, accent words, and dividers. Surfaces are large-radius rounded image cards with thin gold hairline borders, generous editorial whitespace, faint vertical column-grid lines as texture, and a subtle warm 'editorial' image filter (slight grayscale + sepia + contrast). Two full-bleed inverted bands (near-black ink and solid burgundy) punctuate the cream flow.
Layout & Structure
A frameless, fully responsive single-page agency site centered in a max-w-[1240px] column with px-6/px-10 gutters. Top is a sticky translucent cream nav (72px). Then an asymmetric hero: a ~1.05fr editorial-copy column beside a ~0.95fr stacked image column, followed by a full-width scrolling stat marquee on a hairline-bordered band. Below flow: a two-column (label + paragraph) selected-work intro; case study 01 as a 1.15fr image / 0.85fr text asymmetric grid; a full-bleed near-black pull-quote band; case study 02 with the columns reversed (text-left / image-right, order-swapped on mobile); a four-up bordered stat counter strip; a services block split ~0.4fr intro / ~0.6fr 2x2 service grid (gold hairline gutters); a three-column numbered process with gold vertical dividers; a full-bleed burgundy contact band split ~0.55fr copy / ~0.45fr cream form card; and a near-black footer with a 4-column link grid, a giant clamp-scaled wordmark, and a bottom bar. Responsive: nav links collapse to a hamburger under lg; every asymmetric two-col grid stacks to one column on small screens (case 02 reorders so the image leads on mobile); service grid goes 2-up to 1-up; stat strip goes 4-up to 2-up; process goes 3-up to 1-up; the giant footer wordmark scales with clamp(52px,13.5vw,210px).
Sticky nav
Hero (asymmetric editorial)
Stat marquee
Selected-work intro
Case studies (alternating asymmetric)
Pull-quote band (dark)
Stat counter strip
Services block
Process (numbered)
Contact band + form card
Footer
Components
Infinite stat marquee
A seamless horizontal auto-scrolling strip of studio stats separated by burgundy slash marks, used as a thin band between the hero and the work section.
Editorial image card (filter + scrim + hover lift)
The recurring case-study / hero image treatment: a rounded gold-hairline frame with a warm editorial photo filter, a directional gradient scrim for caption legibility, an optional corner index, and a hover lift.
Pill CTA with circular arrow chip
The signature button style across the site: a full-radius near-black / burgundy / outline pill with a contrasting circular arrow chip pinned to its right edge that animates on hover.
Gold-rule + column-grid editorial textures
Two reusable decorative primitives that carry the print aesthetic: a center-fading gold hairline divider, and a faint vertical column-grid backdrop used behind the hero and inside the inverted bands.
Special Notes
Render as a FRAMELESS, fully responsive single-page web design (no browser window chrome). The defining transferable moves to preserve: a warm cream 'paper' canvas with a faint dotted grain and gold column-grid texture; a deep burgundy + antique gold accent system on near-black ink type; a tall Fraunces serif display headline mixed with TRUE ITALIC font-light accent words (burgundy on light, gold on dark) over an Inter body; asymmetric editorial grids (1.05/0.95, 1.15/0.85, 0.4/0.6) rather than centered symmetry; gold hairline borders and a center-fading gold-rule divider as the recurring frame; rounded image cards with a warm editorial photo filter, gradient scrims, corner indices and a hover lift; the signature pill CTA with a circular arrow chip; two full-bleed inverted bands (near-black pull-quote, solid burgundy contact) to punctuate the cream flow; an infinite stat marquee; and a closing giant clamp-scaled VERMILLION footer wordmark with a burgundy period. Icons are Phosphor (iconify ph:* set). Keep the sticky translucent nav persistent and collapse it to a hamburger under lg; every asymmetric grid stacks to one column on mobile (case 02 reorders so its image leads). No em-dashes anywhere in the copy; use commas, colons, periods, and a middot for separators.