System states

Anatomy

Full-page states (404, 500, offline, maintenance - replace the whole viewport):

Layer	Treatment
Background	navy-900 canvas with 4% grid overlay - the brand substrate carries into error contexts
Icon	48px FA Sharp Regular, semantic color
Status line	Status code in JetBrains Mono + · separator + uppercase code name in Wordmark S
Title	H2, fog-100, title case - one short sentence
Description	Body, fog-200, one or two precise sentences: what happened, why
Detail line (optional)	Micro uppercase in steel-400: correlation ID, timestamp, endpoint - for support
Primary action	Always present. wa-button variant="brand"
Secondary action (optional)	wa-button variant="neutral" appearance="plain"
Max width	480px, centered on viewport

Inline empty states (no records in a filtered table, no items in a queue) - same anatomy, smaller icon (32px), no status code, no correlation ID, centered within the parent container.

Sample - 404 Resource Not Found

Anatomy: triangle-exclamation icon in caution amber (48px) · status line ERROR 404 · NOT FOUND (JetBrains Mono + Barlow Condensed) · H2 title in fog-100 · description body in fog-200 at ~60ch measure · correlation ID in mono steel-400 · primary brand button left, secondary plain button right · classification strips top and bottom for authenticated product surfaces.

Taxonomy

Every state screen maps to a code and a semantic color.

Code	Title	Color	Description pattern
400	INVALID REQUEST	caution	“The request could not be processed. [specific reason if known].”
401	AUTHENTICATION REQUIRED	caution	“Credentials required for this resource. Sign in to continue.”
403	ACCESS DENIED	caution	“Current credentials do not permit access to this resource.”
404	NOT FOUND	caution	“The requested resource could not be located at this path.”
408	REQUEST TIMEOUT	caution	“The operation exceeded the permitted time window.”
429	RATE LIMIT EXCEEDED	caution	“Request rate exceeded. Next attempt permitted in [time].”
500	SYSTEM FAULT	hostile	“An internal error prevented this request from completing. The event has been logged.”
502	UPSTREAM FAULT	hostile	“An upstream dependency failed to respond. Operators have been notified.”
503	SERVICE UNAVAILABLE	hostile	“The system is temporarily unavailable. [expected return time if known].”
504	GATEWAY TIMEOUT	hostile	“The gateway did not respond within the permitted window.”
OFFLINE	CONNECTION LOST	caution	“Network connectivity required. Last sync: [time].”
MAINTENANCE	SCHEDULED MAINTENANCE	caution	“The system is offline for scheduled maintenance. Expected return: [time].”
CLEARANCE	INSUFFICIENT CLEARANCE	caution	“Current clearance level does not permit this operation. Request elevated access.”
NO DATA	NO RECORDS	steel-300	“No [entity] match the current filters. [action suggestion].”

Rule: 5xx is always hostile red (the system broke, not you). 4xx, offline, and maintenance are caution amber (recoverable, often your input). No-data empty states are neutral steel gray - not an error, just a state.

Icon mapping

State	Icon (FA Sharp Regular)
4xx client errors (400, 404)	triangle-exclamation
401 auth required	lock
403 forbidden	ban
408 / 429 timeout / rate-limited	hourglass-half
5xx server errors	octagon-exclamation or bolt
Offline	wifi-slash
Maintenance	wrench
Insufficient clearance	id-badge-shield
No data / empty	inbox or magnifying-glass

Recovery - always a primary action

No state screen is a dead end. Every screen carries a primary action (and optional secondary). By type:

• 4xx client → Retry, Go back, Sign in, Request access, Clear filters
• 5xx server → Retry, Report issue, Check system status
• Offline → Retry when connected, Continue offline (where the product supports it)
• Maintenance → Check status, Subscribe to updates
• No data → Clear filters, Create [entity], Change scope
• Clearance → Request access, Sign in as different user

Secondary actions are encouraged for support-adjacent states - “Report issue,” “View system status,” “Contact operations” - and carry the wa-button variant="neutral" appearance="plain" treatment.

Tone - do and don’t

The tone is declarative, free of apology, free of hedging. Error messages read like telemetry, not like a support script.

Do:

• "The requested resource could not be located at this path."
• "Credentials do not permit access. Request elevated clearance."
• "The system is offline for scheduled maintenance. Expected return: 18:00 Z."
• "No sectors match the current filters."
• "An upstream dependency failed. Operators have been notified."

Don’t

• “Oops! Something went wrong." - not doctrinal, apologetic exclamation.
• “We couldn’t find what you’re looking for. Try searching again?" - ends in a question, hedges.
• “Looks like you’re offline. Let’s get you reconnected!" - consumer-app energy.
• “Sorry, you don’t have permission to see this." - apologizing for a security boundary.
• “Uh oh - this page took a wrong turn." - no.

A 500 error should feel like a telemetry readout, not a cartoon character holding a broken wrench. No mascots, no “friendly” 404 illustrations, no “while you’re here, check out…” cross-promotion. The job of an error screen is to tell the operator what’s wrong and give them one clear way forward.

Consistency with the rest of the system

• Classification strips. Full-page state screens in authenticated product contexts carry the same classification strips as dashboard screens - a 403 inside GRIDWATCH still shows PROGRAM SENSITIVE at top and bottom. Public marketing site 404s (unauthenticated) skip the classification strip.
• Footers. Full-page state screens retain the standard footer (page number, FDT wordmark watermark) if the rest of the product has one.
• Logging. Every 5xx state screen includes a correlation ID in the detail line so support can trace the specific failure. This is generated server-side and displayed verbatim.