RealTemp · design direction · 2026-07-06

Street instrument, not weather postcard.

Every weather app sells sky photography. RealTemp sells a calculation you can trust — so the UI borrows from receipts, field instruments and ledgers: tabular numerals, signed deltas, hard rules, one accent spent on heat. High-contrast light ground because it's read in direct Valencia sun.

01 · The one screen (live mock, real numbers)

Valencia16:20 · Live
37.9°C
True Feel · air says 30.0°
base air30.0°
sun premium+5.2°
humidity friction+2.1°
wind relief−1.4°
urban heat+2.0°
true feel= 37.9°
SunShadeOvercast
UrbanOpenNature
StagnantWalkingActive
Sweat efficiency38%
  • The receipt is the hero’s proof. Number rules the screen; the ledger under it explains it. Pattern lifted from Acorns’ value + breakdown and YNAB’s signed category rows.
  • Everything on one screen, no scroll — glance-on-the-street use. Density benchmark: CARROT’s observation grid, without its 16-metric sprawl.
  • Toggles are the product’s verbs — full-width segmented controls, thumb-reach bottom half, 44px targets. Selected = solid ink, not tint.
  • Color is semantic only: warm = adds heat, blue = removes it. Direction encoded twice (sign + color) for color-blind safety.

02 · Palette — asphalt & heat

Asphalt#1B1B1E · ink, selected states
Paper#F7F7F3 · surface
Pavement#EDEDE8 · ground
Solar#E8720C · sun premium
Scorch#C93A22 · heat totals, alerts
Shade#33698C · cooling deltas

All ink-on-paper pairs ≥ 7:1; Solar/Scorch/Shade on paper ≥ 4.5:1 at text sizes used. Dark mode is a v1 question — sun-readability wins v0.

03 · Type — two voices

37.9°C

+5.2° −1.4° = 37.9° · 0123456789 tabular

RoleFaceUse
DisplayArchivo Black (ship) / system-ui 800 (v0 fallback)Hero temp only, −4% tracking
DataIBM Plex Mono / ui-monospaceLedger, labels, toggles — always tabular-nums
Bodysystem-ui 400/600Captions, errors, empty states

04 · Anti-patterns (the moat)

  • Sky/cloud photography backgrounds (Apple Weather owns it; kills contrast in sun)
  • Weather-condition icon zoo — conditions are numbers here, not cartoons
  • Opaque “Feels like 38°” with no receipt — the entire reason this app exists
  • Gradient hero cards, glassmorphism — fights legibility at 100k lux
  • Scroll-to-see-more on the core screen

05 · References (Mobbin)