Interface Lineage – library of interface patterns and principles

This document was changed somewhere else while you were editing. Saving now would overwrite those changes, so nothing was written.

Your edits are still here — copy anything you need, then reload to get the latest version.

A free library of interface patterns and principles. Name the mechanism, prompt it to your AI, and invent 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.

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.

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.

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.

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

All the problems

1996-11 Availability Roster

A sender who gets no reply is unsure whether the other person is away or ignoring them.

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.

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.

Here's a real exchange: same model, same question. But notice the vocabulary that the library gives you?

You’ll have names for things you’ve felt in apps for years.

Play a demo, and your hands remember the move.

Follow one interface to the next. Careful, it’s a rabbit hole.

You’ll design beyond the average, and know why.

Your AI gets everything I’ve traced, and via MCP goes beyond the default.

It stops guessing, finds related work and might even argue with you.

I’ll add your name and number to the colophon, one of only 100.

You’re part of why the library is free and open to everyone.

There are 500+ interface tear downs to inspire your work

Inspiration Engines: Yossarian & Seenapse

Sketchpad Light Pen Interface

@Mention

Pomodoro Tomato Timer

Cher’s Computerized Closet

Emoji Picker

Sky

Press-and-Release Menus

EuterPen

Sketch to search

Two-Finger Undo - Paper by FiftyThree

Flux: tangible selection material

Texterial

ClipDrop, AI Background Removal

Shaper Origin AR CNC

Point and Talk

Clear App’s Gesture-Only List

Video Summagator: Decomposing Time

Cursor Affinity in Rich Text Editors

Inferred Prompts

Inspiration Engines: Yossarian & Seenapse

Sketchpad Light Pen Interface

@Mention

Pomodoro Tomato Timer

Cher’s Computerized Closet

PopClip

Grammarly for Windows and Mac

Questions

Want to talk it through with your AI?

Ask what Interface Lineage covers, how it differs from other design resources, and where it might help in your work.

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.

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. There are other¹ excellent² places³ for⁴ this⁵. It’s a library where you can bring your own librarian.

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. I spoke about disassembling interfaces at Figma Config 2026, which is a short preview of how the library works.

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. Founding Members get a permanent entry in the colophon. It is limited to 100 Memberships. Teams of three or more get seats from €149 each. If membership turns out not to be for you, write within 14 days of your purchase and you get the full amount back, no questions asked.

New interfaces are added regularly. When a pattern or a lineage comes into focus, I write a long-form article to walk through it. So expect interface entries on most weeks, and a new article roughly every other month. Check out the Changelog for the latest updates.

Contributions that expand, fact-check, or enrich the library are welcome. If you are a design historian, a researcher, or a designer who cares about interfaces as deeply as I do, reach out. The same goes if you like to reconstruct, record and preserve interface artifacts on hardware that is no longer around.

Yes. The library connects to your AI over Model Context Protocol (MCP). It can search, fetch entries, and follow lineage directly. The personal token comes with the Founding Membership or a seat on a team. Setup takes under a minute; see the connect page for instructions.

I had notes, voice memos and Notion databases about interfaces, principles and patterns, plus an ontology I had modeled on top. It made sense to me, but to no one else. 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. I asked on Twitter, and the vast majority of you voted for the 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. I took eight months off my regular work to build it, plus a CMS, site builder and slides tool for trying new storytelling formats.

If you run a page through an AI detector like Pangram, it will probably score as AI-generated. That’s correct. 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.