All projects

Accessible design system

UX/UI · Frontend

A themeable React design system where accessibility is a property of the construction, not the result of an audit.

It's commonly known that accessibility is often forgotten when developing applications. It could be due to lack of time, resources or sometimes interest. The idea behind this project is to reduce the effort needed to create a customizable, elegant, and responsive design system, while being fully accessible by default. Users start by specifying basic details such as brand colors, typography, shapes, spacing etc. and they get a coherent and customized design system that is accessible from the start.

This design system contains 40 components, 248 tests, and a conformance map that drives the style guide, the published accessibility statement and the test gate from one source - so the claim made to auditors is exactly what ships.

ReactViteVitestWCAG 2.2

Selection from the finished project:

Style guide introduction, describing accessibility as a property of the construction rather than the result of an auditFoundations page with live theme controls, showing the brand color and the measured contrast ratio beside each derived pairComponents page showing button variants and sizes - primary, secondary, ghost and danger - with their rest, disabled and loading statesResponsive page showing the shared breakpoints and a grid that collapses to a single column when space runs outAccessibility page listing the WCAG 2.2 AA criteria the system meets, each with its success criterion numberProof page showing the conformance map - criteria per component, mapped to EN 301 549 and WCAG 2.2
©2026