Craig Hawkes | Design Systems Architect

System Mode Evidence

Inspect the evidence while you read.

TokensWarm OKLCH palette, Satoshi display type, Geist body copy. Caveat only for handwritten System Mode notes.

PlatformSeparate mobile, tablet, and desktop shells selected by viewport width. Not user-agent guessing.

MotionMotion resolves before first paint and respects reduced-motion preferences.

ProofInclusive.io, Prelight, payment infrastructure, and this portfolio all feed the same systems story.

Featured Proof

Inclusive.io

One person built this: 107 components, 26 ATS workflows, 86 WCAG 2.2 AAA criteria, and a product surface you can click through end to end.

107Components

86WCAG Criteria

26ATS Workflows

3-TierToken Architecture

WCAG 2.2 AAA is the gold standard of web accessibility. Almost nobody ships it. Not because the criteria are unreasonable. Because no component library makes it the default.

Material, Chakra, Mantine, even Radix target AA at best. The gap between AA and AAA is not cosmetic. It is 7:1 contrast instead of 4.5:1. Target sizes at 44px instead of 24px. Motion that respects vestibular dysfunction, not just preferences. Building AAA at scale means rethinking assumptions every library takes for granted.

Solo Developer: No team. No design system team reviewing PRs. Architecture, implementation, documentation, testing. All of it on one person.

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.

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 is not cosmetic. It is the difference between technically compliant and genuinely inclusive.

About

Systems that survive real constraints

DesignBuddy, inclusive.io, and payment infrastructure look unrelated until the foundation breaks. My work is making sure it does not.

Accessibility, brand, and payments all punish weak foundations.The throughline

I started in graphic design, built client work through DesignBuddy, co-founded inclusive.io, and now build production payment systems at BPO Collections.

The proof is deliberately mixed: 107 AAA components, 26 ATS workflows, OKLCH and W3C tokens, Fiserv integration, PCI-DSS constraints, and Prelight checking UI text before the browser runs.

AI & Agent Systems

I've been paying attention since the transformer paper in 2017. I use OpenAI, Anthropic, Google, and Cursor every day. It changed what one careful person can get through if you are honest about the limits. I know which tool to reach for, when the context window is about to bite, and when to close the chat and write the code yourself.

The speed gain is real. So is the rubbish. I run agent sessions like builds: tight brief, obvious done-state, review before anything ships. Skills, MCP servers, and rules in this repo exist because without them the work wanders off brief.

Some of the setup is on this site. Ctrl + . for System Mode, or read llms.txt. Same workflow behind inclusive.io, the BPO payment work, and this portfolio. One desk. Checked like production code.

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

LLM providers (OpenAI, Anthropic, Google)
Prompt & context design
MCP servers
Cursor agent workflows
Tool calling & evaluation
llms.txt / AEO

Do not take the claims on trust. Open System Mode to inspect the tokens, platform split, motion rules, and evidence behind the work.

Experience

Proof across systems

BPO Collections Ltd

Sept 2025 - Present

Full Stack DeveloperContract

4→1 screen payment flow

Got a four screen payment flow down to one, and led the move off legacy ASP.NET onto a typed Next.js stack.

Got a four screen payment flow down to one, without dropping any of the compliance steps.
Integrated the Fiserv gateway end to end: card processing, tokenisation and digital wallets, with an HMAC-SHA256 auth layer on top.
Built store ID routing for multi merchant transactions and wired in 3D Secure.
Pulled Open Banking, Direct Debit and bank validation into one flow.
Looked after a PCI-DSS SQL Server database with over 97 stored procedures while migrating the front end off ASP.NET.

Next.jsTypeScriptASP.NETSQL ServerFiserv

inclusive.io

Feb 2024 - Present

Lead User Interface DesignerFull Time / Co-Founder

107 components · 26 ATS workflows · 86/86 WCAG AAA · Solo build

Built and shipped an enterprise ATS design system on my own. 107 components, 26 workflows, 86 out of 86 AAA, two full rebuilds.

Built and shipped 107 components on my own, across two full rebuilds.
Hit 86 out of 86 WCAG 2.2 AAA criteria, the level almost nobody actually ships, using React Aria patterns.
Built a three tier W3C DTCG token system in OKLCH that holds from 280px up to 5K screens.
Shipped 26 ATS components (pipelines, scorecards, schedulers, analytics) after studying 15+ libraries and 10 enterprise systems.

ReactNext.jsTypeScriptTailwindHeroUIReact AriaTurborepo

DesignBuddy UK

Oct 2017 - Present

Lead Designer + FounderBusiness

8+ years · 50+ clients

Started and grew my own design consultancy. Brand and build for 50+ clients over 8+ years.

Delivered for 50+ clients over 8+ years, start to finish.
Built production sites in React, Tailwind, headless WordPress and Shopify.
Ran national ad campaigns and local event marketing.
Set the branding and pitched the work that won it.

Earlier foundations

Paul McFadden Wealth

Lead Web DesignerFull-timeDec 2022 - Jan 2024

Owned design across web, email and content.

TMD Media

Senior Web DesignerFull-timeAug - Dec 2022

Agency work. Conversion focused sites, several at a time, to deadline.

NOVAVAPES

Graphic DesignerFull-timeOct 2016 - Sept 2022

Six years owning a brand as the company grew up.

Side research · 2026

A layout linter for translated UI

Translators change 'Save' to 'Speichern'. CI runs in English. The overflow ships. Prelight checks 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

If the system has to hold, get in touch.

Design systems, accessibility-heavy product work, and full-stack foundations where the details are not optional.

Get in touch

Available for permanent, contract or freelance · Glasgow, Scotland