---
title: "Designing status lights that don't lie"
slug: status-lights
date: 2026-07-22
url: https://mohammadhameed.dev/posts/status-lights
tags: ["design", "fullstack"]
---

In aviation interfaces, a status light is a *contract*. Green means the
system verified something and is prepared to be trusted with the next
action. If the light lies once, the operator spends every future second
checking manually — and the instrument has become decoration.

Web products have the same contract, and break it constantly.

## The three honest states

Every live indicator I ship is bound to one rule: *green only when a
human would sign for it.*

```css
/* the pulse is not the status; it's the heartbeat proving the status is alive */
.pulse-dot::after {
  box-shadow: 0 0 0 0 rgb(62 124 79 / 0.45);
  animation: pulse-ring 2.4s ease-out infinite;
}
```

Three states, three visual vocabularies:

1. **Live** — bright, animated, verifiable. ServiceMenu is deployed at a URL
   I can open right now; it gets the dot.
2. **Building** — muted mono text, no color ambition. CollectKit gets
   "building" because a demo is not a deployment.
3. **Absent** — no signal at all. An empty state is honest information; a
   greyed-out "coming soon" is a debt.

<Callout type="note">
Design rule that survived three product teams: never animate what you cannot
verify. A pulse dot attached to a status nobody checks becomes noise that
hides the one status that matters.
</Callout>

<Figure src="/images/posts/status-lights-alt.svg" alt="Three dots: live, busy, gone" caption="The same three questions every operator asks any system: is it up, is it working, is it there at all." />

## Where autonomy habits improved the web work

- **Statuses are claims.** I treat a badge on a project page like a
  telemetry bit in a cockpit — it has to trace to a verifiable source or it
  doesn't render.
- **Response timing is information.** Progress indicators communicate where
  you are in a task, the way an attitude indicator tells a pilot which way
  is up. Same job, different vehicle.
- **Calm colors carry weight.** If everything pulses, nothing means urgent.
  Green belongs to facts, not to vibes.

## The test before you ship a dot

Ask: if this indicator is wrong, does anyone find out the hard way? If yes —
it gets a source, a color, and probably a pulse. If nobody does, delete it.
Every fake light you remove makes all your real ones brighter.