---
title: "Ridgeline Cycles — Repair Thread"
platform: android
slug: ridgeline-cycles-repair-thread
screens: ["chat"]
domains: ["crm"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "avatar", "chip", "card", "badge", "button", "toolbar", "text-field"]
score: {clean: 100, consistent: 87, accessible: 77, comprehensible: 23}
url: https://gui.farm/android/ridgeline-cycles-repair-thread
raw: https://gui.farm/android/ridgeline-cycles-repair-thread/design.guix
download: https://gui.farm/android/ridgeline-cycles-repair-thread.gui
---

# Ridgeline Cycles — Repair Thread

A customer messaging thread with a bike shop, covering photos, a voice note and an approvable repair

- **Live preview:** https://gui.farm/android/ridgeline-cycles-repair-thread
- **Raw source:** https://gui.farm/android/ridgeline-cycles-repair-thread/design.guix
- **Download (.gui):** https://gui.farm/android/ridgeline-cycles-repair-thread.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Ridgeline Cycles — Repair Thread">
  <tokens>
    <!-- Material 3 dark, cool slate ground so the photo and the waveform carry -->
    <color name="surface" value="#101418" />
    <color name="surface-container" value="#191E23" />
    <color name="surface-container-high" value="#242A30" />
    <color name="surface-container-highest" value="#2E353B" />
    <color name="on-surface" value="#E0E3E7" />
    <color name="on-surface-variant" value="#A9B2BA" />
    <color name="outline" value="#8A939B" />
    <color name="outline-variant" value="#3C444B" />
    <color name="primary" value="#8FCDF4" />
    <color name="on-primary" value="#003549" />
    <color name="primary-container" value="#004D68" />
    <color name="on-primary-container" value="#C6E7FF" />
    <color name="quote" value="#003B51" />
    <color name="green" value="#7CD992" />
    <color name="scrim" value="#000000A6" />
    <number name="r-bubble" value="18" />
    <number name="r-sm" value="8" />
    <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="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>

  <!-- No scroll in .gui: the canvas expands to all content, so the root col hugs
       its children and the composer is the last flow child rather than an overlay.
       Bubbles themselves are left untagged — same convention the library uses for
       device chrome — since the confirmed role vocabulary has no bubble term. -->
  <col w="360" 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=%23E0E3E7" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23E0E3E7" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23E0E3E7" w="15" h="15" />
      </row>
    </row>

    <!-- M3 top app bar carrying the contact -->
    <row role="top-navigation-bar" w="fill" h="64" fill="$surface-container" p="0 4" gap="8" align="middle-left">
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23E0E3E7" w="24" h="24" />
      </row>
      <row role="avatar" w="40" h="40" radius="20" fill="$primary-container" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/directions-bike-rounded.svg?color=%23C6E7FF" w="22" h="22" />
      </row>
      <col w="fill" gap="1">
        <text text-style="TitleMedium" value="Ridgeline Cycles" fill="$on-surface" />
        <row gap="5" align="middle-left">
          <ellipse w="6" h="6" fill="$green" />
          <text text-style="LabelSmall" value="Open until 6 PM" fill="$on-surface-variant" />
        </row>
      </col>
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/call-rounded.svg?color=%23A9B2BA" w="22" h="22" />
      </row>
      <row w="44" h="44" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%23A9B2BA" w="22" h="22" />
      </row>
    </row>

    <col w="fill" p="12 12 16 12" gap="10">

      <!-- date divider -->
      <row w="fill" align="middle-center">
        <row role="chip" h="26" radius="$r-full" fill="$surface-container" p="0 12" align="middle-center">
          <text text-style="LabelSmall" value="TODAY" fill="$on-surface-variant" />
        </row>
      </row>

      <!-- outgoing : opening message -->
      <row w="fill" align="middle-right">
        <col w="248" radius="$r-bubble" fill="$primary-container" p="10 14" gap="2">
          <text w="fill" text-style="BodyMedium" value="Rear wheel started rubbing on the ride in this morning. Sounds like it's catching the pad every turn." fill="$on-primary-container" />
          <row w="fill" gap="4" align="middle-right">
            <text text-style="LabelSmall" value="9:12" fill="$primary" />
            <img src="https://api.iconify.design/material-symbols/done-all-rounded.svg?color=%238FCDF4" w="14" h="14" />
          </row>
        </col>
      </row>

      <!-- outgoing : photo attachment, timestamp on a scrim so it reads on any crop -->
      <row w="fill" align="middle-right">
        <frame w="220" h="164" radius="$r-bubble" clip="true" fill="$surface-container-high">
          <img x="0" y="0" w="220" h="164" fit="cover"
               src="https://images.unsplash.com/photo-1585495606318-23612f3e84ae?auto=format&amp;fit=crop&amp;w=440&amp;h=328&amp;q=80" />
          <row x="155" y="136" h="20" radius="$r-full" fill="$scrim" p="0 8" gap="4" align="middle-center">
            <text text-style="LabelSmall" value="9:12" fill="#FFFFFF" />
            <img src="https://api.iconify.design/material-symbols/done-all-rounded.svg?color=%23FFFFFF" w="13" h="13" />
          </row>
        </frame>
      </row>

      <!-- incoming : diagnosis -->
      <row w="fill" align="middle-left">
        <col w="252" radius="$r-bubble" fill="$surface-container-high" p="10 14" gap="2">
          <text w="fill" text-style="BodyMedium" value="That photo helps. Rim's out of true and you've snapped three spokes on the drive side. Give me ten minutes on the stand." fill="$on-surface" />
          <text w="fill" text-style="LabelSmall" value="9:19" fill="$on-surface-variant" align="right" />
        </col>
      </row>

      <!-- incoming : voice note. The waveform is 28 rects at varying heights,
           the first eleven tinted to show playback position. -->
      <row w="fill" align="middle-left">
        <row w="220" h="60" radius="$r-bubble" fill="$surface-container-high" p="0 14" gap="10" align="middle-center">
          <row w="36" h="36" radius="18" fill="$primary" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/play-arrow-rounded.svg?color=%23003549" w="22" h="22" />
          </row>
          <row w="110" h="28" gap="2" align="middle-center">
            <rect w="2" h="5" radius="1" fill="$primary" />
            <rect w="2" h="9" radius="1" fill="$primary" />
            <rect w="2" h="14" radius="1" fill="$primary" />
            <rect w="2" h="20" radius="1" fill="$primary" />
            <rect w="2" h="26" radius="1" fill="$primary" />
            <rect w="2" h="22" radius="1" fill="$primary" />
            <rect w="2" h="15" radius="1" fill="$primary" />
            <rect w="2" h="10" radius="1" fill="$primary" />
            <rect w="2" h="17" radius="1" fill="$primary" />
            <rect w="2" h="24" radius="1" fill="$primary" />
            <rect w="2" h="28" radius="1" fill="$primary" />
            <rect w="2" h="21" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="13" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="8" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="12" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="19" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="25" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="27" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="20" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="14" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="9" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="6" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="11" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="18" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="23" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="16" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="10" radius="1" fill="$on-surface-variant" />
            <rect w="2" h="6" radius="1" fill="$on-surface-variant" />
          </row>
          <text text-style="LabelSmall" value="0:14" fill="$on-surface-variant" />
        </row>
      </row>

      <!-- incoming : the estimate, a card inside the bubble -->
      <row w="fill" align="middle-left">
        <col role="card" w="268" radius="$r-bubble" fill="$surface-container-high" p="14" gap="10">
          <row w="fill" gap="8" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/receipt-long-rounded.svg?color=%238FCDF4" w="18" h="18" />
            <text w="fill" text-style="LabelLarge" value="Estimate #4182" fill="$on-surface" />
            <row role="badge" h="20" radius="$r-sm" fill="$surface-container-highest" p="0 7" align="middle-center">
              <text text-style="LabelSmall" value="Awaiting you" fill="$on-surface-variant" />
            </row>
          </row>

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

          <col w="fill" gap="7">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="BodyMedium" value="Rim true-up" fill="$on-surface-variant" />
              <text text-style="BodyMedium" value="$35" fill="$on-surface" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="BodyMedium" value="Spoke replacement × 3" fill="$on-surface-variant" />
              <text text-style="BodyMedium" value="$27" fill="$on-surface" />
            </row>
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="BodyMedium" value="Labour · 1 hr" fill="$on-surface-variant" />
              <text text-style="BodyMedium" value="$40" fill="$on-surface" />
            </row>
          </col>

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

          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelLarge" value="Total" fill="$on-surface" />
            <text text-style="TitleMedium" value="$102" fill="$on-surface" />
          </row>

          <row w="fill" gap="8">
            <row role="button" w="fill" h="40" radius="$r-full" fill="$primary" gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23003549" w="18" h="18" />
              <text text-style="LabelLarge" value="Approve" fill="$on-primary" />
            </row>
            <row role="button" w="fill" h="40" radius="$r-full" fill="none" border="1 $outline" align="middle-center">
              <text text-style="LabelLarge" value="Not yet" fill="$primary" />
            </row>
          </row>

          <text w="fill" text-style="LabelSmall" value="9:24" fill="$on-surface-variant" align="right" />
        </col>
      </row>

      <!-- outgoing : reply quoting one line of the estimate -->
      <row w="fill" align="middle-right">
        <col w="256" radius="$r-bubble" fill="$primary-container" p="10 12" gap="8">
          <row w="fill" radius="$r-sm" fill="$quote" p="8 10" gap="9" align="top-left">
            <rect w="3" h="fill" radius="2" fill="$primary" />
            <col w="fill" gap="2">
              <text text-style="LabelSmall" value="Estimate #4182" fill="$primary" />
              <text w="fill" max-lines="1" truncate="true" text-style="LabelSmall" value="Spoke replacement × 3 — $27" fill="$on-primary-container" />
            </col>
          </row>
          <text w="fill" text-style="BodyMedium" value="Do those match the black ones on the front wheel?" fill="$on-primary-container" />
          <row w="fill" gap="4" align="middle-right">
            <text text-style="LabelSmall" value="9:26" fill="$primary" />
            <img src="https://api.iconify.design/material-symbols/done-all-rounded.svg?color=%238FCDF4" w="14" h="14" />
          </row>
        </col>
      </row>

      <!-- incoming : short answer -->
      <row w="fill" align="middle-left">
        <col w="222" radius="$r-bubble" fill="$surface-container-high" p="10 14" gap="2">
          <text w="fill" text-style="BodyMedium" value="They do — same DT Swiss double-butted, black." fill="$on-surface" />
          <text w="fill" text-style="LabelSmall" value="9:27" fill="$on-surface-variant" align="right" />
        </col>
      </row>

      <!-- centred system notice, the pattern every messaging app uses for
           events that belong to neither side of the conversation -->
      <row w="fill" p="2 20" align="middle-center">
        <text w="fill" text-style="LabelSmall" align="center" value="Dev set pickup for today at 5:30 PM. We'll message you when it's back on the rack." fill="$on-surface-variant" />
      </row>

      <!-- typing indicator -->
      <row w="fill" align="middle-left">
        <row w="66" h="38" radius="$r-bubble" fill="$surface-container-high" gap="5" align="middle-center">
          <ellipse w="7" h="7" fill="$on-surface-variant" />
          <ellipse w="7" h="7" fill="$outline" />
          <ellipse w="7" h="7" fill="$outline-variant" />
        </row>
      </row>

    </col>

    <!-- ============ COMPOSER : last flow child ============ -->
    <col w="fill" fill="$surface-container">
      <row role="toolbar" w="fill" h="64" p="0 8" gap="6" align="middle-center">
        <row w="44" h="44" radius="22" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23A9B2BA" w="24" h="24" />
        </row>
        <row role="text-field" w="fill" h="48" radius="$r-full" fill="$surface-container-high" p="0 16" gap="10" align="middle-left">
          <text w="fill" text-style="BodyLarge" value="Message" fill="$on-surface-variant" />
          <img src="https://api.iconify.design/material-symbols/mood-rounded.svg?color=%23A9B2BA" w="20" h="20" />
        </row>
        <row w="44" h="44" radius="22" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/photo-camera-rounded.svg?color=%23A9B2BA" w="22" h="22" />
        </row>
        <row role="button" w="44" h="44" radius="22" fill="$primary" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/mic-rounded.svg?color=%23003549" w="22" h="22" />
        </row>
      </row>
      <row w="fill" h="26" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$on-surface-variant" />
      </row>
    </col>

  </col>
</gui>

```