Anatomy of a button
A button isn't a clickable rectangle. It's a promise of action, a small physical contract between finger and screen. We take it apart here, piece by piece.
A playground in chapters
Altrove.
A personal journey through UX, motion design and typography.
The best UX lets the user be elsewhere in their mind — because the interface is doing the work. Everything that happens without the user noticing is the real power of an interface. Here I collect its fragments, one chapter at a time.
The best interfaces are invisible. They work in silence while your mind is elsewhere.
The skill
Bring Altrove into your agent
The book's principles — timing in named milliseconds, states that tell the truth, motion that respects those who reduce it — distilled into a skill. Your agent applies them while your mind is elsewhere.
The skill in the repositorynpx skills add MatteoSchifano/altroveInstalls into .claude/skills — Claude Code, Cursor and 40+ agents.
How the work is made
A few constraints, kept with discipline.
-
One chapter at a time
Finished completely before the next one. One whole chapter beats three left half-done.
- ch. 01 · the button Save press · scale(0.97)
-
Motivation first
The why gets written before the code. Why this curve, why this timing.
- ch. 02 · the wait no spinner under 400ms
-
Motion in milliseconds
Four spring presets, durations with a name. Measured, never left to feel.
- ch. 09 · the toggle Reduce motion enters 220ms · exits 160ms
-
Reduced-motion is not optional
Every animation degrades with grace. No libraries: just CSS, clamp and container queries.
Chapters
13 finished explorations
-
Chapter 01 -
Chapter 02 The art of waiting
The network is slow, the user is not. The best UX pretends it already knows — and is right almost every time. Skeletons, optimistic UI, errors that don't shout: the vocabulary of an interface that trusts its next click.
-
Chapter 03 The voice of emptiness
An interface with nothing to show isn't mute — it's the moment its voice is heard most clearly. 404s, empty lists, fruitless searches: small voids that weigh a lot, and that care distinguishes from abandonment.
-
Chapter 04 The silent dialogue
A dialog is an interruption that asks permission. When it really must speak, it does so with the keyboard in hand: focus where it belongs, Escape that mends, motion that enters like a sigh and never like a shout.
-
Chapter 05 The scroll that tells a story
Scrolling is the most transparent gesture we have. It asks no permission, it interrupts nothing, it needs no teaching: we already know how to do it. A page that goes along with it — instead of chasing it — is a page that lets itself be read to the end.
-
Chapter 06 Numbers that have weight
Numbers are never just numbers: they are digits with typographic weight, a sign that speaks first, a local convention. The interface that handles them with care doesn't display them — it lets them be read.
-
Chapter 07 Anatomy of an input
A field to fill in is the moment a website asks the user for something — and that's when its voice shows. We open it up here, from the label that doesn't lie to the validation that listens.
-
Chapter 08 Micro-typography
Almost everything in an interface is text. And text has a thousand small decisions — the quote mark that curls, the title that leaves no word alone, the line that lasts just long enough — that decide whether the page breathes or holds its breath.
-
Chapter 09 The anatomy of a toggle
A button is pressed and springs back. A switch commits to a position and stays there. That difference — two positions, not two states — changes how you design any binary control, and hides a family of relatives wider than it looks.
-
Chapter 10 The anatomy of a toast
A toast is the hardest thing to get right: deliver information without stealing attention, stay just long enough, and leave when it's done. Get the tone, the duration or the voice wrong and it turns from courtesy into interruption.
-
Chapter 11 The anatomy of a menu
A menu offers a choice, but every choice steals a little context: it covers what you were looking at, moves the focus, asks you to remember where you were. The craft isn't opening a list — it's offering the roads while keeping the user anchored to where they stand.
-
Chapter 12 The anatomy of a tab
A tab doesn't pick a value: it changes the context under your feet. The real problem isn't where to put the indicator, but how to move someone into another panel without making them lose track of where they were.
-
Chapter 13 The anatomy of a card
A card looks like the most innocent component on the web: a rectangle with a border. But that rectangle has to say what order to read in, where you click, how much is underneath, and what's honest to count. Five cards, five different crafts hidden in the same shape.
-
Chapter 14 The anatomy of a divider
A line that separates is the smallest decision in a page, and for that reason the most neglected. Yet choosing between a drawn rule and a bit of air that just happens is choosing how the silence between two blocks sounds.
-
Chapter 15 The long page
Ten minutes of reading is a small journey: whoever sets out wants to know where they are, how much is left, and to find their place again if they wander off. These are the details that keep company without getting in front of the text.
-
Chapter 16 The editorial grid
A page looks elegant before it's beautiful, and almost always for one reason: every block rests on the same line. Five ways to build and break the grid with CSS — named lines, subgrid, full-bleed, container queries — without a single image file.
-
Chapter 17 The quotation
Giving someone else the floor looks like a matter of two quotation marks. But which marks, in which language, with which source, and with how much emphasis: each choice changes who is speaking, and how much you trust them.
-
Chapter 18 The side note
A note doesn’t have to interrupt to be read. It lives in the margin, folds away when it should, and lets the reader decide how much they want to hear you — the oldest, and gentlest, way to speak to them without breaking their thread.
-
Chapter 19 The book’s index
A site that talks about itself has to find its way around inside: indexes that expand, breadcrumbs that drop the useless levels, miniatures made of typography and not screenshots. Editorial navigation is first of all a question of telling the truth about where you are.
-
Chapter 20 Images in editorial design
An image sometimes carries information and sometimes is only breath, and almost all the work is in not confusing the two: where the photo says something you annotate it and open it, where it just lets the page breathe you leave it silent.
-
Chapter 21 Drag and drop
Dragging is the most direct gesture and the most excluding: born for the mouse, it leaves out anyone on a keyboard. This chapter builds five drag-and-drops and stitches a keyboard twin onto each, with spoken announcements — because an object in flight must be catchable without a hand too.
-
Chapter 22 Type-as-you-go search
A search that answers while you type looks like magic, but it's stagecraft: debounce, tokens that invalidate stale responses, a threshold below which the spinner must not appear. It all happens between one keystroke and the next, where the user isn't looking.
-
Chapter 23 The calendar
Asking for a date is one of the easiest ways to make someone hate a form: three dropdowns, an unspoken time zone, a “in 3 days” that never says which one. Five ways to ask for it with respect — keyboard-first, explicit zones, honest natural language.
-
Chapter 24 The timeline
A table of dates is read one row at a time; a timeline is read with the eye. Turning time into a visual object — a line, a path, a bar, a tape to rewind — isn't decoration: it gives the flow a shape the brain grasps before it reads.
-
Chapter 25 The gesture
Touching isn't clicking: the finger follows, drags, pulls. But every gesture here has a button and a shortcut that do the same thing — because a gesture is an accelerator, not a gate.
-
Chapter 26 The farewell
For almost the whole book we worked to make the user stay. This chapter asks the opposite: how do you let someone go without holding them by force, without punishing them, without making them feel that leaving is a mistake.
Roadmap
Where the book is going.
-
A Phase A · First 8 chapters
-
The anatomy of a button
What makes the most elementary gesture of the interface trustworthy?
-
The art of waiting
How do you turn waiting into an act of respect?
-
The voice of emptiness
How does an interface speak when it has nothing to show?
-
The silent dialogue
How do you interrupt the user without making noise?
-
The scroll that tells a story
What can an interface say with the gesture of scrolling alone?
-
Numbers that weigh
When is a digit information, and when is it noise?
-
The anatomy of an input
How does a field listen, while the user writes?
-
Micro-typography
Where does the letter end and the rhythm begin?
-
-
B Phase B · Primary components
-
The anatomy of a toggle
Is the difference between a button and a switch only visual?
-
The anatomy of a toast
How do you deliver information without interrupting?
-
The anatomy of a menu
How do you offer a choice without hiding the context?
-
The anatomy of a tab
How do you change context without disorientating?
-
The anatomy of a card
Is a card really just a rectangle with a border?
-
The anatomy of a divider Next
Is silence in the page drawn, or simply allowed to happen?
Next
-
-
C Phase C · Editorial patterns
-
The long page
How do you keep company with someone reading for ten minutes?
In the roadmap -
The editorial grid
What makes a page elegant before it’s even beautiful?
In the roadmap -
The quotation
When giving the floor to someone else, how do you introduce them?
In the roadmap -
The side note
How do you talk to your reader without breaking the thread?
In the roadmap -
The book’s index
A site that talks about itself — how do you find your way inside it?
In the roadmap -
Images in editorial design
When is an image information, and when is it breath?
In the roadmap
-
-
D Phase D · Complex patterns
-
Drag and drop
How do you hold an object in flight?
In the roadmap -
Type-as-you-go search
What happens between each keystroke?
In the roadmap -
The calendar
How do you ask for a date without hating the browser?
In the roadmap -
The timeline
Time as a visual object, not a table.
In the roadmap -
The gesture
What changes when the interface is touched, not clicked?
In the roadmap -
The farewell
How do you let a user go?
In the roadmap
-
What it is not
- A design system to ship
- A framework, a library, a starter
- A collection of universal best practices
- Made to impress — if anything, to understand.
Astro, native CSS, Motion. Epilogue and Inconsolata. No Tailwind, no UI kit.
Read the chapters