Wootz.work

Wootz.work is a B2B custom-manufacturing platform selling fasteners and machined parts to industrial OEMs. The site is not a brochure — it’s 88 pages across 10 templates: industry, service, capability, technology, blog, careers, about, contact, resources, home.

At that size the design work stops being page design and becomes system design.

Tokens first, because 88 pages will drift otherwise

The whole thing runs off a documented token set — brand blue #1a6798, a dark green #223e32 for footers and dark sections, gold #edc670 for badges and map labels, plus full primary, neutral and accent scales.

That reference lives in the repo alongside the Figma file ID and the connected Align UI library, so a new page doesn’t get built by eyedropping an old one. Colour drift on a site this size isn’t a visual problem, it’s a maintenance problem: once three blues exist, nobody can safely change any of them.

Code components inside Webflow

The parts Webflow can’t express cleanly — filtered blog listings, interactive maps, image-mapped fastener diagrams — are built as React code components and published into the Designer, so the marketing team keeps editing them like native Webflow elements.

That’s the trade I like in this stack: Webflow owns the pages and the CMS so non-engineers stay unblocked, and code owns the parts that would otherwise be a pile of embeds nobody dares touch.

Sister site: same system, different brand

Havmek runs on the same approach with an entirely different visual language — proof the method transfers rather than the aesthetic.