Toolwiz Design System

Background

This case study captures how I built the Toolwiz Design System from scratch for KV Consulting — a B2B firm serving startups and enterprises across fintech, AI, and Web3 with recruiting, payroll, and operational solutions. The system was designed to bring consistency, speed, and quality to the company's growing portfolio of client-facing platforms and websites.

My Role

I was the sole design consultant responsible for the system end-to-end — from audit to architecture to production. I also led the cross-functional team of designers and developers who implemented and adopted the system.

Design System Architect: Defined the token structure, component API, documentation standards, and governance model.

Platform Designer: Led information architecture and interaction design for the core Toolwiz product.

Team Lead: Established sprint rituals, design QA checkpoints, and stakeholder review cadences across the team.

Tools

Figma: Where all components, tokens, and pattern libraries were designed and maintained.

Claude AI: Used to generate and publish comprehensive component documentation — props, usage guidelines, accessibility notes, and do/don't examples.

Vercel: Where the design system documentation site is hosted and maintained.

Challenge

As KV Consulting's client base grew, each project was being designed and built in isolation. The symptoms were everywhere: different spacing scales across projects, inconsistent button styles between platforms, onboarding flows that felt like they belonged to different companies. Engineering was rebuilding the same UI patterns from scratch on every engagement, and new team members had no single source of truth to reference.

The cost wasn't just visual inconsistency — it was slower delivery, higher rework, and a client experience that didn't reflect the quality KV Consulting was selling.

Goals

1. Consistency: Create a single design language that works across all client projects and internal platforms
2. Speed: Reduce design-to-dev handoff time and eliminate redundant component rebuilds
3. Onboarding: Give new designers and developers a clear starting point instead of reverse-engineering existing projects
4. Documentation: Build comprehensive, maintainable docs that don't go stale the day they're published

Getting Started

Interface Inventory

Conducted a visual audit across existing client projects and internal tools. Catalogued every button variant, form pattern, color value, and spacing decision in use. The inventory revealed 14 different button styles, 6 unrelated color palettes, and no shared spacing scale — across just 4 projects.

Research & References

Analysed the interface inventory against established design systems (Vercel Geist, Atlassian, Shopify Polaris, shadcn/ui). Identified a three-layer architecture as the right approach: Tokens — Components — Patterns.

Key decision: chose a token-first approach over a component-first approach. By locking down design tokens (colour, spacing, typography, elevation) before building any components, we ensured every component would inherit the same DNA from day one.

Structure

Foundations (Design Tokens)

The system's foundation layer defines the raw values that every component consumes:

• Colour: Primary, secondary, semantic (success, warning, error, info), and neutral scales with dark mode support
• Typography: Type scale, font weights, and line heights — standardised across headings, body, labels, and captions
• Spacing: 4px base unit scale (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96)
• Elevation: Shadow tokens for cards, modals, dropdowns, and popovers
• Border Radius: Consistent radius tokens from subtle (4px) to fully rounded

Components

Built 100+ production-ready components across these categories:

• Inputs: Text fields, selects, checkboxes, radio buttons, toggles, date pickers — each with idle, focus, error, disabled, and read-only states
• Actions: Buttons (primary, secondary, ghost, destructive), icon buttons, button groups, split buttons
• Navigation: Tabs, breadcrumbs, pagination, sidebar navigation, top bar
• Feedback: Toasts, alerts, badges, progress indicators, skeleton loaders
• Data Display: Tables, cards, stat blocks, avatars, tags, tooltips
• Layout: Containers, grids, dividers, stacks, responsive breakpoints

Every component was documented with: interactive states, minimum and maximum content examples, responsive behaviour, accessibility requirements, and do/don't usage guidelines.

Patterns

Composed layouts built from foundation tokens and components, designed for the most common flows:

• Onboarding: Multi-step forms, progress indicators, welcome screens
• Dashboards: Stat grids, data tables with filters, chart containers
• Settings: Form sections, toggle groups, account management layouts
• Data Tables: Sortable, filterable tables with pagination and bulk actions

AI-Powered Documentation

This is where the process diverged from a traditional design system build. Instead of manually writing documentation for 100+ components — which typically takes weeks and goes stale fast — I used Claude AI to generate and publish the documentation.

The workflow:

1. Define component specs in Figma (props, variants, states, accessibility requirements)
2. Feed structured specs to Claude with documentation templates and style guidelines
3. Claude generates comprehensive docs: usage guidelines, prop tables, code examples, accessibility notes, and do/don't patterns
4. Review, refine, and publish to the documentation site

The result: Documentation time dropped by approximately 60%. But speed wasn't the only benefit — the AI-generated docs were more consistent than manually written ones. Every component got the same depth of coverage, the same structure, the same tone. No component was over-documented while another was a stub with "TODO: add usage guidelines."

Key Insight

Using Claude AI for documentation wasn't just a speed hack — it enforced a quality standard. The AI didn't get tired, skip edge cases, or write inconsistent docs across components. Every component got the same rigour: props, usage guidelines, accessibility notes, and do/don't examples.

Platform Design

Beyond the system itself, I led platform design for the core Toolwiz product. This involved defining information architecture, interaction patterns, and responsive layouts for the documentation site and internal tools.

The design system's own documentation site became the first product built entirely on Toolwiz — serving as both a reference and a proof of concept. New clients experienced a familiar, polished interface from day one, reducing onboarding friction by approximately 35%.

Website Design & Launch

Designed and launched 2 company websites end-to-end — from research and wireframes through to production. Both were delivered within 4-week sprints using the Toolwiz system as the foundation.

The websites drove approximately 45% increase in inbound lead generation, proving that a unified design language doesn't just improve internal efficiency — it directly impacts business development.

Process & Adoption

Rolled out the system incrementally, starting with the most frequently used components (buttons, inputs, cards, tables) to maximise early adoption and build team confidence.

Established sprint rituals, design QA checkpoints, and stakeholder review cadences that improved on-time delivery rate to 95%. AI-assisted workflows using Claude and Figma AI accelerated design exploration and reduced iteration cycles by approximately 30%.

Held feedback sessions with designers and developers for firsthand assessment of what was working and what needed iteration. Component APIs were refined based on real implementation feedback, not assumptions.

Impact

• 100+ components shipped and documented
• ~60% faster documentation through AI-assisted workflows
• ~35% reduction in client onboarding friction
• ~45% increase in inbound leads from redesigned websites
• 95% on-time delivery rate with new sprint rituals
• ~30% fewer iteration cycles through AI-assisted design exploration

Key Takeaways

Token-first, not component-first. Locking down design tokens before touching components meant every piece of the system spoke the same language from day one. Retrofitting tokens onto existing components is exponentially harder.

AI doesn't replace design thinking — it scales documentation. Claude AI was transformative for documentation but useless for the design decisions themselves. The value was in eliminating the grunt work so I could spend more time on architecture and component API design.

Start with what ships most. Rolling out the most-used components first (buttons, inputs, tables) built team trust and momentum before tackling complex patterns. Trying to ship everything at once would have stalled adoption.

A design system is a product, not a project. It needs ongoing maintenance, feedback loops, and someone who owns it. The governance model matters as much as the components.

Conclusion

The Toolwiz Design System transformed how KV Consulting delivers client work — from inconsistent, project-by-project design to a unified system that scales across engagements. By combining a rigorous token-first architecture with AI-powered documentation, the system achieved both speed and quality that wouldn't have been possible with a traditional approach.

It continues to evolve as the team grows and new patterns emerge from client work.