Quake Watch

# Quake Watch — DESIGN.md

Dark control-room dashboard for live event data on a map. Family: data-dense, dark.

## 1. Visual theme and atmosphere

A night-shift operations screen. Calm dark surfaces, one warm accent, and color that only ever means something: the magnitude of a quake. Mood: alert, precise, quiet until something happens.

## 2. Color palette and roles

```
--bg:      #07090d   /* page */
--panel:   rgba(18, 24, 33, .72)   /* glass panels over the page */
--line:    rgba(255, 255, 255, .08)
--ink:     #eef2f6
--mute:    #8592a0
--m2:      #39c6ff   /* data: magnitude 2.5–4 */
--m4:      #ffb020   /* data: magnitude 4–5, also the headline accent end */
--m5:      #ff4d2e   /* data: magnitude 5+, the one action accent */
```

Rule: the three magnitude colors are a data scale, not decoration. The only chromatic action color is the coral of the primary button (`#ff7a5c` to `#ffd1c4`, same hue as `--m5`). No teal, no purple.

## 3. Typography

- Headline and text: **Space Grotesk** 400/500/700. Headline `clamp(44px, 7vw, 84px)`, line-height 0.95, tracking −0.03em.
- Numbers, badges, times: **JetBrains Mono** 500/700, tabular.
- Second headline line takes a `--m5` to `--m4` gradient; nothing else uses gradient text.

## 4. Components

- **Status line:** small square glyph in `--m5` plus text "USGS feed · updated HH:MM". Static, never animated.
- **Stat card:** `--panel`, 1px `--line`, radius 18px, mono number 30px over a 13px label. Three in a row, also on phones.
- **Primary button:** coral gradient, dark text, radius 14px. **Ghost button:** transparent, 1px `--line`.
- **Map:** inline SVG, equirectangular, Natural Earth land in a low-contrast fill, faint graticule. One circle per event: radius from magnitude, fill from the data scale.
- **Segmented filter:** three options in a pill track; a sliding thumb marks the active one.
- **Event row:** magnitude chip (mono, data color), place, depth and coordinates, time ago, arrow. The whole row links to the USGS event page.

## 5. Layout

- Max width 1160px, 20px gutter. Order: hero, map card, filter + list.
- Radii: 28px hero, 24px cards, 18px rows and stats, 14px buttons.
- Phones: stats stay three across (smaller numbers), time and arrow hide in rows.

## 6. Depth

Glass panels with a 1px light border and one deep soft shadow (`0 20px 60px -20px rgba(0,0,0,.8)`). No stacked shadows, no card inside a card beyond the stat tiles in the hero.

## 7. Motion

- Counters count up once (900 ms, ease-out cubic): they state the result.
- Event dots scale in one after another; a ring pulses on each dot. The pulse encodes "this is an event", not decoration.
- List rows rise into view once. Skeleton shimmer only while the feed loads.
- `prefers-reduced-motion`: everything is shown at its end state, counters print the final number.

## 8. Do and don't

Do: keep color for data; say where the data came from and when it was updated; link every event to its source.
Don't: animated "live" dots, a second accent, three-column feature grids, decorative gradients on panels.

## 9. Agent prompt guide

Bias: dark, data-first, one warm accent, mono numbers, map as the hero's proof.
Reject: neon teal, purple gradients, blinking status, illustrations, marketing copy in place of numbers.

## Data and credits

USGS earthquake GeoJSON feed (public domain, credit the U.S. Geological Survey). Natural Earth 1:110m land (public domain). Hero photo from Pixabay, file kept with the page, author credited. Code MIT-0.