---
title: "Basalt Status"
platform: web
slug: basalt-status
screens: []
domains: ["developer-tools"]
style: "flat"
fonts: ["Archivo", "IBM Plex Mono"]
roles: ["top-navigation-bar", "navigation-menu", "chip", "button", "banner", "badge", "card", "segmented-control", "divider", "item-indicator", "hyperlink", "text-field"]
score: {clean: 100, consistent: 67, accessible: 83, comprehensible: 25}
url: https://gui.farm/web/basalt-status
raw: https://gui.farm/web/basalt-status/design.guix
download: https://gui.farm/web/basalt-status.gui
---

# Basalt Status

A public system status page for an edge database and API platform, showing overall health, per-component 30-day uptime, an active incident timeline, and past incidents.

- **Live preview:** https://gui.farm/web/basalt-status
- **Raw source:** https://gui.farm/web/basalt-status/design.guix
- **Download (.gui):** https://gui.farm/web/basalt-status.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Basalt Status">
  <tokens>
    <color name="canvas" value="#F5F6F8" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-2" value="#EEF0F3" />
    <color name="line" value="#E1E4EA" />
    <color name="line-strong" value="#CBD0D8" />
    <color name="ink" value="#181A1F" />
    <color name="body" value="#3C4048" />
    <color name="muted" value="#5E636D" />
    <color name="faint" value="#666B76" />
    <color name="accent" value="#6D28D9" />
    <color name="accent-strong" value="#5B21B6" />
    <color name="accent-tint" value="#EDE6FB" />
    <color name="accent-ink" value="#FFFFFF" />
    <color name="ok" value="#1E8E4E" />
    <color name="ok-text" value="#157A3C" />
    <color name="ok-tint" value="#E1F3E8" />
    <color name="warn" value="#C9790C" />
    <color name="warn-text" value="#985B00" />
    <color name="warn-tint" value="#FBEBD2" />
    <color name="err" value="#CB3434" />
    <color name="err-text" value="#B21E1E" />
    <color name="err-tint" value="#F8E0E0" />
    <number name="r-sm" value="6" />
    <number name="r-md" value="10" />
    <number name="r-lg" value="14" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Archivo" source="google" weights="400 500 600 700" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="400 500 600" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Display" font-family="Archivo" font-size="26" font-weight="700" line-height="32" />
    <text-style name="Section" font-family="Archivo" font-size="16" font-weight="600" line-height="22" />
    <text-style name="H3" font-family="Archivo" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Archivo" font-size="14" font-weight="400" line-height="21" />
    <text-style name="LabelB" font-family="Archivo" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Label" font-family="Archivo" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Small" font-family="Archivo" font-size="12" font-weight="500" line-height="17" />
    <text-style name="Tiny" font-family="Archivo" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Eyebrow" font-family="Archivo" font-size="11" font-weight="700" line-height="14" />
    <text-style name="Nav" font-family="Archivo" font-size="13" font-weight="500" line-height="16" />
    <text-style name="Btn" font-family="Archivo" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Metric" font-family="IBM Plex Mono" font-size="26" font-weight="600" line-height="32" />
    <text-style name="Mono" font-family="IBM Plex Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Num" font-family="IBM Plex Mono" font-size="13" font-weight="500" line-height="17" />
    <text-style name="NumB" font-family="IBM Plex Mono" font-size="13" font-weight="600" line-height="17" />
  </styles>
  <col w="1440" fill="$canvas" align="top-center">
    <row
      w="1440"
      h="64"
      p="0 180"
      gap="22"
      align="middle-left"
      fill="$surface"
      border="0 0 1 0 $line"
      role="top-navigation-bar"
    >
      <row gap="10" align="middle-center">
        <row w="28" h="28" radius="$r-sm" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/lucide/hexagon.svg?color=%23FFFFFF" w="17" h="17" />
        </row>
        <text text-style="Section" font-size="17" value="Basalt" color="$ink" letter-spacing="-0.2" />
        <row p="2 7" radius="$r-sm" fill="$surface-2" align="middle-center">
          <text text-style="Tiny" value="STATUS" color="$muted" letter-spacing="1" />
        </row>
      </row>
      <row gap="20" align="middle-left" role="navigation-menu">
        <text text-style="Nav" value="Status" color="$ink" />
        <text text-style="Nav" value="Incidents" color="$muted" />
        <text text-style="Nav" value="Maintenance" color="$muted" />
        <text text-style="Nav" value="Metrics" color="$muted" />
      </row>
      <row w="fill" gap="12" align="middle-right">
        <row p="6 11" gap="8" radius="$r-md" fill="$surface" border="1 $line" align="middle-center" role="chip">
          <img src="https://api.iconify.design/lucide/globe.svg?color=%235E636D" w="14" h="14" />
          <text text-style="Small" value="All regions" color="$body" />
          <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23666B76" w="14" h="14" />
        </row>
        <row p="9 15" gap="8" radius="$r-md" fill="$accent" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%23FFFFFF" w="15" h="15" />
          <text text-style="Btn" value="Subscribe to updates" color="$accent-ink" />
        </row>
      </row>
    </row>
    <col w="1080" p="28 0 56 0" gap="20" align="top-left">
      <row
        w="1080"
        fill="$surface"
        border="1 $line"
        radius="$r-lg"
        p="20 22"
        gap="18"
        align="middle-left"
        role="banner"
      >
        <row w="52" h="52" radius="$r-md" fill="$warn-tint" align="middle-center">
          <img src="https://api.iconify.design/lucide/triangle-alert.svg?color=%23985B00" w="26" h="26" />
        </row>
        <col w="fill" gap="6">
          <row gap="10" align="middle-left">
            <text text-style="Display" value="Some systems are degraded" color="$ink" letter-spacing="-0.3" />
            <row p="3 9" radius="$r-pill" fill="$warn-tint" align="middle-center" role="badge">
              <text
                text-style="Tiny"
                value="Degraded"
                color="$warn-text"
                text-case="uppercase"
                letter-spacing="0.6"
              />
            </row>
          </row>
          <text
            w="fill"
            text-style="Body"
            value="We are investigating elevated read latency on Edge Database in eu-west. REST API, Authentication, Realtime, Object Storage, and Webhooks are operational."
            color="$muted"
          />
        </col>
        <col w="212" gap="6" align="top-right">
          <text
            w="212"
            align="right"
            text-style="Eyebrow"
            value="LAST UPDATED"
            color="$faint"
            letter-spacing="0.8"
          />
          <text w="212" align="right" text-style="Mono" value="Aug 17, 2026 · 00:42 UTC" color="$body" />
          <row w="212" gap="6" align="middle-right">
            <ellipse w="7" h="7" fill="$ok" />
            <text text-style="Tiny" value="Auto-refreshing every 60s" color="$muted" />
          </row>
        </col>
      </row>
      <col w="1080" fill="$surface" border="1 $line" radius="$r-lg" p="18 22 22 22" gap="14" role="card">
        <row w="1036" gap="18" align="middle-left">
          <text w="fill" text-style="Section" value="Current status" color="$ink" />
          <row
            h="32"
            fill="$canvas"
            border="1 $line"
            radius="$r-md"
            p="3"
            gap="2"
            align="middle-left"
            role="segmented-control"
          >
            <row h="24" p="0 12" radius="$r-sm" fill="$accent" align="middle-center">
              <text text-style="Small" value="30 days" color="$accent-ink" />
            </row>
            <row h="24" p="0 12" align="middle-center">
              <text text-style="Small" value="90 days" color="$muted" />
            </row>
          </row>
        </row>
        <row w="1036" gap="18" align="middle-left">
          <text w="394" text-style="Eyebrow" value="COMPONENT" color="$faint" letter-spacing="0.8" />
          <row w="476" gap="0" align="middle-left">
            <text text-style="Tiny" value="30 days ago" color="$faint" />
            <text w="fill" align="right" text-style="Tiny" value="Today" color="$faint" />
          </row>
          <text w="130" align="right" text-style="Eyebrow" value="UPTIME" color="$faint" letter-spacing="0.8" />
        </row>
        <line fill="$line" role="divider" />
        <row w="1036" gap="18" align="middle-left">
          <col w="394" gap="3">
            <row gap="8" align="middle-left">
              <ellipse w="8" h="8" fill="#1E8E4E" role="item-indicator" />
              <text text-style="LabelB" value="REST API" color="$ink" />
              <text
                text-style="Tiny"
                value="Operational"
                color="#157A3C"
                text-case="uppercase"
                letter-spacing="0.6"
              />
            </row>
            <text text-style="Mono" value="api.basalt.dev" color="$faint" />
          </col>
          <col w="476" gap="0" align="middle-left">
            <row w="476" h="34" gap="4" align="middle-left">
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#C9790C" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
            </row>
          </col>
          <col w="130" gap="1" align="middle-right">
            <text w="130" align="right" text-style="NumB" value="99.99%" color="#181A1F" />
            <text w="130" align="right" text-style="Tiny" value="30-day uptime" color="$faint" />
          </col>
        </row>
        <row w="1036" gap="18" align="middle-left">
          <col w="394" gap="3">
            <row gap="8" align="middle-left">
              <ellipse w="8" h="8" fill="#1E8E4E" role="item-indicator" />
              <text text-style="LabelB" value="Realtime" color="$ink" />
              <text
                text-style="Tiny"
                value="Operational"
                color="#157A3C"
                text-case="uppercase"
                letter-spacing="0.6"
              />
            </row>
            <text text-style="Mono" value="ws.basalt.dev" color="$faint" />
          </col>
          <col w="476" gap="0" align="middle-left">
            <row w="476" h="34" gap="4" align="middle-left">
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#C9790C" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
            </row>
          </col>
          <col w="130" gap="1" align="middle-right">
            <text w="130" align="right" text-style="NumB" value="99.98%" color="#181A1F" />
            <text w="130" align="right" text-style="Tiny" value="30-day uptime" color="$faint" />
          </col>
        </row>
        <row w="1036" gap="18" align="middle-left">
          <col w="394" gap="3">
            <row gap="8" align="middle-left">
              <ellipse w="8" h="8" fill="#1E8E4E" role="item-indicator" />
              <text text-style="LabelB" value="Authentication" color="$ink" />
              <text
                text-style="Tiny"
                value="Operational"
                color="#157A3C"
                text-case="uppercase"
                letter-spacing="0.6"
              />
            </row>
            <text text-style="Mono" value="auth.basalt.dev" color="$faint" />
          </col>
          <col w="476" gap="0" align="middle-left">
            <row w="476" h="34" gap="4" align="middle-left">
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#C9790C" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
            </row>
          </col>
          <col w="130" gap="1" align="middle-right">
            <text w="130" align="right" text-style="NumB" value="99.99%" color="#181A1F" />
            <text w="130" align="right" text-style="Tiny" value="30-day uptime" color="$faint" />
          </col>
        </row>
        <row w="1036" gap="18" align="middle-left">
          <col w="394" gap="3">
            <row gap="8" align="middle-left">
              <ellipse w="8" h="8" fill="#C9790C" role="item-indicator" />
              <text text-style="LabelB" value="Edge Database" color="$ink" />
              <text
                text-style="Tiny"
                value="Degraded"
                color="#985B00"
                text-case="uppercase"
                letter-spacing="0.6"
              />
            </row>
            <text text-style="Mono" value="db.basalt.dev" color="$faint" />
          </col>
          <col w="476" gap="0" align="middle-left">
            <row w="476" h="34" gap="4" align="middle-left">
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#C9790C" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#C9790C" />
            </row>
          </col>
          <col w="130" gap="1" align="middle-right">
            <text w="130" align="right" text-style="NumB" value="99.70%" color="#985B00" />
            <text w="130" align="right" text-style="Tiny" value="30-day uptime" color="$faint" />
          </col>
        </row>
        <row w="1036" gap="18" align="middle-left">
          <col w="394" gap="3">
            <row gap="8" align="middle-left">
              <ellipse w="8" h="8" fill="#1E8E4E" role="item-indicator" />
              <text text-style="LabelB" value="Object Storage" color="$ink" />
              <text
                text-style="Tiny"
                value="Operational"
                color="#157A3C"
                text-case="uppercase"
                letter-spacing="0.6"
              />
            </row>
            <text text-style="Mono" value="cdn.basalt.dev" color="$faint" />
          </col>
          <col w="476" gap="0" align="middle-left">
            <row w="476" h="34" gap="4" align="middle-left">
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#CB3434" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
            </row>
          </col>
          <col w="130" gap="1" align="middle-right">
            <text w="130" align="right" text-style="NumB" value="99.95%" color="#181A1F" />
            <text w="130" align="right" text-style="Tiny" value="30-day uptime" color="$faint" />
          </col>
        </row>
        <row w="1036" gap="18" align="middle-left">
          <col w="394" gap="3">
            <row gap="8" align="middle-left">
              <ellipse w="8" h="8" fill="#1E8E4E" role="item-indicator" />
              <text text-style="LabelB" value="Webhooks" color="$ink" />
              <text
                text-style="Tiny"
                value="Operational"
                color="#157A3C"
                text-case="uppercase"
                letter-spacing="0.6"
              />
            </row>
            <text text-style="Mono" value="hooks.basalt.dev" color="$faint" />
          </col>
          <col w="476" gap="0" align="middle-left">
            <row w="476" h="34" gap="4" align="middle-left">
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#C9790C" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
              <rect w="12" h="34" radius="2" fill="#1E8E4E" />
            </row>
          </col>
          <col w="130" gap="1" align="middle-right">
            <text w="130" align="right" text-style="NumB" value="99.91%" color="#181A1F" />
            <text w="130" align="right" text-style="Tiny" value="30-day uptime" color="$faint" />
          </col>
        </row>
      </col>
      <row w="1080" gap="20" align="top-left">
        <col w="700" fill="$surface" border="1 $line" radius="$r-lg" p="18 20" gap="auto" role="card" h="315">
          <row w="660" gap="12" align="top-left">
            <col w="fill" gap="6">
              <text text-style="Eyebrow" value="REST API · RESPONSE TIME" color="$faint" letter-spacing="0.8" />
              <row gap="10" align="baseline">
                <text text-style="Metric" value="128 ms" color="$ink" />
                <row gap="4" align="middle-left">
                  <img
                    src="https://api.iconify.design/lucide/arrow-down-right.svg?color=%23157A3C"
                    w="14"
                    h="14"
                  />
                  <text text-style="Small" value="12 ms vs last week · p95" color="$ok-text" />
                </row>
              </row>
            </col>
            <row
              h="30"
              fill="$canvas"
              border="1 $line"
              radius="$r-md"
              p="3"
              gap="2"
              align="middle-left"
              role="segmented-control"
            >
              <row h="24" p="0 10" radius="$r-sm" fill="$accent" align="middle-center">
                <text text-style="Tiny" value="24h" color="$accent-ink" />
              </row>
              <row h="24" p="0 10" align="middle-center">
                <text text-style="Tiny" value="7d" color="$muted" />
              </row>
              <row h="24" p="0 10" align="middle-center">
                <text text-style="Tiny" value="30d" color="$muted" />
              </row>
            </row>
          </row>
          <img
            src="https://gui.farm/tools/charts/line-chart.svg?data=00:118,02:121,04:116,06:124,08:141,10:158,12:149,14:166,16:152,18:161,20:173,22:154,Now:128&amp;line=%236D28D9&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=show&amp;width=1320&amp;height=300"
            w="660"
            h="150"
          />
        </col>
        <col w="360" gap="16">
          <col w="360" fill="$surface" border="1 $line" radius="$r-lg" p="16 18" gap="6" role="card">
            <text text-style="Eyebrow" value="30-DAY UPTIME" color="$faint" letter-spacing="0.8" />
            <text text-style="Metric" value="99.92%" color="$ok-text" />
            <text text-style="Small" value="Across all 6 components" color="$muted" />
          </col>
          <col w="360" fill="$surface" border="1 $line" radius="$r-lg" p="16 18" gap="9" role="card">
            <row w="fill" gap="auto" align="baseline">
              <text text-style="Eyebrow" value="ERROR BUDGET · 30D" color="$faint" letter-spacing="0.8" />
              <text text-style="NumB" value="42% used" color="$accent-strong" />
            </row>
            <row w="300" h="8" radius="$r-pill" fill="$surface-2" align="middle-left">
              <rect w="126" h="8" radius="$r-pill" fill="$accent" />
            </row>
            <text text-style="Small" value="4h 26m of 10h 30m monthly budget spent" color="$muted" />
          </col>
          <col w="360" fill="$surface" border="1 $line" radius="$r-lg" p="16 18" gap="6" role="card">
            <text text-style="Eyebrow" value="INCIDENTS · 30D" color="$faint" letter-spacing="0.8" />
            <row gap="8" align="baseline">
              <text text-style="Metric" value="4" color="$ink" />
              <text text-style="Num" value="1 active · 3 resolved" color="$muted" />
            </row>
          </col>
        </col>
      </row>
      <col w="1080" fill="$surface" border="1 $line" radius="$r-lg" p="20 22" gap="16" role="card">
        <row w="1036" gap="12" align="middle-left">
          <row p="3 9" radius="$r-pill" fill="$warn-tint" align="middle-center" role="badge">
            <text
              text-style="Tiny"
              value="Monitoring"
              color="$warn-text"
              text-case="uppercase"
              letter-spacing="0.6"
            />
          </row>
          <text
            w="fill"
            text-style="Section"
            value="Elevated read latency - Edge Database (eu-west)"
            color="$ink"
          />
          <text text-style="Mono" value="Started 00:12 UTC · 30 min" color="$faint" />
        </row>
        <line fill="$line" role="divider" />
        <col w="1036" gap="16" p="2 0 0 22">
          <row w="992" gap="14" align="top-left">
            <text w="52" text-style="Mono" value="00:39" color="$muted" />
            <col w="14" align="top-center">
              <ellipse w="11" h="11" fill="#6D28D9" />
            </col>
            <col w="fill" gap="4">
              <row gap="8" align="middle-left">
                <row p="2 8" radius="$r-pill" fill="$warn-tint" align="middle-center" role="badge">
                  <text
                    text-style="Tiny"
                    value="Monitoring"
                    color="$warn-text"
                    text-case="uppercase"
                    letter-spacing="0.5"
                  />
                </row>
                <text text-style="Tiny" value="Aug 17, 2026" color="$faint" />
              </row>
              <text
                w="fill"
                text-style="Body"
                value="Latency is recovering. p95 reads are down from 940 ms to 310 ms. We are monitoring to confirm full recovery before resolving."
                color="$body"
              />
            </col>
          </row>
          <row w="992" gap="14" align="top-left">
            <text w="52" text-style="Mono" value="00:26" color="$muted" />
            <col w="14" align="top-center">
              <ellipse w="11" h="11" fill="#CBD0D8" />
            </col>
            <col w="fill" gap="4">
              <row gap="8" align="middle-left">
                <row p="2 8" radius="$r-pill" fill="$accent-tint" align="middle-center" role="badge">
                  <text
                    text-style="Tiny"
                    value="Identified"
                    color="$accent-strong"
                    text-case="uppercase"
                    letter-spacing="0.5"
                  />
                </row>
                <text text-style="Tiny" value="Aug 17, 2026" color="$faint" />
              </row>
              <text
                w="fill"
                text-style="Body"
                value="Root cause traced to a degraded storage node during a routine failover. Reads are being rerouted to healthy replicas in eu-west."
                color="$body"
              />
            </col>
          </row>
          <row w="992" gap="14" align="top-left">
            <text w="52" text-style="Mono" value="00:12" color="$muted" />
            <col w="14" align="top-center">
              <ellipse w="11" h="11" fill="#CBD0D8" />
            </col>
            <col w="fill" gap="4">
              <row gap="8" align="middle-left">
                <row p="2 8" radius="$r-pill" fill="$surface-2" align="middle-center" role="badge">
                  <text
                    text-style="Tiny"
                    value="Investigating"
                    color="$muted"
                    text-case="uppercase"
                    letter-spacing="0.5"
                  />
                </row>
                <text text-style="Tiny" value="Aug 17, 2026" color="$faint" />
              </row>
              <text
                w="fill"
                text-style="Body"
                value="We are seeing elevated p95 read latency on Edge Database in the eu-west region. Writes and all other regions are unaffected."
                color="$body"
              />
            </col>
          </row>
        </col>
        <line fill="$line" role="divider" />
        <row w="1036" gap="8" align="middle-left">
          <img src="https://api.iconify.design/lucide/server.svg?color=%235E636D" w="15" h="15" />
          <text
            w="fill"
            text-style="Small"
            value="Affected: Edge Database · Region eu-west · 3 of 214 services impacted"
            color="$muted"
          />
          <text
            text-style="Small"
            value="Subscribe to this incident"
            color="$accent-strong"
            href="https://status.basalt.dev/incidents/edge-db-eu-west"
            role="hyperlink"
          />
        </row>
      </col>
      <col w="1080" fill="$surface" border="1 $line" radius="$r-lg" p="18 22 20 22" gap="10" role="card">
        <row w="1036" gap="12" align="middle-left">
          <text w="fill" text-style="Section" value="Past incidents" color="$ink" />
          <text
            text-style="Small"
            value="View full history"
            color="$accent-strong"
            href="https://status.basalt.dev/history"
            role="hyperlink"
          />
        </row>
        <line fill="$line" role="divider" />
        <row w="1036" p="13 0" border="0 0 1 0 $line" gap="16" align="middle-left">
          <text w="86" text-style="Mono" value="Aug 12" color="$muted" />
          <col w="fill" gap="2">
            <text text-style="LabelB" value="Webhook delivery delays" color="$ink" />
            <text
              text-style="Small"
              value="Queue backlog delayed webhook delivery by up to 6 minutes."
              color="$muted"
            />
          </col>
          <row p="3 9" radius="$r-pill" fill="$ok-tint" align="middle-center" role="badge">
            <text
              text-style="Tiny"
              value="Resolved"
              color="$ok-text"
              text-case="uppercase"
              letter-spacing="0.5"
            />
          </row>
          <text w="72" align="right" text-style="Num" value="41 min" color="$faint" />
        </row>
        <row w="1036" p="13 0" border="0 0 1 0 $line" gap="16" align="middle-left">
          <text w="86" text-style="Mono" value="Aug 9" color="$muted" />
          <col w="fill" gap="2">
            <text text-style="LabelB" value="Realtime reconnect errors" color="$ink" />
            <text
              text-style="Small"
              value="A subset of WebSocket clients failed to reconnect after a deploy."
              color="$muted"
            />
          </col>
          <row p="3 9" radius="$r-pill" fill="$ok-tint" align="middle-center" role="badge">
            <text
              text-style="Tiny"
              value="Resolved"
              color="$ok-text"
              text-case="uppercase"
              letter-spacing="0.5"
            />
          </row>
          <text w="72" align="right" text-style="Num" value="9 min" color="$faint" />
        </row>
        <row w="1036" p="13 0" border="0 0 1 0 $line" gap="16" align="middle-left">
          <text w="86" text-style="Mono" value="Aug 3" color="$muted" />
          <col w="fill" gap="2">
            <text text-style="LabelB" value="Object Storage upload errors" color="$ink" />
            <text
              text-style="Small"
              value="Elevated 5xx responses on multipart uploads in us-east."
              color="$muted"
            />
          </col>
          <row p="3 9" radius="$r-pill" fill="$ok-tint" align="middle-center" role="badge">
            <text
              text-style="Tiny"
              value="Resolved"
              color="$ok-text"
              text-case="uppercase"
              letter-spacing="0.5"
            />
          </row>
          <text w="72" align="right" text-style="Num" value="21 min" color="$faint" />
        </row>
        <row w="1036" p="13 0" gap="16" align="middle-left">
          <text w="86" text-style="Mono" value="Jul 27" color="$muted" />
          <col w="fill" gap="2">
            <text text-style="LabelB" value="Database failover drill" color="$ink" />
            <text
              text-style="Small"
              value="Planned maintenance. Read replicas promoted with no customer downtime."
              color="$muted"
            />
          </col>
          <row p="3 9" radius="$r-pill" fill="$surface-2" align="middle-center" role="badge">
            <text
              text-style="Tiny"
              value="Completed"
              color="$muted"
              text-case="uppercase"
              letter-spacing="0.5"
            />
          </row>
          <text w="72" align="right" text-style="Num" value="40 min" color="$faint" />
        </row>
      </col>
      <row
        w="1080"
        fill="$accent-tint"
        border="1 $accent"
        radius="$r-lg"
        p="20 22"
        gap="16"
        align="middle-left"
      >
        <row w="46" h="46" radius="$r-md" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/lucide/mail.svg?color=%23FFFFFF" w="22" h="22" />
        </row>
        <col w="fill" gap="3">
          <text text-style="Section" value="Subscribe to status updates" color="$ink" />
          <text
            text-style="Small"
            value="Get email or webhook alerts whenever Basalt posts a new incident or scheduled maintenance."
            color="$muted"
          />
        </col>
        <row
          w="280"
          p="10 12"
          gap="8"
          radius="$r-md"
          fill="$surface"
          border="1 $line-strong"
          align="middle-left"
          role="text-field"
        >
          <img src="https://api.iconify.design/lucide/mail.svg?color=%23666B76" w="15" h="15" />
          <text w="fill" text-style="Small" value="you@company.com" color="$faint" />
        </row>
        <row p="11 16" gap="8" radius="$r-md" fill="$accent" align="middle-center" role="button">
          <text text-style="Btn" value="Subscribe" color="$accent-ink" />
        </row>
      </row>
    </col>
    <row w="1440" p="22 180" gap="16" align="middle-left" fill="$surface" border="1 0 0 0 $line">
      <row gap="8" align="middle-left">
        <row w="20" h="20" radius="4" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/lucide/hexagon.svg?color=%23FFFFFF" w="12" h="12" />
        </row>
        <text text-style="Small" value="Basalt Status · all times UTC" color="$muted" />
      </row>
      <row w="fill" gap="18" align="middle-right">
        <text text-style="Small" value="Docs" color="$faint" href="https://basalt.dev/docs" role="hyperlink" />
        <text text-style="Small" value="API" color="$faint" href="https://basalt.dev/api" role="hyperlink" />
        <text
          text-style="Small"
          value="Support"
          color="$faint"
          href="https://basalt.dev/support"
          role="hyperlink"
        />
        <text
          text-style="Small"
          value="RSS"
          color="$faint"
          href="https://status.basalt.dev/rss"
          role="hyperlink"
        />
        <text text-style="Tiny" value="Powered by Basalt" color="$faint" />
      </row>
    </row>
  </col>
</gui>
```