Tokens and components for the satellite tracker. Every value on this page comes from tokens/tokens.json, and every component specimen uses the product's own orbital-watch.css, so the reference can't drift from the app.
The viewport is full-bleed and the globe stays centered. Chrome floats on frosted glass at the edges so imagery and weather stay visible behind it.
Orange is a tracked object, green is what you've locked onto, cyan is ground infrastructure. Status and weather colors are separate tiers and never stand in for the accents.
Every live value names its source and age. When the app falls back to the simulated model, it says so in amber, never silently.
Two tiers. Palette primitives hold raw values; semantic tokens alias into them (shown as {palette.signal} → #3dfc9b). Components only ever use semantic tokens, so swapping a palette value re-skins everything.
Cloud cover is a sequential ramp from --wx-clear through --wx-partly to --wx-overcast: deep water to cloud white, so more cloud reads as more white. Used by the cloud meter, the along-track strip and the catalog bars.
One family, three cuts. Plex Mono for anything a reader compares digit by digit, Plex Sans for sentences, Plex Sans Condensed in caps for labels and section heads. All numbers use tabular-nums.
Left column is the fleet: catalog, conjunctions, layers. Right column is the target: mission clock, the selected satellite's readout, and the ground-track map, all --layout-rail-width wide so they share edges. Every panel is inset by --layout-inset. Below 760px the globe pins to the top and the panels scroll up over it as one column.
Glass recipe: background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--shadow-panel), var(--glass-edge);
.hud-btn · --accent · --sm.chip · sensor tags .sensor-tag.clock-bar · .segmented · LIVE and SIM states.catalog-row with cloud-cover mini bar · conjunction row.key-stats · tabs .tabs · weather below.outlook[data-state] · ok · warn · alert · sar.map2d · night shading · swath band · track.toast · source fallback message