Wordmark + radar glyph
The mark is Geist Sans 600 + a 3-arc concentric radar glyph. The glyph carries three states — static by default, pulse while a stream is live, rotate during a data fetch (replaces every spinner in the system).
Glyph states
static
no animation
pulse
opacity 1 → 0.6 → 1 · 4s
rotate
outer arc · 360° / 1.6s
Glyph sizes
Glyph alone for ≤24px contexts (favicon, mobile header, OG fallback). Never below 12px — fall back to full wordmark.
12px
16px
20px
24px
32px
48px
64px
96px
Wordmark
Geist Sans 600, tracking -0.02em. Glyph + 16px gap + wordmark. Cap-height baseline aligned.
RideRadarRideRadarRideRadarRideRadar
Wordmark in product states
Defaultdata-state="static"
RideRadar
No active stream, no fetch.
Streaming livedata-state="pulse"
RideRadar
Premium tier, vendor stream connected.
Fetchingdata-state="rotate"
RideRadar
Data request in flight. The only spinner, anywhere.
On surfaces
RideRadar
bg-alt surface
RideRadar
dark surface · brand-400 (lifted +4% lightness for contrast)
Spec
- ViewBox
- 0 0 24 24
- Focal
- (1, 12) — left center
- Outer arc
- r=22, peak (23, 12), stroke 1.5px
- Mid arc
- r=14, peak (15, 12), stroke 1.5px
- Inner arc
- r=7, peak (8, 12), stroke 1.5px
- Fill
- none
- Stroke
- currentColor
- Line cap
- round
- Light theme
- brand-500 oklch(64% 0.18 35)
- Dark theme
- brand-400 oklch(72% 0.15 35)
- Pulse cycle
- 4s ease-in-out infinite
- Rotate cycle
- 1.6s linear infinite
- Reduced motion
- static + opacity 0.6 fallback