Scaling Product Consistency with Workhall Design System V2
Consolidated a fragmented component library into a unified, token-driven design system: conducting a platform-wide component audit, co-defining token structures with engineering for 1:1 CSS variable alignment, and shipping adoption into active product areas in 2025.
The Gap
Business gap
As Workhall’s no-code business application platform expanded, UI components began diverging independently across product surfaces. Duplicate component variants accumulated over time, while deprecated versions remained in active use by engineering teams. Spacing values had no consistent scale. Colour values were not validated against accessibility standards, with several combinations failing WCAG contrast checks. With no shared token baseline and no alignment between design and engineering naming conventions, updates were costly, inconsistencies compounded across the product, and there was no reliable path for keeping design and engineering in sync.
User gap
Developers and designers often encountered inconsistent UI patterns across modules, including variations in buttons, inputs, tables, and spacing rules. Without a structured token system or unified component standards, updates required manual adjustments and increased the risk of inconsistencies across the product.
As a live enterprise product under IP protection, design artefacts and screens cannot be shared publicly. Impact is documented through process evidence, system scope, and engineering adoption rather than quantitative metrics.
How I worked
Research
Conducted a full audit of existing components, tokens, and UI patterns across the platform. The audit surfaced concrete structural problems: 134 distinct grey values in the engineering codebase with no token structure; duplicate component variants coexisting with deprecated versions that dev teams were still actively using; a spacing system with no consistent scale; and colour values that failed WCAG contrast requirements across multiple combinations. Seven enterprise design systems were also benchmarked to inform the V2 architecture.
Strategy
The strategy focused on transitioning from ad-hoc component usage to a token-driven system architecture. This included redefining visual foundations, standardizing components with defined interaction states, and introducing a variable library that maps directly to development tokens.
Wireframes
Component architecture diagrams and exploratory layouts were created to evaluate scalable component patterns. These explorations defined component hierarchies, variant structures, and reusable interaction patterns that could support future platform features.
Iterations
Several iterations were conducted to refine token structures, component variants, and naming conventions. Key decisions included consolidating overlapping variants, aligning token names directly with engineering's CSS variable conventions, and stress-testing component hierarchies against real product flows. Final system structures were validated in working sessions with frontend engineering teams before being committed to the library.
What we built
Workhall Design System V2 introduces a scalable component and foundation architecture that standardizes UI patterns across the platform. The system ensures that product interfaces are built using shared design primitives rather than isolated implementations.
AI was used to rapidly synthesise patterns from seven enterprise design systems into a comparative audit framework in a single session, a task that would otherwise have required days of manual analysis. This compressed the benchmarking phase significantly, freeing more time for the structurally harder work: translating audit findings into a token hierarchy that engineering teams could implement consistently. The AI-assisted analysis also surfaced naming convention conflicts between design and engineering that became a key early alignment point in cross-functional conversations.
The updated system introduces structured foundations including typography scales, spacing systems, color tokens, elevation layers, and icon standards. A comprehensive component library was developed with clearly defined states and variants. Variable libraries and design tokens were implemented to ensure consistent usage across both design and engineering workflows.
What changed
Results
V2 addressed each of the audit's findings directly. The 134-value grey spectrum was consolidated into a structured, token-driven colour system with defined semantic roles. Duplicate and deprecated component variants were rationalised into a single set of clearly scoped, versioned components. Spacing was codified into a consistent scale. Colour tokens were rebuilt to meet WCAG contrast requirements across the product. Variant structures and token names were co-defined with frontend engineering for 1:1 mapping to CSS variables, making V2 immediately usable across the stack without translation overhead. The system shipped into active product areas in 2025, with adoption continuing into new feature development areas through 2026.
Learnings
The most important decision in this project was sequencing: auditing before building. Starting with a full component audit, rather than beginning immediately with new component designs, revealed the true scope of divergence and prevented V2 from inheriting V1’s structural problems. The surprising finding was how many inconsistencies were invisible to both design and engineering until they were mapped side-by-side: teams had independently solved the same interaction patterns in slightly different ways, without realising they were solving the same underlying problem.
Next steps
Future iterations may introduce theme support, expanded component coverage, automated token synchronization with engineering systems, introduction of copy-based tokens, and enhanced documentation to support faster adoption across product teams.
Next project
Nothing Technology: Concept Brand RedesignNothing · Brand Site · Concept · 2026
See all works