Selling texture, not photographs

The imagined client: a small heritage leather workshop in Tanoso, a neighbourhood of Kumasi near the city's old leather-trading district. Four artisans, six benches, one hide at a time — full-grain goods that are cut, skived, saddle-stitched and burnished entirely by hand. The deliverable was a digital storefront that could sit alongside the workshop's actual bench: six house goods with real Ghana cedi pricing, the hide-to-handle process made visible, the physical workshop introduced by name, and a bespoke-commission form that reads like walking up to the cutting table.

Within the portfolio collection this is a Tier C texture-and-craft statement: the site where the collection's ground rule — every visual authored in code — is stress-tested against the single hardest material to fake convincingly on a screen: leather.

Leather goods sell on touch as much as sight — weight, grain, the smell of a good hide. A screen has none of that, and most leather-brand sites compensate with glossy studio photography, which was ruled out from the start. The real problem statement had three edges:

• Tactility without photographs. The grain, the emboss, the stitching all had to read as physically real using only filters, gradients and line, with nothing photographed or rendered offline.
• Craft made visible. A hand workshop's whole value proposition is the hand — the site needed to show process, not just product, or it would read like any other e-commerce template.
• Warmth without kitsch. "Heritage African craft" online tips easily into either sterile minimalism or over-decorated stereotype. The brief needed confident, specific warmth: real place names, real technique vocabulary, a restrained four-colour palette.

Success meant a visitor who has never touched a piece of full-grain leather still understands, from the screen alone, why hand-stitching costs what it costs.

Rejected: CSS gradient "faux leather" swatches

A quick multi-stop gradient with a subtle noise overlay can approximate leather at thumbnail size, but it flattens under scrutiny — no real hide has perfectly repeating texture. The brief's signature line explicitly called for convincing grain, which meant investing in true layered noise filters rather than a decorative shortcut.

Rejected: full product photography substitutes (duotone silhouettes)

Duotone, photographically-lit product silhouettes were tempting — they read as premium fast. But they smuggle a camera's logic back into a brand that has none, and they would have meant six near-identical renders instead of six distinct hand-drawn objects with their own character. Line drawings, refined and specific to each product, won.

Rejected: a literal stitched-leather page background

An early direction wrapped the entire page in a stitched-border "leather panel," like a bound ledger. It read as a gimmick applied everywhere rather than a craft detail earned in the right place — and it fought the grain texture for attention. Stitching was rationed to where sewing actually happens: the product cards.

Chosen: workbench structure, texture earned by physics-adjacent filters

A tool-rail nav standing in for a pegboard; product cards as swatches, not a catalogue grid; a process strip that shows the six real stations of the craft; and exactly two signature techniques — layered-noise grain with a lit emboss, and self-sewing stitch marks — kept deliberately rare so each one still reads as special.

Four colours, hardware-accurate

Cognac and dark chocolate for hide, stitch cream for thread, brass for hardware — a palette lifted directly from the material rather than a generic "earthy" brand board. The discipline costs some conventional UI affordances (status colours, muted greys) and buys a site that could only ever be about leather.

SVG filters over CSS-only texture

Native feTurbulence/feDiffuseLighting filters are heavier to write and slower to iterate on than a CSS gradient, and their rendering has more cross-browser variance than transform/opacity animation. They were chosen anyway because the brief's whole thesis rests on the grain being convincing, not merely present — and because they cost nothing in network weight (no texture image), only render time, which is capped by scoping the filter regions and never animating the noise fields themselves at rest.

Hand-plotted products, not a generator

Six SVG line objects were drawn individually rather than parametrically generated, matching the site's honesty: a satchel, a belt and a pair of sandals are different objects with different logic (a flap-over closure vs. a woven strap vs. a buckle), not the same template recoloured. The cost is six times the authoring effort for six times the specificity.

Stitching rationed to the goods

The self-sewing stitch-mark technique appears only on product cards, where sewing is literally what happens to that object. Restraint is the trade-off: a flashier build might have stitched every card, every border, every button — here it's reserved for the one place it means something.

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

• Prove the thesis against its hardest material. If leather — a texture, a smell, a weight — can be sold convincingly with filters and line alone, the collection's "every visual is code" rule holds even at its most physically demanding.
• Make craft legible, not just implied. The hide-to-handle process strip and the workshop section exist so a visitor understands why a hand-stitched belt costs more than a machine-stitched one, not just that it does.
• Stay warm without leaning on cliché. Specific place names (Tanoso, Kumasi, Adum), specific technique vocabulary (skiving, saddle-stitch, burnishing) and a restrained palette carry the "heritage African craft" register with respect rather than decoration.

How it was built — the grain filter, the emboss lighting, the self-sewing stitch marks — is documented generously in the build guide. Or return to the workshop and walk the bench again.