The Add button on Kanto's ordering screen is 44 px tall and nobody typed 44 anywhere. It is auto layout, horizontal, gap 8, padding 12 and 16, hug contents: 12 px of padding above a 20 px line box and 12 below it, and the height falls out of the arithmetic. Change the label from Add to Lisaa and the button gets wider by itself. Change the type size and the height follows. That is the difference between drawing a button and describing one, and it is most of what this topic is about.
Kanto is a noodle bar in Tampere with fourteen dishes on a screen by the door. The dish names run from Miso, four characters, to slow-braised pork shoulder ramen, which is thirty two, and three of the fourteen sell out by eight in the evening. Nobody designing that screen gets to choose the content, the language or the width it is read at. What can be chosen is how it behaves when all three arrive different from the file.
The screen in the file is one instance of the thing you are making
An interface has a property the rest of this pillar does not: it is redrawn by a machine every time somebody opens it, from content that was not in the file, at a width you did not pick. A poster is finished. A screen is a set of instructions that will be executed later by something with no judgement, and every decision left implicit becomes that machine's decision.
Which is why the six clusters under this topic are not six styles of screen. They are six kinds of instruction. What a thing looks like is making an interface look considered. What it is made of is the parts an interface is assembled from. What the values are called, and who is allowed to change them, is a shared kit, and the rules for using it. What happens at a width you never opened is one interface, every screen size. What moves, and what the movement is claiming, is movement that explains rather than decorates. And what has to be written down because the machine cannot infer it is everything a developer needs and usually is not given.
Four rules, with their values
Hug contents for the button, fill container for the card. Those two settings decide who wins an argument about width: the button asks for exactly as much room as its label needs, the card takes whatever the column gives it. Get them the wrong way round and the button stretches across the card while the card shrinks to the width of its longest word, which is the commonest thing to see in a first auto layout file.
Draw all four states: default, hover, focus, disabled. This is the rule that is easiest to skip because the file looks complete without it. Kanto's Add button is disabled on the three dishes that have sold out, and if the file never shows that state somebody in the build invents it, usually by dropping the opacity, which produces a button that fails contrast and a customer who taps it repeatedly. Hover is not enough on its own either, because half the people using this screen are touching it and have no hover at all.
A focus ring 2 px thick with 2 px of offset. The offset is what keeps the ring readable against a filled button, and the thickness is the number in the focus appearance criterion of WCAG 2.2, which is a AAA one, so treat it as a sound default rather than as a legal floor. It is also the single most deleted thing in interface design: the browser draws one for free and it gets removed for being ugly, which converts a working keyboard into an invisible cursor.
Then size, which is two numbers, not one. 44 by 44 for a thumb, 24 by 24 as the floor. The first is the comfortable target Apple has published since 2013 and the one to design to. The second is the minimum in WCAG 2.2, published in 2023, and it is a floor rather than an aim. Kanto's Add button clears both by accident, because of the padding, which is the usual way a good value arrives: from a rule that was applied consistently rather than from somebody checking a specification.
The stall is the canvas, and it has a second half
People learn the canvas and never learn the system. In this topic that means auto layout and components, and somebody who skips them can draw any single screen and cannot change one. The evidence arrives at the fourteenth dish card rather than the first: fourteen cards built by hand are fourteen edits every time the price format changes, and two of them will be wrong afterwards because it was late.
The second half of the stall is the one that catches people who did learn components, and it is quieter. A component with one appearance is a picture that has been filed tidily. The variants are the point: the same button as default, hover, focus and disabled, so that the states are decisions in the file rather than guesses in the build. A kit of forty components each drawn in one state has not solved the problem, it has organised it.
One button
Four pieces, and three of them are missing from most kits
A component is not a drawing that has been filed. It is a drawing plus three things that decide what happens when the file is opened by a machine.
- 01The layout ruleAuto layout, horizontal, gap 8, padding 12 and 16, hug contents
- 02The statesDefault, hover, focus and disabled, drawn as variants rather than described
- 03The values it readsNamed tokens, so a dark theme changes what surface-raised means and nothing else
- 04The name it is filed underWhat it does, in the words the team already uses when asking for it
Take any one out and the other three stop working. A component with no states is a picture; with no tokens it is a fork of the system; with the wrong name it is rebuilt next month by somebody who could not find it.
Build it twice by hand before you build it once properly
The order in this topic runs backwards from what it looks like it should be. Draw the first screen by hand, everything a rectangle. Draw the second by hand as well, and notice that you have made the same button twice and slightly differently. Only then go back and replace both with one component, which is the point where a kit stops being filing and starts being a saving. From there the third screen costs nothing, and so does the fourteenth.
Starting the other way, from a library somebody else made, teaches you their decisions without any of the reasons, and the tell is a designer who cannot produce a button without one. It also produces the specific failure of a screen that is entirely on-system and answers nobody's question, because a component library has an opinion about padding and no opinion about what the screen is for. That question belongs to understanding what people need before designing anything and it is worth settling before any of this.
Naming is the last thing in the order and the one that decides whether the system survives a year. In the Kanto kit, name the token for what it does, not for what colour it is. A value called surface-raised can go from near-white to near-black when a dark theme arrives; a value called grey-100 has to be renamed or lied about, and in practice it gets lied about.
Paste in the longest string you have
Before calling any screen finished, paste in the longest string you have. On Kanto's card that is slow-braised pork shoulder ramen against Miso, and it is the fastest way to find out whether the layout describes a rule or a coincidence. The same test with a longer language finds the rest: a Finnish or German label is regularly half again as long as the English one, and a button drawn at a fixed width truncates it silently.
Test the empty case in the same minute. A card with no image, a list with nothing in it, a price that has not loaded. These are not edge cases on a menu screen, they are Tuesday, and they are the states that decide whether the screen looks broken or looks like it is waiting.
What to open in 2026
Figma has been the default here since 2019, when it took the seat from Sketch by running in a browser and letting more than one person into the same file. The free tier is real and every value on this page can be set in it. Penpot is the alternative worth naming rather than the alternative nobody uses: open source, self-hostable, and the answer when the files are not permitted to live on somebody else's server, which for a hospital or a bank is a constraint rather than a preference.
Handoff is where the pricing bites. Figma's Dev Mode arrived in 2023 and replaced the free Inspect panel that developers had been reading specs from, and it is a paid seat rather than part of the free tier. The terms have moved more than once since, so check the price on the day rather than trusting a tutorial's screenshot, and be aware when you plan a project that the person receiving your file may not have the view you designed the handover around. Interface design, and the file everyone is in at once covers the program itself, and the parts of it worth learning are a shorter list than the menus suggest.
What none of this settles is what the screen should feel like while it changes, which is the one part of an interface that cannot be drawn as a still. A card that appears is a different claim from a card that slides in from where the tap happened, and neither is decoration once somebody is using the thing at speed. That is the next question, and the values that answer it are durations and curves rather than pixels. The rules underneath all of it, the gaps and the differences that make any of these components readable at all, are the principles that hold whatever you are designing, and they do not change when the screen redraws.