# Orbit — DESIGN.md

A deep-space image gallery. Family: cinematic dark.

## 1. Visual theme and atmosphere

A planetarium at night. Near-black space, a single violet light, and the images doing all the talking. The title is huge and wide like a film poster. Mood: wonder, depth, stillness.

## 2. Color palette and roles

```
--bg:      #05060a   /* space */
--card:    #11121a
--ink:     #f4f1ea   /* warm white, not pure white */
--mist:    #c9c7d4   /* intro text */
--mute:    #9a9aa8
--accent:  #b388ff   /* the only accent: source label, title light sweep, hover glow */
```

Rule: one accent. No teal, no pink. Stars are white with a faint violet tint on the largest ones.

## 3. Typography

- Display: **Syne** 800, `clamp(64px, 15vw, 190px)`, line-height 0.85, tracking −0.04em, uppercase single word.
- Text and buttons: **Hanken Grotesk** 400–600, 15–17px.
- Captions: Syne 700 15px over a Hanken 13px meta line.

## 4. Components

- **Source label:** small uppercase line "NASA Image and Video Library" in violet with a thin violet border. Static text, no "live" badge.
- **Subject switcher:** pill track on a glass strip; active pill is warm white on black with a soft violet glow.
- **Image card:** radius 18px, caption on a bottom gradient, masonry columns (300px minimum).
- **Lightbox:** native `<dialog>`, image up to 72vh, title and NASA description below, round close button.

## 5. Layout

Hero fills 88vh and centers its content. Grid up to 1280px, 16px gaps, CSS columns for masonry. Phones: one column, title still fills the width.

## 6. Depth

Darkness is the depth. Cards get a violet glow and a 1px violet ring only on hover. The hero photo sits under a radial vignette.

## 7. Motion

- Star field twinkles slowly on a canvas: the one ambient motion, it sets the place.
- The title takes one light sweep on load, then stays still.
- Cards tilt up to 4° toward the pointer with a soft glare: feedback for the thing you are about to open.
- Cards fade up once as they enter; the lightbox pops in with a short scale.
- `prefers-reduced-motion`: stars drawn once, no tilt, no sweeps.

## 8. Do and don't

Do: let the images be the color; keep chrome thin; caption every image with its NASA center and year.
Don't: endless shimmer loops, drifting backgrounds, a second accent, "live" badges.

## 9. Agent prompt guide

Bias: black stage, one violet light, poster-size wide display type, masonry of real images, lightbox.
Reject: purple-to-pink gradients, neon teal, bobbing scroll hints, generative space art.

## Data and credits

NASA Image and Video Library API. NASA material is generally not copyrighted in the US; credit NASA and imply no endorsement; items whose metadata mentions a third-party copyright are filtered out. Hero photo from Pixabay, file kept with the page, author credited. Code MIT-0.