Content

Content

• Inline help first. Prefer inline explanations; use tooltips as a last resort. A dispatcher should not have to hover to know what a status means.
• Stable skeletons. Skeletons mirror final content exactly to avoid layout shift.
• Nothing shifts. A status change must not move anything else. Reserve the widest word. Fade the next one in on top. Never swap “Copy” for “Copied” if the slot was not sized for both. Counts, toasts, pills, copy, keep, download. A jumping control is a missed tap. This is a hard no.

  DispatchSent

• Accurate page titles. <title> reflects the current context, most specific first: Invoice 1042 · Acme HVAC · Thorbis.
• No dead ends. Every screen offers a next step or recovery path. Empty states say why it is empty and what to do next.
• All states designed. Empty, sparse, dense, loading, error, permission, offline, stale, optimistic, destructive, and success. A screen that only has the happy path is unfinished.

  EmptyLiveErrorOffline

• Typographic quotes. Prefer curly quotes (“ ”) over straight quotes (" ") in prose. Keep straight quotes in code.
• A mark does not split. A handle, a pair of parentheses, a code token, a swatch. They wrap as one word, or they wrap at a space. Never a lonely ( on one line and ) on the next. Never no- then preference. If the lockup is too wide, the line breaks before it. This is the same law as nothing shifts, for type.
• Avoid widows/orphans. Tidy rag & line breaks. text-wrap: balance on headings; text-wrap: pretty on descriptions. Skip both on long-form body.
• Make text crispy. On macOS, default smoothing can look heavy. Set -webkit-font-smoothing: antialiased on the layout, once. Jakub Krehel (@jakubkrehel).
• Tabular numbers for comparisons. Use font-variant-numeric: tabular-nums for money, durations, quantities, invoices, and any value that updates.

  Leak$186.00

  Install$2,480.00

• Redundant status cues. Don’t rely on color alone; include text labels. Status pills carry a word, not just a hue.

  CopiedFailedOverdueQueued

• Icons have labels. Convey the same meaning with text for non-sighted users. Icon-only buttons always have an accessible name.

  Keep

• Don’t ship the schema. Visual layouts may omit visible labels, but accessible names still exist for assistive tech.
• Anchored headings. Set scroll-margin-top when linking to sections under sticky chrome.
• Resilient to user-generated content. Layouts handle short, average, & very long names. “Bob”, “Southern Comfort Heating & Air of North Georgia, LLC”, and a pasted VIN.
• Locale-aware formats. Format dates, times, numbers, delimiters, & currencies for the user’s locale. Prefer language settings over IP/GPS.
• Shield verbatim content from translation. Wrap brand names, product names, code tokens, & identifiers with translate="no".
• Semantics before ARIA. Prefer native elements (button, a, label, table) before aria-*. No ARIA is better than bad ARIA.
• Headings & skip link. Hierarchical <h1>–<h6>, one visible <main>, and a “Skip to content” link when chrome precedes the work.
• Non-breaking spaces for glued terms. Keep units, shortcuts & names together: 10 MB, ⌘ + K, $299 / month.