States are the work

This inbox has six tabs. The first one is the screen everybody designs. Click through the other five:

Loading, empty, error, offline, half-loaded. Every one of those is a screen a real person will see, often more often than the perfect one. And every one needs its own design and its own words.

The happy path is the easy part

The happy path is the screen with everything going right: data loaded, user signed in, content present. Designers draw it, engineers build it, agents generate it. Then real people show up on a slow train, with an empty account, with an expired session, and the product looks broken.

Most "this feels broken" reports trace back to a state nobody designed, not to a bug in the happy path. So fixing states is some of the highest-value design work there is.

The states to check, every screen

You will not need all of these for every screen, but you should be able to say why each one does not apply:

Each state needs real copy, not "Error: something went wrong", and a designed way to get from one to the next without a flash.

Data is content

There is a second place the craft usually stops: tables, charts and lists. Teams spend a week on a hero image and half an hour on the table people look at every single day. That is backwards. In most working software, data is the content.

1. Right-align numbers, left-align text

   Numbers compare when their last digits line up. Text reads from the left.

2. Use tabular figures

   font-variant-numeric: tabular-nums gives every digit the same width, so a column of amounts lines up and values stop jittering when they change.

3. Quiet the lines

   Heavy borders on every cell and zebra stripes are the spreadsheet look. Use space and a hairline divider, like 1px solid rgba(0,0,0,0.06).

4. Label with meaning

   "Value" says nothing. "Revenue, USD" says what and in what unit.

Charts follow the same rules. Pick two to four colors from your palette instead of the library's rainbow. Remove default chartjunk (extra gridlines, legends nobody needs). Make tooltips useful: the exact value, the date and a comparison, not "y: 47". Animate the chart drawing in once, on first load; updates should be instant.

For tools people use all day, density matters too. Power users want compact rows (about 28px), casual users want comfortable ones (about 44px); offer both. Let people edit a cell in place and move with the arrow keys, the way every spreadsheet already works.

For this screen, list every state it can be in: loading, empty, partial, error, offline, no permission, stale, over limit, first run. For each, say whether it applies. For the ones that do, build it with real copy (no "something went wrong") and make sure empty and error look and read differently.

Review this table as content: right-align numeric columns with tabular-nums, left-align text, replace cell borders and zebra stripes with a 6% hairline between rows, make the header say what each column is and in what unit, and keep the header visible on scroll.