Theme
The visual language treats the interface as instrument overlays floating above a live 3D scene: near-black backgrounds, thin hairline borders, frosted-glass panels, and sparing use of color so data — not chrome — draws the eye.
Monochrome, high contrast
Nearly everything is white, grey, or black. Line weight, opacity, and stroke style (solid / dashed / dotted) carry meaning instead of hue.
One accent color
Red (--color-accent · #ff4d4d) is reserved exclusively for critical or live-dynamic data — impact/crash states, the velocity vector, and ground-track markers.
Glassmorphism panels
Controls float in translucent, blurred cards (backdrop-filter: blur()) rather than opaque sidebars, keeping the 3D scene visible underneath at all times.
Progressive disclosure
Every panel section is a native <details>/<summary> so users can collapse what they don't need — no custom JS accordion required.
Two views on small screens
At or below 768px the Orbit Overview pane is dropped. The Ground Track (kept at 2:1) sits above the 3D View, which fills the rest of the screen.
Everything collapsed by default on mobile
On mobile all controls start hidden behind an icon dock. Each icon opens one sheet (Presets, Elements, Simulation, Telemetry, How it works), so only one container is ever on screen.
Color
Every color used anywhere in the prototype, defined once as a CSS custom property and reused everywhere. Matches the color group in tokens/tokens.json.
Typography
System font stack — no webfont loading required. --font-family-base: 'Segoe UI', Roboto, Arial, sans-serif; Sizes, weights, and letter-spacing are all tokenized; the full ramp is listed after the usage samples.
Full font-size ramp, named by pixel value (matches font.size in the JSON).
Weights, letter-spacing, and line-height tokens.
Spacing
Every padding, margin, and gap in the prototype, named by its pixel value rather than snapped to an idealized scale — this keeps the exact spacing already used, just made reusable and consistent across files.
Radius & Effects
Corner radii, blur amounts, border weights, transition durations, and shadows used across panels, chips, and controls.
Components
Buttons — pill-shaped, transparent by default. Three variants layered on the same base class.
Slider control — native range input, white accent, value shown inline in the label.
Toggle checkbox & info tooltip icon.
Collapsible section — native <details> with a rotating chevron, no JS.
Orbital Elements
Telemetry rows & orbit-type badges — dashed dividers, stroke-style differentiates state instead of color.
Pane label — floating chip identifying a 3D viewport, and a banner toast for transient status messages.
Floating glass panel — the base container for every control group. Blurred, bordered, drop-shadowed, corner-pinned.
Page loader — full-screen percentage counter shown on first load (--color-loader-bg, fades out over --duration-slow).
Responsive & Mobile
One breakpoint switches the app from three floating panels to a two-view layout with an icon dock. CSS media queries can't read custom properties, so main.css repeats the breakpoint values; main.js reads them from the tokens so the JavaScript and CSS always agree.
Icon dock — five icon buttons, one per container. Monochrome 1.5px stroke icons at --size-icon; the open sheet's button gets the glass-hover fill and a hairline border. In landscape it becomes a vertical rail with labels hidden.
Bottom sheet — the mobile form of a floating panel. Denser glass (--color-glass-solid), --radius-24 top corners, upward --shadow-sheet, a grab handle, and a sticky header whose × collapses it. Slides in over --duration-sheet with --easing-standard; motion is removed for reduced-motion users.