---
title: "Hearth — Group Chat"
platform: android
slug: hearth-group-chat
screens: ["chat"]
domains: ["social"]
style: "flat"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "avatar", "card", "hyperlink", "badge", "button", "text-field"]
score: {clean: 100, consistent: 88, accessible: 90, comprehensible: 28}
url: https://gui.farm/android/hearth-group-chat
raw: https://gui.farm/android/hearth-group-chat/design.guix
download: https://gui.farm/android/hearth-group-chat.gui
---

# Hearth — Group Chat

Group chat thread with an inline poll, reactions, and member presence.

- **Live preview:** https://gui.farm/android/hearth-group-chat
- **Raw source:** https://gui.farm/android/hearth-group-chat/design.guix
- **Download (.gui):** https://gui.farm/android/hearth-group-chat.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Hearth — Group Chat">
  <tokens>
    <color name="surface" value="#FCF6F2" />
    <color name="surface-container" value="#F3E9E2" />
    <color name="surface-container-high" value="#F7EFE9" />
    <color name="on-surface" value="#26170F" />
    <color name="on-surface-variant" value="#5A4636" />
    <color name="outline-variant" value="#E4D6CC" />
    <color name="primary" value="#9A4B2C" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="text-clay" value="#8A3E1F" />
    <color name="primary-container" value="#FBDDCB" />
    <color name="on-primary-container" value="#4A1E0C" />
    <color name="clay-soft" value="#D69B7C" />
    <color name="poll-track" value="#ECDDD2" />
    <color name="wave-muted" value="#C9B4A6" />
    <color name="avatar-brown" value="#7A4A2A" />
    <color name="avatar-slate" value="#495663" />
    <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="22" />
    <text-style name="TitleSmall" font-family="Roboto" font-size="15" font-weight="500" line-height="20" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" line-height="22" />
    <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" fill="$surface">

    <!-- 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" fill="$on-surface" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%2326170F" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%2326170F" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%2326170F" w="15" h="15" />
      </row>
    </row>

    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 4 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=%2326170F" w="24" h="24" />
      </row>
      <frame role="avatar" w="40" h="40" radius="20">
        <ellipse x="0" y="0" w="40" h="40" fill="$primary" />
        <text x="0" y="11" w="40" h="18" align="center" text-style="LabelLarge" value="DG" fill="$on-primary" />
      </frame>
      <col w="fill" p="0 0 0 8" gap="1">
        <text text-style="TitleMedium" value="Design Guild" fill="$on-surface" />
        <text text-style="LabelSmall" value="9 members · 3 online" fill="$on-surface-variant" />
      </col>
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/videocam-outline-rounded.svg?color=%2326170F" w="24" h="24" />
      </row>
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-vert.svg?color=%2326170F" w="24" h="24" />
      </row>
    </row>

    <!-- conversation -->
    <col w="360" p="8 16 14 16" gap="14">

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

      <!-- received: Priya, with avatar + name header -->
      <row w="fill" gap="8" align="top-left">
        <frame role="avatar" w="40" h="40" radius="20">
          <ellipse x="0" y="0" w="40" h="40" fill="$avatar-brown" />
          <text x="0" y="11" w="40" h="18" align="center" text-style="LabelLarge" value="P" fill="$on-primary" />
        </frame>
        <col gap="4">
          <row gap="8" align="bottom-left">
            <text text-style="LabelLarge" value="Priya Sharma" fill="$on-surface" />
            <text text-style="LabelSmall" value="9:12" fill="$on-surface-variant" />
          </row>
          <col max-width="264" radius="$r-lg" fill="$surface-container" p="10 14">
            <text text-style="BodyLarge" value="Hey all, let's lock Saturday. I dropped a poll for the spot." fill="$on-surface" />
          </col>
        </col>
      </row>

      <!-- received: Priya (grouped) shared photo -->
      <row w="fill" p="0 0 0 48">
        <frame w="248" h="150" radius="$r-lg" clip="true">
          <img x="0" y="0" w="248" h="150" fit="cover" src="https://images.unsplash.com/photo-1744561249162-c597c1670032?auto=format&amp;fit=crop&amp;w=496&amp;h=300&amp;q=80" />
        </frame>
      </row>

      <!-- received: Priya (grouped) poll card -->
      <row w="fill" p="0 0 0 48">
        <col role="card" w="272" radius="$r-lg" fill="$surface-container" p="14" gap="12">
          <row gap="6" align="middle-left">
            <img src="https://api.iconify.design/material-symbols/bar-chart-4-bars-rounded.svg?color=%238A3E1F" w="16" h="16" />
            <text text-style="LabelMedium" value="POLL · SELECT ONE" fill="$text-clay" />
          </row>
          <text text-style="TitleSmall" value="Where do we meet Saturday?" fill="$on-surface" />

          <!-- option 1 (winner) -->
          <col w="244" gap="6">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="BodyMedium" value="Rooftop at Alma" fill="$on-surface" />
              <text text-style="LabelLarge" value="55%" fill="$on-surface" />
            </row>
            <frame w="244" h="8" radius="$r-full" clip="true">
              <rect x="0" y="0" w="244" h="8" radius="$r-full" fill="$poll-track" />
              <rect x="0" y="0" w="134" h="8" radius="$r-full" fill="$primary" />
            </frame>
          </col>
          <!-- option 2 -->
          <col w="244" gap="6">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="BodyMedium" value="The Annex café" fill="$on-surface" />
              <text text-style="LabelLarge" value="30%" fill="$on-surface-variant" />
            </row>
            <frame w="244" h="8" radius="$r-full" clip="true">
              <rect x="0" y="0" w="244" h="8" radius="$r-full" fill="$poll-track" />
              <rect x="0" y="0" w="73" h="8" radius="$r-full" fill="$clay-soft" />
            </frame>
          </col>
          <!-- option 3 -->
          <col w="244" gap="6">
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="BodyMedium" value="Priya's studio" fill="$on-surface" />
              <text text-style="LabelLarge" value="15%" fill="$on-surface-variant" />
            </row>
            <frame w="244" h="8" radius="$r-full" clip="true">
              <rect x="0" y="0" w="244" h="8" radius="$r-full" fill="$poll-track" />
              <rect x="0" y="0" w="37" h="8" radius="$r-full" fill="$clay-soft" />
            </frame>
          </col>

          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelMedium" value="20 votes" fill="$on-surface-variant" />
            <text role="hyperlink" text-style="LabelLarge" value="View votes" fill="$text-clay" />
          </row>
        </col>
      </row>

      <!-- sent: me, reply-quote to poll + reactions -->
      <col w="fill" gap="6">
        <row w="fill" align="middle-right">
          <col max-width="264" radius="$r-lg" fill="$primary-container" p="8 12 10 12" gap="6">
            <row gap="8" align="top-left">
              <rect w="3" h="34" radius="$r-full" fill="$primary" />
              <col gap="2">
                <text text-style="LabelSmall" value="Priya · Poll" fill="$text-clay" />
                <text max-width="210" text-style="BodyMedium" value="Where do we meet Saturday?" fill="$on-primary-container" truncate="true" />
              </col>
            </row>
            <text text-style="BodyLarge" value="Rooftop gets my vote, best light for the group photo" fill="$on-primary-container" />
          </col>
        </row>
        <row w="fill" gap="6" align="middle-right">
          <row role="badge" h="28" radius="$r-full" fill="$surface-container" border="1 $outline-variant" p="0 10" gap="4" align="middle-center">
            <text text-style="BodyMedium" value="🌇" fill="$on-surface" />
            <text text-style="LabelMedium" value="4" fill="$on-surface" />
          </row>
          <row role="badge" h="28" radius="$r-full" fill="$surface-container" border="1 $outline-variant" p="0 10" gap="4" align="middle-center">
            <text text-style="BodyMedium" value="❤️" fill="$on-surface" />
            <text text-style="LabelMedium" value="2" fill="$on-surface" />
          </row>
        </row>
        <row w="fill" gap="4" align="middle-right">
          <text text-style="LabelSmall" value="9:15" fill="$on-surface-variant" />
          <img src="https://api.iconify.design/material-symbols/done-all-rounded.svg?color=%238A3E1F" w="16" h="16" />
        </row>
      </col>

      <!-- received: Marco, voice note -->
      <row w="fill" gap="8" align="top-left">
        <frame role="avatar" w="40" h="40" radius="20">
          <ellipse x="0" y="0" w="40" h="40" fill="$avatar-slate" />
          <text x="0" y="11" w="40" h="18" align="center" text-style="LabelLarge" value="M" fill="$on-primary" />
        </frame>
        <col gap="4">
          <row gap="8" align="bottom-left">
            <text text-style="LabelLarge" value="Marco Reyes" fill="$on-surface" />
            <text text-style="LabelSmall" value="9:18" fill="$on-surface-variant" />
          </row>
          <row radius="$r-lg" fill="$surface-container" p="10 12" gap="10" align="middle-left">
            <row role="button" w="36" h="36" radius="$r-full" fill="$primary" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/play-arrow-rounded.svg?color=%23FFFFFF" w="22" h="22" />
            </row>
            <row w="117" h="28" gap="3" align="middle-center">
              <rect w="3" h="10" radius="$r-full" fill="$primary" />
              <rect w="3" h="16" radius="$r-full" fill="$primary" />
              <rect w="3" h="22" radius="$r-full" fill="$primary" />
              <rect w="3" h="12" radius="$r-full" fill="$primary" />
              <rect w="3" h="26" radius="$r-full" fill="$primary" />
              <rect w="3" h="14" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="20" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="10" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="24" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="16" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="12" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="22" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="14" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="26" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="10" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="18" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="12" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="20" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="14" radius="$r-full" fill="$wave-muted" />
              <rect w="3" h="9" radius="$r-full" fill="$wave-muted" />
            </row>
            <text text-style="LabelMedium" value="0:06 / 0:24" fill="$on-surface-variant" />
          </row>
        </col>
      </row>

      <!-- typing indicator: Dana -->
      <row w="fill" gap="8" align="middle-left">
        <frame role="avatar" w="40" h="40" radius="20">
          <ellipse x="0" y="0" w="40" h="40" fill="$avatar-brown" />
          <text x="0" y="11" w="40" h="18" align="center" text-style="LabelLarge" value="D" fill="$on-primary" />
        </frame>
        <row radius="$r-lg" fill="$surface-container" p="12 14" gap="5" align="middle-center">
          <ellipse w="7" h="7" fill="$on-surface-variant" />
          <ellipse w="7" h="7" fill="$wave-muted" />
          <ellipse w="7" h="7" fill="$wave-muted" />
        </row>
        <text text-style="LabelSmall" value="Dana is typing…" fill="$on-surface-variant" />
      </row>

    </col>

    <!-- composer (viewport-fixed bar, last flow child) -->
    <col w="360">
      <line w="fill" fill="$outline-variant" />
      <row w="fill" fill="$surface" p="8 12 12 12" gap="8" align="middle-center">
        <row w="44" h="44" radius="$r-full" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%235A4636" w="26" h="26" />
        </row>
        <row role="text-field" w="fill" h="44" radius="$r-full" fill="$surface-container-high" border="1 $outline-variant" p="0 16" gap="8" align="middle-left">
          <text w="fill" text-style="BodyLarge" value="Message Design Guild" fill="$on-surface-variant" />
          <img src="https://api.iconify.design/material-symbols/mood-outline-rounded.svg?color=%235A4636" w="22" h="22" />
        </row>
        <row role="button" w="44" h="44" radius="$r-full" fill="$primary" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/send-rounded.svg?color=%23FFFFFF" w="22" h="22" />
        </row>
      </row>
    </col>

  </col>
</gui>

```