Foundations
Icons and visual identity
Material Symbols Rounded communicates actions; five project identities keep context consistent across surfaces.
On this page
Icon implementation
MaterialIcon renders a decorative span using material-symbols-rounded. Its variation settings are FILL 0 or 1, weight 500, grade 0, and optical size 24. Icons are aria-hidden, so the surrounding interactive element must supply a meaningful name.
Recurring vocabulary
| Icon | Meaning in this product |
|---|---|
| radar | Daily plan |
| inbox | Unsorted next actions |
| hourglass_top | Waiting projects |
| check_circle | Projects or completion, depending on context |
| grid_view | Spaces |
| calendar_view_week | Reusable schedules |
| archive | Inactive or completed work |
| edit_note | Notes |
| open_with | Reordering |
| event_busy | Removed agenda item |
Usage rules
- Use a visible text label for unfamiliar actions. An icon alone is not enough to establish meaning.
- Keep icon names stable across repeated controls. Distinguish navigation from a task completion action through labels and placement.
- Use filled icons to reinforce a selected state only when the parent already communicates selection.
- Project appearance uses one of teal, blue, plum, sand, or coral plus a chosen icon. Retain the title and space label when applying this identity.
- Do not imply that a project color is a priority, health, or status indicator unless an explicit product rule assigns that meaning.
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