UXS-001 — Solar System Explorer

Status · Draft v0.1 Visual fidelity · Verified against prototype (P01_solar-system-explorer.html) IA anchor · §surfaces/explore · §topbar-patterns · §shared-tokens Related PRD · PRD-001 Related ADRs · ADR-001 (Three.js r128), ADR-011 (TypeScript), ADR-012 (SvelteKit) Related RFCs · RFC-001 (routing)

Why this UXS exists

The solar system explorer renders to both Three.js (3D mode) and Canvas 2D (2D mode). This UXS defines the static appearance contract for both modes, the detail panel tabs, and the planet-specific visual treatments.

Principles

• The solar system is immediately recognisable — Saturn's rings, Jupiter's bands, Earth's blue
• Selected bodies are unambiguous without obscuring their neighbours
• The TECHNICAL tab shows data, not decoration — Space Mono throughout
• The tooltip appears close to the body without overlapping the label
• 2D orbit rings are subtle; planets are the signal

Scope

In scope: nav bar, 3D scene layout, 2D canvas layout, planet sphere gradients, selection ring, detail panel (all four tabs), floating tooltip, speed controls, bottom bar. Non-goals: animation timing, hover state transitions, zoom gesture handling. Boundary note: interaction behaviour (click detection logic, zoom formula, drag-to-pan) belongs in the screen module, not here.

Theme

Dark only. Background #04040c always.

Tokens

Inherited from IA

All shared colour tokens, typography tokens, spacing tokens, nav bar spec.

Defined here

planet-mercury: #c8c8c8 / gradient: #d0c8c0 → #504840
planet-venus:   #e8cda0 / gradient: #f0e0a0 → #9a7820
planet-earth:   #4b9cd3 / gradient: #6ab8e8 → #0d3050
planet-mars:    #c1440e / gradient: #e0704a → #7a2000
planet-jupiter: #c88b3a / gradient: #deb878 → #6a3a0e
planet-saturn:  #e4d191 / gradient: #ece8b0 → #9a8830
planet-uranus:  #7de8e8 / gradient: #a8f0f0 → #207878
planet-neptune: #4466bb / gradient: #6080d8 → #101858

sun-core:       #fff8e7
sun-glow-inner: rgba(255,228,130,0.9) at r=0, transparent at r=90px
orbit-ring:     rgba(255,255,255,0.05) unselected, rgba(68,102,255,0.3) selected
kuiper-belt:    rgba(140,160,210,0.035–0.05) per particle
planet-nine:    rgba(160,120,220,0.14) ring, rgba(160,120,220,0.32) label

Layout

3D mode

Full viewport Three.js canvas. Nav bar overlaid at top. Planet label divs positioned by 3D projection. Detail panel slides in from right (314px wide). Speed controls and bottom bar at bottom.

2D mode

Full viewport Canvas 2D. Solar system centre at canvas centre (transform: translate(W/2+panX, H/2+panY) scale(zoom)). Stars drawn in screen space before transform. All orbital objects drawn in world space. Detail panel same as 3D mode.

Detail panel tabs

┌─────────────────────────────────┐
│  PLANET NAME           [×]      │
│  Type · Orbital period          │
├──────────────────────────────────┤
│  OVERVIEW │ TECHNICAL │ LEARN │ SIZES │
├──────────────────────────────────┤
│  Tab content (scrollable)        │
└─────────────────────────────────┘

Tab strip: 7px Space Mono, letter-spacing 2px. Active tab: white, 2px solid #4466ff bottom border. Inactive: rgba(255,255,255,0.35).

Bottom bar

Height 68px. Background rgba(4,4,12,0.88). Speed buttons left. Hint text right.

Component states

Planet (unselected): base sphere gradient, outer glow at 4–5× radius, label at planet_name_color + ccPlanet (selected): pulsing selection ring (r = planet_radius + 10 + sin(frame)*3), bright label white, panel open Sun (unselected): radial glow 0–90px, 14px white core, "SUN" label below Sun (selected): same + pulsing gold ring (r = 22 + sin(frame)*4, rgba(255,220,80,0.4–0.7)) Tooltip (visible): rgba(4,4,16,0.93) bg, rgba(68,102,255,0.4) border, 3 data lines in Space Mono 7px Tooltip (hidden): display:none Speed button (active): rgba(68,102,255,0.25) bg, rgba(68,102,255,0.5) border, #7b9cff text Speed button (inactive): transparent bg, rgba(255,255,255,0.1) border, rgba(255,255,255,0.35) text

Accessibility

• Nav bar: see IA §topbar-patterns, RFC-005
• Detail panel: semantic headings, keyboard-closable (Escape)
• Canvas: aria-label="Interactive solar system. Use the detail panel for screen reader access."
• prefers-reduced-motion: stop auto-orbit in 3D, stop simTime advance in 2D

Acceptance criteria

• [ ] All 8 planets visible and correctly coloured in both 3D and 2D
• [ ] Saturn's rings visible in both modes
• [ ] Jupiter's bands visible in 2D at size ≥ 6px radius
• [ ] Selection ring pulses on selected planet in both modes
• [ ] Tooltip appears within 200ms of selection in 2D, on hover in 3D
• [ ] Tooltip shows velocity, distance, and orbital params (no planet name)
• [ ] TECHNICAL tab shows vis-viva velocity updating as planet moves
• [ ] SIZES tab canvas shows all planets at true relative scale
• [ ] Sun panel opens with TECHNICAL and LEARN tabs
• [ ] 2D zoom anchored to cursor; 2D drag works
• [ ] All nav links work (MOON, EXPLORE active, PLAN, FLY, MISSIONS, EARTH)

---

Extension — GALLERY + LEARN tabs (v0.1.10)

PlanetPanel and SunPanel gain two new tabs after the existing OVERVIEW / TECHNICAL / SIZES set. Layout, typography, and tokens follow UXS-004 §Extension and the shared src/lib/styles/panel-tabs.css.

Layout

• Tabs row stays at top of panel; new tabs appear after SIZES (planets) or TECHNICAL (sun).
• Tab condition: GALLERY shown when static/data/planet-galleries.json[id] (or sun-gallery.json) > 0; LEARN shown when overlay has non-empty links[].

Tokens (extension)

GALLERY thumb (planets, default): border-color rgba(68, 102, 255, 0.6) on hover (Earth blue accent). GALLERY thumb (sun): border-color rgba(255, 200, 80, 0.6) on hover (theme-gold override; scoped CSS in SunPanel). Active tab border (planets): #4466ff. Active tab border (sun): #ffc850.

Acceptance criteria (extension)

• [ ] GALLERY tab renders when planet/sun manifest count > 0; hidden otherwise
• [ ] LEARN tab renders when overlay has links; hidden otherwise
• [ ] Lightbox opens on thumbnail click; closes on click anywhere
• [ ] LEARN tab shows tiered intro/core/deep groupings with the canonical accent colors (teal/blue/gold)