Foundations
Spacing and density
Use source layout rhythm to separate reading, metadata, controls and work areas.
On this page
Observed rhythm
| Context | Source convention |
|---|---|
| Controls | Admin buttons use min-height 2.35rem; AdminInput uses h-10; theme controls use h-10 or h-11. |
| Form stacks | Native editor groups use grid gaps, panels and field descriptions rather than extra divider chrome. |
| Editorial lists | Standard and compact variants control image scale and copy density. |
| Desktop workspace | The admin sidebar occupies 15.75rem; the content pane must account for it. |
| Responsive stacking | Native responsive utilities collapse columns and reorganize toolbars; do not scale the whole desktop frame down. |
Practical rules
- Use the spacing utilities already present in the nearest source component. The repository does not declare a standalone numbered spacing-token package.
- Group related fields; place the next section far enough away that the relationship is visible.
- Preserve usable target sizes when increasing density. Remove low-value columns before shrinking every control.
- Do not stretch screenshot dimensions to fit a card. Crop at native geometry and preserve aspect ratio.
Source references
| File | Responsibility |
|---|---|
| components/admin-ui.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/public-content-list-item.tsx | Audited Townwell implementation; use this file when extending this interface. |
| app/admin/(shell)/layout.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1