diff --git a/docs/design.md b/docs/design.md index bd13192d34..b98e06cb72 100644 --- a/docs/design.md +++ b/docs/design.md @@ -120,6 +120,8 @@ Workspace and chat surfaces use the full width — these are working surfaces, n Sections sit apart. `` owns its own bottom margin; the next thing is wrapped in another ``. The agent-list `sectionHeading` carries the same `marginTop`/`marginBottom` rhythm (`packages/app/src/components/agent-list.tsx:511-517`). Adding `marginBottom` to a section is wrong. +A section or group explains itself through the `info` prop on `` or `` — an info icon beside the header that opens a tooltip (`packages/app/src/screens/settings/settings-info-tip.tsx`). A muted paragraph between the header and the card is wrong: it sits in the section's own gap, so it reads as a second heading rather than as prose belonging to the header. Explanatory copy that describes one row belongs to that row, as `settingsStyles.rowHint` inside the card. + Cards inside a section sit closer than sections. Rows inside a card touch — only the divider separates them. The rhythm is page → spacious; section → spacious; card → tight. Rows have generous vertical padding: roughly 16px of content plus 16px of vertical padding for settings rows, 8–12px for sidebar list items where many rows must fit. Compressing rows below the established density to fit more on the screen is wrong. Too many rows means more cards or more sections, not smaller rows. @@ -248,6 +250,7 @@ New status pills use ``. Identity, shortcut, and interactive link b - `fontWeight.medium` on row titles, body text, button labels, badge text, or `` titles. Medium is reserved for the structural-label tier described in §3 — section labels, modal/sheet titles, dense metadata emphasis, and tight action labels. Anything else is `normal`. `` is responsive `400/300` and is never overridden. - `` wrapping `` to make a button. `