---
title: "Relay — Service Status"
platform: android
slug: relay-service-status
screens: ["error-page"]
domains: ["saas"]
style: "material"
fonts: ["Roboto"]
roles: ["chip", "badge", "top-navigation-bar", "segmented-control", "banner", "divider", "button", "card", "tab-bar"]
score: {clean: 100, consistent: 87, accessible: 88, comprehensible: 65}
url: https://gui.farm/android/relay-service-status
raw: https://gui.farm/android/relay-service-status/design.guix
download: https://gui.farm/android/relay-service-status.gui
---

# Relay — Service Status

An Android Material 3 dark in-app service-status screen showing a live SaaS incident with severity, live metrics, a connected-rail update timeline, affected components, and subscribe/retry actions.

- **Live preview:** https://gui.farm/android/relay-service-status
- **Raw source:** https://gui.farm/android/relay-service-status/design.guix
- **Download (.gui):** https://gui.farm/android/relay-service-status.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Relay — Service Status">
  <tokens>
    <color name="bg" value="#111318" />
    <color name="surface-container" value="#1D2024" />
    <color name="surface-container-high" value="#282B30" />
    <color name="on-surface" value="#E3E2E9" />
    <color name="on-surface-variant" value="#C4C6D0" />
    <color name="outline" value="#8E9099" />
    <color name="outline-variant" value="#44474E" />
    <color name="track" value="#35373E" />
    <color name="primary" value="#9FC0FF" />
    <color name="on-primary" value="#003061" />
    <color name="primary-container" value="#234776" />
    <color name="on-primary-container" value="#D5E3FF" />
    <number name="r-xs" value="4" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="400" line-height="28" />
    <text-style name="TitleSmall" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" line-height="24" />
    <text-style name="BodySmall" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Numeral" font-family="Roboto" font-size="24" font-weight="400" line-height="28" />
    <text-style
      name="Section"
      font-family="Roboto"
      font-size="11"
      font-weight="500"
      line-height="16"
      letter-spacing="0.6"
    />
    <text-style
      name="Overline"
      font-family="Roboto"
      font-size="10"
      font-weight="600"
      line-height="14"
      letter-spacing="0.8"
    />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <components>
    <component name="StatTile" id="comp-stat">
      <props>
        <prop name="val" type="text" target="sval" />
        <prop name="label" type="text" target="slabel" />
      </props>
      <col w="fill" gap="3" align="top-left">
        <text id="sval" text-style="Numeral" value="0" color="$on-surface" />
        <text id="slabel" text-style="LabelMedium" value="Label" color="$on-surface-variant" />
      </col>
    </component>
    <component name="AffectedChip" id="comp-chip">
      <props>
        <prop name="label" type="text" target="clabel" />
      </props>
      <row
        role="chip"
        h="30"
        radius="$r-full"
        fill="$surface-container-high"
        border="1 $outline-variant"
        p="0 12"
        gap="7"
        align="middle-center"
      >
        <ellipse w="7" h="7" fill="$primary" />
        <text id="clabel" text-style="LabelMedium" value="Chip" color="$on-surface" />
      </row>
    </component>
    <component name="TimelineEntry" id="comp-timeline">
      <props>
        <prop name="time" type="text" target="etime" />
        <prop name="status" type="text" target="estatus" />
        <prop name="msg" type="text" target="emsg" />
        <prop name="isnew" type="visible" target="enew" />
        <prop name="connector" type="visible" target="econn" />
      </props>
      <row w="300" h="76" gap="14" align="top-left">
        <col w="14" gap="0" align="top-center">
          <ellipse w="14" h="14" fill="$primary" />
          <rect id="econn" w="2" h="62" fill="$outline-variant" />
        </col>
        <col w="fill" gap="4" align="top-left">
          <row w="fill" gap="8" align="middle-left">
            <text id="etime" text-style="TitleSmall" value="00:00" color="$on-surface" />
            <text
              id="estatus"
              text-style="Overline"
              value="STATUS"
              color="$on-surface-variant"
              text-case="uppercase"
            />
            <row
              id="enew"
              role="badge"
              h="18"
              radius="$r-xs"
              fill="$primary-container"
              p="0 6"
              align="middle-center"
            >
              <text text-style="Overline" value="NEW" color="$on-primary-container" />
            </row>
          </row>
          <text id="emsg" text-style="BodySmall" value="Message" color="$on-surface-variant" />
        </col>
      </row>
    </component>
  </components>
  <col w="360" fill="$bg">
    <!-- system status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelMedium" value="9:41" color="$on-surface" />
      <row gap="6" align="middle-right">
        <img
          src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23E3E2E9"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23E3E2E9" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23E3E2E9"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- M3 small top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23E3E2E9"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Service status" color="$on-surface" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/refresh-rounded.svg?color=%23C4C6D0"
          w="24"
          h="24"
        />
      </row>
    </row>
    <!-- Live / History segmented control -->
    <col w="360" p="4 16 0 16">
      <row
        role="segmented-control"
        w="328"
        h="40"
        radius="$r-full"
        fill="none"
        border="1 $outline-variant"
        clip="true"
        align="middle-left"
      >
        <row w="fill" h="40" fill="$primary-container" gap="6" align="middle-center">
          <ellipse w="7" h="7" fill="$on-primary-container" />
          <text text-style="LabelLarge" value="Live" color="$on-primary-container" />
        </row>
        <row w="fill" h="40" align="middle-center">
          <text text-style="LabelLarge" value="History" color="$on-surface-variant" />
        </row>
      </row>
    </col>
    <!-- HERO status banner -->
    <col w="360" p="16 16 0 16">
      <col
        role="banner"
        w="328"
        radius="$r-lg"
        fill="$surface-container"
        border="1 $outline-variant"
        p="16"
        gap="16"
      >
        <row w="296" gap="12" align="top-left">
          <row w="44" h="44" radius="$r-full" fill="$primary-container" align="middle-center">
            <img
              src="https://api.iconify.design/material-symbols/warning-rounded.svg?color=%23D5E3FF"
              w="24"
              h="24"
            />
          </row>
          <col w="fill" gap="4" align="top-left">
            <row w="fill" gap="8" align="middle-left">
              <text text-style="Section" value="ACTIVE INCIDENT" color="$primary" text-case="uppercase" />
              <row
                role="badge"
                h="20"
                radius="$r-xs"
                fill="$surface-container-high"
                p="0 7"
                align="middle-center"
              >
                <text text-style="Overline" value="INC-2481" color="$on-surface-variant" />
              </row>
            </row>
            <text text-style="TitleLarge" value="Elevated webhook delivery latency" color="$on-surface" />
          </col>
        </row>
        <row w="296" gap="8" align="middle-left">
          <row role="badge" h="24" radius="$r-full" fill="$primary-container" p="0 10" align="middle-center">
            <text text-style="LabelMedium" value="Degraded" color="$on-primary-container" />
          </row>
          <text text-style="BodySmall" value="Started 14:02 UTC" color="$on-surface-variant" />
          <ellipse w="3" h="3" fill="$outline" />
          <text text-style="BodySmall" value="Auto-detected" color="$on-surface-variant" />
        </row>
        <rect role="divider" w="296" h="1" fill="$outline-variant" />
        <row w="296" gap="12" align="top-left">
          <instance component="comp-stat" val="~90s" label="Avg delay" />
          <instance component="comp-stat" val="1,240" label="Endpoints" />
          <instance component="comp-stat" val="4.2%" label="Error rate" />
        </row>
        <col w="296" gap="8" align="top-left">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelLarge" value="Delivery success" color="$on-surface" />
            <text text-style="LabelLarge" value="87%" color="$primary" />
          </row>
          <frame w="296" h="8" radius="$r-full" clip="true">
            <rect x="0" y="0" w="296" h="8" radius="$r-full" fill="$track" />
            <rect x="0" y="0" w="258" h="8" radius="$r-full" fill="$primary" />
          </frame>
        </col>
        <row role="button" w="296" h="48" radius="$r-full" fill="$primary" gap="8" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/refresh-rounded.svg?color=%23003061"
            w="20"
            h="20"
          />
          <text text-style="LabelLarge" value="Retry connection" color="$on-primary" />
        </row>
      </col>
    </col>
    <!-- AFFECTED COMPONENTS -->
    <col w="360" p="24 16 0 16" gap="10">
      <text
        text-style="Section"
        value="AFFECTED COMPONENTS"
        color="$on-surface-variant"
        text-case="uppercase"
        p="0 0 0 2"
      />
      <row w="328" gap="8" align="middle-left">
        <instance component="comp-chip" label="Webhooks" />
        <instance component="comp-chip" label="Scheduler" />
        <instance component="comp-chip" label="Event API" />
      </row>
    </col>
    <!-- INCIDENT TIMELINE -->
    <col w="360" p="24 16 0 16" gap="10">
      <row w="fill" gap="auto" align="middle-left">
        <text
          text-style="Section"
          value="INCIDENT TIMELINE"
          color="$on-surface-variant"
          text-case="uppercase"
        />
        <text text-style="LabelMedium" value="4 updates" color="$on-surface-variant" />
      </row>
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14 6 14" gap="0">
        <instance
          component="comp-timeline"
          time="14:47"
          status="Monitoring"
          msg="Latency is recovering. Delivery success is climbing back toward the baseline."
          isnew="true"
          connector="true"
        />
        <instance
          component="comp-timeline"
          time="14:31"
          status="Identified"
          msg="Root cause traced to a saturated delivery queue in us-east-1. Scaling workers now."
          isnew="false"
          connector="true"
        />
        <instance
          component="comp-timeline"
          time="14:12"
          status="Investigating"
          msg="Engineers are investigating elevated queue times on webhook delivery."
          isnew="false"
          connector="true"
        />
        <instance
          component="comp-timeline"
          time="14:02"
          status="Detected"
          msg="Automated monitor flagged delivery latency above the 60s threshold."
          isnew="false"
          connector="false"
        />
      </col>
    </col>
    <!-- WHILE YOU WAIT -->
    <col w="360" p="24 16 24 16" gap="10">
      <text
        text-style="Section"
        value="WHILE YOU WAIT"
        color="$on-surface-variant"
        text-case="uppercase"
        p="0 0 0 2"
      />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="4 14" gap="0">
        <row w="300" h="hug" gap="16" align="middle-left" p="12 0">
          <img
            src="https://api.iconify.design/material-symbols/notifications-outline-rounded.svg?color=%23C4C6D0"
            w="22"
            h="22"
          />
          <col w="fill" gap="1" align="middle-left">
            <text text-style="BodyLarge" value="Subscribe to updates" color="$on-surface" />
            <text
              text-style="BodySmall"
              value="We'll notify you the moment it resolves"
              color="$on-surface-variant"
            />
          </col>
          <frame w="52" h="32">
            <rect x="0" y="4" w="52" h="24" radius="12" fill="$primary" />
            <ellipse x="26" y="6" w="20" h="20" fill="$on-primary" />
          </frame>
        </row>
        <rect role="divider" w="300" h="1" fill="$outline-variant" />
        <row w="300" h="hug" gap="14" align="middle-left" p="16 1">
          <img
            src="https://api.iconify.design/material-symbols/open-in-new-rounded.svg?color=%23C4C6D0"
            w="22"
            h="22"
          />
          <text w="fill" text-style="BodyLarge" value="Open full status page" color="$on-surface" />
          <img
            src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23C4C6D0"
            w="22"
            h="22"
          />
        </row>
        <rect role="divider" w="300" h="1" fill="$outline-variant" />
        <row w="300" h="hug" gap="14" align="middle-left" p="16 1">
          <img
            src="https://api.iconify.design/material-symbols/support-agent-rounded.svg?color=%23C4C6D0"
            w="22"
            h="22"
          />
          <col w="fill" gap="1" align="middle-left">
            <text text-style="BodyLarge" value="Contact support" color="$on-surface" />
            <text
              text-style="BodySmall"
              value="Priority response on Pro &amp; Scale plans"
              color="$on-surface-variant"
            />
          </col>
          <img
            src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23C4C6D0"
            w="22"
            h="22"
          />
        </row>
      </col>
    </col>
    <!-- M3 bottom navigation : Status active -->
    <row role="tab-bar" w="fill" h="80" fill="$surface-container" p="12 0 16 0" gap="auto" align="top-center">
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/home-outline-rounded.svg?color=%23C4C6D0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Home" color="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$primary-container" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/monitor-heart-rounded.svg?color=%23D5E3FF"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Status" color="$on-surface" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/notifications-outline-rounded.svg?color=%23C4C6D0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Alerts" color="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/account-circle-outline-rounded.svg?color=%23C4C6D0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Account" color="$on-surface-variant" />
      </col>
    </row>
  </col>
</gui>
```