In a design system, what are inset, stack and inline spacing, and why define them as separate roles?

## Three roles, one scale A spacing scale says **which values** exist. Spacing roles say **what a value is for**. The three most widely used roles are: | Role | Direction | Where it sits | Food-delivery example | |---|---|---|---| | **Inset** | all sides | between a container's edge and its content | inside a restaurant card, around the photo and text | | **Stack** | vertical | between elements placed one above another | between a dish's name, description and price | | **Inline** | horizontal | between items placed side by side | between a star icon and the rating, or between filter chips | All three draw from the same scale. The roles do not introduce new numbers; they attach meaning to the existing ones. ## Inset variants Inset is often defined in three shapes: - **Equal inset**: the same space on every side, typical for cards and panels. - **Squish inset**: less space top and bottom than left and right, typical for buttons, chips and tags, which are wide and short. - **Stretch inset**: more space top and bottom than left and right, typical for list rows and text fields that need vertical breathing room. Defining the variants once stops every component from inventing its own ratio. ## Why separate roles help 1. **Intent is visible.** A spec that says "inset 16, stack 8" tells an engineer exactly where each value goes; a spec that says "16 and 8" does not. 2. **Ownership is clear.** A component owns its **inset**. The **stack** and **inline** space between components belongs to whatever places them: the list, the page section, the toolbar. 3. **Reuse works.** A card with no outer spacing of its own can be dropped into a list, a grid or a carousel and the parent decides how far apart the cards sit. A card that brings its own outer spacing doubles up next to a sibling, and has to be overridden in every new context. 4. **Rescaling can target roles.** A system can tighten stack spacing in a dense screen without touching insets, or the reverse, because the roles are separate. 5. **Review is easier.** A reviewer checks that the right role was used, not only that the number is on the scale. ## The ownership rule in practice In a **food-delivery app**, the restaurant list shows cards one above another: - The **card** owns its inset: 16 around its photo, name and delivery time. - **Inside the card**, stack spacing separates the name from the delivery time, and inline spacing separates the rating icon from the number. - **Between cards**, the list applies stack spacing of 16. The card itself adds nothing outside its own edge. If the card carried its own space below it, the last card in the list would leave an unwanted gap before the footer, and placing the same card in a horizontal carousel would leave space on the wrong side. ## Where the model is a guideline, not a law - Some components legitimately need a fixed relationship with a neighbour, such as a form field's helper text; that belongs **inside** the component as stack spacing, not outside it. - Some systems add further roles, such as a separate role for section spacing on a page. That is a refinement of the same idea. - Page margins and column gutters are layout-grid concerns rather than component spacing roles, even though their values often come from the same scale. ## How the roles appear in a system - The spacing documentation lists each role with its allowed steps, such as insets 8 to 24 and section stacks 32 to 64. - Component specs name the role next to every value. - Layout primitives in the component library, such as a stack and an inline row, apply the space between their children so that product teams rarely set it by hand. - Reviews check the role as well as the value: an inset used where a stack belongs is a defect even when the number is on the scale, because it will behave wrongly when the component is reused or when a denser mode rescales one role and not the other.