Atelier Theme¶

Atelier is an editorial, image-first storefront theme for premium, design-led catalogues: cool stone paper, deep ink, one glaze-green accent, a display serif set very large against a quiet grotesque. It is built on top of Nova (Atelier → Nova → Bootstrap template fallback), exactly as Pop and Depot are, so every page works from the moment a site switches to it; Atelier replaces the pages where the look matters most.

Site admins pick it under Admin → Shop Settings → Theme (Choosing a Theme); platform staff can also set it per site in System → Tenants → {site} → Theme (theme name Atelier).

Design principles¶

Principle	What it means on the page
The picture leads	Cards and the product page are mostly photograph, with 2px corners and almost no chrome. A card whose product has a second picture swaps to it on hover or keyboard focus.
The name is the signature	On the "feature" cards and on the first product picture, the product's name is set enormous in the display serif and cropped by the bottom edge of the picture. Its size follows the name's length, so a short name is huge and a long one still shows its opening. It only appears where there is a picture to sit on.
An asymmetric grid	Nine cards make a rhythm of mixed sizes (the 1st, 4th and 7th are the feature cards). It applies only in the merchant's own order: choosing a sort, applying a filter, or searching switches to an even three-column grid.
Small caps carry the labels	Navigation, filters, badges and buttons are small, tracked capitals. Headings and prices are serif.
Nothing is invented	Badges come from real flags (a saving, "Only 3 left", "Sold out"); there is no "new" badge because nothing on the model says a product is new.

What Atelier redesigns¶

Area	Highlights
Header / footer	A slim bar: category menu left, the site name as a serif wordmark in the middle, Search / Account / Basket (n) right. Search drops a sheet from the bar (as-you-type suggestions kept). The category menu opens a full-width panel of serif links; on phones it becomes a drawer. Over a hero the bar is transparent and turns solid on scroll. Ink footer with the site name set enormous and cropped at the bottom.
Listings	Collection, search and merchandising pages: the collection name very large with its own description as a standfirst, sub-category chips, and a bar that sticks under the header with the count, a Filter button, applied filters as chips and the sort. Filters open as columns dropped from the bar (not a side rail); the drawer stays open while filtering.
Cards	Photograph, badges, the price, the name, and one quiet text action chosen by product type exactly as Nova's card does.
Product page	Margin notes, a gallery stacked as pictures of different sizes with the name overprinted on the first, and a buy box that stays in view: brand, name, rating, price, options (sizes as boxed tiles, colours as square swatches), stock, quantity and Add to basket, promises, and Description / Delivery accordions. A docked buy bar on phones.
Added to basket	A panel that slides in from the right with the item and the basket subtotal.
Rails	Trending, featured and recently-viewed use a staggered row of the same cards (swipeable on phones).

Pages that fall back to Nova¶

Basket, checkout, order confirmation, account, blog and content extensions have no Atelier template: they render Nova's markup inside Atelier's header and footer. They still look like Atelier because Atelier re-points Nova's design tokens (palette, fonts, 2px radii) and restyles Nova's buttons and inputs. Nova's standalone sign-in / register / password pages use Atelier's copy of the shared auth-head fragment (ink buttons, serif headings).

The transparent header¶

Whether the bar sits over a hero is decided by the page structure, not by the template: atelier.css matches a hero (.nova-hero, or .at-hero) as the first thing in <main> with :has(), and only then makes the bar transparent and pulls the hero under it. On every other page (and in a browser without :has()) it is a plain solid sticky bar. A collection has no picture of its own on the model, so collection pages do not have a hero unless a hero extension is placed in the topBanner slot.

What is not in Atelier (and why)¶

The design mock invented some data. These are deliberately absent, because the model has nothing to drive them and Atelier adds no back-end features:

Collection hero picture and "The making" intro label – collections have no image or intro label; the name and description are set as the heading and standfirst instead.
"Material notes" rows (body, glaze, firing, capacity, weight, foot) – no such attributes. The margin column shows only the brand, the product code and the short description, when they exist. (Specifications a site enters still show through the attribute extensions.)
Glaze names on cards, "New" badge, "Care" accordion, photo captions – no data.
Newsletter sign-up in the footer – needs a subscribe endpoint; a site can put its email-capture extension in the footer slot.
Basket drawer with editable lines and a free-delivery progress bar – the slide-over shows the item just added and the subtotal only; lines live on the basket page, and there is no delivery threshold on the model.
"In stock" filter toggle and material / colour / price groups as fixed filters – the drawer shows the real facet groups the search layer provides.
Photo zoom and thumbnails on the product page – the gallery is a stack of pictures; a site's own productGallery extension replaces it, as in every theme.

Configuring the copy¶

The "Shop all {0}" link at the foot of each admin-built menu dropdown (atelier.nav.shopAll) can also be reworded or hidden per site with the nav-mega-menu-view-all-label and nav-mega-menu-view-all-enabled site config keys; see Brock: the "Shop all" link.

All Atelier wording is in messages.properties under atelier.* and can be overridden per site in Admin → Shop Settings → Site Text (/admin/shopSettings/text). The ones a merchant should set:

Key	Default	Where it shows
`nav.banner.message`	(empty)	A thin announcement line above the header. HTML allowed.
`atelier.promise.delivery`	(empty)	Footer, product page, "added" panel. e.g. "Free UK delivery over £60"
`atelier.promise.returns`	(empty)	As above.
`atelier.promise.secure`	(empty)	Footer, product page.
`atelier.promise.help`	(empty)	Footer reassurance row.
`atelier.pdp.deliveryInfo`	(empty)	"Delivery and returns" accordion on every product page (HTML allowed).
`atelier.pdp.priceNote`	(empty)	Line under the product price, e.g. "Including VAT".

Nothing is shown for a key left empty, so a new site never shows a promise it has not written.

For developers¶

Templates: web-mvc/src/main/resources/templates/atelier/. Styles and behaviour: resources/settBuilder/themes/atelier/css/atelier.css and js/atelier.js, linked from Atelier's fragment/head.html after Nova's bdgr.css (and before the Design Brief's theme.css).
Atelier's ThemeContext points cssPath/jsPath/imagePath at Nova's folders, so Nova templates and extension scripts keep working; see Theme Resolution. Atelier's icons live in fragment/atelier-icons.html (not icons.html) for the reason given there.
The signature. The card and product templates render the name in an aria-hidden span with --n (its length, minimum 4) as an inline custom property; the CSS sizes it as clamp(2.5rem, 100cqw / (--n * .42), 24cqw) inside a size container. The card's span exists on every card with a picture and is display: none except on :nth-child(9n+1 | 9n+4 | 9n+7) of a grid that is not .is-flat. The template decides .is-flat (search, any filter, any sort other than the merchant's order); the rhythm itself is CSS-only, so no per-card data is needed.
Colour swatches. atelier.js turns a colour option group (its code or label matches colour|color|glaze|shade) into square swatches when every value is a colour name the browser understands (CSS.supports('color', …)); one unknown name leaves the group as text. The button keeps its text as its accessible name.
Filter drawer. Filters are plain links. atelier.js keeps the drawer open across the reload (sessionStorage) and, without JS, the drawer is always open (.at-js gates the hidden state; the class is set by a one-line inline script in head.html so there is no flash).
Fonts (Instrument Serif, static regular and italic; Hanken Grotesk, variable) are self-hosted from @fontsource packages: the Latin and Latin-ext subsets are vendored (see scripts/copy-versioned-deps.js) and declared inline in fragment/head.html (and in the auth pages' head). No request goes to a third-party font host.
Atelier reuses Nova's scripts (variant picker, sticky buy bar, search suggestions, basket repricing) unchanged; each template documents the ids and classes it keeps for them.
Tests: AtelierProductCardRenderTest renders both cards for every image state and checks the oversized-name sizing, that the hover image only exists with a second picture, and that badges appear only for real flags.
The theme record is added by system update 89.json (idempotent) and initialisation/templates.json.