Mara Kestrel Booking from February 2027

Open source · 2022

Quire

An accessible design system I maintain, where every colour pair ships with its contrast ratio.

Client
Open-source design system (fictional project)
Role
Creator and maintainer
Team
Around thirty contributors
Duration
Since 2022
A wooden case full of old letterpress type blocks
Photo: Bruno Martins / Unsplash

At a glance

  • 48components
  • 0serious axe violations in the docs
  • 120+teams using it (sample figure)

Results are sample figures for this fictional project.

Why another design system

Most design systems treat accessibility as a checklist at the end. I wanted one where it is part of the API: you cannot pick a text colour without seeing whether it passes on the background you chose.

A hand-drawn website wireframe on paper with an orange pen
Photo: Compagnons / Unsplash
Early component inventory, drawn before any code.

Tokens as a contract

Colours are defined as roles, not swatches. Each role pair is tested in CI and the ratio is printed in the docs next to the token. Focus styles are designed components, not browser defaults.

The docs render the real components, so what you read is what ships.

  1. focus is designed, not left to the browser
  2. every pair ships with its ratio
  3. docs render the real component
The Quire docs for Button: variants, designed focus state, and each token pair with its ratio.

Quire is the only system where I never have to ask whether something is accessible. The answer is on the page.

Front-end lead at a charity using Quire (sample quote)

Where it is now

Quire has 48 components, a monthly release and a small, kind contributor community. The docs site has no serious automated accessibility violations, and we treat a new one as a release blocker.

What I’d do differently

I wrote too many components too early. A design system earns trust by being boring and stable; the first year should have been twelve components, done properly.

Sample case study: the client, team, figures and quote are fictional.

Esc
Mara Kestrel
Work
Writing
About
CV
Speaking
Uses
Now
Contact
Night Ward A ward board for night-shift nurses that turns forty competing priorities into one calm list.
Tideline A public flood-warning service that shows how sure the forecast is, not only what it says.
Northline fares A fare finder that leads with the cheapest valid ticket and explains the rules in plain words.
Quire An accessible design system I maintain, where every colour pair ships with its contrast ratio.
Furrow An offline-first harvest log for small farms, designed for wet gloves and no signal.
Designing for 3 a.m. Most interfaces are designed at 11 in the morning by rested people. Some are used at 3 at night by exhausted ones. Here is what changes.
The case for fewer alerts Alert fatigue is a design problem, not a discipline problem. Four questions I ask before any notification ships.
Write the empty state first The first screen most people see is an empty one. Designing it first makes the rest of the product clearer.
Design tokens are a contract, not a palette A token named after a colour tells you what it looks like. A token named after a role tells you what it promises. Only one of those survives a redesign.
What a flood map taught me about uncertainty People trust forecasts more when you tell them how sure you are. Showing uncertainty is a design skill, and a public duty.
Switch theme
Turn margin notes on or off
Copy e-mail address hello@marakestrel.example
Print my CV

↑ ↓ to move · Enter to open · Esc to close