Cogworks — four enterprise design systems

Context

As the sole Frontend Engineer across multiple simultaneous client engagements at an Umbraco Gold Partner agency, I architected and built full design systems from scratch — design tokens sourced from Figma, component libraries, and Storybook documentation — for four enterprise clients:

Evelyn Partners ↗ — UK's largest integrated wealth management firm (£60bn AUM)
Russell-Cooke ↗ — Top 100 UK law firm, ~200 specialist solicitors
Shawbrook Bank ↗ — UK specialist bank offering savings and lending products
S&W Group ↗ — Professional services group

Client Figma files and Storybook instances are confidential, so this write-up focuses on scope, approach, and outcomes rather than screenshots.

What shipped

Each engagement was a separate brand system built on a shared architecture — not one monolithic library dropped onto four clients:

Token layers — color, spacing, typography, and elevation mapped from Figma variables into code primitives per brand
Component library — forms, navigation, cards, feedback, and layout primitives with strict variant contracts
Storybook catalog — live examples, prop tables, and implementation notes for handoff to continuing teams
Review gates — accessibility and consistency checks before components entered production Umbraco frontends

Challenge

Different sectors (wealth management, law, banking, professional services) with different compliance and tone expectations
Tight timelines and evolving scope across concurrent engagements
Need to keep codebase ergonomics high for delivery teams while each brand stayed visually distinct

Approach

Translated Figma design tokens into code primitives first, then layered components on top of those contracts.
Built per-client systems that reused the same patterns — theming via token sets, not forked one-off components.
Handled sector-specific needs (legal disclaimers, financial disclosure layouts, regulated form patterns) through content and layout variants, not separate codebases.
Documented patterns in Storybook as the single source of truth for design–engineering handoff.
Introduced quality gates for accessibility and visual consistency before merge.

Outcome

Four parallel brand systems delivered under concurrent engagements, each production-ready for Umbraco-powered sites
Repeatable Figma-to-code token pipeline reused across clients, reducing setup time on later engagements
Storybook as the handoff surface cut back-and-forth with design and continuing engineering teams
Stronger token-through-component consistency across wealth, legal, banking, and professional services brands