---
title: "Grit — Kettlebell EMOM (Active Workout)"
platform: android
slug: grit-kettlebell-emom-active-workout
screens: ["workout"]
domains: ["fitness"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "badge", "card", "divider", "stepper", "table"]
score: {clean: 100, consistent: 78, accessible: 76, comprehensible: 43}
url: https://gui.farm/android/grit-kettlebell-emom-active-workout
raw: https://gui.farm/android/grit-kettlebell-emom-active-workout/design.guix
download: https://gui.farm/android/grit-kettlebell-emom-active-workout.gui
---

# Grit — Kettlebell EMOM (Active Workout)

A live in-workout session player for an Android kettlebell EMOM class, showing the running timer, block progress, the current exercise with rep/weight steppers and a set-logging table, live heart-rate zone, and the up-next exercise.

- **Live preview:** https://gui.farm/android/grit-kettlebell-emom-active-workout
- **Raw source:** https://gui.farm/android/grit-kettlebell-emom-active-workout/design.guix
- **Download (.gui):** https://gui.farm/android/grit-kettlebell-emom-active-workout.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Grit — Kettlebell EMOM (Active Workout)">
  <tokens>
    <color name="bg" value="#F7F1F4" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-variant" value="#F1E7EC" />
    <color name="on-surface" value="#1D1A1C" />
    <color name="on-surface-variant" value="#574E52" />
    <color name="outline" value="#6E646A" />
    <color name="outline-variant" value="#E5DBDF" />
    <color name="track" value="#ECE1E6" />
    <color name="primary" value="#B3164B" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="primary-text" value="#A3124E" />
    <color name="primary-container" value="#FFD9E3" />
    <color name="on-primary-container" value="#3F0021" />
    <color name="z1" value="#FBE0EB" />
    <color name="z2" value="#F5A9C4" />
    <color name="z3" value="#EA6398" />
    <color name="z4" value="#C21E5E" />
    <color name="z5" value="#7C0E38" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="18" />
    <number name="r-xl" value="26" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Overline" font-family="Roboto" font-size="10" font-weight="700" line-height="14" letter-spacing="0.8" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="15" letter-spacing="0.3" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" letter-spacing="0.3" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="BodySmall" font-family="Roboto" font-size="13" font-weight="400" line-height="18" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Numeral" font-family="Roboto" font-size="14" font-weight="500" line-height="18" />
    <text-style name="NumeralBold" font-family="Roboto" font-size="14" font-weight="700" line-height="18" />
    <text-style name="TitleSmall" font-family="Roboto" font-size="15" font-weight="600" line-height="20" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="22" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="600" line-height="28" letter-spacing="-0.2" />
    <text-style name="StatNum" font-family="Roboto" font-size="20" font-weight="700" line-height="24" />
    <text-style name="HrNum" font-family="Roboto" font-size="34" font-weight="700" line-height="38" letter-spacing="-0.5" />
    <text-style name="Display" font-family="Roboto" font-size="40" font-weight="700" line-height="44" letter-spacing="-1.0" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" 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=%231D1A1C" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231D1A1C" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231D1A1C" w="15" h="15" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 4" gap="4" align="middle-left">
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/close-rounded.svg?color=%231D1A1C" w="24" h="24" />
      </row>
      <col w="fill" gap="0" align="middle-left">
        <text text-style="TitleMedium" value="Grit" color="$on-surface" />
        <text text-style="LabelMedium" value="Kettlebell EMOM · Full Body" color="$on-surface-variant" />
      </col>
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/music-note-rounded.svg?color=%23574E52" w="23" h="23" />
      </row>
      <row role="button" w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/more-vert-rounded.svg?color=%23574E52" w="23" h="23" />
      </row>
    </row>
    <col w="360" p="6 16 0 16" gap="10">
      <row w="fill" gap="auto" align="middle-left">
        <row gap="8" align="bottom-left">
          <text text-style="TitleSmall" value="Block 3 of 6" color="$on-surface" />
          <text text-style="LabelMedium" value="Strength" color="$on-surface-variant" />
        </row>
        <row role="badge" h="22" radius="$r-full" fill="$primary-container" p="0 10" align="middle-center">
          <text text-style="Overline" value="EMOM" color="$on-primary-container" text-case="uppercase" />
        </row>
      </row>
      <row w="328" gap="5" align="middle-left">
        <rect w="50.5" h="6" radius="$r-full" fill="$primary" />
        <rect w="50.5" h="6" radius="$r-full" fill="$primary" />
        <frame w="50.5" h="6" radius="$r-full" clip="true">
          <rect x="0" y="0" w="50.5" h="6" radius="$r-full" fill="$track" />
          <rect x="0" y="0" w="25.25" h="6" radius="$r-full" fill="$primary" />
        </frame>
        <rect w="50.5" h="6" radius="$r-full" fill="$track" />
        <rect w="50.5" h="6" radius="$r-full" fill="$track" />
        <rect w="50.5" h="6" radius="$r-full" fill="$track" />
      </row>
    </col>
    <col w="360" p="16 16 0 16">
      <col role="card" w="328" radius="$r-xl" fill="$surface" border="1 $outline-variant" p="20" gap="16">
        <row w="fill" gap="auto" align="top-left">
          <col gap="2" align="top-left">
            <text text-style="Overline" value="ELAPSED" color="$on-surface-variant" text-case="uppercase" />
            <text text-style="Display" value="14:32" color="$on-surface" />
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="26" radius="$r-full" fill="$primary-container" p="0 12" align="middle-center">
              <text text-style="LabelMedium" value="SET 2 OF 3" color="$on-primary-container" />
            </row>
            <text text-style="LabelMedium" value="27:28 left" color="$on-surface-variant" />
          </col>
        </row>
        <col w="288" gap="8">
          <frame w="288" h="8" radius="$r-full" clip="true">
            <rect x="0" y="0" w="288" h="8" radius="$r-full" fill="$track" />
            <rect x="0" y="0" w="99.66" h="8" radius="$r-full" fill="$primary" />
          </frame>
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelMedium" value="34.6% complete" color="$primary-text" />
            <text text-style="LabelMedium" value="42:00 total" color="$on-surface-variant" />
          </row>
        </col>
        <rect role="divider" w="288" h="1" fill="$outline-variant" />
        <row w="288" gap="0" align="middle-left">
          <col w="fill" gap="3" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/local-fire-department-rounded.svg?color=%23A3124E" w="20" h="20" />
            <text text-style="StatNum" value="312" color="$on-surface" />
            <text text-style="LabelSmall" value="KCAL" color="$on-surface-variant" text-case="uppercase" />
          </col>
          <rect w="1" h="44" fill="$outline-variant" />
          <col w="fill" gap="3" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/ecg-heart-rounded.svg?color=%23A3124E" w="20" h="20" />
            <text text-style="StatNum" value="149" color="$on-surface" />
            <text text-style="LabelSmall" value="AVG BPM" color="$on-surface-variant" text-case="uppercase" />
          </col>
          <rect w="1" h="44" fill="$outline-variant" />
          <col w="fill" gap="3" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/exercise-rounded.svg?color=%23A3124E" w="20" h="20" />
            <text text-style="StatNum" value="148" color="$on-surface" />
            <text text-style="LabelSmall" value="REPS" color="$on-surface-variant" text-case="uppercase" />
          </col>
        </row>
      </col>
    </col>
    <col w="360" p="16 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline-variant" clip="true" gap="0">
        <frame w="328" h="150" clip="true">
          <img src="https://images.unsplash.com/photo-1706029831387-fd8bc3d27d01?w=656&amp;h=300&amp;fit=crop&amp;auto=format&amp;q=70" w="328" h="150" />
          <row x="12" y="12" role="badge" h="26" radius="$r-full" fill="$primary" p="0 12" gap="6" align="middle-center">
            <ellipse w="7" h="7" radius="$r-full" fill="$on-primary" />
            <text text-style="LabelMedium" value="RECORDING" color="$on-primary" />
          </row>
        </frame>
        <col w="328" p="16" gap="14">
          <row w="fill" gap="auto" align="top-left">
            <col gap="3" align="top-left">
              <text text-style="Overline" value="CURRENT EXERCISE" color="$primary-text" text-case="uppercase" />
              <text text-style="TitleLarge" value="Goblet Squat" color="$on-surface" />
              <row gap="6" align="middle-left">
                <text text-style="BodyMedium" value="12 reps" color="$on-surface-variant" />
                <ellipse w="3" h="3" radius="$r-full" fill="$outline" />
                <text text-style="BodyMedium" value="35 lb" color="$on-surface-variant" />
                <ellipse w="3" h="3" radius="$r-full" fill="$outline" />
                <text text-style="BodyMedium" value="tempo 3-1-1" color="$on-surface-variant" />
              </row>
            </col>
            <row gap="6" align="middle-right">
              <ellipse w="10" h="10" radius="$r-full" fill="$primary" />
              <ellipse w="12" h="12" radius="$r-full" fill="$primary-container" border="2 $primary" />
              <ellipse w="10" h="10" radius="$r-full" fill="$track" />
            </row>
          </row>
          <row w="296" gap="12" align="middle-left">
            <row role="stepper" w="fill" h="52" radius="$r-md" fill="$surface-variant" p="0 6" gap="auto" align="middle-center">
              <row role="button" w="40" h="40" radius="$r-full" fill="$surface" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%231D1A1C" w="22" h="22" />
              </row>
              <col gap="0" align="middle-center">
                <text text-style="TitleMedium" value="12" color="$on-surface" />
                <text text-style="LabelSmall" value="REPS" color="$on-surface-variant" text-case="uppercase" />
              </col>
              <row role="button" w="40" h="40" radius="$r-full" fill="$primary" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFFFFF" w="22" h="22" />
              </row>
            </row>
            <row role="stepper" w="fill" h="52" radius="$r-md" fill="$surface-variant" p="0 6" gap="auto" align="middle-center">
              <row role="button" w="40" h="40" radius="$r-full" fill="$surface" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%231D1A1C" w="22" h="22" />
              </row>
              <col gap="0" align="middle-center">
                <text text-style="TitleMedium" value="35 lb" color="$on-surface" />
                <text text-style="LabelSmall" value="WEIGHT" color="$on-surface-variant" text-case="uppercase" />
              </col>
              <row role="button" w="40" h="40" radius="$r-full" fill="$primary" align="middle-center">
                <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23FFFFFF" w="22" h="22" />
              </row>
            </row>
          </row>
          <col role="table" w="296" radius="$r-md" border="1 $outline-variant" clip="true" gap="0">
            <row w="296" h="34" fill="$surface-variant" p="0 14" gap="0" align="middle-left">
              <row w="fill" align="middle-left"><text text-style="Overline" value="SET" color="$on-surface-variant" /></row>
              <row w="74" align="middle-right"><text text-style="Overline" value="WEIGHT" color="$on-surface-variant" /></row>
              <row w="60" align="middle-right"><text text-style="Overline" value="REPS" color="$on-surface-variant" /></row>
              <row w="34" align="middle-right">
                <img src="https://api.iconify.design/material-symbols/task-alt-rounded.svg?color=%23574E52" w="14" h="14" />
              </row>
            </row>
            <row w="296" h="40" p="0 14" gap="0" align="middle-left">
              <row w="fill" align="middle-left"><text text-style="LabelLarge" value="W" color="$on-surface-variant" /></row>
              <row w="74" align="middle-right"><text text-style="Numeral" value="20 lb" color="$on-surface-variant" /></row>
              <row w="60" align="middle-right"><text text-style="Numeral" value="10" color="$on-surface-variant" /></row>
              <row w="34" align="middle-right">
                <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23A3124E" w="18" h="18" />
              </row>
            </row>
            <rect role="divider" w="296" h="1" fill="$outline-variant" />
            <row w="296" h="40" p="0 14" gap="0" align="middle-left">
              <row w="fill" align="middle-left"><text text-style="LabelLarge" value="1" color="$on-surface" /></row>
              <row w="74" align="middle-right"><text text-style="Numeral" value="35 lb" color="$on-surface" /></row>
              <row w="60" align="middle-right"><text text-style="Numeral" value="12" color="$on-surface" /></row>
              <row w="34" align="middle-right">
                <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%23A3124E" w="18" h="18" />
              </row>
            </row>
            <rect role="divider" w="296" h="1" fill="$outline-variant" />
            <row w="296" h="44" fill="$primary-container" p="0 14" gap="0" align="middle-left">
              <row w="fill" gap="8" align="middle-left">
                <text text-style="NumeralBold" value="2" color="$on-primary-container" />
                <row role="badge" h="18" radius="$r-full" fill="$primary" p="0 8" align="middle-center">
                  <text text-style="Overline" value="ACTIVE" color="$on-primary" />
                </row>
              </row>
              <row w="74" align="middle-right"><text text-style="NumeralBold" value="35 lb" color="$on-primary-container" /></row>
              <row w="60" align="middle-right"><text text-style="NumeralBold" value="12" color="$on-primary-container" /></row>
              <row w="34" align="middle-right">
                <ellipse w="18" h="18" radius="$r-full" border="2 $primary" />
              </row>
            </row>
            <rect role="divider" w="296" h="1" fill="$outline-variant" />
            <row w="296" h="40" p="0 14" gap="0" align="middle-left">
              <row w="fill" align="middle-left"><text text-style="LabelLarge" value="3" color="$on-surface-variant" /></row>
              <row w="74" align="middle-right"><text text-style="Numeral" value="40 lb" color="$on-surface-variant" /></row>
              <row w="60" align="middle-right"><text text-style="Numeral" value="10" color="$on-surface-variant" /></row>
              <row w="34" align="middle-right">
                <ellipse w="16" h="16" radius="$r-full" border="1.5 $outline" />
              </row>
            </row>
          </col>
        </col>
      </col>
    </col>
    <col w="360" p="16 16 0 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline-variant" p="16" gap="14">
        <row w="fill" gap="auto" align="top-left">
          <col gap="2" align="top-left">
            <text text-style="Overline" value="HEART RATE" color="$on-surface-variant" text-case="uppercase" />
            <row gap="6" align="bottom-left">
              <text text-style="HrNum" value="156" color="$on-surface" />
              <text text-style="LabelMedium" value="bpm" color="$on-surface-variant" />
            </row>
          </col>
          <col gap="6" align="top-right">
            <row role="badge" h="26" radius="$r-full" fill="$z4" p="0 12" align="middle-center">
              <text text-style="LabelMedium" value="ZONE 4 · THRESHOLD" color="$on-primary" />
            </row>
            <text text-style="LabelMedium" value="Max 186 bpm" color="$on-surface-variant" />
          </col>
        </row>
        <frame w="296" h="14">
          <rect x="0" y="1" w="57.6" h="12" radius="$r-sm" fill="$z1" />
          <rect x="59.6" y="1" w="57.6" h="12" fill="$z2" />
          <rect x="119.2" y="1" w="57.6" h="12" fill="$z3" />
          <rect x="178.8" y="1" w="57.6" h="12" fill="$z4" />
          <rect x="238.4" y="1" w="57.6" h="12" radius="$r-sm" fill="$z5" />
          <ellipse x="193.69" y="0" w="14" h="14" radius="$r-full" fill="$surface" border="3 $on-surface" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelSmall" value="Z1" color="$on-surface-variant" />
          <text text-style="LabelSmall" value="Z2" color="$on-surface-variant" />
          <text text-style="LabelSmall" value="Z3" color="$on-surface-variant" />
          <text text-style="LabelSmall" value="Z4" color="$primary-text" />
          <text text-style="LabelSmall" value="Z5" color="$on-surface-variant" />
        </row>
      </col>
    </col>
    <col w="360" p="16 16 20 16">
      <row role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline-variant" p="12" gap="12" align="middle-left">
        <frame w="56" h="56" radius="$r-md" clip="true">
          <img src="https://images.unsplash.com/photo-1754839004013-0276d56bc0e7?w=160&amp;h=160&amp;fit=crop&amp;auto=format&amp;q=70" w="56" h="56" />
        </frame>
        <col w="fill" gap="2" align="middle-left">
          <text text-style="Overline" value="UP NEXT" color="$on-surface-variant" text-case="uppercase" />
          <text text-style="TitleMedium" value="Kettlebell Swing" color="$on-surface" />
          <text text-style="LabelMedium" value="40 sec · x20 · rest 60 sec after" color="$on-surface-variant" />
        </col>
        <row role="button" w="40" h="40" radius="$r-full" fill="$surface-variant" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%231D1A1C" w="22" h="22" />
        </row>
      </row>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $outline-variant">
      <row w="fill" h="76" p="0 16" gap="12" align="middle-left">
        <row role="button" w="60" h="56" radius="$r-full" fill="$surface-variant" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/pause-rounded.svg?color=%231D1A1C" w="26" h="26" />
        </row>
        <row role="button" w="fill" h="56" radius="$r-full" fill="$primary" gap="8" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="22" h="22" />
          <text text-style="TitleMedium" value="Complete set" color="$on-primary" />
        </row>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$outline" />
      </row>
    </col>
  </col>
</gui>

```