# Skyline Weather — DESIGN.md

A weather app that restyles itself from live data. Family: glass / soft futurism, light and dark.

## 1. Visual theme and atmosphere

The sky is the interface. A full-screen photo of the current weather sits behind frosted panels; day turns the panels light, night turns them dark. Glass is deliberate here: it lets the real sky show through. Mood: airy, calm, a little cinematic.

## 2. Color palette and roles

```
/* day */
--ink:     #0c1424
--mute:    #4b5a72
--glass:   rgba(255,255,255,.55)
--edge:    rgba(255,255,255,.7)
--accent:  #2563eb   /* the only action color: button, chart line, icons */
/* night (body.night redefines the same variables) */
--ink:     #eef2ff
--mute:    #aab5d0
--glass:   rgba(16,24,48,.5)
--edge:    rgba(255,255,255,.12)
--accent:  #93c5fd
```

Data scale: the week's temperature range bars run blue → amber → orange (`#60a5fa`, `#fbbf24`, `#f97316`). That gradient means temperature and appears nowhere else.

## 3. Typography

One family, **Manrope** 300–800. Temperature 150px weight 800, tracking −0.06em, ink fading to transparent at the bottom. Labels 12px uppercase with 0.06em tracking. Body 15px.

## 4. Components

- **Search:** glass bar, Phosphor magnifying glass, solid accent button "Show the sky" (a verb, not "Search").
- **City chips:** small glass pills for one-tap cities.
- **Now card:** pin icon + city as the page's h1, local time, the big temperature, condition with a Phosphor weather icon.
- **Fact tiles:** four tiles (feels like, wind, humidity, sunset), each with a Phosphor icon.
- **Hourly chart:** SVG line with an accent gradient fill, labels every 3 hours.
- **Week:** seven day cards with icon, max, min and a range bar on the shared scale.

Icons: Phosphor only (regular weight), tinted with `--accent`.

## 5. Layout

Max width 1040px. Now card and facts side by side (1.2 : 1), stacked under 760px. Week is 7 columns on desktop, 4 on phones. Radii 26px panels, 18px tiles and buttons.

## 6. Depth

`backdrop-filter: blur(22px) saturate(1.4)`, 1px `--edge` border. Depth comes from blur and the photo, not from shadows. Max nesting: panel > tile.

## 7. Motion

- Photo crossfade (1 s) when the weather or day/night changes: state change.
- Rain or snow on a canvas only when the weather code says so: state.
- Chart line draws in once; day cards rise in a short cascade.
- `prefers-reduced-motion`: no particles, no transitions.

## 8. Do and don't

Do: let one body class switch the whole theme; keep the accent to actions and the chart.
Don't: a second accent on buttons, emoji icons, glass on glass on glass, generic "Welcome" copy.

## 9. Agent prompt guide

Bias: photo-led, frosted panels, one blue accent, one font, Phosphor icons.
Reject: purple gradients, mixed icon sets, emoji weather, three-level glass stacks.

## Data and credits

Open-Meteo forecast and geocoding APIs (data CC BY 4.0; the free API is non-commercial, commercial apps need an Open-Meteo plan). Four sky photos from Pixabay, files kept with the page, authors credited. Phosphor Icons MIT. Code MIT-0.