Jon SabutisDesign engineer

Work2026

Pattern Library

Four hundred and twenty two documented interaction patterns across web, mobile, and cross platform concerns, with the rationale that makes each one work.

Role
Research, writing, and the browser that reads it
Year
2026
  • Markdown
  • Vanilla JS
  • iOS HIG
  • Material 3
  • WCAG 2.2
The pattern library browser, showing a search field above a filtered grid of pattern cards.

Patterns are recipes, components are ingredients, and a design system is the cookbook. Most teams document the ingredients thoroughly and never write down a single recipe, which is why the same navigation argument gets held twice a year.

The problem underneath the brief

A component library tells you that a button exists and what states it has. It cannot tell you whether this screen wants a button at all. That knowledge lives in people's heads, leaves when they leave, and gets rebuilt from scratch by whoever arrives next. The gap is not a missing component, it is a missing named solution to a recurring problem, together with the context that makes it the right answer here and the wrong one two screens over.

422

Documented patterns

Each one written against a fixed template rather than free form notes.

3

Platform tracks

Web, mobile, and the cross cutting concerns that belong to neither.

2

Mobile conventions compared

iOS Human Interface Guidelines and Material 3 divergence is called out per pattern.

How it is organised

Every entry follows the same anatomy: the problem, the context where it applies, the solution, the accessibility requirements, and the cases where the pattern is the wrong choice. That last section is the one people skip writing and the one they come back for.

The mobile track calls out where the two platform conventions actually disagree, rather than picking one and pretending it is universal. A back gesture, a sheet dismissal, and a destructive confirmation are three places where following one platform's guidance on the other produces an app that feels subtly wrong and no one can say why.

The pattern browser with the search field focused and category filters visible along the top.
The browser is a single generated HTML file with search and filters, so the library opens instantly and works with no build step or network.

The cross platform track holds motion, AI interfaces, and a persuasion section that includes a taxonomy of deceptive patterns. Naming a dark pattern precisely is what lets a team decline to build one without the conversation becoming a matter of taste.

Playable

Shared element transition, the pattern demonstrating itself

Ported from the pattern library motion track

Chrome runs the real View Transitions morph. Everywhere else the same state change happens without the tween, and under reduced motion it is skipped entirely. That progressive story is the pattern, not a caveat attached to it.

What it changed

Having the recipes written down moved design review from opinion to reference. The question stops being whether someone likes the interaction and becomes whether this is the pattern for this problem, and if not, which one is.