Foundations
Spacing and sizing
Record the application’s existing dimensions before turning repeated values into a token scale.
On this page
Current implementation
Spacing comes from Tailwind utilities and explicit pixel/rem values. There is no exported spacing-token object in the audited globals.css. Calling every repeated measurement a formal token would misrepresent the source. These values are documented conventions that a team can reuse and later consolidate.
Recurring dimensions
| Element | Observed size | Guidance |
|---|---|---|
| Primary creation action | 44px height (h-11) | Use the shared form actions rather than restyling a local submit button. |
| Settings input | 48px; 52px from sm | Keep the field label and hint outside the control boundary. |
| Task completion indicator | 24px; 28px from sm | The surrounding button carries the task label and interaction area. |
| Schedule switch | See ScheduleToggle source | Preserve the accessible button and label rather than using a decorative slider alone. |
| Project card | Minimum 248px; ordered cards minimum 264px | Do not force fixed height when content needs more space. |
| Panel inset | 20px, with 28–40px in larger forms | Match the containing pattern and responsive progression. |
| Agenda hour | 156px | Use AgendaTimeline’s constant; the time math depends on it. |
| Time increment | 15 minutes | Keep move/resize calculations consistent with RadarCalendar. |
Composition rules
- Use the current workspace container before deciding on padding. Different views intentionally have different maximum widths.
- Keep labels adjacent to their fields and supporting messages near the relevant decision.
- Separate major groups with larger gaps than the spacing between a label and its content.
- Record exceptions as component constraints. Do not normalize card, calendar, and modal dimensions without checking their behavior.
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1