# 2 · Structure: the right element, one component, styles that hold The markup is what browsers, keyboards, screen readers, autofill and translation tools read. The styles are what the next developer reads. A screenshot shows neither, so a page can look finished while being broken for both. UI design 2.4 sets the basic rules (buttons for actions, links for navigation, labels for inputs). This file is about how agents get them wrong in real code. --- ### M1 · Actions are buttons, places are links **Rule:** If clicking it does something on this page (opens, saves, sends, toggles), it's a ` // submits the form

{name}

…
``` For the card, `.card { position: relative }` and `.card__link::after { content: ""; position: absolute; inset: 0 }` make the whole card clickable while the link stays the one real target. **Check:** run `checks/layout.js`: it lists divs and spans with click handlers or a pointer cursor and no role. Also search the code: ``` grep -nE "<(div|span|li|img)[^>]*onClick|href=\"#\"|href=\"javascript" ``` Each hit becomes a button or a link, or has a reason. > **In ihumane Pro** (https://ihumane.ai/#pricing): > - M2 · Headings, lists and landmarks show the shape of the page > - M3 · One component per thing; variants are props > - M4 · Styles the next person can follow > - M5 · Dark mode swaps tokens, not components ## Summary checklist - [ ] Every action is a `