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
10 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.
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 Next
How do you offer a choice without hiding the context?
Next -
The anatomy of a tab
How do you change context without disorientating?
In the roadmap -
The anatomy of a card
Is a card really just a rectangle with a border?
In the roadmap -
The anatomy of a divider
Is silence in the page drawn, or simply allowed to happen?
In the roadmap
-
-
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