A mission-control instrument panel floating over deep space: NASA/JPL’s real-time 3D visualisation of the Solar System renders a pure-black #000000 WebGL void (a live Three.js scene of orbits, planets and spacecraft) with thin HUD chrome laid on top — a collapsible story-card rail on the left, a time-scrubber pinned to the bottom, and a vertical instrument-icon rail on the right. Colour is functional and rationed: a green #47da84 “live/real-rate” pulse, an amber #cd9745 spacecraft-and-paused accent and a CTA blue #3e63dd, while the real chromatic richness is a published per-celestial-body palette where each planet, the sun, comets and constellations carry their own token trio (--mars #9a4e19, --earth #0099cc, --saturn #d5c187, --sun #f7f4df…), and that colour is only ever allowed to belong to a body, never to UI furniture. Type stays quiet and instrumental: geometric Metropolis set LIGHT at weight 300 with tight negative tracking (-0.58px) for titles, and small wide-tracked UPPERCASE 600 for the wordmark and scene labels, over Inter for the 16/500 UI. Panels are translucent #252527 sheets with 1px #37373a hairline dividers, depth is a glow (0 0 12px 4px rgba(0,0,0,.4)) plus backdrop-blur(8px) rather than a drop shadow, corners are a tight 3–6px, and motion is a fast opacity 0.1s ease-in-out over a cubic-bezier(0.2,0.2,0,1) house curve. Two captured anti-patterns: focus outlines are suppressed and there is no reduced-motion block despite the live scene. Note: the root eyes.nasa.gov now redirects to a generic science.nasa.gov WordPress portal; the distinctive design language captured here is the standalone /apps/solar-system/ app. Metropolis is licensed, so the preview specimen stands in with Montserrat.
⚠ site only
Browse NASA Eyes in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: eyes.nasa.gov/apps/solar-system/ (live DOM, computed styles), 2026-08-03; desktop 1512px. Coverage: the standalone real-time 3D app (Home view + Featured-Stories rail + time-control scrubber + instrument rail). Published--*token set read from:root; hover/focus from stylesheet rules. sheetsBlocked 0. Reality check: hint ("space data-viz — dark cosmic, mission-control instrumentation") is ACCURATE for this surface — but note the root domaineyes.nasa.govnow redirects toscience.nasa.gov/eyes/, a generic WordPress/USWDS portal that is NOT distinctive; the design language lives in the standalone/apps/solar-system/Three.js app captured here.
A mission-control instrument panel floating over deep space. The entire surface is a pure-black WebGL void (a live Three.js scene of orbits, planets and spacecraft) with thin HUD chrome laid on top: a story-card rail on the left, a time scrubber pinned to the bottom, and a vertical instrument-icon rail on the right. Colour is functional and rationed — a green "live" pulse, an amber spacecraft/paused accent, a CTA blue — while the real chromatic richness is a *published per-celestial-body palette* (each planet, the sun, comets and constellations carry their own token trio). Type stays quiet: geometric Metropolis at a light 300 for titles and a small wide-tracked uppercase 600 for the wordmark and scene labels. Nothing is decorative; every pixel reads as an instrument. Feels: cosmic, precise, instrumented, cinematic.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Primary text, active labels, planet labels |
| grayLight | #eaeaeb | Menu items, bright secondary labels |
| grayMed | #c6c6c9 | Secondary text, the uppercase wordmark, button text |
| gray | #95959d | Tertiary / muted labels, inactive controls |
| Token | Hex | Role / usage |
|---|---|---|
| black | #000000 | Canvas — the space void |
| grayDark | #252527 | HUD panels, story cards, menu sheets |
| grayblueBackground | #151a1d | Deep panel / settings background |
| grayDarkAlpha80 | #252527cc | Translucent panel fills over the scene |
| Token | Hex | Role / usage |
|---|---|---|
| grayDivider | #37373a | Hairline dividers between cards/rows |
| tab-border-gray | #606060 | Control / tab borders (also #636363) |
| grayblueButton | #425571 | Slate control fill / button border |
| Token | Hex | Role / usage |
|---|---|---|
| cta-blue | #3e63dd | Primary CTA fill |
| nasa-blue | #288bff | Brand blue, links |
| settings | #0d67ff | Settings / active-control accent |
| live | #47da84 | "LIVE" + "REAL RATE" indicator, scrubber handle (green) |
| spacecraft | #cd9745 | Spacecraft labels + story-card dates (amber) |
| paused | #ff9a42 | Paused-clock state (orange) |
| error | #d55033 | Errors / warnings |
| Token | Hex | Token | Hex |
|---|---|---|---|
| sun | #f7f4df | jupiter | #da8b72 |
| mercury | #9768ac | saturn | #d5c187 |
| venus | #b07919 | uranus | #68ccda |
| earth | #0099cc | neptune | #708ce3 |
| mars | #9a4e19 | constellation | #59b2ff |
| moon | #b6acac | comet | #7e86b0 |
| dwarfPlanet | #929871 | asteroid | #806262 |
Rule: chrome colour is rationed to green (live), amber (spacecraft/paused) and blue (CTA/links); all other saturated colour belongs to a specific celestial body, never to UI furniture.
monospace.| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Wordmark (h1) | Metropolis | 16 / 19.2 | 600 | +0.64px | UPPERCASE, #c6c6c9 |
| Story title (h2) | Metropolis | 29 / 27.55 | 300 | -0.58px | none, #ffffff |
| Overlay heading (h3) | Metropolis | 28.8 / 27.36 | 300 | -0.576px | none |
| Menu item | Metropolis | 17.6 / — | 500 | +0.352px | none, #eaeaeb |
| Card date / label | Metropolis | 14 / — | 600 | +0.28px | UPPERCASE, #cd9745 |
| Scene label (planets) | Metropolis | ~13–14 | 600 | wide | UPPERCASE, #ffffff |
| Button / UI | Inter | 16 / 24 | 500 | +0.32px | none, #c6c6c9 |
Patterns: big titles are LIGHT (weight 300) with tight negative tracking; small labels are heavier (600) UPPERCASE with positive tracking. Weight never sits at a middle 400 for display.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.