Cease Fire AMC — design system

The vocabulary for the AMC field-work PWA: one codebase, phones for inspection staff, desktop for the owner and assigner. Structure follows the Savari/Baseframe operational pattern — quiet chrome, hairline borders, colour spent only where it carries meaning. Everything below is a live element, not a screenshot.

Colour

One decision shapes this whole palette. Red is the client's brand colour and the natural colour for a failed check. It can't be both — a technician scanning 36 assets needs red to mean exactly one thing. So red is hazard, and the primary action is navy, the second brand colour. For a fire protection firm that reads as intent: red means alarm.

Primary action — navy

Use for: the one primary button per screen, active nav, focus rings, selected states, progress fill. Never for: status.

Hazard — red

Use for: Not OK, Critical severity, destructive confirmation, required-field markers, the logo. Never for: a routine CTA like “Next” or “Save”. If red appears on a screen, something needs attention.

Severity — three hues, not three temperatures

Critical Major Minor
The brochure shows Critical/Major/Minor as red / orange / yellow. Those three are nearly indistinguishable to the ~8% of men with red–green colour blindness — and this is a safety product where severity is the whole point. Red / amber / blue stays legible for everyone, and every severity also carries its word, never colour alone.

Semantic status

Neutrals — cool, navy-tinted

Tinted toward the brand hue (258) so greys sit with navy instead of fighting it. No pure #808080 anywhere. Borders are alpha — rgba(16,22,40,0.075) — so they recede into the surface rather than sitting on top of it.

Typography

IBM Plex Sans. Chosen for three reasons: it was drawn for dense technical data and its numerals are excellent; it carries an engineering character that suits a safety contractor without being a generic SaaS face; and IBM Plex Sans Devanagari is a metric-matched sibling, so Hindi and Marathi labels drop in later without redesigning anything. Three weights only — 400, 500, 600.

Inputs are locked at 16px. iOS Safari zooms the viewport on focus for anything smaller, which on a checklist form is disorienting mid-inspection. Body text is 15px; only fields go to 16.

All numerals are tabular. Counts like 8/8, 36, 132 stack in columns across the stat strip, checklist and reports — proportional figures would make those columns ragged.

Spacing & radius

4px base scale. Space siblings with gap on the parent, never margin-bottom on each child.

Radius

Nested radius rule: inner = outer − padding, floored at 4px. A 12px card with 12px padding takes an 8px inner block — reusing 12px inside leaves a visible gap at the corners. Buttons and pills are fully rounded, following Savari.

Elevation

Depth is reserved for things that genuinely float — sheets, dropdowns, map markers, toasts. Inside the page, separation is done with hairline borders and a grey/white ground shift.

Each level stacks two or three shadows at different blur and opacity. A single large drop shadow reads as pasted on.

Buttons

Strict two-tier hierarchy: exactly one filled primary per screen, everything else ghost or outlined. Pill radius throughout.

Danger is not primary. “Flag as critical” is red because it records a hazard, not because it's the main action. Destructive and primary never sit adjacent without a Cancel between them.

Sizes

Large is the default on mobile — full-width, 48px, comfortably past the 44px minimum tap target for gloved hands on site.

States

Disabled uses a dedicated muted token, not opacity:0.4 — opacity passes contrast on some grounds and fails on others. Pressed is a 2.5% scale-down, which is what makes a button feel physically clicked rather than dead.

Mobile primary

Status & severity

Every state in the product, as a pill. Colour is never the only signal — each carries its label, and the parameter control adds an icon.

Parameter result

OK Not OK

Severity

Critical Major Minor
Critical is the one solid-filled pill in the entire system. It should be rare, and it should stop the eye.

Visit & technician status

In progress Pending On site In transit Completed Offline
Completed is deliberately grey. A finished visit needs no attention — giving it green would put a third of the dispatcher's screen in colour and drown the sites that are actually running late.

Inline counts

Critical 2 · Major 7 · Minor 5
Savari's dot-separated semantic count line. Denser than three pills, and it fits in a table cell or under a site name on the EOD screen.

Form fields

Label always above the field and always persistent — placeholder text disappears exactly when the reminder is needed.

Dr. E. Borges Road, Parel, Mumbai 400012
Pulled from the site record — edit in Sites.
Needs 10 digits — this has 9.
Error states carry three signals — red border, icon, and a message that says how to fix it. “Needs 10 digits — this has 9” beats “Invalid input”. Every field is at least 44px tall.

Checkboxes

The whole label is the hit area, not just the 20px box.

OK / Not OK control

The most-used control in the product. A technician hits this six times per asset, ~146 times a day, often one-handed on a ladder. It gets the largest target and the clearest states.

Physical condition
Pressure gauge
Safety pin — not answered
No default selection. If “OK” were pre-selected, a technician could tap Next through seven assets and produce a clean report having inspected nothing — and that report goes to a client as a compliance document. Unanswered is a visible third state, and the section can't be marked complete until every parameter has been touched.

Both options carry an icon as well as colour, so the selected state survives a colour-blind viewer and direct sunlight on a cheap screen.

Not OK reveals severity — progressive disclosure

Required because this is Not OK
Severity, remarks and a photo appear only once something fails, and then they're mandatory. This is what turns the app's output into evidence rather than an opinion — and it's the single biggest upgrade over the brochure, where all three are optional-looking fields shown at all times.

Stat strip

One divided strip, not a row of cards with icons. It already appears four times in the brochure — the dashboard, the visit summary, the EOD report and the PDF — so it's the single most reusable component in the product.

Total assets36
Checked36
OK32
Not OK4
Only the numbers that carry a verdict get colour. “Total assets” and “Checked” are plain — they're context, not signal.

With trend — owner dashboard

Total sites128↑ 12%
Visits completed11086%
Equipment checked2,346↑ 18%
Issues found186↓ 10%
Careful with trend colour. Issues falling 10% is good news, so it's green despite the down arrow. Direction and sentiment are separate — wiring green to “up” would paint a rise in critical faults as a win.

Checklist rows

The section index from screen 4 — the technician's map of where they are.

Three icon states — complete, attention, untouched — so progress is readable without reading the numbers. A section with a failure shows the failure count in the meta line, which is how the technician finds their way back to it before sign-off.

Schedule row — today's visits

Photo & signature

Photo evidence

Photos compress to ~1600px on device before they ever touch the queue. At 146 assets a day an uncompressed camera roll would make the sync unusable on a site with one bar of 4G.

Customer signature

Ask the customer to sign here
Captured 06 Sep 2026, 01:45 PM · Parel, Mumbai
The signature is stamped with time and GPS at the moment of capture. The brochure captures neither — and a signature without them proves the customer signed, not that anyone visited the site.

App shell

One PWA, two shells. Below 900px the technician gets a bottom tab bar; above it the assigner and owner get a left sidebar. Same components, same tokens.

Four items, matching the brochure. The bar reserves env(safe-area-inset-bottom) so it clears the home indicator when installed to the home screen.

Map marker — Savari pattern

RKRaj KumarOn site · ABC Hospital · 10:32 SDSandeepIn transit · XYZ Mall · 11:15 AMAmitPending · DEF School · 16:00
Named marker pills floating over the map with a real shadow, rather than anonymous dots — the dispatcher's question is “where is Raj”, not “where is a pin”.

Connection & sync

Nothing in the brochure addresses this, and it's the decision that makes or breaks a field app. Fire panels and pump rooms are basements. The app must capture a full inspection with no signal and reconcile later — which means connection state needs to be visible at all times, never a surprise.

Offline — work is being saved on this device 12 queued
Syncing… 4 of 12
All visits synced 2 min ago
Offline is stated, not implied. A technician who doesn't know they're offline will re-enter a whole visit. The queue count is the reassurance: work is held, and it's held here.

Per-record sync state

Saved on device · waiting for signal Uploading 3 photos… Synced · 10:41
Sign-off is the one action blocked until the visit is synced, because that's the point the PDF leaves the device and reaches a client.

Empty states

No visits assigned for today

Your supervisor hasn't scheduled anything yet. You can still start an unscheduled visit if you're already on site.

Says why it's empty and what to do next. “No records found” ends the journey.

Structure referenced from Savari / Baseframe as a craft study only — no assets or artwork reused. Brand colour and naming from the client's own brochure.