SunPlanner — rain element redesign

Dashboard "rain in the next hour" cue. Dark cinematic UI, Solar Flare gold #FFB81C.

Left: the current rain nowcast bar (reconstructed) — a 56px chart strip with its own HIGH / MOD / LOW legend and tick row. When it rains it drops in below the day total and pushes the hero down. Right: the redesign — a single quiet pill on the location line that reads "Rain ~14 min", with the full minute-by-minute strip moved one tap away.

Current — blocky

Takes over the dashboard

A full-width chart band with a 3-row legend, axis lines and a tick row, stacked above the hero.

9:415G 100

☂Rain · Next 60 min

Stops ~9:58

HIGHMODLOW

now+15'+30'+45'

Power now

3.1kW

0peak 7.4 kW

Why it dominates: a ~118px-tall band (header + 56px bars + ticks) lands between the headline number and the hero, on its own dark scrim. The legend column, dashed axis lines and per-bar color repeat work the eye is already getting from the falling-rain overlay behind it.

Redesign — the rain chip

One quiet line, full detail one tap away

A pill on the location line: a small intensity glyph + "Rain ~14 min". Tap reveals the minute strip.

9:415G 100

Power now

3.1kW

0peak 7.4 kW

Today in detail›

Why it is better: the headline number stays the headline and the hero never moves. The cue lives where you already look for "where am I" (the location line), reads in one glance, and is color-blind safe: the word Rain, the drop glyph's fill level, and the rising spark all carry meaning without relying on hue. The 20-bar minute strip is not deleted, it is demoted to a tap.

The three states

Same component, driven by the existing precipNext60Min buckets. No new data, no second source.

Rain~14 min

Rain coming. ETA counts down as it approaches.

Rainingtil ~9:58

Raining now. Live dot + "stops at" time, trend tapering.

Heavy rain~6 min

Heavier band: drop fills higher, label says "Heavy", spark taller. Intensity is shape + word, not just color.

One tap: the minute strip, demoted not deleted

Tapping the chip expands a low ribbon in place (or opens day-detail → weather). This is where the 20-bar resolution lives now — for the person who wants it, when they ask for it.

Next 60 min Stops ~9:58

now+15'+30'+45'

26px tall, no legend column, no axis lines. Height carries intensity; the "stops at" answer sits up top where it is read first.

Color-blind safety

Light / moderate (gold)

Heavy (amber)

Every signal is carried by something other than hue: the word ("Rain" / "Raining" / "Heavy rain"), the drop fill level, the spark height, and the live dot vs static glyph. Hue only reinforces. This holds the same rule the current bars follow (intensity via bar height + legend), but drops the legend column the redesign no longer needs.