WX OutThere · The Instrument
Style guide
A chase instrument, not a dashboard: warm graphite, one blue accent, red only for live. Geist for words, Geist Mono for numbers. The same tokens paint the web and the app; this page reads them live, so it is always current. Light and dark follow the theme toggle.
Voice
- Field-first and plain. Say what is true, once.
- Never invent data: no viewer counts, no conditions we do not have. An empty state says so.
- "Near you" only when the list was actually narrowed to a place.
- No em dashes in product copy. Commas, colons, periods.
- Home is marketing; product words stay inside the app.
Mark
OutThereOut There.One ring, a sweeping radar, and glasses, with the wordmark beside it. The mark keeps Weather Company Blue; it is the one place the accent appears unasked. The campaign line under it strikes the proverb and writes Has No Limit in. Files and sizes live in brand assets.
Color
Restrained: tinted neutrals (OKLCH, hue 70, chroma under 0.01) and one accent under a tenth of any screen. Values are light, then dark.
Neutrals
- GroundThe page. Warm graphite, never pure white or black.#f8f6f4
#110f0d - SurfaceThe one filled block per screen (status), hovers.#f0ede9
#1a1815 - RaisedQuiet buttons, chips, skeletons.#e7e3df
#24211e - LineHairlines between rows. Never around them.#dcd8d4
#2e2b27 - InkType and readouts.#1d1a17
#f1eeea - MutedMeta lines, labels, hints (AA on ground).#5c5752
#a8a49f - FaintDots and icons only: below AA for text.#847f7b
#77746f
Signals
- Weather Company BlueThe one accent: primary action, selection, links (accent text #0068b2 / #67caff).#30aff8
#30aff8 - TallyLive, and the Go live action. Nothing else is red.#e2352e
#e2352e - StandbyArmed or connecting: created, not on the air yet.#e4a339
#e4a339 - MediaEvery picture well. Dark in both themes.#0b0907
#0b0907
Type
Display · Geist 600 · 72 / 0.98 · −0.045em
Live weather, from where you stand.
Page title · Geist 600 · 28
Streams
Title · Geist 600 · 17–21
Wedge on the ground near Lindsay
Section · Geist 600 · 15
Live now
Body · Geist 400 · 15 / 1.55 · max 68ch
Broadcast from camera glasses or a phone. No kit to set up, no file to upload, no second app.
Readout · Geist Mono 500 · tabular
1:47:09
Meta · Geist Mono 400 · 13
6:00 PM · 18 mi · 9:56
Controls
Primary (blue) is the main way forward. Tally is reserved for going live and stopping a broadcast. Quiet is everything else; ghost for dismissals. One primary per surface.
Patterns
Status block
Next scheduled
1:47:09
Moore intercept, south target
You · Today 6:00 PM
The only filled block: armed beats next scheduled beats nothing scheduled.
Picture
Wedge on the ground near Lindsay
Reed T. · Oklahoma City · 18 mi
Rows3
Map- 0:51:04Supercell east of ChickashaKelsey R. · 31 mi
- 0:12:33Shelf cloud rolling into MooreOps truck 4 · 9 mi
- 2:05:47Hail core on I-40 at El RenoDan M. · 38 mi
Empty and error
Nothing live within 100 mi of Norman, OK. 2 live elsewhere.
Can't load conditions right now. Try again
Page head
Title, one line of lede, and the page's single primary action on the right.
Rules
- One filled block per screen: the status. Everything else sits on the ground, divided by hairlines.
- No cards around lists, no shadows, no side-stripe borders, no gradient type, no glass.
- Radius 8 for controls and pictures, 12 for the focal block.
- Numbers are Geist Mono with tabular figures, so a ticking clock never jitters.
- Sentence case everywhere. No uppercase letter-spaced kickers.
- Targets are 48pt on mobile, 40px or more on web. Focus is always visible.
- Motion is ease-out quart, 150–240ms, and off under reduced motion. Pulses only for something live right now.
Folds
On the Galaxy Z Fold 8 and a foldable iPhone, splits land on the crease, never on window halves, with a gutter each side. Open flat or held like a book, Watch keeps its header: the mark, the word Back, and a menu that holds Delete when the video is yours. A landscape replay sits across the top and may cross the crease. A portrait replay is the right page, with the lists and the details on the left. A phone stays one column, header, then picture, then the lists. Half-folded on a table, a landscape picture stays above the hinge.
See the foldable layoutsPlates
The animated lighting scenes, kept as brand demos. They live here, not on the product pages.
Standing
Storm cell and camera.
In the field
Rain over the road.
On the mountain
Snow on the ridge.
From town
A window opens.