NOIR — a store that works.

• Type — a direct-to-consumer store for premium audio gear.
• Scope — identity, five pages, cart, checkout, payment UX and back-end architecture.
• Stack — hand-written HTML5, CSS and vanilla JavaScript. No framework, no page builder, no bundler.
• Catalogue — headphones, earbuds and speakers from a single data file; every page reads from it.
• State — the cart lives in the browser (localStorage), so it survives moving between pages with no server at all.
• Weight — 1.41 MB for the whole store, 1.21 MB of which is imagery. Itemised in the table below.
• Accessibility — WCAG AA contrast, a visible focus ring on every control, full prefers-reduced-motion support.

This was not a client brief. We set it ourselves, around the question we get asked most often in conversation: can a hand-coded store do everything an off-the-shelf theme does without looking like an off-the-shelf theme? We set three conditions at once — it had to look unmistakably high-end, it had to be frictionless to buy from, and it had to stay fast on a mid-range phone. Everything below is how we did it, and every common web-shop mistake we designed out.

That is what makes NOIR useful to you as an example: there was no client forcing a compromise, so what you see is our standard with no excuses attached.

We gave NOIR a point of view instead of a theme.

• One owned colour. A deep, warm near-black ground with a single brass accent. Chroma spikes only where it matters — a button, a price, the logo — and nowhere else are there competing colours.
• Type as the hero. A confident display face for headlines and a clean, legible face for body text, both self-hosted. No font-CDN dependency and no layout shift when the font lands.
• A shape system, not one radius. Sharp 2px structure for cards and inputs, a single full pill on the primary CTA only, and a signature 45° chamfer on the product frames — a detail a generator would not invent.
• A signature motif. Concentric rings, a speaker driver, recurring in the logo, the favicon and the hero. The site could not be any other brand's.
• Structure on show. A faint engineered background grid and monospace metadata — spec sheets, section labels — make the layout itself part of the identity.

The result reads as designed rather than generated, which is the whole point of a premium store. We apply the same system to client projects; the palette and the typeface change, the approach does not.

• Home — an oversized hero with a soft-to-sharp product reveal, a pointer-reactive warm glow, an editorial band about the build, and a quiet, honest materials line.
• Shop — a responsive product grid with instant category filtering, sorting, quick-add on every card and colour swatches.
• Product — a gallery with thumbnails, colour and quantity pickers, a monospace spec sheet, an accordion (story, in the box, specifications), related products, and a sticky add-to-cart bar that appears once you scroll past the buy button.
• Cart — line items, quantity steppers, the free-shipping meter and a running subtotal, reachable from any page without leaving that page.
• Checkout — contact and address, delivery options that update the total, express pay, a live card preview with scheme detection, and an authorisation step that ends on a clean order confirmation.

Two deliberate "hero" moments carry the polish — the product reveal and the checkout — while everything else stays calm. That restraint is what makes it feel expensive; ten equally loud elements make it feel like a template.

To be completely clear: this build is front end only. There is no server, no database, no payment processor and no orders. The cart is held in the browser and the checkout is a UX prototype — nothing leaves your browser and nothing is charged. This section describes how the same front end connects to a real commerce back end in production.

The front end we build stays the same; only the engine behind it changes.

1. Catalogue — products, prices, variants, stock and imagery live in a catalogue (a commerce platform or a headless CMS). The storefront reads from it, so staff update products without touching code.
2. Cart — held in the browser for instant, reload-free interaction. That is exactly what the demo shows.
3. Checkout session — when the customer pays, the front end asks the back end for a secure payment session. Card details never touch our servers.
4. Payment — handled by a PCI-compliant processor (Stripe or PayPal), including digital wallets and 3-D Secure / SCA where required.
5. Webhook → order — the processor confirms payment by webhook; the back end creates the order, decrements stock and fires the confirmation email.
6. Fulfilment — the order flows to shipping, with a label and tracking, and optionally into accounting or an ERP.

The options we offer, right-sized:

• Starter — static plus embedded commerce. This exact front end plus a lightweight cart and checkout service (Snipcart or Shopify Buy). Cheapest to run, live fast, ideal for a focused catalogue. Real cards and a hosted secure checkout.
• Standard — headless commerce. A headless Shopify (or BigCommerce, Swell) back end driving our custom front end through its Storefront API. Full inventory, discounts, orders, analytics and a familiar admin for staff — with a storefront that looks nothing like a Shopify theme.
• Advanced — custom or self-hosted. An open-source engine (Medusa or WooCommerce headless) when you need bespoke logic, B2B pricing or full ownership of the data.

Around the core, as needed: transactional email, shipping rates and labels or local couriers, automatic tax, fast search for large catalogues, a CMS for editorial, cookie consent and analytics, and CDN hosting so the store is fast worldwide. The point is simple: the customer experience above is fixed and premium, and the back end scales to the client.

Hand-written static HTML, CSS and vanilla JavaScript — no framework tax and no bundler bloat. Self-hosted fonts, sized and compressed imagery and restrained effects mean the page paints immediately and never jumps. Instead of adjectives, the numbers:

Measured on disk, 9 September 2026

What	How much
The whole store — five pages, code, fonts, imagery	1.41 MB
Imagery, 18 files	1.21 MB
CSS, one file	48 KB
JavaScript — app and catalogue	43 KB
Fonts — two variable woff2	49 KB
First load of the shop page	153 KB · 9 requests
First load of the home page	335 KB · 12 requests

Source: file sizes on disk in our own repository, measured on 9 September 2026. HTML, CSS and JavaScript are served compressed over HTTPS, so the real transfer is smaller than these figures — we deliberately quote the larger one. Request counts were counted from the page source; images in the product grid carry loading="lazy" and are only fetched once they scroll into view, so they are not in the first load.

WCAG AA contrast on every piece of text, including over imagery and moving backgrounds. A visible focus ring on every interactive element, real SVG icons, semantic HTML, and complete prefers-reduced-motion support that renders calm, static states for anyone who asks for them. You can get through the entire store on the keyboard alone, from the filter to the order confirmation.

We do this not because a ticked checklist looks good, but because the share of customers who cannot hit a small button, or cannot read light grey text on white, is larger than most shop owners assume. An accessible store sells to more people — that is the whole point.

A store can be beautiful, fast and easy to buy from at the same time. Those are not trade-offs you pick between, and NOIR is here to show it without footnotes: you can open the demo, add something to the cart and reach checkout, then judge for yourself.

NOIR is the standard we bring to every commerce project: a bespoke identity, a conversion-minded experience, a back end matched to the client, and performance treated as a feature rather than an afterthought. There is more on scope and pricing on the e-commerce website page.

Want a store like this for your brand? Tell us what you sell and how many products you carry, and we'll suggest the right option and a fixed price, no obligation.