Design SystemsArchitect
I bridge design and engineering like no one else.
Bridging
Design& Code
Distinguished Senior/Lead Designer and Developer with extensive expertise spanning design systems architecture, enterprise application development, UI/UX, and front-end development.
Combines creative vision with deep technical capability—architecting design systems that serve as the foundation for enterprise applications, while equally comfortable implementing complex backend integrations and database operations. From initial research through to production deployment.
Technical Expertise
A full-stack toolkit built over nine years of shipping production software across startups, agencies, and enterprise environments.
Frontend & UI
Design Systems
Backend & Infrastructure
CMS & Platforms
Design & Creative
Testing & Accessibility
Areas of Specialism
What I Do
Four disciplines, one goal: creating work that communicates clearly and functions beautifully.
Design Systems
Enterprise-grade component libraries with three-tier token architecture, W3C DTCG-compliant design tokens, and comprehensive documentation. Built to scale from startup to enterprise.
Full-Stack Development
Production applications with React, Next.js, and modern backend tech. Payment gateway integrations (Fiserv, Open Banking), legacy platform modernisation, and complex database operations.
Graphic Design & Visual Communication
Senior-level creative direction across brand development, visual identity, and marketing communications. Six years building brands from startup through market maturity—packaging, print collateral, trade shows, and integrated digital campaigns. Brand guidelines that enable consistent, scalable growth.
Accessibility
WCAG 2.2 AAA compliance as standard. Every component tested with axe-core, Pa11y, and real assistive technology. Inclusive experiences aren't optional—they're foundational.
Inclusive.io
Design System
A comprehensive, accessibility-first design system built to prove that exceptional developer experience and WCAG 2.2 AAA compliance can coexist without compromise.
The Challenge
The design system landscape has become homogeneous. Shadcn and Radix dominate, creating a sea of identical interfaces—what some call "AI slop." Meanwhile, accessibility remains an afterthought, with most systems targeting only WCAG AA at best.
For Applicant Tracking Systems specifically, the problem compounds: generic components fail to address recruitment workflows, and candidates with disabilities face unnecessary barriers during what's already a stressful process.
The goal: Build "the single greatest design system ever built"— one that sets a new standard for accessibility, documentation, and visual identity.
Sole architect responsible for research, design, component development, token architecture, and documentation.
Next.js 16, Framer Motion, DaisyUI styling, React Aria accessibility, OKLCH colour system.
Highest international standard. All 86 success criteria. Automated testing with axe-core and Pa11y in CI/CD.
Technical Approach
Every architectural decision was researched, documented, and chosen for specific, defensible reasons.
| Decision | Choice |
|---|---|
| Base Styling | DaisyUI |
| Accessibility | React Aria |
| Animation | Framer Motion |
| Colour Space | OKLCH |
| Token Spec | W3C DTCG |
Key Features
WCAG 2.2 AAA Compliance
Every component tested against all 86 success criteria. 7:1 contrast ratios, full keyboard navigation, screen reader optimisation.
OKLCH Colour System
Perceptually uniform colour space ensuring consistent contrast ratios across the entire palette. Future-proof and CSS-native.
Three-Tier Token Architecture
W3C DTCG-compliant design tokens: Reference → Semantic → Component. Single source of truth from design to code.
280px to 5K Responsive
12 breakpoints covering every device from Galaxy Fold closed screen to 5K ultrawide monitors. No layout breakage at any width.
React Aria Foundation
Adobe's accessibility-first primitives providing robust keyboard, focus, and ARIA handling. No Shadcn, no Radix—unique identity.
ATS Domain Components
14 recruitment-specific components: Kanban boards, candidate cards, scorecards, interview schedulers—built for real workflows.
Live Demo: Version 1
Explore the deployed design system. Navigate components, review documentation, and see the accessibility-first approach in action.
Loading design system...
Interact directly with the design system above. Full keyboard navigation supported.
Building V1: The Process
V1 began with a simple question: what would a design system look like if accessibility wasn't a checkbox but the foundation? The answer required rethinking every assumption about component architecture.
Research spanned enterprise systems (Carbon, Polaris, Spectrum), academic HCI literature, and W3C specifications. Each component was built from React Aria primitives, ensuring keyboard navigation, focus management, and screen reader announcements were baked in—not bolted on.
The token architecture emerged from studying the W3C Design Tokens Community Group specification, implementing a three-tier system that separates raw values from semantic meaning from component-specific overrides.
Lessons Learned
Retrofitting accessibility is expensive. Building on accessible primitives from day one makes AAA compliance achievable, not aspirational.
Without a proper token architecture, theming becomes a maintenance nightmare. The three-tier system pays dividends in every new component.
A component without documentation doesn't exist. Interactive examples, code snippets, and accessibility notes are as important as the code itself.
Generic components require customisation. ATS-specific components like candidate cards and pipeline boards ship ready for real workflows.
V1 Outcome
V1 proved the concept: a design system that treats accessibility as foundational, not optional. 70+ components, WCAG 2.2 AAA compliance, and a token architecture that scales. But more importantly, it revealed where to push further—better APIs, deeper documentation, and expanded domain coverage. V1 wasn't the destination; it was the foundation.
Version 2.0: Pushing Further
V2 isn't a minor update—it's a complete evolution. Everything learned from building and using V1 has been synthesised into a system that's more powerful, more documented, and more refined.
- 70+ components with WCAG 2.2 AAA compliance
- Three-tier token architecture (DTCG-compliant)
- 12 responsive breakpoints (280px-5K)
- React Aria accessibility foundation
- ATS-specific recruitment components
- Enhanced component APIs with better composition
- HeroUI integration for refined base styling
- Expanded ATS patterns: Kanban, scorecards, schedulers
- Documentation detailed enough for 1st-gen LLM execution
- Performance optimisations and reduced bundle size
1st Gen LLM Challenge
Documentation so explicit that a first-generation language model with zero capability for interpretation could implement every component correctly on first attempt. No ambiguity, no inference required.
Refined Visual System
Complete visual overhaul with improved colour relationships, refined spacing scale, and enhanced elevation system. Every visual decision traced back to perceptual research.
Performance First
Tree-shakeable exports, optimised bundle splitting, and lazy loading for heavy components. Initial JS under 100KB gzipped with performance budgets enforced in CI.
Live Preview: Version 2
V2 is live and evolving. Explore the refined interface, enhanced components, and comprehensive documentation.
Loading V2...
Version 2 preview. Active development—features may change.
Building V2: The Approach
V2 started with a critical audit of V1—what worked, what didn't, and what was missing. The codebase was analysed line by line, every component evaluated against real-world usage patterns.
The migration to HeroUI provided a more refined base than DaisyUI, with better accessibility primitives and more consistent styling. The component API was redesigned for composition over configuration— smaller, focused components that combine predictably.
Documentation became the primary deliverable. The "1st Gen LLM Challenge" forced a level of explicitness that benefits everyone: if an AI with zero reasoning capability can implement it, any developer can.
Key Improvements
Components designed to work together through slots and compound patterns, reducing prop complexity while increasing flexibility.
Separate packages for core utilities, React components, and design tokens. Tree-shakeable imports mean you only ship what you use.
22 specification files covering architecture, tokens, foundations, components, patterns, and quality. Every decision documented.
New domain components: interview schedulers, scoring systems, pipeline metrics, and candidate comparison views built for recruiters.
V2 Outcome
V2 represents a complete evolution—not just better components, but a fundamentally improved approach to building and documenting design systems. The "1st Gen LLM Challenge" produced documentation that serves developers at every skill level. The monorepo architecture enables selective adoption. And the expanded ATS components address real recruitment workflows that generic systems ignore.
What's Next
The vision remains unchanged: build the single greatest design system ever built. V2 is a major milestone, but the work continues—refining components, expanding documentation, and pushing the boundaries of what's possible when accessibility and developer experience are treated as equals.
The roadmap includes a complete Figma component library with 1:1 code parity, the "Design System Bible" (comprehensive documentation for public release), npm package publication, and continued expansion of ATS-specific patterns based on real recruiter feedback.
Experience
Nine years bridging design and engineering—startups, agencies, enterprise. Complex requirements into elegant solutions.
Full Stack Developer
BPO Collections Ltd
Enterprise payment infrastructure. Fiserv integration. Legacy modernisation.
Architecting enterprise payment infrastructure for a debt collection platform, integrating Fiserv gateway with card processing, tokenisation, and digital wallets. Leading platform modernisation from legacy ASP.NET to Next.js 14+ with TypeScript.
- Implemented Fiserv payment gateway with full tokenisation support
- Built HMAC-SHA256 authentication layer for secure API communication
- Designed store ID routing for multi-merchant transactions
- Integrated 3D Secure authentication for payment security
- Unified Open Banking, Direct Debit, and bank validation into cohesive flow
- Managed SQL Server with 97+ stored procedures (PCI-DSS compliant)
Lead User Interface Designer
inclusive.io
Design system architecture. 135+ components. WCAG 2.2 AAA.
Sole creator and architect of the Inclusive.io Design System—an enterprise-grade component library for Applicant Tracking Systems. Led end-to-end design, development, and deployment of V1 and complete V2 rebuild.
- Competitive analysis across 15+ libraries and 10 enterprise systems
- W3C DTCG-compliant three-tier token system with OKLCH colour space
- ATS-specific components: CandidateCard, PipelineKanban, InterviewScheduler
- 12-point responsive system from 280px to 5K ultrawide
Lead User Interface Designer
inclusive.io
Design system architecture. 135+ components. WCAG 2.2 AAA.
Sole creator and architect of the Inclusive.io Design System—an enterprise-grade component library for Applicant Tracking Systems. Led end-to-end design, development, and deployment of V1 and complete V2 rebuild.
- Competitive analysis across 15+ libraries and 10 enterprise systems
- W3C DTCG-compliant three-tier token system with OKLCH colour space
- ATS-specific components: CandidateCard, PipelineKanban, InterviewScheduler
- 12-point responsive system from 280px to 5K ultrawide
Lead Designer + Founder
DesignBuddy UK
Design consultancy. End-to-end creative and technical solutions.
Founded and scaled a design consultancy delivering end-to-end creative and technical solutions across industries—from startups to established corporations.
- React, Tailwind, Headless WordPress, and Shopify implementations
- National advertising campaigns and local event marketing
- Branding strategies and pitch decks for diverse portfolios
- Full project lifecycle management from consultation to delivery
Lead Web Designer
Paul McFadden Wealth
Digital transformation. Design systems. Content strategy.
Drove digital transformation for a property education company, owning design strategy across web, email, and content platforms while managing concurrent high-value projects.
- Scalable design system using atomic principles
- Full-stack development with WCAG accessibility standards
- Email campaign optimisation (ClickFunnels, Klaviyo)
- Content strategy for courses, video, and marketing
End-to-end digital strategy ownership, balancing creative vision with business outcomes.
Lead Web Designer
Paul McFadden Wealth
Digital transformation. Design systems. Content strategy.
Drove digital transformation for a property education company, owning design strategy across web, email, and content platforms while managing concurrent high-value projects.
- Scalable design system using atomic principles
- Full-stack development with WCAG accessibility standards
- Email campaign optimisation (ClickFunnels, Klaviyo)
- Content strategy for courses, video, and marketing
End-to-end digital strategy ownership, balancing creative vision with business outcomes.
Senior Web Designer
TMD Media
Agency delivery. Conversion-focused websites. Tight timelines.
Led digital design for an agency client portfolio, delivering conversion-focused websites and marketing systems under tight timelines.
- End-to-end website builds and marketing funnel development
- Custom WordPress themes and plugins
- Advanced Figma prototyping workflows
- Cross-functional collaboration on deadline
High-quality delivery at agency pace—multiple clients, tight deadlines, cross-team coordination.
Graphic Designer
NOVAVAPES
Brand leadership. Startup to market maturity. Design operations.
Principal designer for a high-growth e-liquid company, owning brand identity across all channels and scaling design operations from startup to established market presence.
- Brand identity from early-stage to market maturity
- Packaging, catalogues, trade shows, e-commerce, marketing
- Social media strategy and influencer relationships
- Mentored Apprentice Social Media Manager
Six years building a brand end-to-end—strategic thinking, ownership, scaling design with business growth.
Graphic Designer
NOVAVAPES
Brand leadership. Startup to market maturity. Design operations.
Principal designer for a high-growth e-liquid company, owning brand identity across all channels and scaling design operations from startup to established market presence.
- Brand identity from early-stage to market maturity
- Packaging, catalogues, trade shows, e-commerce, marketing
- Social media strategy and influencer relationships
- Mentored Apprentice Social Media Manager
Six years building a brand end-to-end—strategic thinking, ownership, scaling design with business growth.
For CTOs
Technical decision-making grounded in production systems—payment gateways, design system architecture, legacy modernisation.
For Founders
Six years building a brand from startup to maturity. Eight years running a consultancy. Creative vision with business acumen.
For Hiring Managers
Proven delivery at agency pace and enterprise scale. Cross-functional collaboration, deadline management, context-switching.
Let's build something together
Currently available for contract roles, senior positions, and interesting projects.