Rendering skincare
with no camera in the room

Nkuto is the Twi word for shea butter — and the brief's whole thesis in one word: something warm, hand-passed, sensory. The brand needed to feel product-cinematic without a single product photograph, so the creative direction inverted the usual beauty-site order of operations:

• Color owns the structure, not the grid. Each of the four lines gets one color from the brief's palette — butter, cocoa, blush, botanical — and a full-height chapter of its own. The page background itself becomes the product photography stand-in.
• Products are typographic objects, not icons. A jar, a tube, a dropper bottle and a pump bottle — each built from layered CSS gradients so they read as dimensional, glossy, sitting under real light, the way a hero product shot would.
• Milk as the neutral. Between the four saturated chapters, the hero, ingredients, ritual and stockists sections all rest on milk #FFF9EF — a warm off-white rather than clinical white, so the "quiet" sections still feel like skincare, not a spreadsheet.

The environment constraint — no photography, no raster images anywhere in the collection — became the brand's actual manufacturing story: a beauty line that describes its products in the same material it's built from, gradients and line.

Designed and engineered by Fable 5 (Anthropic's model) as designer-engineer, directed by Hannah Kwakye — art direction, palette discipline and final cut are hers. The stack stays deliberately small:

• Hand-authored static HTML, CSS and JavaScript. No framework, no build step, no bundler.
• Zero libraries. The crossfade engine, the reveals, the blob drift and the cursor ripple are IntersectionObserver, requestAnimationFrame and CSS gradients/animation — nothing imported.
• Two self-hosted font files: DM Serif Display (roman + italic cuts) for headlines and product labels, and a variable Hanken Grotesk (400–800) for everything else — three woff2 files total, preloaded, font-display: swap.
• First-view transfer sits well under the collection's 250 KB budget — most of it is the two display fonts; every product, blob and ribbon on the page is markup and CSS, not bytes of image data.

Every product uses the same recipe: a rounded box, a cylindrical shading gradient that runs light→dark→light→dark across it (mimicking how a round object catches light from one side), a radial gloss highlight layered on top for the glass/plastic sheen, and a drop-shadow filter to ground it on the page:

.jar-body {
  background: linear-gradient(100deg,
    var(--butter-d) 0%, #EFB94A 14%, #FBE28C 30%,
    #FFF3CE 44%, #FBE28C 58%, #EFB94A 76%, var(--butter-d) 100%);
  box-shadow: inset 0 3px 4px rgba(255,255,255,.4),
              inset 0 -30px 40px -20px rgba(74,44,26,.25);
}
.jar-body::before {  /* the gloss */
  background: radial-gradient(ellipse at 30% 25%,
    rgba(255,255,255,.85), rgba(255,255,255,0) 65%);
  transform: rotate(-10deg);
}

The seven-stop linear gradient is the whole trick: a flat rectangle reads as a cylinder because the eye recognizes that light→dark alternation as a rolled surface, the same way a photographer would light a bottle from one side with a soft fill from the other. Four products vary the recipe:

• Jar (Shea Rich) — a wide body, a ribbed lid (a repeating-linear-gradient strip standing in for pressed grooves), and a frosted label sitting on top of the gloss rather than blocking it.
• Tube (Cocoa Repair) — a light cream body against a dark cocoa chapter, so the product itself becomes the "spotlight." The crimped seal at the top is one clip-path: polygon() trapezoid with foil-stripe repeating-gradient over it.
• Dropper (Baobab Light) — the only product with implied transparency: the bottle is a translucent white gradient over the chapter's blush background, and a separate .dropper-liquid div sits inside it with its own gradient and highlight, so the "liquid level" reads as glass over fluid, not one flat fill.
• Pump (Hibiscus Glow) — a nozzle rotated off the head via transform-origin: left center, so the same box-gradient recipe gets an asymmetric silhouette without a single extra shape system.

Nothing here is a raster asset, a canvas render or an SVG bitmap filter pretending to be a photo — it's the same seven-line gradient recipe, retuned per line, which is what keeps four very different-looking products feeling like one coherent product family.

The brief's central ask — "the page background tint morphs per chapter" — needed to feel continuous, not like four flat-colored <section>s switching at their edges. The accessible baseline is exactly that (each section carries its own solid, AA-checked background/text pairing, so nothing ever breaks without JavaScript). On top of that baseline, a small engine repaints a single fixed layer behind the whole page in real time:

function colorAt(y) {
  const s = stopContaining(y);       // which section is y inside?
  if (nearStartBoundary(y, s)) return mix(prevColor, s.color, t);
  if (nearEndBoundary(y, s))   return mix(s.color, nextColor, t);
  return s.color;                    // pure, for most of the dwell time
}

The blend only happens in a 130px window either side of a section boundary — a tall, full-height chapter therefore reads as its own pure color for the vast majority of the time you're inside it, and only cross-fades where one chapter's story is handing off to the next. scrollY + innerHeight / 2 (the viewport's own center) is the sampling point, so the transition lands exactly when the incoming chapter's content is arriving on screen, not before. Each real tinted section becomes background: transparent via a single html.wash-active class, letting the fixed layer show through.

Under prefers-reduced-motion: reduce, the wash layer is never created — sections simply keep their own solid backgrounds, which is the FOUNDATION-required "static tints" fallback and also, not coincidentally, the more conservative contrast guarantee.

The hero sits on a metaball-style blob field: an SVG <filter> blurs several soft radial-gradient circles, then a feColorMatrix sharpens the alpha channel back up, which is the classic "goo" trick — blurred edges become crisp again, but two shapes that overlap while blurred fuse into one continuous blob instead of two circles:

<filter id="goo">
  <feGaussianBlur stdDeviation="15" result="blur"/>
  <feColorMatrix in="blur" values="1 0 0 0 0  0 1 0 0 0
    0 0 1 0 0  0 0 0 20 -9"/>
</filter>

The five circles drift on independent, slow CSS keyframe loops (18–30s, out of phase) so the field never repeats a pose. Under reduced motion the blobs simply stop moving — still visible, still gooey, just still.

The cursor's "butter melt" ripple is a pointer-events-none <span> spawned on pointermove (throttled to roughly 14 per second), radial-gradient butter-gold, mix-blend-mode: multiply so it reads as a warm stain rather than a sticker, animating from a small dense dot to a soft faded pool over 0.9s before removing itself. It only runs on pointer: fine devices and never runs under reduced motion — an entirely opt-in, decorative layer with no effect on layout or content.

Three passes, screenshots read like a creative director, findings acted on. What actually changed:

Static files on Netlify, deployed CI-style from the collection's repository. netlify.toml publishes the site root, sets immutable year-long caching on /assets/*, and adds the standard hardening headers. The waitlist is Netlify Forms — a plain HTML <form data-netlify="true"> with a honeypot field, no JavaScript required to submit.

This is one of 26 sites in Hannah Kwakye's collection — the shared thesis being that AI doesn't replace taste; it amplifies the designer who has it. See the design process for the thinking, or return to the collection.