Skincare

Skincare is a full online shop for a small skincare brand: four pages plus catalogue, product, cart, checkout and a journal. It is built on the rule that makes skincare go wrong — too many products, two of them fighting — and enforces it in code: the routine builder will never hand you two actives, and when it drops one it names it. A second mechanism, a four-question skin-type quiz, is allowed to answer “we cannot tell”.
Pages included

Home — hero on the one-active rule, a dark band of four selling rules that each cost money (one active, percentages on the label, no whitening claims, telling people to see a doctor), a live product strip from the catalogue, a builder teaser, a timeline table saying how long each result actually takes — ending with the row that produces no visible change at all — four facts about manufacturing including “we do not own a factory”, and three customers including one sent to a dermatologist instead.
Build a routine — the builder: morning or evening × skin × concern, assembled from the eleven product cards printed on the same page. Each card carries its step, slot, skin types, concerns, price and an active flag, so the routine is built from the shelf rather than from a second hand-written list. One active per routine is enforced, the dropped product is named, and the morning routine always ends with the note that sunscreen is the step doing the work. Then an order table with a “if you skip it” column that admits which step is the most skippable.
Ingredients — every active at the percentage it is used at, fragrance status, registration number and the town it was made in — with the registration numbers deliberately left as placeholders, and a notice explaining why inventing them would be the one dishonest thing this page could do. Plus a colour-coded combining matrix, a what-we-claim / what-we-will-not-claim pair including a refusal to say “whitening”, and three reasons a higher percentage is worse.
Skin type — the quiz: four questions scoring three axes, with thresholds set so that every branch — including “we cannot tell from four questions” — is actually reachable. Then the four types with the mistake each one makes, three things that are said constantly and are not true, and five things a shop cannot help with and should send you to a doctor for.
Shop, product, cart, checkout — catalogue with category chips, product page with working gallery, patch-test instructions and a refund-if-it-stings promise, and a cart that argues against ordering three new things at once.
Journal — four long posts: why three steps beats seven, why the percentages here are lower than everyone's, a month-long barrier reset, and why the amount of sunscreen matters more than the number.

Design and style. Deep green and sea-green on a pale mint, Epilogue over Inter, pill buttons, generous radii, a quiet sticky header. The shared script carries the menu, the builder, the quiz, the product gallery and accordions — all vanilla and null-guarded, since it runs on every page.
Before you publish. Replace all eleven BPOM numbers — they end in XXX on purpose, because a registration number is a regulatory claim about a specific product from a specific facility. Each product's behaviour in the builder lives entirely in its data- attributes on the routine page, so that is the one place to edit — but the same prices appear in the catalogue, so change both. The active flag is the safety rule: mark anything that genuinely conflicts, leave mild ingredients unflagged, and the builder does the rest. The claims lists are legal territory: cosmetic claims are regulated, and the “what we will not claim” column exists so you can check yours against it rather than inherit ours. Forms use named inputs with no action attribute, so PageHub attaches the handler on publish; sample products and articles are for the preview only.
Best suited to skincare and cosmetics brands, supplement and personal-care shops, and any product where the honest answer is often “use fewer of these, for longer” — and where the difference between a claim and a promise is worth a page of its own.