| One control height | Buttons, inputs and selects use --control-default (36px). Use .btn-sm or .btn-lg only in dense tables or primary page actions. |
| One control radius | --radius-control for anything interactive. Containers use the same radius. Don't introduce a new radius for a single component. |
| Named text styles | Use .text-title, .text-label and the rest. A new size needs a new named style, not an inline font-size. |
| Spacing scale | 0.5, 0.75, 1, 1.5rem. Page sections stack at 1.5rem (space-y-6). Label to field is 0.5rem. |
| Neutral by default | Color is for meaning: primary action, destructive, status. Layout and decoration stay gray. |
| Every state | Interactive elements need hover, :focus-visible and disabled. Inputs also need aria-invalid. Use the shared control classes and don't restyle states per component. |
| Feedback | The result of a form is a one-line .form-message under the form row: red for errors, green for success. If the result is already visible where the user acted (an Approved badge on a GIF, a new row in the audit log), add nothing. Toasts are only for events the user didn't trigger on this page. |
| Reduced motion | Transitions go through motion-control and turn off under prefers-reduced-motion. Only animate color, shadow, opacity and 1px translates. |
| Copy | Sentence case. Button labels are a verb and a noun: "Search Project", "Delete User". Placeholders show an example ("e.g. LEMONADE-1234"). |
