---
title: "Thread — Support Inbox"
platform: android
slug: thread-support-inbox-mobile-ios
screens: ["inbox"]
domains: ["crm"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "search-bar", "avatar", "chip", "card", "badge", "toast", "button", "floating-action-button", "tab-bar"]
score: {clean: 100, consistent: 90, accessible: 89, comprehensible: 54}
url: https://gui.farm/android/thread-support-inbox-mobile-ios
raw: https://gui.farm/android/thread-support-inbox-mobile-ios/design.guix
download: https://gui.farm/android/thread-support-inbox-mobile-ios.gui
---

# Thread — Support Inbox

A mobile customer support inbox for triaging, filtering and assigning conversations.

- **Live preview:** https://gui.farm/android/thread-support-inbox-mobile-ios
- **Raw source:** https://gui.farm/android/thread-support-inbox-mobile-ios/design.guix
- **Download (.gui):** https://gui.farm/android/thread-support-inbox-mobile-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Thread — Support Inbox">
  <tokens>
    <color name="surface" value="#F8FBF2" />
    <color name="surface-container" value="#EDF1E7" />
    <color name="surface-container-high" value="#E7EBE1" />
    <color name="inverse-surface" value="#2E322B" />
    <color name="on-inverse" value="#EFF2E9" />
    <color name="on-surface" value="#191D17" />
    <color name="on-surface-variant" value="#43483E" />
    <color name="outline-variant" value="#C3C8BC" />
    <color name="primary" value="#3B6939" />
    <color name="primary-container" value="#BCF0B4" />
    <color name="on-primary-container" value="#002204" />
    <color name="tertiary-container" value="#BCEBEC" />
    <color name="on-tertiary-container" value="#00201F" />
    <color name="error-container" value="#FFDAD6" />
    <color name="on-error-container" value="#410002" />
    <number name="r-xs" value="4" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" line-height="24" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <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="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="16" />
  </styles>

  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>

  <col w="360" h="800" fill="$surface">

    <!-- system status bar : device chrome, deliberately untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelSmall" value="9:41" fill="$on-surface" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23191D17" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23191D17" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23191D17" w="15" h="15" />
      </row>
    </row>

    <!-- M3 docked search bar acting as the top app bar -->
    <row role="top-navigation-bar" w="fill" h="72" p="0 16" align="middle-center">
      <row role="search-bar" w="328" h="52" radius="$r-full" fill="$surface-container-high" p="0 8 0 14" gap="10" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/menu-rounded.svg?color=%2343483E" w="22" h="22" />
        <text w="fill" text-style="BodyLarge" value="Search conversations" fill="$on-surface-variant" />
        <row role="avatar" w="34" h="34" radius="17" fill="$primary-container" align="middle-center">
          <text text-style="LabelMedium" value="JJ" fill="$on-primary-container" />
        </row>
      </row>
    </row>

    <frame w="360" h="620" clip>

      <col x="0" y="0" w="360" gap="10">

        <!-- filter chips -->
        <row w="360" p="6 16 0 16" gap="8" align="middle-left">
          <row role="chip" h="32" radius="$r-sm" fill="$primary-container" p="0 12" gap="6" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23002204" w="17" h="17" />
            <text text-style="LabelLarge" value="Unread" fill="$on-primary-container" />
          </row>
          <row role="chip" h="32" radius="$r-sm" fill="none" border="1 $outline-variant" p="0 12" align="middle-center">
            <text text-style="LabelLarge" value="Assigned to me" fill="$on-surface-variant" />
          </row>
          <row role="chip" h="32" radius="$r-sm" fill="none" border="1 $outline-variant" p="0 12" align="middle-center">
            <text text-style="LabelLarge" value="Urgent" fill="$on-surface-variant" />
          </row>
        </row>

        <row w="360" p="0 16" gap="auto" align="middle-left">
          <text text-style="LabelMedium" value="14 unread" fill="$on-surface-variant" />
          <row gap="5" align="middle-right">
            <text text-style="LabelMedium" value="Newest" fill="$on-surface-variant" />
            <img src="https://api.iconify.design/material-symbols/swap-vert-rounded.svg?color=%2343483E" w="17" h="17" />
          </row>
        </row>

        <!-- conversation list : each row is a filled M3 list container -->
        <col w="360" p="0 16" gap="6">

          <row role="card" w="328" radius="$r-md" fill="$surface-container" p="12 14" gap="12" align="top-left">
            <row role="avatar" w="40" h="40" radius="20" fill="$tertiary-container" align="middle-center">
              <text text-style="TitleMedium" value="MO" fill="$on-tertiary-container" />
            </row>
            <col w="fill" gap="2">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="TitleMedium" value="Maya Osei" fill="$on-surface" />
                <text text-style="LabelSmall" value="21:32" fill="$on-surface-variant" />
              </row>
              <text text-style="BodyMedium" font-weight="500" value="Refund not showing on statement" fill="$on-surface" />
              <text w="fill" max-lines="1" truncate text-style="BodyMedium" value="I was told it would land in 3 days but it has been nine" fill="$on-surface-variant" />
              <row gap="6" p="4 0 0 0" align="middle-left">
                <row role="badge" h="20" radius="$r-xs" fill="$error-container" p="0 6" align="middle-center">
                  <text text-style="LabelSmall" value="Urgent" fill="$on-error-container" />
                </row>
                <row role="badge" h="20" radius="$r-xs" fill="$surface-container-high" p="0 6" align="middle-center">
                  <text text-style="LabelSmall" value="Billing" fill="$on-surface-variant" />
                </row>
              </row>
            </col>
            <ellipse w="8" h="8" fill="$primary" />
          </row>

          <row role="card" w="328" radius="$r-md" fill="$surface-container" p="12 14" gap="12" align="top-left">
            <row role="avatar" w="40" h="40" radius="20" fill="$primary-container" align="middle-center">
              <text text-style="TitleMedium" value="DR" fill="$on-primary-container" />
            </row>
            <col w="fill" gap="2">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="TitleMedium" value="Dana Reyes" fill="$on-surface" />
                <text text-style="LabelSmall" value="20:58" fill="$on-surface-variant" />
              </row>
              <text text-style="BodyMedium" font-weight="500" value="Can I move my plan to annual?" fill="$on-surface" />
              <text w="fill" max-lines="1" truncate text-style="BodyMedium" value="Happy to prepay if the discount still applies this month" fill="$on-surface-variant" />
              <row gap="6" p="4 0 0 0" align="middle-left">
                <row role="badge" h="20" radius="$r-xs" fill="$surface-container-high" p="0 6" align="middle-center">
                  <text text-style="LabelSmall" value="Sales" fill="$on-surface-variant" />
                </row>
              </row>
            </col>
            <ellipse w="8" h="8" fill="$primary" />
          </row>

          <row w="328" radius="$r-md" p="12 14" gap="12" align="top-left">
            <row role="avatar" w="40" h="40" radius="20" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="TL" fill="$on-surface-variant" />
            </row>
            <col w="fill" gap="2">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="TitleMedium" value="Theo Lam" fill="$on-surface-variant" />
                <text text-style="LabelSmall" value="19:04" fill="$on-surface-variant" />
              </row>
              <text text-style="BodyMedium" value="Thanks, that sorted it" fill="$on-surface-variant" />
              <text w="fill" max-lines="1" truncate text-style="BodyMedium" value="Closing this out. Appreciate the quick turnaround." fill="$on-surface-variant" />
            </col>
          </row>

          <line w="328" fill="$outline-variant" />

          <row w="328" radius="$r-md" p="12 14" gap="12" align="top-left">
            <row role="avatar" w="40" h="40" radius="20" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="PN" fill="$on-surface-variant" />
            </row>
            <col w="fill" gap="2">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="TitleMedium" value="Priya Nair" fill="$on-surface-variant" />
                <text text-style="LabelSmall" value="Yesterday" fill="$on-surface-variant" />
              </row>
              <text text-style="BodyMedium" value="Invoice address change" fill="$on-surface-variant" />
              <text w="fill" max-lines="1" truncate text-style="BodyMedium" value="Sent over the new registered office details as requested" fill="$on-surface-variant" />
            </col>
          </row>

          <row w="328" radius="$r-md" p="12 14" gap="12" align="top-left">
            <row role="avatar" w="40" h="40" radius="20" fill="$surface-container-high" align="middle-center">
              <text text-style="TitleMedium" value="SK" fill="$on-surface-variant" />
            </row>
            <col w="fill" gap="2">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="TitleMedium" value="Sana Karim" fill="$on-surface-variant" />
                <text text-style="LabelSmall" value="Yesterday" fill="$on-surface-variant" />
              </row>
              <text text-style="BodyMedium" value="Export keeps timing out" fill="$on-surface-variant" />
              <text w="fill" max-lines="1" truncate text-style="BodyMedium" value="Only happens on the 90 day range, shorter ranges are fine" fill="$on-surface-variant" />
            </col>
          </row>

        </col>
      </col>

      <!-- snackbar : sits above the FAB, standard M3 placement -->
      <row role="toast" x="16" y="488" w="328" h="48" radius="$r-xs" fill="$inverse-surface" p="0 8 0 16" gap="8" align="middle-left">
        <text w="fill" text-style="BodyMedium" value="1 conversation archived" fill="$on-inverse" />
        <row role="button" h="36" radius="$r-sm" p="0 12" align="middle-center">
          <text text-style="LabelLarge" value="UNDO" fill="$primary-container" />
        </row>
      </row>

      <!-- FAB : 56dp, 16dp margins, M3 large corner radius -->
      <row role="floating-action-button" x="288" y="548" w="56" h="56" radius="$r-lg" fill="$primary-container" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/edit-outline-rounded.svg?color=%23002204" w="24" h="24" />
      </row>

    </frame>

    <!-- M3 bottom navigation : active destination gets a pill indicator -->
    <row role="tab-bar" w="fill" h="80" fill="$surface-container" p="12 0 0 0" gap="auto" align="top-center">
      <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/inbox-rounded.svg?color=%23002204" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Inbox" fill="$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/label-important-outline-rounded.svg?color=%2343483E" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Priority" fill="$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/group-outline-rounded.svg?color=%2343483E" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Team" fill="$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/settings-outline-rounded.svg?color=%2343483E" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Settings" fill="$on-surface-variant" />
      </col>
    </row>

  </col>
</gui>

```