From 6b2411c04284c55cc88ac75a446c35280649a3db Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 24 Aug 2026 19:41:37 -0700
Subject: [PATCH 1/4] fix(ui): unify branded error pages

---
 apps/desktop/e2e/smoke.spec.ts                |   9 +
 apps/desktop/electron-builder.yml             |   2 +
 apps/desktop/static/offline.html              | 211 +++++++++++-------
 apps/docs/app/[lang]/not-found.tsx            |  25 ++-
 .../app/(landing)/blog/authors/not-found.tsx  |  17 +-
 apps/sim/app/(landing)/blog/not-found.tsx     |  17 +-
 .../app/(landing)/comparisons/not-found.tsx   |  17 +-
 .../app/(landing)/integrations/not-found.tsx  |  17 +-
 .../(landing)/library/authors/not-found.tsx   |  17 +-
 apps/sim/app/(landing)/library/not-found.tsx  |  17 +-
 apps/sim/app/(landing)/models/not-found.tsx   |  17 +-
 apps/sim/app/global-error.tsx                 |  32 ++-
 apps/sim/app/not-found.tsx                    |  16 +-
 .../[workspaceId]/components/error/error.tsx  |  10 +-
 .../w/[workflowId]/components/error/index.tsx |  51 +----
 apps/sim/components/status-page/index.ts      |   1 +
 .../components/status-page/status-page.tsx    |  38 ++++
 17 files changed, 278 insertions(+), 236 deletions(-)
 create mode 100644 apps/sim/components/status-page/index.ts
 create mode 100644 apps/sim/components/status-page/status-page.tsx

diff --git a/apps/desktop/e2e/smoke.spec.ts b/apps/desktop/e2e/smoke.spec.ts
index 86d3716430e..02c9990e740 100644
--- a/apps/desktop/e2e/smoke.spec.ts
+++ b/apps/desktop/e2e/smoke.spec.ts
@@ -110,5 +110,14 @@ test.describe('desktop shell smoke', () => {
     const window = await app.firstWindow()
     await window.waitForSelector('#retry', { timeout: 30_000 })
     expect(window.url().startsWith('file:')).toBe(true)
+    await expect(window.locator('.wordmark')).toBeVisible()
+    await expect(window.locator('.wordmark')).toHaveAttribute('aria-label', 'Sim')
+    await expect(window.locator('#title')).toHaveText('Can’t connect to Sim')
+    await expect(window.locator('#status')).toHaveText('Check status')
+    await expect
+      .poll(() => window.evaluate(() => document.fonts.check('16px "Season Sans"')))
+      .toBe(true)
+    await expect(window.locator('#retry')).toHaveCSS('height', '30px')
+    await expect(window.locator('#retry')).toHaveCSS('border-radius', '8px')
   })
 })
diff --git a/apps/desktop/electron-builder.yml b/apps/desktop/electron-builder.yml
index 4f0629d1259..0ecc4bf5706 100644
--- a/apps/desktop/electron-builder.yml
+++ b/apps/desktop/electron-builder.yml
@@ -10,6 +10,8 @@ files:
   - dist/**
   - static/**
   - package.json
+  - from: ../sim/public/brand/fonts/SeasonSansUprightsVF.woff2
+    to: static/SeasonSansUprightsVF.woff2
 
 asar: true
 
diff --git a/apps/desktop/static/offline.html b/apps/desktop/static/offline.html
index c0a5a93be86..ffbe1f8c52a 100644
--- a/apps/desktop/static/offline.html
+++ b/apps/desktop/static/offline.html
@@ -4,26 +4,27 @@
     <meta charset="utf-8" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'"
+      content="default-src 'none'; font-src 'self'; style-src 'unsafe-inline'; script-src 'unsafe-inline'"
     />
-    <title>Sim — Can’t connect</title>
+    <title>Sim - Can’t connect</title>
     <style>
+      @font-face {
+        font-family: 'Season Sans';
+        src:
+          url('../../sim/public/brand/fonts/SeasonSansUprightsVF.woff2') format('woff2'),
+          url('./SeasonSansUprightsVF.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 300 800;
+        font-display: block;
+      }
       :root {
-        color-scheme: light dark;
-        --bg: #ffffff;
-        --fg: #0c0c0c;
-        --muted: #6b6b6b;
-        --border: #e4e4e4;
-        --accent: #701ffc;
-        --accent-fg: #ffffff;
-      }
-      @media (prefers-color-scheme: dark) {
-        :root {
-          --bg: #0c0c0c;
-          --fg: #f4f4f4;
-          --muted: #9a9a9a;
-          --border: #262626;
-        }
+        color-scheme: light;
+        --bg: #fefefe;
+        --text-primary: #1a1a1a;
+        --text-body: #434343;
+        --text-muted: #7a7a7a;
+        --text-inverse: #ffffff;
+        --surface-hover: #f2f2f2;
       }
       * {
         box-sizing: border-box;
@@ -35,111 +36,159 @@
       }
       body {
         display: flex;
-        align-items: center;
-        justify-content: center;
+        flex-direction: column;
+        min-width: 320px;
+        padding-top: max(env(titlebar-area-height, 38px), 38px);
         background: var(--bg);
-        color: var(--fg);
-        font-family:
-          -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+        color: var(--text-primary);
+        font-family: 'Season Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         -webkit-font-smoothing: antialiased;
+        letter-spacing: 0.02em;
         user-select: none;
       }
-      main {
-        max-width: 420px;
-        padding: 32px;
-        text-align: center;
+      header {
+        flex: none;
+        width: 100%;
+        max-width: 1460px;
+        margin: 0 auto;
+        padding: 16px 80px;
+        -webkit-app-region: drag;
+      }
+      .wordmark {
+        display: block;
+        width: 37px;
+        height: 18px;
+        margin: 6px 0;
+        color: var(--text-body);
       }
-      .mark {
-        width: 56px;
-        height: 56px;
-        margin: 0 auto 20px;
-        border-radius: 14px;
-        background: var(--accent);
+      main {
         display: flex;
+        flex: 1;
+        width: 100%;
         align-items: center;
         justify-content: center;
-        color: var(--accent-fg);
-        font-size: 26px;
-        font-weight: 600;
-        letter-spacing: -0.02em;
+        padding: 0 16px 64px;
+      }
+      .content {
+        display: flex;
+        width: 100%;
+        max-width: 410px;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        text-align: center;
       }
       h1 {
-        font-size: 17px;
-        font-weight: 600;
-        margin: 0 0 8px;
+        max-width: 100%;
+        margin: 0;
+        font-size: 40px;
+        font-weight: 400;
+        letter-spacing: -0.02em;
+        line-height: 1.1;
+        text-wrap: balance;
       }
       p {
-        font-size: 13px;
-        line-height: 1.5;
-        color: var(--muted);
-        margin: 0 0 24px;
+        max-width: 100%;
+        margin: 0;
+        color: var(--text-muted);
+        font-size: 18px;
+        line-height: 28px;
       }
       .actions {
         display: flex;
+        flex-wrap: wrap;
         gap: 8px;
         justify-content: center;
+        margin-top: 12px;
       }
       button {
+        display: inline-flex;
+        height: 30px;
+        align-items: center;
+        justify-content: center;
         appearance: none;
-        border: 1px solid var(--border);
+        border: 0;
         background: transparent;
-        color: var(--fg);
+        color: var(--text-body);
         border-radius: 8px;
-        padding: 7px 14px;
-        font-size: 13px;
-        font-weight: 500;
+        padding: 0 8px;
+        font: inherit;
+        font-size: 14px;
+        line-height: 20px;
         cursor: pointer;
+        outline: none;
+        transition:
+          color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        -webkit-app-region: no-drag;
       }
       button.primary {
-        background: var(--accent);
-        border-color: var(--accent);
-        color: var(--accent-fg);
-      }
-      button:active {
-        opacity: 0.8;
-      }
-      .links {
-        margin-top: 20px;
-        font-size: 12px;
-      }
-      .links a {
-        color: var(--muted);
-        text-decoration: none;
-        margin: 0 8px;
-        cursor: pointer;
+        background: var(--text-primary);
+        color: var(--text-inverse);
       }
-      .links a:hover {
-        color: var(--fg);
+      @media (hover: hover) and (pointer: fine) {
+        button.primary:hover {
+          background: var(--text-body);
+        }
+        button.secondary:hover {
+          background: var(--surface-hover);
+        }
       }
       #detail {
-        font-size: 11px;
-        color: var(--muted);
-        margin-top: 16px;
+        min-height: 17px;
+        margin-top: 4px;
+        color: var(--text-muted);
         font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 11px;
+        line-height: 1.5;
+      }
+      @media (max-width: 720px) {
+        header {
+          padding-right: 32px;
+          padding-left: 32px;
+        }
+      }
+      @media (max-width: 480px) {
+        header {
+          padding-right: 20px;
+          padding-left: 20px;
+        }
+        h1 {
+          font-size: 34px;
+        }
       }
     </style>
   </head>
   <body>
+    <header aria-label="Sim">
+      <svg class="wordmark" viewBox="0 0 441 212" role="img" aria-label="Sim">
+        <g fill="currentColor">
+          <path d="M0 160.9H29.51C29.51 169.08 32.46 175.61 38.37 180.48C44.27 185.12 52.25 187.44 62.31 187.44C73.24 187.44 81.65 185.34 87.56 181.14C93.46 176.71 96.41 170.85 96.41 163.55C96.41 158.24 94.77 153.82 91.49 150.28C88.43 146.74 82.75 143.86 74.44 141.65L46.24 135.01C32.03 131.47 21.42 126.05 14.43 118.75C7.65 111.45 4.26 101.83 4.26 89.88C4.26 79.93 6.78 71.3 11.81 64C17.05 56.7 24.16 51.06 33.12 47.08C42.3 43.09 52.8 41.1 64.6 41.1C76.41 41.1 86.57 43.2 95.1 47.41C103.84 51.61 110.62 57.47 115.43 64.99C120.46 72.52 123.08 81.48 123.3 91.87H93.79C93.57 83.47 90.84 76.94 85.59 72.3C80.34 67.65 73.02 65.33 63.62 65.33C54 65.33 46.57 67.43 41.32 71.63C36.07 75.83 33.45 81.59 33.45 88.89C33.45 99.73 41.32 107.14 57.06 111.12L85.26 118.09C98.81 121.19 108.98 126.28 115.76 133.35C122.53 140.21 125.92 149.61 125.92 161.56C125.92 171.74 123.19 180.7 117.73 188.44C112.26 195.96 104.72 201.82 95.1 206.03C85.7 210.01 74.55 212 61.65 212C42.85 212 27.87 207.35 16.72 198.06C5.57 188.77 0 176.38 0 160.9Z" />
+          <path d="M232.8 212H202.13L202.13 49.76H229.54V77.39C232.8 68.34 239.11 60.66 247.81 54.7C256.73 48.52 267.5 45.43 280.12 45.43C294.26 45.43 306.01 49.29 315.36 57.02C324.72 64.75 330.81 75.01 333.64 87.82H328.09C330.27 75.01 336.25 64.75 346.04 57.02C355.83 49.29 367.9 45.43 382.26 45.43C400.54 45.43 414.89 50.84 425.34 61.66C435.78 72.47 441 87.26 441 106.03V212H410.98V113.65C410.98 100.84 407.71 91.02 401.19 84.17C394.88 77.11 386.29 73.58 375.41 73.58C367.79 73.58 361.05 75.34 355.17 78.88C349.52 82.19 345.06 87.04 341.8 93.45C338.53 99.85 336.9 107.36 336.9 115.97V212H306.55V113.32C306.55 100.51 303.4 90.8 297.09 84.17C290.78 77.33 282.19 73.91 271.31 73.91C263.69 73.91 256.95 75.67 251.08 79.21C245.42 82.52 240.96 87.38 237.7 93.78C234.43 99.96 232.8 107.36 232.8 115.97V212Z" />
+          <path d="M184.83 20.55C184.83 31.9 175.64 41.1 164.29 41.1C152.95 41.1 143.76 31.9 143.76 20.55C143.76 9.2 152.95 0 164.29 0C175.64 0 184.83 9.2 184.83 20.55Z" />
+          <path d="M179.43 212H149.16V49.76C153.76 51.91 158.88 53.12 164.29 53.12C169.7 53.12 174.83 51.91 179.43 49.76V212Z" />
+        </g>
+      </svg>
+    </header>
     <main>
-      <div class="mark">S</div>
-      <h1 id="title">Can’t connect to Sim</h1>
-      <p id="message">
-        Sim couldn’t reach the server. Check your internet connection, then try again.
-      </p>
-      <div class="actions">
-        <button class="primary" id="retry">Retry</button>
-      </div>
-      <div class="links">
-        <a id="status">Check status</a>
+      <div class="content">
+        <h1 id="title">Can’t connect to Sim</h1>
+        <p id="message">
+          Sim couldn’t reach the server. Check your internet connection, then try again.
+        </p>
+        <div class="actions">
+          <button class="primary" id="retry">Retry</button>
+          <button class="secondary" id="status">Check status</button>
+        </div>
+        <div id="detail" role="status"></div>
       </div>
-      <div id="detail"></div>
     </main>
     <script>
       const params = new URLSearchParams(location.search)
       const copy = {
         offline: {
           title: 'You’re offline',
-          message: 'Sim needs an internet connection. Reconnect, then try again — we’ll also retry automatically.',
+          message: 'Sim needs an internet connection. Reconnect, then try again. We’ll also retry automatically.',
         },
         dns: {
           title: 'Can’t find the server',
diff --git a/apps/docs/app/[lang]/not-found.tsx b/apps/docs/app/[lang]/not-found.tsx
index c0c60878855..d504a63db8b 100644
--- a/apps/docs/app/[lang]/not-found.tsx
+++ b/apps/docs/app/[lang]/not-found.tsx
@@ -8,17 +8,20 @@ export const metadata = {
 export default function NotFound() {
   return (
     <DocsPage>
-      <div className='flex min-h-[70vh] flex-col items-center justify-center gap-4 text-center'>
-        <h1 className='bg-gradient-to-b from-[var(--brand-accent)] to-[var(--brand-accent-hover)] bg-clip-text font-semibold text-8xl text-transparent'>
-          404
-        </h1>
-        <h2 className='font-semibold text-2xl text-[var(--text-primary)]'>Page Not Found</h2>
-        <p className='text-[var(--text-muted)]'>
-          The page you're looking for doesn't exist or has been moved.
-        </p>
-        <ChipLink href='/' variant='primary'>
-          Go home
-        </ChipLink>
+      <div className='flex min-h-[60vh] flex-col items-center justify-center px-4 py-24 text-center'>
+        <div className='flex w-full max-w-[410px] flex-col items-center gap-3'>
+          <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
+            Page not found
+          </h1>
+          <p className='text-[var(--text-muted)] text-lg'>
+            The page you&apos;re looking for doesn&apos;t exist or has been moved.
+          </p>
+          <div className='mt-3 flex flex-wrap items-center justify-center gap-2'>
+            <ChipLink href='/' variant='primary'>
+              Return home
+            </ChipLink>
+          </div>
+        </div>
       </div>
     </DocsPage>
   )
diff --git a/apps/sim/app/(landing)/blog/authors/not-found.tsx b/apps/sim/app/(landing)/blog/authors/not-found.tsx
index 77b14ef9f97..5415cb5b8a0 100644
--- a/apps/sim/app/(landing)/blog/authors/not-found.tsx
+++ b/apps/sim/app/(landing)/blog/authors/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPage } from '@/components/status-page'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -8,19 +9,13 @@ export const metadata: Metadata = {
 
 export default function BlogAuthorNotFound() {
   return (
-    <main
-      id='main-content'
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center gap-3 px-20 py-24 text-center max-sm:px-5 max-lg:px-8'
+    <StatusPage
+      title='Author not found'
+      description="The author you're looking for doesn't exist or has been moved."
     >
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-        Author not found
-      </h1>
-      <p className='text-[var(--text-muted)] text-lg'>
-        The author you&apos;re looking for doesn&apos;t exist or has been moved.
-      </p>
-      <ChipLink variant='primary' href='/blog' className='mt-3'>
+      <ChipLink variant='primary' href='/blog'>
         Browse blog
       </ChipLink>
-    </main>
+    </StatusPage>
   )
 }
diff --git a/apps/sim/app/(landing)/blog/not-found.tsx b/apps/sim/app/(landing)/blog/not-found.tsx
index 70ea50b3f62..0bd6dff5be7 100644
--- a/apps/sim/app/(landing)/blog/not-found.tsx
+++ b/apps/sim/app/(landing)/blog/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPage } from '@/components/status-page'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -8,19 +9,13 @@ export const metadata: Metadata = {
 
 export default function BlogNotFound() {
   return (
-    <main
-      id='main-content'
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center gap-3 px-20 py-24 text-center max-sm:px-5 max-lg:px-8'
+    <StatusPage
+      title='Post not found'
+      description="The post you're looking for doesn't exist or has been moved."
     >
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-        Post not found
-      </h1>
-      <p className='text-[var(--text-muted)] text-lg'>
-        The post you&apos;re looking for doesn&apos;t exist or has been moved.
-      </p>
-      <ChipLink variant='primary' href='/blog' className='mt-3'>
+      <ChipLink variant='primary' href='/blog'>
         Browse blog
       </ChipLink>
-    </main>
+    </StatusPage>
   )
 }
diff --git a/apps/sim/app/(landing)/comparisons/not-found.tsx b/apps/sim/app/(landing)/comparisons/not-found.tsx
index 79f529b3b46..90b261bcc17 100644
--- a/apps/sim/app/(landing)/comparisons/not-found.tsx
+++ b/apps/sim/app/(landing)/comparisons/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPage } from '@/components/status-page'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -8,19 +9,13 @@ export const metadata: Metadata = {
 
 export default function ComparisonNotFound() {
   return (
-    <main
-      id='main-content'
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1446px] flex-col items-center justify-center gap-3 px-12 py-24 text-center max-sm:px-5 max-lg:px-8'
+    <StatusPage
+      title='Comparison not found'
+      description="The comparison you're looking for doesn't exist or has been moved."
     >
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-        Comparison not found
-      </h1>
-      <p className='text-[var(--text-muted)] text-lg'>
-        The comparison you&apos;re looking for doesn&apos;t exist or has been moved.
-      </p>
-      <ChipLink variant='primary' href='/comparisons' className='mt-3'>
+      <ChipLink variant='primary' href='/comparisons'>
         Browse comparisons
       </ChipLink>
-    </main>
+    </StatusPage>
   )
 }
diff --git a/apps/sim/app/(landing)/integrations/not-found.tsx b/apps/sim/app/(landing)/integrations/not-found.tsx
index 48ab4af6207..12029baa1f5 100644
--- a/apps/sim/app/(landing)/integrations/not-found.tsx
+++ b/apps/sim/app/(landing)/integrations/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPage } from '@/components/status-page'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -8,19 +9,13 @@ export const metadata: Metadata = {
 
 export default function IntegrationsNotFound() {
   return (
-    <main
-      id='main-content'
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center gap-3 px-20 py-24 text-center max-sm:px-5 max-lg:px-8'
+    <StatusPage
+      title='Integration not found'
+      description="The integration you're looking for doesn't exist or has been moved."
     >
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-        Integration not found
-      </h1>
-      <p className='text-[var(--text-muted)] text-lg'>
-        The integration you&apos;re looking for doesn&apos;t exist or has been moved.
-      </p>
-      <ChipLink variant='primary' href='/integrations' className='mt-3'>
+      <ChipLink variant='primary' href='/integrations'>
         Browse integrations
       </ChipLink>
-    </main>
+    </StatusPage>
   )
 }
diff --git a/apps/sim/app/(landing)/library/authors/not-found.tsx b/apps/sim/app/(landing)/library/authors/not-found.tsx
index 9207370e8c1..24f85ed34ed 100644
--- a/apps/sim/app/(landing)/library/authors/not-found.tsx
+++ b/apps/sim/app/(landing)/library/authors/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPage } from '@/components/status-page'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -8,19 +9,13 @@ export const metadata: Metadata = {
 
 export default function LibraryAuthorNotFound() {
   return (
-    <main
-      id='main-content'
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center gap-3 px-20 py-24 text-center max-sm:px-5 max-lg:px-8'
+    <StatusPage
+      title='Author not found'
+      description="The author you're looking for doesn't exist or has been moved."
     >
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-        Author not found
-      </h1>
-      <p className='text-[var(--text-muted)] text-lg'>
-        The author you&apos;re looking for doesn&apos;t exist or has been moved.
-      </p>
-      <ChipLink variant='primary' href='/library' className='mt-3'>
+      <ChipLink variant='primary' href='/library'>
         Browse library
       </ChipLink>
-    </main>
+    </StatusPage>
   )
 }
diff --git a/apps/sim/app/(landing)/library/not-found.tsx b/apps/sim/app/(landing)/library/not-found.tsx
index 9bca5460c33..70e3d5c62b4 100644
--- a/apps/sim/app/(landing)/library/not-found.tsx
+++ b/apps/sim/app/(landing)/library/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPage } from '@/components/status-page'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -8,19 +9,13 @@ export const metadata: Metadata = {
 
 export default function LibraryNotFound() {
   return (
-    <main
-      id='main-content'
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center gap-3 px-20 py-24 text-center max-sm:px-5 max-lg:px-8'
+    <StatusPage
+      title='Post not found'
+      description="The post you're looking for doesn't exist or has been moved."
     >
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-        Post not found
-      </h1>
-      <p className='text-[var(--text-muted)] text-lg'>
-        The post you&apos;re looking for doesn&apos;t exist or has been moved.
-      </p>
-      <ChipLink variant='primary' href='/library' className='mt-3'>
+      <ChipLink variant='primary' href='/library'>
         Browse library
       </ChipLink>
-    </main>
+    </StatusPage>
   )
 }
diff --git a/apps/sim/app/(landing)/models/not-found.tsx b/apps/sim/app/(landing)/models/not-found.tsx
index b2c223ae678..a3259cb37e0 100644
--- a/apps/sim/app/(landing)/models/not-found.tsx
+++ b/apps/sim/app/(landing)/models/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPage } from '@/components/status-page'
 
 export const metadata: Metadata = {
   title: 'Page Not Found',
@@ -8,19 +9,13 @@ export const metadata: Metadata = {
 
 export default function ModelsNotFound() {
   return (
-    <main
-      id='main-content'
-      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center gap-3 px-20 py-24 text-center max-sm:px-5 max-lg:px-8'
+    <StatusPage
+      title='Model not found'
+      description="The model you're looking for doesn't exist or has been moved."
     >
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-        Model not found
-      </h1>
-      <p className='text-[var(--text-muted)] text-lg'>
-        The model you&apos;re looking for doesn&apos;t exist or has been moved.
-      </p>
-      <ChipLink variant='primary' href='/models' className='mt-3'>
+      <ChipLink variant='primary' href='/models'>
         Browse models
       </ChipLink>
-    </main>
+    </StatusPage>
   )
 }
diff --git a/apps/sim/app/global-error.tsx b/apps/sim/app/global-error.tsx
index f64aa5b1916..8c9920b0621 100644
--- a/apps/sim/app/global-error.tsx
+++ b/apps/sim/app/global-error.tsx
@@ -1,16 +1,30 @@
 'use client'
 
-import NextError from 'next/error'
+import { Chip } from '@sim/emcn'
+import { StatusPageContent } from '@/components/status-page'
+import { season } from '@/app/_styles/fonts/season/season'
+import { LogoShell } from '@/app/(landing)/components'
+import '@/app/_styles/globals.css'
 
-export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+interface GlobalErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function GlobalError({ reset }: GlobalErrorProps) {
   return (
-    <html lang='en'>
-      <body>
-        {/* `NextError` is the default Next.js error page component. Its type
-        definition requires a `statusCode` prop. However, since the App Router
-        does not expose status codes for errors, we simply pass 0 to render a
-        generic error message. */}
-        <NextError statusCode={0} />
+    <html lang='en' className='light'>
+      <body className={`${season.variable} font-season`}>
+        <LogoShell center>
+          <StatusPageContent
+            title='Something went wrong'
+            description='An unexpected error occurred. Please try again.'
+          >
+            <Chip variant='primary' onClick={reset}>
+              Try again
+            </Chip>
+          </StatusPageContent>
+        </LogoShell>
       </body>
     </html>
   )
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index 82c39e62ab3..1c1762b1dfb 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { StatusPageContent } from '@/components/status-page'
 import { LogoShell } from '@/app/(landing)/components'
 
 export const metadata: Metadata = {
@@ -10,17 +11,14 @@ export const metadata: Metadata = {
 export default function NotFound() {
   return (
     <LogoShell center>
-      <div className='flex w-full max-w-[410px] flex-col items-center gap-3 text-center'>
-        <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-          Page not found
-        </h1>
-        <p className='text-[var(--text-muted)] text-lg'>
-          The page you&apos;re looking for doesn&apos;t exist or has been moved.
-        </p>
-        <ChipLink variant='primary' href='/' className='mt-3'>
+      <StatusPageContent
+        title='Page not found'
+        description="The page you're looking for doesn't exist or has been moved."
+      >
+        <ChipLink variant='primary' href='/'>
           Return home
         </ChipLink>
-      </div>
+      </StatusPageContent>
     </LogoShell>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
index d002985ecba..79c86dafb6f 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { type ReactNode, useEffect } from 'react'
-import { Button } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { TriangleAlert } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 
@@ -30,7 +30,7 @@ interface ErrorShellProps {
 
 /**
  * Centered layout shared by the workspace error boundary and not-found page.
- * Renders a framed glyph, serif headline, supporting paragraph, and a row of
+ * Renders a framed glyph, brand headline, supporting paragraph, and a row of
  * action buttons.
  */
 export function ErrorShell({ title, description, icon, children }: ErrorShellProps) {
@@ -80,9 +80,9 @@ export function ErrorState({
   return (
     <ErrorShell title={title} description={description} icon={icon}>
       {children}
-      <Button variant='primary' size='md' onClick={reset}>
-        Refresh
-      </Button>
+      <Chip variant='primary' onClick={reset}>
+        Try again
+      </Chip>
     </ErrorShell>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
index c9c47f592e0..b1a8d65c5fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
@@ -1,16 +1,11 @@
 'use client'
 
 import { Component, type ErrorInfo, type ReactNode } from 'react'
-import { Button } from '@sim/emcn'
-import { RefreshCw } from '@sim/emcn/icons'
+import { Chip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { truncate } from '@sim/utils/string'
-import { ReactFlowProvider } from 'reactflow'
 import { captureClientEvent, captureClientException } from '@/lib/posthog/client'
-import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
-import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
-import { readCollapsedCookie } from '@/stores/sidebar/store'
+import { ErrorShell } from '@/app/workspace/[workspaceId]/components'
 
 const logger = createLogger('ErrorBoundary')
 
@@ -24,51 +19,19 @@ interface ErrorUIProps {
   title?: string
   message?: string
   onReset?: () => void
-  fullScreen?: boolean
 }
 
 export function ErrorUI({
   title = 'Something went wrong',
   message = 'An unexpected error occurred. Please try again or refresh the page.',
   onReset,
-  fullScreen = false,
 }: ErrorUIProps) {
-  const preventZoomRef = usePreventZoom()
-
-  if (!fullScreen) {
-    return (
-      <div className='flex h-full flex-1 items-center justify-center'>
-        <div className='flex flex-col items-center gap-4 text-center'>
-          <div className='flex flex-col gap-2'>
-            <h2 className='text-[var(--text-primary)] text-md'>{title}</h2>
-            <p className='max-w-[300px] text-[var(--text-tertiary)] text-small'>{message}</p>
-          </div>
-          <Button variant='default' size='sm' onClick={onReset ?? (() => window.location.reload())}>
-            <RefreshCw className='mr-1.5 size-[14px]' />
-            Try again
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
   return (
-    <div ref={preventZoomRef} className='flex h-screen w-full flex-col bg-[var(--surface-1)]'>
-      <Sidebar isCollapsed={readCollapsedCookie()} />
-
-      <div className='relative flex flex-1'>
-        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='pointer-events-none flex flex-col items-center gap-4'>
-            <h3 className='text-[var(--text-primary)] text-md'>{title}</h3>
-            <p className='max-w-sm text-center text-[var(--text-tertiary)] text-sm'>{message}</p>
-          </div>
-        </div>
-
-        <ReactFlowProvider>
-          <Panel />
-        </ReactFlowProvider>
-      </div>
-    </div>
+    <ErrorShell title={title} description={message}>
+      <Chip variant='primary' onClick={onReset ?? (() => window.location.reload())}>
+        Try again
+      </Chip>
+    </ErrorShell>
   )
 }
 
diff --git a/apps/sim/components/status-page/index.ts b/apps/sim/components/status-page/index.ts
new file mode 100644
index 00000000000..d4e133d07fd
--- /dev/null
+++ b/apps/sim/components/status-page/index.ts
@@ -0,0 +1 @@
+export { StatusPage, StatusPageContent } from './status-page'
diff --git a/apps/sim/components/status-page/status-page.tsx b/apps/sim/components/status-page/status-page.tsx
new file mode 100644
index 00000000000..1c02f4c522c
--- /dev/null
+++ b/apps/sim/components/status-page/status-page.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+
+interface StatusPageContentProps {
+  title: string
+  description: string
+  children: ReactNode
+}
+
+/** Shared centered content for full-page not-found and fatal-error states. */
+export function StatusPageContent({ title, description, children }: StatusPageContentProps) {
+  return (
+    <div className='flex w-full max-w-[410px] flex-col items-center gap-3 text-center'>
+      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
+        {title}
+      </h1>
+      <p className='text-[var(--text-muted)] text-lg'>{description}</p>
+      <div className='mt-3 flex flex-wrap items-center justify-center gap-2'>{children}</div>
+    </div>
+  )
+}
+
+interface StatusPageProps extends StatusPageContentProps {
+  id?: string
+}
+
+/** Shared landing-shell page frame for route-specific not-found states. */
+export function StatusPage({ title, description, children, id = 'main-content' }: StatusPageProps) {
+  return (
+    <main
+      id={id}
+      className='mx-auto flex min-h-[60vh] w-full max-w-[1460px] flex-col items-center justify-center px-20 py-24 max-sm:px-5 max-lg:px-8'
+    >
+      <StatusPageContent title={title} description={description}>
+        {children}
+      </StatusPageContent>
+    </main>
+  )
+}

From 54ffda3a44b92e9732dfdcb715dc37c2a014ae60 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 24 Aug 2026 19:43:12 -0700
Subject: [PATCH 2/4] fix(desktop): match canonical chip chrome

---
 apps/desktop/e2e/smoke.spec.ts   |  4 ++++
 apps/desktop/static/offline.html | 22 +++++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/e2e/smoke.spec.ts b/apps/desktop/e2e/smoke.spec.ts
index 02c9990e740..6e1277dbeb6 100644
--- a/apps/desktop/e2e/smoke.spec.ts
+++ b/apps/desktop/e2e/smoke.spec.ts
@@ -119,5 +119,9 @@ test.describe('desktop shell smoke', () => {
       .toBe(true)
     await expect(window.locator('#retry')).toHaveCSS('height', '30px')
     await expect(window.locator('#retry')).toHaveCSS('border-radius', '8px')
+    await expect(window.locator('#retry')).toHaveCSS('padding-left', '8px')
+    await expect(window.locator('#retry')).toHaveCSS('font-size', '14px')
+    await expect(window.locator('#retry')).toHaveCSS('line-height', '20px')
+    await expect(window.locator('#retry')).toHaveCSS('text-align', 'left')
   })
 })
diff --git a/apps/desktop/static/offline.html b/apps/desktop/static/offline.html
index ffbe1f8c52a..231c415a83e 100644
--- a/apps/desktop/static/offline.html
+++ b/apps/desktop/static/offline.html
@@ -43,7 +43,6 @@
         color: var(--text-primary);
         font-family: 'Season Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         -webkit-font-smoothing: antialiased;
-        letter-spacing: 0.02em;
         user-select: none;
       }
       header {
@@ -105,7 +104,7 @@
         display: inline-flex;
         height: 30px;
         align-items: center;
-        justify-content: center;
+        gap: 6px;
         appearance: none;
         border: 0;
         background: transparent;
@@ -115,13 +114,26 @@
         font: inherit;
         font-size: 14px;
         line-height: 20px;
+        text-align: left;
         cursor: pointer;
         outline: none;
         transition:
           color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-          background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+          background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+          stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
         -webkit-app-region: no-drag;
       }
+      button .label {
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+        color: currentColor;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       button.primary {
         background: var(--text-primary);
         color: var(--text-inverse);
@@ -177,8 +189,8 @@ <h1 id="title">Can’t connect to Sim</h1>
           Sim couldn’t reach the server. Check your internet connection, then try again.
         </p>
         <div class="actions">
-          <button class="primary" id="retry">Retry</button>
-          <button class="secondary" id="status">Check status</button>
+          <button class="primary" id="retry"><span class="label">Retry</span></button>
+          <button class="secondary" id="status"><span class="label">Check status</span></button>
         </div>
         <div id="detail" role="status"></div>
       </div>

From 3fd0c12339d58bdbf1afef969533b71df3de02ce Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 24 Aug 2026 19:48:32 -0700
Subject: [PATCH 3/4] test(ui): update error chip mock

---
 apps/sim/app/workspace/[workspaceId]/logs/error.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/logs/error.test.tsx b/apps/sim/app/workspace/[workspaceId]/logs/error.test.tsx
index 4e0adcf8390..cd7f30ee2f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/error.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/error.test.tsx
@@ -6,7 +6,7 @@ import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 vi.mock('@sim/emcn', () => ({
-  Button: ({ children, ...props }: { children: ReactNode } & Record<string, unknown>) => (
+  Chip: ({ children, ...props }: { children: ReactNode } & Record<string, unknown>) => (
     <button {...props}>{children}</button>
   ),
 }))
@@ -58,7 +58,7 @@ describe('LogsError boundary', () => {
     )
   })
 
-  it('calls reset when the refresh action is clicked', () => {
+  it('calls reset when the retry action is clicked', () => {
     const reset = vi.fn()
     const error = Object.assign(new Error('boom'), { digest: 'abc123' })
 
@@ -67,7 +67,7 @@ describe('LogsError boundary', () => {
     })
 
     act(() => {
-      findButtonByText('Refresh').click()
+      findButtonByText('Try again').click()
     })
 
     expect(reset).toHaveBeenCalledTimes(1)

From 4acb05e0ebbd2d2315e71225a0daa42315e168e2 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 24 Aug 2026 20:35:36 -0700
Subject: [PATCH 4/4] fix(desktop): package offline font reliably

---
 apps/desktop/electron-builder.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/electron-builder.yml b/apps/desktop/electron-builder.yml
index 0ecc4bf5706..a8b4637f754 100644
--- a/apps/desktop/electron-builder.yml
+++ b/apps/desktop/electron-builder.yml
@@ -10,8 +10,10 @@ files:
   - dist/**
   - static/**
   - package.json
-  - from: ../sim/public/brand/fonts/SeasonSansUprightsVF.woff2
-    to: static/SeasonSansUprightsVF.woff2
+  - from: ../sim/public/brand/fonts
+    to: static
+    filter:
+      - SeasonSansUprightsVF.woff2
 
 asar: true