Craig Hawkes — Design Systems Architect

Featured Case Study

Inclusive.io

A WCAG 2.2 AAA design system built from scratch. 135+ components. OKLCH colour science. No shortcuts.

135+Components

86WCAG Criteria

12Breakpoints

3-TierToken Architecture

WCAG 2.2 AAA compliance is the gold standard of web accessibility — and almost nobody ships it. Not because the criteria are unreasonable, but because no component library makes it the default.

Every major design system — Material, Chakra, Mantine, even Radix — targets AA at best. The gap between AA and AAA isn't cosmetic. It's 7:1 contrast instead of 4.5:1. It's target sizes at 44px instead of 24px. It's motion that respects vestibular dysfunction, not just preferences. Building AAA at scale means rethinking foundational assumptions that every library takes for granted.

01

Solo Developer — No team. No design system team reviewing PRs. Every decision — architecture, implementation, documentation, testing — falls on one person.

02

AAA, Not AA — 7:1 contrast ratios. 44px touch targets. Reduced motion as a first-class citizen. Every shortcut other libraries take is off the table.

03

No Reference Implementation — No existing design system ships WCAG 2.2 AAA as default. No playbook. No 'just follow what Google did.' Everything from scratch.

The gap between AA and AAA isn't cosmetic — it's the difference between technically compliant and genuinely inclusive.

About

The systems behind the systems

I started as a graphic designer. Six years at NOVAVAPES, building a brand from startup to market maturity — packaging, campaigns, everything visual. That taught me what many engineers never learn: how design decisions feel at scale.

Design systems and payment flows are different domains. The discipline is the same.The throughline

I founded DesignBuddy in 2017 and have served 50+ clients across brand, e-commerce, and web development. Craft without discipline is just art.

I co-founded inclusive.io and built a 135-component WCAG 2.2 AAA design system — solo. OKLCH colour science, three-tier W3C tokens, 280px to 5K responsive.

Currently building enterprise payment infrastructure at BPO Collections — Fiserv gateway integration, legacy modernisation from ASP.NET to Next.js, PCI-DSS compliant systems.

What I work with

React
Next.js
TypeScript
Tailwind CSS
HTML/CSS
JavaScript

Angular
Framer Motion
GSAP
React Aria
HeroUI
ShadCN

Design Tokens (W3C DTCG)
OKLCH Colour
Atomic Design
Component APIs
Storybook
Figma

Node.js
ASP.NET
C#
SQL Server
REST APIs
Vercel

WCAG 2.2 AAA
axe-core
Playwright
Vitest
Pa11y
Chromatic

UI/UX Design
Adobe Creative Suite
Brand Identity
Prototyping
Art Direction
Typography

This portfolio practices what it preaches. OKLCH colour, fluid type, token spacing, scroll animations, WCAG AAA.

Experience

Where I've been

BPO Collections Ltd

Full Stack DeveloperContractSept 2025 - Present

4→1 screen payment flow

Collapsed a four-screen payment flow to a single interaction, while leading the platform off legacy ASP.NET onto a typed Next.js stack.

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)

Next.jsTypeScriptASP.NETSQL ServerFiserv

inclusive.io

Lead User Interface DesignerFull Time / Co-FounderFeb 2024 - Present

135+ components · 86/86 WCAG AAA criteria · Solo build

Architected and shipped an enterprise ATS design system solo — 135+ components, 86/86 AAA, two full rebuilds.

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

ReactNext.jsTypeScriptTailwindHeroUIReact AriaTurborepo

DesignBuddy UK

Lead Designer + FounderBusinessOct 2017 - Present

8+ years, 50+ clients

Founded and scaled a design consultancy — end-to-end creative and technical delivery across 50+ clients over 8+ years.

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

Earlier roles

Paul McFadden Wealth

Lead Web DesignerFull-timeDec 2022 - Jan 2024

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

TMD Media

Senior Web DesignerFull-timeAug - Dec 2022

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

NOVAVAPES

Graphic DesignerFull-timeOct 2016 - Sept 2022

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

Side research · 2026

A layout linter for translated UI

Translators change 'Save' to 'Speichern'. CI runs in English. The overflow ships. Prelight verifies every string at every font scale at every slot width — in single-digit milliseconds, without launching a browser.

The bug this catches

test('Save button fits at every language', () => {
  expect({ text: t('save'), font: '16px Inter', maxWidth: 120 })
    .toLayout({
      maxLines: 1,
      atScales: [1, 1.25, 1.5],
      atLanguages: ['en', 'de', 'ar', 'ja'],
    })
})

tests passing: 440
core bundle (gz): 8.99 KB
Chromium agreement: 98.81%
corpus cases: 928

Verified against

Chromium98.81%
WebKit99.03%
Firefox98.60%

Source on GitHub Read the self-review

Built on Pretext by Cheng Louv0.3.0 · Tagged 2026-04-18 · npm publish gated on v0.4

Contact

I don't ship half-measures.

If you need someone who builds the foundations right — accessible, scalable, no shortcuts — let's talk.

Start a conversation