Selling skin care
with no camera

The imagined client: a modern African beauty line named for nkuto, the Twi word for shea butter — four product lines (Shea Rich, Cocoa Repair, Baobab Light, Hibiscus Glow), each already assigned its own color inside the brief. The deliverable was a single-scroll site that could stand in for a full product photography shoot: hero, four line chapters, an ingredients/provenance story, a use ritual, and a stockists-and-waitlist close.

Within the portfolio collection, this is the Tier C color-system showpiece — the site whose entire signature is that the palette isn't decoration sitting on top of the layout, it is the layout, changing as you scroll.

Beauty e-commerce sells through photography almost more than any other category — glossy hero shots, texture close-ups, skin-on-product moments. Remove the camera and three problems surface immediately:

• Desirability without a photo. A jar of cream has to look like something you want to open, using only shape, gradient and light — no texture close-up to lean on.
• Four products, one coherent brand. A jar, a tube, a dropper bottle and a pump bottle are different objects; they need a shared construction logic so the range reads as one house, not four unrelated illustrations.
• Color as narrative, not wallpaper. Five colors (four line colors plus a neutral) is a lot for one page — they needed a structural reason to appear in sequence, not just a palette dumped across sections.

Success meant a visitor scrolling once, with sound off and images disabled by definition, still finishing the page believing each of the four products has its own texture, its own morning, its own mood.

Rejected: abstract duotone "editorial" imagery

Gradient-mapped abstract shapes standing in for product photography (a common workaround) were tempting but generic — every gradient-first site defaults to this, and it says nothing specific about this brand's four products. It also under-delivers on the brief's explicit ask for "genuinely product-cinematic" renders.

Rejected: flat icon-style product illustrations

Simple flat-color silhouettes (the kind used in a spec sheet or app icon) would have been fast and safe, but they read as UI, not skincare — cold, not sensory. The brief's whole point is that skin remembers texture and warmth; a flat icon remembers nothing.

Rejected: one dominant brand color, tints only for accents

An earlier structural idea kept a single dominant background (milk) throughout and used the four line colors only as small accents per section. It was safer and easier to keep accessible, but it buried the brief's actual signature — "the page background tint morphs per chapter" — as a footnote instead of the main event.

Chosen: full-bleed, per-chapter color ownership + gradient-built products

Each line gets the whole viewport and its own color; each product is built from the same seven-stop gradient recipe, retuned per line, so the family reads as one system; a scroll-linked crossfade turns the transitions between chapters into the page's own signature motion rather than a hard cut.

Alternating light/dark chapters, by design

Butter and blush are light; cocoa and botanical are dark. Rather than treat that as an accessibility problem to work around, the chapter order was chosen deliberately (light, dark, light, dark) so contrast is easy to guarantee — cocoa or milk ink, never a fifth color — and the rhythm of the page itself alternates like a breath as you scroll.

A crossfade with a short leash

A literal, continuous color interpolation across the whole page is the honest reading of the brief, but blending too widely muddies text contrast mid-chapter. The trade-off: blend only within a narrow window at each section boundary, so the effect is real and continuous exactly where it should be noticed (the handoff between two products) and invisible where it would hurt (the reading experience inside a chapter).

Three rituals, four products

The brief calls for a three-step ritual built from a four-line range. Rather than force an artificial fourth step, the two "glow" lines (Hibiscus Glow, Baobab Light) were paired into a single morning step — which also happens to be how a real regimen would actually be sequenced (mist, then oil), so the constraint produced a more honest ritual than a rigid one-step-per-product mapping would have.

Provenance handled as a labeled illustration, not a backdrop

Shea's real supply chain runs through women-led cooperatives in northern Ghana — a fact worth honoring, not decorating with. The ingredients section states plainly, in its own copy, that the sourcing details shown are illustrative and no real cooperative is named or depicted, rather than letting a fictional brand quietly borrow real people's labor as texture.

Framed as design goals, since a fictional line has no metrics to claim:

• Prove color can do photography's job. If a beauty line's desirability can survive with zero raster imagery — just gradients, light and a disciplined palette — the collection's "every visual is code" rule is demonstrated at one of its hardest categories.
• Show a repeatable product-render system, not four one-off graphics. The same gradient construction, varied four ways, is the deliverable a real client could extend to a fifth or sixth product without a new design language.
• Stay accessible while being playful. A real-time color engine that never drops below AA contrast, and degrades to a fully static, equally correct experience under reduced motion or without JavaScript at all.

How it was built — the gradient recipes, the crossfade math, the blob field — is documented generously in the build guide. Or return to the collection and scroll it again.