Planetfall
Global latency monitoring
5 colors
13 components
Inter, JetBrains Mono
Apr 14, 2026
Website Preview
Colors
Primary
#6366F1
Indigo accent, CTAs
#09090B
Background
#FFFFFF
Primary text
#18181B
Cards, panels
#71717A
Secondary text
Typography
Inter
Role
SizeWeightHeight
Display
36px700—
Heading
22px600—
Body
14px400—
JetBrains Mono
Role
SizeWeightHeight
Mono
13px400—
DESIGN.md — Planetfall
Overview
Planetfall's design system is data-visualization-forward. An indigo accent on deep dark surfaces creates a monitoring dashboard aesthetic that feels both technical and premium. Every design decision optimizes for at-a-glance latency comprehension across global regions.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-brand | #6366F1 | Indigo accent, CTAs |
color-bg | #09090B | Background |
color-text | #FFFFFF | Primary text |
color-surface | #18181B | Cards, panels |
color-muted | #71717A | Secondary text |
Typography
| Role | Family | Size | Weight |
|---|---|---|---|
| Display | Inter | 36px | 700 |
| Heading | Inter | 22px | 600 |
| Body | Inter | 14px | 400 |
| Mono | JetBrains Mono | 13px | 400 |
Components
Globe Visualization
- 3D interactive globe showing check regions
- Colored dots: green (<200ms), yellow (<500ms), red (>500ms)
- Click region for latency drill-down
Latency Sparkline
- Inline mini chart showing 24h latency trend
- P50, P95, P99 percentile bands
- Color-coded by threshold
Status Badge
- Operational (green), Degraded (yellow), Down (red)
- Pill shape, 6px radius, uppercase text
- Pulse animation on active incidents
Do's and Don'ts
Do
- Use color consistently for latency thresholds across all views
- Keep dashboards scannable — big numbers, small labels
- Use indigo for interactive elements only
Don't
- Don't show raw latency without percentile context
- Don't use more than 5 colors in a single chart
- Don't animate charts during data refresh — swap instantly