Sewing a workshop into pixels

The brief was texture as proof: a heritage leather studio has to feel tactile on a screen that has none. Every decision serves that one problem.

• Workbench layout. A tool-rail nav standing in for pegs on a wall, sections separated by a "burnished edge" shadow line, product cards styled as swatches rather than a catalogue grid.
• Four leathers of colour. Cognac #8C4A23 and dark chocolate #2C1A10 carry the hide; stitch cream #EFE3CE is the thread; brass #B08D3F is the hardware. Nothing else appears.
• Two voices. Zilla Slab — a tools-and-leather slab serif — speaks for the house and its products; Work Sans, wide-tracked in small caps, is the workshop's label-maker voice for captions and UI.

The signature commitment: no photograph of leather would ever look as convincing as leather that is computed — grain built from layered noise, an emboss lit by a simulated light, stitches that are drawn, not stock-photographed.

Designed and engineered by Fable 5 (Anthropic's model) as designer-engineer, directed by Hannah Kwakye — art direction, taste 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 leather grain and the emboss are native SVG filters; the stitching and tool-icon draw-ins are IntersectionObserver plus stroke-dashoffset — about 140 lines of vanilla JS.
• Three self-hosted static fonts (Zilla Slab regular and bold, Work Sans variable) as woff2, preloaded, font-display: swap. No runtime request leaves the origin.
• Every product — satchel, belt, sandals, tote, wallet, watch strap — is a hand-plotted SVG line drawing on a shared 200×160 stage, so the whole goods wall ships inside the HTML document itself.

Real leather reads as texture at two scales at once: fine pore-grain and the coarser, wandering undulation of the hide itself. One feTurbulence can't do both convincingly, so the grain filter layers two:

<filter id="leatherGrain">
  <feTurbulence type="fractalNoise" baseFrequency="0.85"
     numOctaves="2" seed="4" result="fine"/>
  <feTurbulence type="fractalNoise" baseFrequency="0.03"
     numOctaves="4" seed="11" result="coarse"/>
  <feColorMatrix in="fine" ... result="fineA"/>
  <feColorMatrix in="coarse" ... result="coarseA"/>
  <feComposite in="fineA" in2="coarseA" operator="arithmetic"
     k2="1" k3="1" result="grainA"/>
  <feColorMatrix in="grainA" ... result="grainTint"/>
  <feBlend in="SourceGraphic" in2="grainTint" mode="multiply"/>
</filter>

The two feColorMatrix steps convert each turbulence field into a translucent alpha mask at a different strength, feComposite sums them, a final feColorMatrix tints the result a warm near-black, and feBlend's multiply mode presses that tint into whatever sits underneath — the hero's radial gradient, the process strip's cognac panel, the care section's chocolate ground. One filter, referenced by filter: url(#leatherGrain), textures every dark surface on the site identically, the way one tannery's hide texture would.

"TANOSO" in the hero is not a styled heading — it's an SVG <text> run through a lighting filter that treats the letterforms as a raised surface on the hide:

<filter id="emboss">
  <feTurbulence type="fractalNoise" baseFrequency="0.9"
     numOctaves="2" seed="7" result="noise"/>
  <feDiffuseLighting in="noise" surfaceScale="2.4"
     lighting-color="#F6ECDA" result="light">
    <feDistantLight id="embossLight" azimuth="235" elevation="50"/>
  </feDiffuseLighting>
  <feComposite in="light" in2="SourceAlpha" operator="in" result="litText"/>
  <feBlend in="SourceGraphic" in2="litText" mode="soft-light"/>
</filter>

feDiffuseLighting treats the turbulence field as a bump map and a feDistantLight as a light source, producing highlights and shadows exactly where the noise rises and falls. Clipping that lit field to the text's own alpha (feComposite operator="in") means only the letterforms catch the texture; soft-light-blending it back over the flat cognac fill keeps the type legible while giving every stroke a leather-grain sheen, as if the word were tooled into the hide rather than printed on it.

A small rAF loop drifts the light's azimuth and elevation on a slow sine while the hero is on screen, so the emboss catches the light slightly differently over time — a hide turned in a workshop window, not a static texture. It pauses off-screen and never runs under reduced motion, where the filter simply renders one well-lit, static frame.

Each product swatch carries an SVG overlay of 44 short <line> "stitch marks" placed evenly around its rounded border, generated in JS rather than hand-plotted:

const perimeter = 2 * (W + H);
for (let i = 0; i < 44; i++) {
  const d = (i / 44) * perimeter;      // distance along the border
  // ...walk the four sides, place a short tick centered at d
  line.style.setProperty('--i', i % 12);
}

Each mark starts scaled down and transparent; CSS reveals it on hover or focus with a transition-delay keyed to its index, so the seam appears to travel around the card rather than simply fade in — the same "sequence, not simultaneity" trick used for the tool icons below, applied to dozens of tiny stitches instead of a handful of paths. Under prefers-reduced-motion, every mark is forced visible immediately (!important, transitions killed) — the seam is pre-sewn, since a hover-triggered reveal has no reduced-motion equivalent worth keeping.

The process strip's six tool icons use the classic self-drawing SVG technique — measure each path's real length, then transition its stroke-dashoffset from that length to zero:

svg.querySelectorAll('path').forEach((p, i) => {
  const len = Math.ceil(p.getTotalLength()) + 2;
  p.style.strokeDasharray = len;
  p.style.strokeDashoffset = len;
  p.style.transitionDelay = `${i * 140}ms`;
});

An IntersectionObserver watches each station and sets strokeDashoffset = 0 once it's a third visible, so the knife, the awl, the needle and thread draw themselves in as the visitor scrolls past — a single knife stroke, a single needle pass, never more than the tool needs. Under reduced motion the dash properties are never set, so every icon is simply, instantly drawn.

The collection's protocol: three passes, screenshots read like a creative director, findings acted on. What actually changed:

The site is 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/* (fonts and CSS are content-stable), and adds standard hardening headers. The commissions form 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 workshop.