GFS Design System — Branded Error Pages

01404 — Page Not FoundMissing Route / Dead Link

The default 404 page. Frosty appears confused with a tilted head and question mark. Friendly, not alarming. Provides clear navigation back to the dashboard.

404

Frosty can't find that page.

The page you're looking for doesn't exist or has been moved.

Pattern: Topbar (static, no nav) + Dot-matrix background + Frosty mascot (confused) + Error number + Heading + Subtext + CTA buttons

02500 — Server ErrorInternal Failure

Shown when the server encounters an unhandled error. Frosty has wide eyes and an exclamation mark — alert but not panicked. Includes an incident ID for support reference.

500

Something went wrong on our end.

Our team has been notified. Please try again in a few minutes.

Report Issue

Incident ID: GFS-ERR-2026-05-17-A8F3

Key: Always show the incident ID — support needs it. The red dot in the topbar signals an error state. "Try Again" should do a full page reload.

03503 — MaintenanceScheduled Downtime

Shown during planned maintenance windows. Cobalt background with white text. Frosty wears a hard hat. Includes the maintenance window, a countdown timer, and an option to subscribe to status updates.

We'll be right back.

Scheduled Maintenance: May 17, 2026 — 02:00 to 04:00 UTC

We're upgrading our systems to serve you better.

01 Hours

42 Minutes

18 Seconds

Subscribe to updates

Countdown: Live JavaScript countdown to maintenance end time. Amber hard hat = construction/maintenance visual cue. Always include the UTC window.

04OfflineNo Network Connection

Displayed when the browser detects no network connection. Frosty appears "frozen" with snowflake accents. Minimalist design — no topbar since the user is offline and can't navigate.

No connection detected.

Check your internet connection and try again.

Detection: Use navigator.onLine + window "offline" event. No topbar — user can't navigate. Dashed border = disconnected. Auto-retry on "online" event.

05403 — Access DeniedPermission Required

Shown when a user tries to access a resource they don't have permission to view. Frosty with a lock icon. Professional tone — not accusatory.

403

Access Restricted

You don't have permission to view this page.

Tone: "Access Restricted" not "Access Denied" — less confrontational. "Request Access" should generate an email to the resource owner with the user's identity pre-filled.

06Session ExpiredAuthentication Timeout

Shown when the user's session times out after inactivity. Frosty with a clock. Explains why they were signed out and provides a direct sign-in button.

Your session has expired.

For security, we signed you out after 30 minutes of inactivity.

Security: 30-minute timeout is the GFS default. Amber dot signals a warning state. The sign-in button should preserve the user's intended destination URL as a redirect parameter.

07502 — Bad GatewayUpstream Failure

Shown when a proxy or gateway receives an invalid response from an upstream server. Frosty appears with a broken chain link icon. The tone communicates that the problem is between systems, not the user's fault.

502

Bad Gateway

We received an invalid response from an upstream server. This usually resolves quickly.

Incident ID: GFS-GW-2026-05-18-B7E2

Context: 502 errors happen between services. The user did nothing wrong. "Try Again" retries the same request. Always link to the status page so users can check for known issues.

08503 — Service UnavailableOverloaded / Temporarily Down

Shown when the server is temporarily unable to handle requests due to overload or maintenance. Frosty appears with a loading/spinner motif. Includes Retry-After guidance when available.

503

Service Temporarily Unavailable

Our servers are experiencing high demand. Please wait a moment and try again.

Retry-After: 30 seconds

Incident ID: GFS-SVC-2026-05-18-C4A1

Retry-After: When the server sends a Retry-After header, display it to the user. Auto-retry with exponential backoff (30s, 60s, 120s). Amber topbar dot = warning/degraded state.

09429 — Rate LimitedToo Many Requests

Shown when a user or API client exceeds the rate limit. Frosty holds up a hand in a "slow down" gesture. Includes the cooldown timer and rate limit details so developers can adjust their calls.

429

Slow down, you're going too fast.

You've exceeded the rate limit. Please wait before making more requests.

Limit

100

req/min

Used

142

req/min

Reset In

47s

countdown

View API Rate Limit Docs

Implementation: The retry button is disabled until the cooldown expires. Display X-RateLimit-Limit, X-RateLimit-Remaining, and X-RateLimit-Reset headers. Auto-retry when the timer reaches 0.

10Maintenance Mode — ExtendedMulti-Hour / Progress Bar Variant

For longer maintenance windows (2+ hours), this variant adds a progress indicator showing maintenance phases. Frosty wears a hard hat and carries a wrench. Users see which phase is active.

System Upgrade in Progress

Maintenance Window: May 18, 2026 — 00:00 to 06:00 UTC

We're performing a major system upgrade. Here's our progress:

✓

Database backup

Complete

✓

Schema migration

Complete

Application deployment

In progress

Integration testing

Pending

Service restoration

Pending

            Overall Progress
            52%
          

Subscribe to updates

Progress Phases: Maintenance phases should be updated in real-time via a lightweight polling endpoint (e.g., /api/maintenance-status). The progress bar calculates completion from phase weights. Use Server-Sent Events when available.

11Offline — Dark VariantPWA / Service Worker Cached

Dark-mode offline page for PWA contexts. Served from service worker cache. Shows cached data age and offers access to recently viewed pages. Frosty is frozen with signal bars crossed out.

You're offline

No internet connection detected. Some cached content may be available below.

Recently Cached

              Dashboard
              2 min ago
            

              Active Shipments
              5 min ago
            

              PO-2026-04871
              12 min ago
            

PWA Cache: Service worker precaches the offline shell. Cached page links are pulled from the Cache API with timestamps. "Retry Connection" fires navigator.onLine check and attempts fetch. Auto-reconnect on the "online" event.

12Session Expired — DarkSecurity / Timeout / Re-Auth

Dark-mode session expiration page for applications with cobalt-dark UI. Preserves the user's intended URL for redirect after re-authentication. Shows how long the session was active before timeout.

Your session has expired.

For security, we signed you out after 30 minutes of inactivity.

Last Active

14:02 ET

Expired At

14:32 ET

You will be redirected to: /shipments/active

Redirect: Store the user's intended URL in sessionStorage before redirecting to the sign-in page. After successful re-authentication, redirect back to the stored URL. 30-minute timeout is the GFS default, configurable per role.

13Error Page Design RulesPatterns / Frosty Expressions / Implementation

Summary of all patterns, Frosty expressions, and implementation guidelines for the GFS error page system.

Frosty Expression Guide

Error Code	Expression	Accent Element	Topbar Dot	Frame Style	Primary Action
404	Confused (tilted head, wavy mouth)	? question mark	Green	Light	Back to Dashboard
403	Firm (neutral eyes, flat mouth)	Lock icon	Green	Light	Request Access
429	Calm (neutral, hand up)	Stop hand	Amber	Light	Retry (disabled)
500	Alert (wide eyes, "o" mouth)	! exclamation	Red	Light	Try Again
502	Worried (furrowed brows, frown)	Broken chain	Red	Dark	Try Again
503 (overload)	Patient (calm, spinner)	Spinner	Amber	Light	Retry Now
503 (maint)	Content (smile, hard hat)	Hard hat + wrench	Amber	Dark	Notify Me
Session	Sleepy (droopy eyes, yawn)	Clock / Zzz	Brown	Light/Dark	Sign In Again
Offline	Frozen (closed eyes, flat mouth)	Snowflakes / No Signal	N/A	Dashed border	Retry

Implementation Checklist

Every Error Page Must Include

1. Frosty mascot with context-appropriate expression
2. HTTP status code (large, monospaced, dot-overlay)
3. Clear heading explaining what happened
4. Subtext with guidance on what to do next
5. Primary CTA button
6. Incident ID for server errors (500, 502, 503)
7. Analytics event tracking (error_page_viewed)

Never Do

1. Show raw stack traces or technical jargon
2. Blame the user for server errors
3. Use "Access Denied" (say "Access Restricted")
4. Hide the navigation on auth errors
5. Auto-redirect without showing the error first
6. Use generic browser error pages
7. Forget to log the error server-side

Testing: Error pages are tested in E2E suites by intercepting responses. Every error page must be accessible (WCAG 2.1 AA), render without JavaScript for the offline page, and support both light and dark themes.