# Learn UI

> An interactive guide to design engineering: how interfaces are built to feel right, from motion and typography to systems and craft.

Every page is available as Markdown by appending `.md` to its URL. The whole book as one document is at https://learn-ui.com/llms-full.txt.

Figures are interactive. In the Markdown they appear as a titled placeholder with a link, because what they teach is the response to input, which does not survive being written down.

## Introduction (Start here)

What design engineering is, and why the details are invisible. The role that sits between design and engineering, in the words of the people who do it. Why the best interaction details go unnoticed, why articulating them is harder than making them, and how this book uses figures you operate to make them visible.

- [Introduction](https://learn-ui.com/chapters/introduction): chapter overview
- [A role between two rooms](https://learn-ui.com/chapters/introduction/a-role-between-two-rooms): A section of Introduction.
- [Why the details are invisible](https://learn-ui.com/chapters/introduction/why-the-details-are-invisible): A section of Introduction.
- [How to read this book](https://learn-ui.com/chapters/introduction/how-to-read-this-book): A section of Introduction.

## Invisible details (Feel)

Interaction design, deconstructed. A close reading of the interactions you perform hundreds of times a day without noticing: the metaphors they reuse, the physics they borrow, when a swipe should commit, how motion tells you where things live, why some actions should not animate at all, and what Fitts's law says about where a target should be.

- [Invisible details](https://learn-ui.com/chapters/invisible-details): chapter overview
- [Metaphors and learned gestures](https://learn-ui.com/chapters/invisible-details/metaphors): A section of Invisible details.
- [Kinetic physics and swipe gestures](https://learn-ui.com/chapters/invisible-details/kinetic-physics): A section of Invisible details.
- [Responsive gestures](https://learn-ui.com/chapters/invisible-details/responsive-gestures): A section of Invisible details.
- [Spatial consistency and fluid morphing](https://learn-ui.com/chapters/invisible-details/spatial-consistency): A section of Invisible details.
- [Frequency and novelty](https://learn-ui.com/chapters/invisible-details/frequency-and-novelty): A section of Invisible details.
- [Fitts's law](https://learn-ui.com/chapters/invisible-details/fitts-law): A section of Invisible details.
- [Touch, context, and fidgetability](https://learn-ui.com/chapters/invisible-details/touch-and-context): A section of Invisible details.

## Motion (Feel)

Animation with restraint. When not to animate, and how to animate when you should: easing curves and where the speed goes, springs described by physics instead of duration, the practical tips that separate good motion from great, clip-path reveals, choreography and depth, and friction used on purpose.

- [Motion](https://learn-ui.com/chapters/motion): chapter overview
- [You don't need animations](https://learn-ui.com/chapters/motion/you-dont-need-animations): A section of Motion.
- [Easing: where the speed goes](https://learn-ui.com/chapters/motion/easing): A section of Motion.
- [Springs and duration](https://learn-ui.com/chapters/motion/springs): A section of Motion.
- [Practical tips](https://learn-ui.com/chapters/motion/practical-tips): A section of Motion.
- [The magic of clip-path](https://learn-ui.com/chapters/motion/clip-path): A section of Motion.
- [Choreography and depth](https://learn-ui.com/chapters/motion/choreography-and-depth): A section of Motion.
- [Friction as a feature](https://learn-ui.com/chapters/motion/friction): A section of Motion.

## Components (Build)

Case studies in building the small things well. Four components, each built by someone who wrote down every decision: a toast that stacks, a drawer that follows your finger, a command menu with pages, and a modal that respects focus. What they share is a refusal to treat any detail as too small.

- [Components](https://learn-ui.com/chapters/components): chapter overview
- [A toast that stacks](https://learn-ui.com/chapters/components/toast): A section of Components.
- [A drawer that follows the finger](https://learn-ui.com/chapters/components/drawer): A section of Components.
- [A command menu with pages](https://learn-ui.com/chapters/components/command-menu): A section of Components.
- [A modal that respects focus](https://learn-ui.com/chapters/components/modal): A section of Components.
- [Dark mode without the flash](https://learn-ui.com/chapters/components/dark-mode): A section of Components.

## Craft (Build)

The web as a material. Why coding is designing, what you gain by starting from HTML, how interfaces get sanded smooth, the grid and type decisions behind two well-built marketing sites, and the accessibility and performance work that nobody sees but everybody feels.

- [Craft](https://learn-ui.com/chapters/craft): chapter overview
- [Coding is designing](https://learn-ui.com/chapters/craft/coding-is-designing): A section of Craft.
- [HTML first](https://learn-ui.com/chapters/craft/html-first): A section of Craft.
- [Sanding the interface](https://learn-ui.com/chapters/craft/sanding-ui): A section of Craft.
- [Grids and fluid type](https://learn-ui.com/chapters/craft/grids-and-type): A section of Craft.
- [Accessibility as craft](https://learn-ui.com/chapters/craft/accessibility): A section of Craft.
- [Performance and reduced motion](https://learn-ui.com/chapters/craft/performance-and-reduced-motion): A section of Craft.

## Taste (Judge)

Judgement, novelty, and the AI aesthetic. Taste is not a gift, it is a practice: how to develop it, how to train judgement by recreating what you admire, how much novelty an interface can carry and where to spend it, and what happens when generated interfaces all start to look the same.

- [Taste](https://learn-ui.com/chapters/taste): chapter overview
- [Developing taste](https://learn-ui.com/chapters/taste/developing-taste): A section of Taste.
- [Training judgement](https://learn-ui.com/chapters/taste/training-judgement): A section of Taste.
- [Novelty and contrast](https://learn-ui.com/chapters/taste/novelty-and-contrast): A section of Taste.
- [The AI aesthetic](https://learn-ui.com/chapters/taste/the-ai-aesthetic): A section of Taste.

## Explaining with interaction (Explain)

Explorable explanations, data, and gardens. Interfaces that teach: Bartosz Ciechanowski's interactive articles, Amelia Wattenberger's data visualization and novel interfaces, and Maggie Appleton's digital garden and the interface patterns she catalogues. The figure is the argument.

- [Explaining with interaction](https://learn-ui.com/chapters/explaining): chapter overview
- [Explorable explanations](https://learn-ui.com/chapters/explaining/explorable-explanations): A section of Explaining with interaction.
- [Data into meaning](https://learn-ui.com/chapters/explaining/data-into-meaning): A section of Explaining with interaction.
- [Digital gardens and visual essays](https://learn-ui.com/chapters/explaining/digital-gardens): A section of Explaining with interaction.
- [Interface patterns worth knowing](https://learn-ui.com/chapters/explaining/interface-patterns): A section of Explaining with interaction.

## Canvases and tools for thought (Explain)

Infinite canvases, perfect strokes, and cultural practices. Steve Ruiz's path from prototypes to tldraw, the algorithm behind a pressure-sensitive stroke, the canvas as a surface where people and models work together, and Maggie Appleton's argument that tools for thought are practices, not objects.

- [Canvases and tools for thought](https://learn-ui.com/chapters/canvases): chapter overview
- [Prototypes that become products](https://learn-ui.com/chapters/canvases/prototypes-to-products): A section of Canvases and tools for thought.
- [Drawing a perfect stroke](https://learn-ui.com/chapters/canvases/perfect-stroke): A section of Canvases and tools for thought.
- [The canvas meets the model](https://learn-ui.com/chapters/canvases/canvas-and-models): A section of Canvases and tools for thought.
- [Tools for thought as cultural practices](https://learn-ui.com/chapters/canvases/tools-for-thought): A section of Canvases and tools for thought.

## The career (Work)

What the role demands, where it lives, and how to show your work. The attributes of a design engineer according to someone who led design infrastructure at DoorDash, how Vercel and Linear describe the role, the argument for why it exists, why your own website is the portfolio, and where to keep learning.

- [The career](https://learn-ui.com/chapters/career): chapter overview
- [The attributes of a design engineer](https://learn-ui.com/chapters/career/attributes): A section of The career.
- [Where the role lives](https://learn-ui.com/chapters/career/where-the-role-lives): A section of The career.
- [The case for design engineers](https://learn-ui.com/chapters/career/the-case): A section of The career.
- [Your own site as proof](https://learn-ui.com/chapters/career/your-own-site): A section of The career.
- [Where to go next](https://learn-ui.com/chapters/career/where-to-go-next): A section of The career.

## People

The designers and engineers this book reads. A directory of the people whose essays, components, and sites the chapters draw on: who they are, what they made, and where to find them.

- [People](https://learn-ui.com/chapters/people): chapter overview

## Glossary

Every term, defined in its author's words. A searchable reference for the vocabulary of the book. Each entry quotes the source that coined or best explained the term.

- [Glossary](https://learn-ui.com/chapters/glossary): chapter overview

## Further reading

The essays, tools, sites, and hubs worth your time. Primary sources grouped by kind: the essays and talks the chapters draw on, the libraries you can install, the personal sites that are portfolios in themselves, and the hubs that collect the field.

- [Further reading](https://learn-ui.com/chapters/reading): chapter overview
- [Essays and talks](https://learn-ui.com/chapters/reading#essays): A section of Further reading.
- [Tools and libraries](https://learn-ui.com/chapters/reading#tools): A section of Further reading.
- [People and sites](https://learn-ui.com/chapters/reading#sites): A section of Further reading.
- [Hubs and resources](https://learn-ui.com/chapters/reading#hubs): A section of Further reading.

## Reference

- [Glossary](https://learn-ui.com/chapters/glossary): every term of art, defined once
- [Further reading](https://learn-ui.com/chapters/reading): the sources behind the book
- [About](https://learn-ui.com/about): what this site is
- [Privacy](https://learn-ui.com/privacy): what is collected, what Ask AI sends, and what is not

## For developers and agents

Learn UI also publishes its chapter and section index as JSON, for programs that would rather not scrape HTML or Markdown. The API is versioned, rate-limited, keyless, and its errors are JSON: see the developer page for the details.

- [Developer resources](https://learn-ui.com/developers): quickstart, errors, versioning, rate limits
- [OpenAPI spec](https://learn-ui.com/openapi.json): the JSON API described machine-readably
- [GET /api/v1/chapters](https://learn-ui.com/api/v1/chapters): every chapter, as JSON
- [GET /api/v1/chapters/{slug}](https://learn-ui.com/api/v1/chapters/introduction): one chapter and its sections, as JSON
- [MCP server](https://learn-ui.com/api/mcp): the same chapter index as MCP tools, for MCP-native clients