Every surface in RiskSonnar is built from the tokens, primitives, and animations on this page. Use it to brief a designer, audit a new screen, or compose a marketing asset that feels native. Everything is theme-aware: this page itself follows your toolbar theme toggle.
One fused mark — range rings (radar depth) + sweep arc (live scan) + ping wave (sonar emit) + center contact (the source). Theme-aware via --rs-accent; scales crisp at 16 px through 256 px.
Every theme exposes the same --rs-* tokens, so component code is theme-agnostic. The toolbar toggle (top-right of the cockpit) cycles system → light → dark → radar → sonar.
Two pure-SVG components, <RadarSweep /> and <SonarPing />. Each respects prefers-reduced-motion; the range rings stay drawn when animation is paused, so the depth context is preserved.
Five signature glyphs that lucide-react doesn't carry. Same call signature + stroke weight as lucide, so mixing the two on the same surface reads as one consistent line. Decorative by default; pass aria-label to surface a name to assistive tech.
import {
IconRadarSweep, IconSonarPing, IconContact, IconThreat, IconSignalBand,
} from "@risksonnar/design-system";HSL channels exposed as --rs-* CSS custom properties. The four themes override these values; component code reads through the variables and gets the right colour for the active theme automatically.
Three families bound to --rs-font-sans, --rs-font-data, --rs-font-mono. Use .rs-numeric for tabular figures and .rs-mono for ids, tokens, and metadata.