How these pages are built

This storefront has no content of its own. Every component on it reads from a record in the product information system behind it, in this language and for this market, and the rules for what it shows when something is missing are written down here. That's the whole idea: the page can't be right unless the record is, and the page can't quietly go out wrong either.

Tokens

Seven colors and two typefaces the whole site is built from. They live in one stylesheet, and every component below uses them by name.

Text--ink #2b2622

Secondary text--muted #6f655d

Page--paper #fbf8f4

Cards and panels--card #ffffff

Rules and borders--line #e6ddd3

Buttons, active links--accent #b5562a

Notes about missing content--sage #8a9a7b

Fraunces
Headings, the logo, prices on product pages. A soft serif that reads as bakeware rather than software.

System sans
Body, navigation, and specifications. Whatever the visitor's device already has, so nothing loads before the words do.

Hero

Bake the season in.

Pans that brown evenly, bowls that stay put, and the five tools every fall recipe starts with.

Shop bakeware

Headline, body, button: From the content module FALL-HERO, in en_US. The same record is the top of the home page on all three sites.
Image: The module's own image if it has one, otherwise a lifestyle shot of the first product it features, otherwise that product's hero shot. Rendered at the pdp-1200 size.
Alt text: From the image's own metadata, not typed into the page.
When the copy is missing in this language: The English headline shows with a sage note naming the module, so the gap is visible to the team and never silently English to the customer.

Product card

Ceramic pie dish

From 32.00 USD

Name: The product name in en_US, falling back to English for Canadian English only. French never falls back.
Image: The product's image with the role hero, at the plp-600 size. Roles are set on the asset, so the same file can be the hero here and the lifestyle shot elsewhere.
Price: The lowest list price across the product's variants for market US, in that market's currency. A Canadian price is set by the team, never converted.
Swatches: One per distinct color across the variants, from each color record's hex value. Shown only when there is more than one.

Product page

Open the page this card leads to. Each part of it reads a different slice of the same record.

Gallery: Every image on the product in gallery order, filtered to the variant's scope when a color is selected.
Options and availability: One entry per variant with its color, size, and this market's availability from the variant's market data.
Specifications: The specification groups assigned to the product's category, so a pie dish shows bakeware specs and a whisk shows tool specs. Checkboxes render as yes or no, quantities carry their unit.
Short description: In this language. Missing French shows the sage note rather than English.

Rules that hold across the site

Nothing on these pages is typed in twice. Where a fact appears on a card, a product page, and a retailer feed, it is the same field read three times.

Missing content is shown as missing. A sage dashed note stands where the copy should be, with the record's code, so the team finds it before a customer does. French does not fall back to English; Canadian English does, because that is what the team decided for that market.

Images carry their own alt text, role, and rights. A product whose imagery sits on a lapsed license is held from the storefront until it is reshot or relicensed, and the reason is on the record.

Prices, availability, and readiness are per market. Each site reads only its own.

The same discipline, for the studio itself

N4mation Digital's own site is documented the same way, as a small design system that the pages are built from rather than a set of screens: n4mation.digital/system.