Skincare Brand

Quick Start

Upload the folder to any static host and open index.html. Keep the HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Serve the files over HTTP or HTTPS while editing (for example python3 -m http.server in the folder, then http://localhost:8000/index.html). Opened straight from disk, every page still works; links simply load pages normally instead of swapping in place.

GSAP, ScrollTrigger and Lenis load from a CDN. Fonts (Instrument Serif, Instrument Sans and Archivo), images, styles and scripts are bundled locally.

Code snippet omitted: it ships with the download.

Using It With Your Own Design

1. Brand. Replace "Marrable", the logo mark (an inline SVG in each header), the address and the email in the header, footer and story page of each file. Each page repeats the shared header, footer and bag markup so it stands alone without JavaScript.
2. Products. Change the product cards in index.html, shop.html and product.html, and the catalogue at the top of the bag code in assets/script.js (see The Bag). Buttons carry a data-sku naming a catalogue entry.
3. Photographs. Swap the files in assets/img/ keeping the names, or change the paths, and rewrite the alt text to describe your photographs. Product shots work best on one matching paper colour; set --surface in assets/style.css to that colour so the cards and photographs read as one surface.
4. Hero product. Replace the bottle cut-out and the two hand photographs (see The Hero Catch).
5. Colour and type. Edit the tokens at the top of assets/style.css (see Palette). If you change typefaces, see Fonts below.

Everything visual lives in assets/style.css. Everything interactive lives in assets/script.js, one function per feature that returns early when its markup is absent, so you can delete a section from the HTML and the rest keeps working. assets/page-router.js is the small page router (link handling, fetching, history, scroll and focus); you should not need to edit it.

Required hooks and CSS dependencies:

• <main data-page data-page-key="..."> is the part of each page that changes. The key marks the current item in the main navigation.
• The .has-js class is added by the one-line script in each <head>, before the stylesheet; it hides elements that fade in (data-reveal, data-reveal-group, data-hero-fade) until the script reveals them. Keep it synchronous and in the head.
• The bag drawer (data-bag) sits outside <main> so it survives page changes. Keep it outside.
• Pages other than home start below the fixed header through --head-h; change it if you change the header's height.

Pages and Configuration

File	Content
index.html	Hero catch on teal, the texture you can spread, the range, two close-up skin photographs, three ritual steps, reviews, the coast and stockists
shop.html	The range with a skin-need filter, a ritual set, and notes on refills, scent and batch numbers
product.html	Barrier Cream No. 4: photo switcher, bottle or refill, quantity, how to use, ingredients, delivery, texture, reviews and "Use it with"
journal.html	A featured article and a list of shorter pieces
journal-winter-skin.html	A long-form article with drop cap, pull quote, figure and product callout
story.html	The founder, a timeline, the room, the batch-number look-up and stockists
bag.html	Shown only without JavaScript: explains that the bag needs it

The other products link to product.html as the worked example; copy it for each product that needs its own page. Copy journal-winter-skin.html for each article and add a row to journal.html. New pages need no registration: the router picks up any same-folder link.

The shop filter reads data-needs="dry sensitive" (space-separated) on each card and matches the data-filter-chip buttons. A filtered view updates the address (shop.html?need=lips), so it can be linked to.

The Hero Catch

The bottle is one transparent image (hero-bottle.webp) held in a sticky rail exactly as tall as the distance the hand travels, so it is held for that much scroll and lands in the grip at any screen size. While it is held, the giant wordmark grows, the bottle sways and comes upright, and the open hand rises. At contact the open hand (hand-open.webp) crossfades to the gripping hand behind the bottle (hand-held-nobottle.webp) and its thumb and fingertips in front of it (hand-front.webp, with hand-thumbshadow.webp on the bottle); the bottle itself never fades. Scrolling back reverses it.

To use your own product:

1. Photograph the product on a plain background, cut it out to a transparent WebP or PNG, and replace hero-bottle.webp. Keep its aspect ratio in the width/height attributes.
2. Photograph a hand holding that product, then the same hand, same framing, open and empty. Cut both out. From the gripping photograph make two layers in any image editor: the whole hand with the product erased (hand-held-nobottle), and only the thumb and any fingers that cross in front of the product (hand-front). An optional soft shadow of the thumb on the product goes in hand-thumbshadow.
3. In assets/style.css, set --hw (the hand image's width as a multiple of the product's height in it), --px and --py (where the product's base centre sits in the hand image, as fractions of its width and height). The comment above the .hero rule explains each value.

Under reduced motion or without JavaScript, the gripping hand shows with the product already in it.

The Bag

The bag is a slide-out drawer on every page. It lists line items with a thumbnail, size, unit price, quantity stepper and remove; it shows a subtotal and how far the visitor is from free delivery (FREE_DELIVERY, £40). It keeps its contents in the tab's session storage, so they survive page changes and a reload.

Products, sizes, prices and bag thumbnails come from the CATALOGUE object near the top of the bag code in assets/script.js. Each add-to-bag button names a key with data-sku; the product page's size choice picks cream-bottle or cream-refill.

Checkout is front end only. The Checkout button shows a note that nothing is sent. To take orders, replace the checkout click handler in initBagChrome with a hand-off to your platform. The bag's contents are the lines array, [{ sku, qty }]:

Code snippet omitted: it ships with the download.

Never trust prices sent from the browser: look them up on the server or in your platform from the sku.

The drawer is a modal dialog: focus moves into it and stays there, Escape, the backdrop and the close button shut it and return focus to what opened it, and changes are announced to screen readers. Smooth scrolling pauses while it is open; its list scrolls natively (data-lenis-prevent).

Other Features

• Texture spread (data-spread): drag across the cream photograph, or use the slider underneath with the keyboard, to reveal the matched "spread" photograph under a feathered edge.
• Ritual (data-ritual): three tabs with arrow-key support; each wipes its photograph across.
• Product photographs (data-gallery): thumbnails switch the main photograph. Without the script the photographs stack.
• Batch look-up (data-batch): decodes a number such as 4-217 on the page into product, date and batch size using a simple rule. It reads no records; connect it to your own data or delete the section.
• Newsletter (data-newsletter): validates and thanks the visitor but sends nothing. Point the form at your email provider.

Page Changes

There is no page transition. The router fetches the next page and swaps <main> in place, so the header, the footer and the bag stay put. A new page opens at the top; a link with a hash (story.html#stockists) lands on its target below the fixed header; Back and Forward restore the position you left, after the page has its final layout. Focus moves to the new page's heading and its title is announced. Without fetch, GSAP or an http(s) origin, links load pages normally.

To add a transition later, give PageRouter.create in assets/script.js leave and enter hooks that return nav.play(function (tl) { ... }) timelines; the header comment in assets/page-router.js documents the contract.

Palette

Token	Value	Role
--ground	#ecebe7	The shop's grey ground
--surface	#ddd9d4	Product cards and placeholders; matches the photographs' paper
--ink	#1c1b18	Text, with --ink-dim (.70) and --ink-faint (.62)
--loud-deep / --loud-sat	#06191c / #0b6e7b	The teal gradient of the hero and footer
--cream	#f2ebe0	Type on teal, and the wordmark
--accent / --accent-ink	#c8401a / #a8350f	Persimmon: stars and fills, and its darker text value

Measured contrast pairs and their limits are recorded in the comment at the top of :root. The teal is the complement of the persimmon pump; keep them roughly opposite on the colour wheel if you repaint either.

Accessibility and Fallbacks

• Every page reads in full without JavaScript, with ordinary links and a static hero; the Bag link opens bag.html.
• Reduced motion: the still hero with the product in the hand, instant tabs, an instant drawer, and no smooth scrolling.
• Keyboard: every control is a native button, link or input with a visible focus ring; tabs use arrow keys; the spread has a range input; the drawer traps focus.
• Text contrast meets 4.5:1 on every surface (see Palette).

Dependencies

The demo is pinned to GSAP 3.15.0 with ScrollTrigger and Lenis 1.3.17. Compatibility floor: GSAP 3.12+, with core and plugin on matching versions, and Lenis 1.1+. Remove the Lenis script tag, or set data-smooth="off" on <html>, to use native scrolling.

Fonts

Instrument Serif (roman and italic), Instrument Sans and Archivo are self-hosted in assets/fonts/, so no page makes a render-blocking third-party request. The files are the Latin subsets Google Fonts serves (Instrument Sans and Archivo are variable fonts), declared by the @font-face rules at the top of assets/style.css with the same weights and unicode-range Google uses. Each page preloads Instrument Sans and the Instrument Serif roman, the faces of the first screen. Licence: SIL Open Font License 1.1, full text and copyright notices in assets/fonts/OFL.txt (Instrument Serif: Copyright 2022 The Instrument Serif Project Authors, https://github.com/Instrument/instrument-serif; Instrument Sans: Copyright 2022 The Instrument Sans Project Authors, https://github.com/Instrument/instrument-sans; Archivo: Copyright 2020 The Archivo Project Authors, https://github.com/Omnibus-Type/Archivo).

To swap a face, put your .woff2 in assets/fonts/, point its @font-face rules and the --font-* token at it, and change the preloads in each page's <head>. To use Google Fonts instead, delete the @font-face rules and the preloads and add the Google Fonts <link> to every page.

Images and Credits

The download contains thirty-three WebP images and one SVG in assets/img/. All photographs are AI-generated for this template and depict no real people, products or premises; Marrable, Ruth Marrable and the stockists are fictional. Replace any file at the same name and aspect ratio, or change the paths in the HTML.

Files	Subject
hero-bottle.webp	Cut-out of the Barrier Cream pump bottle
hand-open.webp, hand-held-nobottle.webp, hand-front.webp, hand-thumbshadow.webp	The hero hand, open and gripping, in layers
product-cream/milk/oil/balm.webp, ritual-set.webp	The range on grey paper
texture-dollop.webp, texture-spread.webp, texture-oil.webp	Cream and oil macros
texture-dollop-4x5-720.webp, body-shoulder-720.webp, batch-base-720.webp, *-thumb.webp	Smaller copies for the product page gallery (phones, through srcset) and its thumbnail strip; the 4x5 and thumb files are centred crops matching what the frame shows
body-shoulder.webp, body-back.webp	Close-up skin
ritual-cleanse/treat/seal.webp	The three ritual steps
landscape-coast.webp, landscape-coast-720/1080.webp	Dunes and beach on the coast (the smaller copies serve phones and tablets through srcset)
batch-base.webp, batch-base-square.webp	A bottle base with its batch number
harbour-hands.webp	Hands applying cream at a harbour wall
ruth-portrait.webp, ruth-portrait-720.webp	The fictional founder at her bench (the smaller copy serves phones)
harbour-room.webp	The mixing room above the harbour
refill-pouch.svg	A drawn refill pouch, used as the bag thumbnail for the refill size