Design
The rules every Storm screen follows. Every sample on this page is drawn with
assets/storm.css, the same file the mockups are built from, so a mock can’t say something this
page doesn’t.
The family
onNAV apps share one white mark, NWS-radar-like arcs around an anchor, and change only the color behind it. The swirl already reads as a storm, so Storm keeps the mark whole.
#0C60AB
#1C7B5A
#0E8EA5 · the pick
#2F3B5C
#B86E00
Teal is MarNav’s own secondary color, so it’s already onNAV, and it sits apart from blue and green on a Home Screen. In the app it means one thing: NWS has nothing for this place. Amber reads as alarm on the icon, and amber is the watch color inside; slate disappears on a dark wallpaper.
Color
Chrome: MarNav’s, unchanged
The four levels
Storm sorts all 111 kinds of NWS alert into four levels by what NWS wants you to do. The color belongs to the level; the words always belong to NWS.
Type
SF Pro at iOS’s Dynamic Type sizes, as MarNav. No custom fonts. Numbers that change use even-width digits.
| Role | Style | Use |
|---|---|---|
| The countdown | SF Rounded Bold 48, even digits | One per screen: the minutes left. From Anchor Alert |
| Title | Title 2, bold | The event, in NWS’s words |
| Name | Headline, or Title 3 on a place card | A place, a row’s label |
| Body | Body; Callout in quotes | NWS’s text |
| Fact line | Subheadline, secondary | Where, how long, how far, joined by “ · ” |
| Panel heading | Footnote semibold, uppercase, secondary | The name of a panel |
| Reference | Caption, SF Mono | NWS’s VTEC code, for anyone who checks |
Shape and space
Anchor Alert’s shapes, the family’s newest, over MarNav’s colors.
| Token | Value | Use |
|---|---|---|
| r-tool | 5 | MarNav’s toolbar square |
| r-card | 18 | Cards, panels, place cards, widgets’ insides |
| r-panel | 22 | Glass over the map |
| r-sheet | 28 | A sheet’s top corners |
| capsule | half the height | Buttons, chips |
Anything tappable is at least 44 points.
Surfaces
Symbols
SF Symbols only. One symbol per hazard, the same everywhere: map, banner, notification, widget.
The triangle means “warning” and nothing else. Anchor Alert’s design site found it standing for six different things; Storm gives it one.
Components
The onNAV bar
MarNav’s bar and its 76-point menu circle, with the wordmark on the right. The circle carries a red badge with the number of warnings, and nothing else does.
The level chip
A capsule with the level’s word. Only the warning chip carries a symbol, so it reads first. “No alerts” is teal, not green: it means NWS is quiet, not that you’re safe.
The warning banner
Glass over the map, with a red edge. In order: the level, the time left, the hazard, where you are against it, and NWS’s instruction in its words. Only a warning gets a banner.
The place card
The place in its own sky, tinted by its weather. Under the name, the worst level and one line: the event and its time left, or how far a place is from a warning it isn’t in.
Panels and quotes
A titled panel, solid on a sheet. NWS’s words sit behind a gray rule in quotation marks, never rewritten. The panels run in one order: the event, now, where, what to do, then the details for anyone checking.
Buttons and switches
Capsules, as Anchor Alert. One brand-blue button per screen at most. Switches are teal. A Pro feature shows its tag where it lives, not behind a separate screen.
The coast
A place by the sea adds what the water is doing: the nearest buoy camera, the day’s tide, and the water, waves and wind. Every reading says where it came from and how old it is.
The buoy camera
NOAA’s cameras shoot six views every hour in daylight. Storm shows one at a time, with the buoy and the age on glass. At night it says when the last picture was taken, instead of showing black.
Stat tiles
One reading each, in SF Rounded with even digits, and its source or detail underneath. Three across, never four: a fourth tile makes every number too small to read in a hurry.
The map
Areas are drawn the way NWS issued them: a polygon as a polygon, a zone as its zone.
Radar uses the usual green-to-red reflectivity ramp, which people already read. It stops at dark red; no magenta, so it never meets a warning’s red or a mockup’s fuchsia.
Notifications
| Alert | iOS level | Sound |
|---|---|---|
| A warning where you are | Critical | Rings on silent and through Focus. Starts the Live Activity |
| A warning at one of your places | Time Sensitive | Breaks through Focus, not silent |
| A watch (Pro) | Time Sensitive, or held for quiet hours | Default |
| An advisory (Pro) | Active | Default, held for quiet hours |
| An update or an all-ended | Passive | None |
Motion
Almost none. A warning arrives with one haptic and no animation; the countdown ticks once a minute, not every second, until the last five minutes. A panel that loads late fades in and pushes the rest down rather than popping in.
Accessibility
- Every level has its word, every hazard its symbol: nothing relies on color.
- VoiceOver reads a warning in one sentence: “Tornado Warning at Home, you’re inside it, ends in 23 minutes.”
- All text is Dynamic Type; the countdown scales too.
- Level colors meet 4.5 to 1 against their text: white on red, near-black on amber and blue.
onNAV Storm • A pitch for onNAV, October 2026