A library of patterns and principles for inventing new interfaces

A designer may have solved your interface problem decades ago. Your AI can connect to this library and show you their solution, demo included.

Drag the list down and let go.

Before Pull-to-Refresh there was Inertial Scrolling, that smooth momentum-based scrolling the iPhone introduced in 2007.

Definitely a pleasant effect, but without meaning. Pull-to-Refresh changed that. It repurposed the gesture into a trigger to reload data.

In Interface Lineage we trace how those interactions connect and evolve.

Notice how resistance increases the further you drag down, like an actual rubber band would feel when being pulled. Then when released it leaves the space of one list item above for the loading animation.

Open a menu and slide toward the submenu.

The submenu suddenly closes. Super frustrating … Why does every other popular app fail this test?

Maybe the makers didn’t test or didn’t care.

But you do care; otherwise, you wouldn’t be here. Knowing about the pain and knowing how to cure it are two different things.

The cure here is called “Safe Triangle”. You can build better interfaces just by knowing and prompting this name. But if you dig a little deeper and read the background stories in this library, you can become an inventor of new interfaces.

Despite being solved way back in 1987, broken submenus are still everywhere today.

Spin the wheel.

A flat list turned into a drum you spin with one thumb. Spin faster and it flies, ease off and it slows.

The iPod wheel came from a Bang & Olufsen cordless phone. The iPod is gone, but you still spin through lists with the Apple Watch’s Digital Crown.

Good mechanisms outlive the hardware that introduced them.

Common interface problems, and the patterns that solve them.

• A reply meant for one person shows up for everyone in a group chat or on a mailing list. Threads Contain the Explosion
• Someone dragging a file or a window has to guess where it will drop on release. Drop-Target Feedback
• Undo Users who click Send or Delete see the mistake a moment later, after the action is done. Grace-Window Undo
• Users waiting for a page or a reply wonder whether the app is still working or has stopped. Honest vs Theater Progress

What you’ll learn

The principles interfaces prove or break.

Working memory is small: Google Authenticator makes you carry the code in your head between apps; iOS AutoFill offers it above the keyboard.

Undo absolves the warning: an Undo snackbar dropped into a mail design, in place of an “Are you sure?” dialog.

You can’t prompt what you can’t name.

Designers often know when something isn’t working but lack the vocabulary to explain why. Without the words to name a problem, it’s difficult to translate design intuition into clear instructions AI can act on.

What is Interface Lineage?

An interlinked library that takes interfaces apart for the people who make them. Every entry names the mechanism, traces it back to the people who built it, and connects it to the ideas it grew from. Many come with a demo you can operate and practical takeaways.

Who is it for?

Designers, engineers and students who already feel the difference between a good interface and one that just works, and want the words to name it and the judgment to defend it. It is not a tutorial, a set of components or a course. It’s a library where you can bring your own librarian.

Who’s behind this?

I’m Johannes Mutter. I am a design engineer from Germany. This library started in 2011 as my personal collection of interface teardowns. I completely redesigned it this year so that it makes sense to you too.

What does it cost to read?

Nothing. Every page is free to read, no account needed. The project is funded by Founding Members: one payment of €199. Membership lets you connect your AI with a personal MCP token.

How was this made?

I had notes, voice memos and Notion databases about interfaces, principles and patterns, plus an ontology I had modeled on top. I could cut it down to a handful of mechanisms like “Slide to Unlock” or “Pull to Refresh” and write a book, or publish the full network. A mechanism is worth less on its own than linked to hundreds of neighbors. That volume needs language models: for drafts, research and most all of the demo code.

Is the prose written by a language model?

Language models write the drafts. I decide which interface and mechanism each entry is about, and the argument comes from my notes and voice memos. Each draft goes through several rounds of human and AI revision against a shared authoring guide. Sources are the makers’ own words: interviews, talks, oral histories. A quote comes from an identifiable primary source, or it is cut.