Foundations
Typography
A system-font hierarchy built for fast planning, readable actions, and dense supporting context.
On this page
Font contract
Radarist’s --font-sans stack is -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif. The rendered face depends on the operating system. Captures from this Linux environment are faithful to that stack but should not be described as an identical typeface on every platform.
Typography is currently expressed through component utility classes. The roles below record recurring source values; they are not named type tokens already exported by the application.
Observed roles
| Role | Small layout | Larger layout | Source |
|---|---|---|---|
| Page title | 2.45rem, weight 800, line-height 1, tracking -0.05em | 3.25rem from sm | page-hero.tsx |
| Project card title | 21px, weight 800, leading 1.08 | 23px from sm | project-card.tsx |
| Settings panel title | 17px, weight 800, tracking -0.02em | 19px from sm | settings-form-controls.tsx |
| Task label | 15px, weight 500, leading 1.25 | 17px, leading 1.3 from sm | task-checkbox.tsx |
| Field value | 15px, weight 500 | 16px from sm | settings-form-controls.tsx |
| Supporting label | 13px, usually weight 500–700 | 14px from sm | Shared fields and settings |
| Project space label | 11px uppercase, weight 800, tracking 0.13em | 12px from sm | project-card.tsx |
Writing and hierarchy
- Use a short outcome-oriented project title and an actionable next task. They answer different questions.
- Reserve uppercase tracked text for short labels; do not use it for paragraphs or long instructions.
- Let task text wrap. Card next-action copy is clamped to two lines; the detail view must preserve the full content.
- Use real headings in new screens, with one page-level heading and logical section levels. A bold span is not an accessible heading.
Long content and scaling
Test long project names, descriptions, task labels, and translated content before assuming the captured ideal-length text is representative. At browser zoom, retain readable content and access to controls. A narrower layout should simplify arrangement, not hide the information needed to choose the next action.
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