Foundations
Shape, borders, and elevation
Radarist uses rounded product surfaces and distinct elevation roles; its documentation shell keeps the portfolio’s square geometry.
On this page
Product geometry
Rounded corners are part of Radarist’s actual interface. They remain intact in captures and specimens. They must not leak into the portfolio navigation, documentation cards, or badges, which follow this site’s established square-corner patterns.
Observed geometry
| Role | Source treatment | Meaning |
|---|---|---|
| Project and resource card | 24px surface; 23px inset decoration | A stable object with grouped content. |
| Settings form | 24px; 28px from sm | A bounded collection of related fields. |
| Settings input | 14px | An editable value within a form. |
| Popover | Often 20px, with 14px menu items | A temporary choice surface. |
| Task indicator | 7px | A compact completion control. |
| Primary actions and view controls | Pill-shaped | An action or view switch within Radarist. |
| Project card shadow | 0 9px 30px var(--block-shadow) | A resting object. |
| Project card hover | 0 16px 38px var(--block-shadow-hover) | A raised interactive object. |
| Menu elevation | var(--menu-shadow) | A transient surface above the workspace. |
No exported shape scale
The source repeats explicit radii and shadow compositions rather than exporting radius tokens. Use the existing component or class constant when reproducing a control. A future formal scale should be derived from these implementations and checked for visual regressions.
Layering
- Keep hover elevation subtle and respect reduced-motion preferences.
- Treat fixed dialogs, sticky controls, and notifications as separate interaction layers. Verify that one does not obscure another’s primary controls.
- Use borders and headings to communicate grouping; shadows should not be the only cue.
- The portfolio does not restyle actual Radarist screenshots to match its own palette or corner treatment.
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