Inclusive.io
Design System
A design system that hits WCAG 2.2 AAA and doesn’t look like a ShadCN clone.
The Challenge
Every design system looks the same. ShadCN, Radix, copy-paste the default theme — done. Nobody's pushing further. And accessibility? Most systems barely scrape WCAG AA. Forget AAA.
In recruitment software, it's worse. Generic components can't handle real hiring workflows. Candidates with disabilities hit barriers during the most stressful process of their lives. And developers burn hours customising things that should just work out of the box.
So I built my own. Accessibility as the foundation, not a bolt-on. A visual identity that actually stands apart. Components built for real recruiter workflows.
Everything. Research, design, build, tokens, docs — all me.
Next.js, Framer Motion, React Aria, OKLCH colour, W3C DTCG tokens.
The highest standard there is. 86 success criteria. axe-core and Pa11y running in CI/CD.
Technical Approach
Nothing here was arbitrary. Every choice has a reason.
| Decision | Choice |
|---|---|
| Accessibility | React Aria |
| Animation | Framer Motion |
| Colour Space | OKLCH |
| Token Spec | W3C DTCG |
| Monorepo | Turborepo |
Key Features
WCAG 2.2 AAA
Every component, all 86 success criteria. 7:1 contrast ratios. Full keyboard nav. Screen readers actually work.
OKLCH Colour System
Perceptually uniform. Consistent contrast across the whole palette. CSS-native and future-proof.
W3C DTCG Tokens
Three tiers: Reference → Semantic → Component. One source of truth from design to code.
280px to 5K
12 breakpoints. Galaxy Fold closed to 5K ultrawide. Nothing breaks at any width.
React Aria Foundation
Adobe's primitives. Deep keyboard, focus, and ARIA handling. No shortcuts.
ATS Domain Components
14+ recruitment-specific components. Kanban, candidate cards, scorecards, schedulers.
Live Demo: Version 1
This is the real thing, live. Click around, tab through components, break it if you can.
Loading...
Building V1
I studied everything first. 15+ component libraries. 10 enterprise systems — Carbon, Polaris, Spectrum, Fluent, Lightning. Read the W3C specs. Dug into HCI research. Talked to recruiters about what their tools were getting wrong.
V1 shipped on ShadCN and Radix. 74 components, 25+ primitives, custom AccessibilityProvider with live region announcements, 8px grid from Nielsen Norman Group research. It worked.
But using it in production showed me exactly where it didn't. Flat token system. Three breakpoints. And it still looked like every other Radix system out there. Good enough isn't good enough.
What I Learned
Bolting it on after the fact costs 10x more. Build it in from the start and AAA stops being aspirational — it becomes inevitable.
Flat tokens become a nightmare the moment you scale. Three-tier system pays for itself every time you add a component or a theme.
If it's not documented, it doesn't exist. Interactive examples and accessibility notes matter as much as the code.
Generic components need endless customisation. Build for the domain and they ship ready.
V1 Outcome
V1 did what it needed to do. 74 components, WCAG AA across the board, a real ATS dashboard with actual recruitment workflows. The architecture held up. But production use exposed the cracks — the token system needed restructuring, responsive support was too narrow, and visually it still blended in. V1 proved the concept. V2 would prove the ambition.
V2: The Real Thing
V2 isn't a version bump. It's a complete rebuild. Everything I learned from shipping V1 went straight into making something that doesn't just work — it works the way I always intended.
- 74 components
- ShadCN + Radix UI
- WCAG AA (partial coverage)
- HSL CSS variables (flat structure)
- Light/Dark only
- 3 breakpoints (mobile, tablet, desktop)
- HSL
- Tailwind Animate + CSS keyframes
- 135+ components
- React Aria + Custom Styling
- WCAG 2.2 AAA (86 criteria)
- W3C DTCG 3-tier (Reference → Semantic → Component)
- Comprehensive theming system
- 12 breakpoints (280px to 5120px)
- OKLCH (perceptually uniform)
- Framer Motion (unified, reduced-motion aware)
Unambiguous Documentation
149 spec sections. 22 technical documents. Every prop, variant, and accessibility requirement documented with copy-paste examples. If a junior dev can't implement it first try from the docs alone, the docs aren't done.
Unique Visual Identity
No more ShadCN monoculture. OKLCH colours for perceptual consistency, refined spacing, custom styling. It looks like nothing else because it isn't anything else.
Performance Budgets
Enforced in CI. JS under 50KB, CSS under 30KB, LCP under 1.5s. Tree-shakeable exports — you ship what you use, nothing more.
Live: Version 2
V2 is live. Still evolving, but the bones are solid. See for yourself.
Loading...
Building V2
I audited every component in V1 against how it actually performed in production. Line by line. What worked, what didn't, what I'd been avoiding dealing with.
Moving from ShadCN/Radix to React Aria wasn't a whim. Adobe's primitives go deeper on accessibility and give you full control over styling. No more looking like everyone else.
I made documentation the primary deliverable. My bar: if a junior dev can't nail a component on first attempt using only the docs, I've failed. No ambiguity. No assumed knowledge.
Key Improvements
Slots and compound patterns. Less prop noise, more flexibility, predictable behaviour.
@inclusive/tokens, @inclusive/core, @inclusive/react. Isolated concerns, proper versioning, tree-shakeable.
Architecture, tokens, foundations, components, patterns, quality standards. Every decision has a documented why.
Schedulers, scorecards, pipeline metrics, candidate comparisons. Real recruiter workflows, not demo filler.
V2 Outcome
135+ components. WCAG 2.2 AAA. A visual identity that's actually its own thing. Documentation thorough enough that anyone can ship with it. Turborepo for selective adoption. ATS components that address real recruitment workflows — the ones generic systems pretend don't exist.
What's Next
V2 is live. The work isn't done. The goal hasn't changed — prove that accessibility and developer experience aren't trade-offs. They're the same thing, done right.
Next: Figma library with 1:1 code parity. npm publication. More ATS patterns from real recruiter feedback.