---
title: "Tempo - Focus Session"
platform: android
slug: tempo-focus-session
screens: []
domains: ["productivity"]
style: "neumorphic"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "chip", "button", "segmented-control", "card", "tab-bar"]
score: {clean: 90, consistent: 73, accessible: 67, comprehensible: 41}
url: https://gui.farm/android/tempo-focus-session
raw: https://gui.farm/android/tempo-focus-session/design.guix
download: https://gui.farm/android/tempo-focus-session.gui
---

# Tempo - Focus Session

A neumorphic Android focus-timer screen showing an in-progress Pomodoro session with a soft-UI progress dial, session tracker, and playback controls.

- **Live preview:** https://gui.farm/android/tempo-focus-session
- **Raw source:** https://gui.farm/android/tempo-focus-session/design.guix
- **Download (.gui):** https://gui.farm/android/tempo-focus-session.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Tempo - Focus Session">
  <tokens>
    <color name="base" value="#ECE6EA" />
    <color name="inner" value="#E7E0E5" />
    <color name="groove" value="#D3C9D1" />
    <color name="line" value="#DAD2D8" />
    <color name="sh-dark" value="#C9BFC6" />
    <color name="sh-light" value="#FFFFFF" />
    <color name="ink" value="#231E28" />
    <color name="sub" value="#655C6B" />
    <color name="accent" value="#E1719F" />
    <color name="accent-strong" value="#B23168" />
    <color name="accent-deep" value="#992552" />
    <color name="accent-tint" value="#F6DEE9" />
    <color name="accent-ink" value="#FFFFFF" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="20" />
    <number name="r-el" value="14" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Wordmark" font-family="Roboto" font-size="20" font-weight="800" line-height="24" letter-spacing="-0.4" />
    <text-style name="NavSub" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style name="Chip" font-family="Roboto" font-size="12" font-weight="700" line-height="16" />
    <text-style name="SegOn" font-family="Roboto" font-size="13" font-weight="800" line-height="16" />
    <text-style name="SegOff" font-family="Roboto" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Caps" font-family="Roboto" font-size="11" font-weight="700" line-height="14" letter-spacing="1.4" />
    <text-style name="TaskName" font-family="Roboto" font-size="15" font-weight="700" line-height="20" letter-spacing="-0.2" />
    <text-style name="DialLabel" font-family="Roboto" font-size="12" font-weight="800" line-height="15" letter-spacing="2" />
    <text-style name="TimeBig" font-family="Roboto" font-size="50" font-weight="300" line-height="54" letter-spacing="-1.5" />
    <text-style name="TimeCap" font-family="Roboto" font-size="12" font-weight="500" line-height="16" letter-spacing="0.3" />
    <text-style name="Meta" font-family="Roboto" font-size="12" font-weight="600" line-height="16" />
    <text-style name="StatNum" font-family="Roboto" font-size="16" font-weight="800" line-height="20" letter-spacing="-0.2" />
    <text-style name="StatLabel" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="0.6" />
    <text-style name="TabOn" font-family="Roboto" font-size="10" font-weight="700" line-height="13" letter-spacing="0.2" />
    <text-style name="TabOff" font-family="Roboto" font-size="10" font-weight="500" line-height="13" letter-spacing="0.2" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="300 400 500 600 700 800" styles="normal" />
  </fonts>

  <col w="360" fill="$base">

    <!-- STATUS BAR (untagged device chrome) -->
    <row w="fill" h="28" p="0 18" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="7" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23231E28" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23231E28" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23231E28" w="15" h="15" />
      </row>
    </row>

    <!-- TOP NAV -->
    <row role="top-navigation-bar" w="fill" h="60" p="0 20" gap="auto" align="middle-left" fill="$base">
      <row gap="12" align="middle-left">
        <frame w="40" h="40" radius="13">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="5" y="5" radius="10" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-4" y="-4" radius="9" spread="0" color="$sh-light" />
          </appearance>
          <img abs="true" x="10" y="10" src="https://api.iconify.design/material-symbols/timer.svg?color=%23992552" w="20" h="20" />
        </frame>
        <col gap="1" align="middle-left">
          <text text-style="Wordmark" value="Tempo" fill="$ink" />
          <text text-style="NavSub" value="Focus timer" fill="$sub" />
        </col>
      </row>
      <row gap="10" align="middle-right">
        <row role="chip" p="9 13" radius="$r-pill" gap="6" align="middle-center">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
          </appearance>
          <img src="https://api.iconify.design/material-symbols/local-fire-department.svg?color=%23992552" w="15" h="15" />
          <text text-style="Chip" value="9" fill="$accent-deep" />
        </row>
        <frame role="button" w="40" h="40" radius="$r-pill">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
          </appearance>
          <img abs="true" x="10" y="10" src="https://api.iconify.design/material-symbols/tune.svg?color=%23655C6B" w="20" h="20" />
        </frame>
      </row>
    </row>

    <!-- CONTENT -->
    <col w="fill" p="16 20 22 20" gap="18" align="top-center">

      <!-- SEGMENTED MODE -->
      <row role="segmented-control" w="fill" h="48" p="5" gap="5" align="middle-center">
        <appearance>
          <fill type="color" value="$base" />
          <effect type="inner-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
          <effect type="inner-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
        </appearance>
        <row w="fill" h="fill" radius="$r-pill" align="middle-center">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="SegOn" value="Focus" fill="$accent-deep" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text text-style="SegOff" value="Short break" fill="$sub" />
        </row>
        <row w="fill" h="fill" align="middle-center">
          <text text-style="SegOff" value="Long break" fill="$sub" />
        </row>
      </row>

      <!-- FOCUSING ON -->
      <col gap="9" align="top-center">
        <text text-style="Caps" value="FOCUSING ON" fill="$accent-deep" align="center" />
        <row role="chip" p="10 16" radius="$r-pill" gap="9" align="middle-center">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="4" y="4" radius="8" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-3" y="-3" radius="7" spread="0" color="$sh-light" />
          </appearance>
          <img src="https://api.iconify.design/material-symbols/adjust.svg?color=%23992552" w="17" h="17" />
          <text text-style="TaskName" value="Draft Q3 board deck" fill="$ink" />
          <img src="https://api.iconify.design/material-symbols/edit.svg?color=%23655C6B" w="15" h="15" />
        </row>
      </col>

      <!-- DIAL -->
      <frame w="248" h="248">
        <!-- raised bezel -->
        <frame abs="true" x="0" y="0" w="248" h="248" radius="124">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="16" y="16" radius="32" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-12" y="-12" radius="26" spread="0" color="$sh-light" />
          </appearance>
        </frame>
        <!-- progress dot ring (24 of 36 elapsed = 66.7%) -->
          <rect abs="true" x="120" y="19" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="138" y="21" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="155" y="25" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="170" y="33" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="185" y="43" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="197" y="55" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="207" y="69" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="215" y="85" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="219" y="102" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="221" y="120" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="219" y="138" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="215" y="155" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="207" y="170" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="197" y="185" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="185" y="197" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="170" y="207" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="155" y="215" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="138" y="219" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="120" y="221" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="102" y="219" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="85" y="215" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="69" y="207" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="55" y="197" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="43" y="185" w="8" h="8" radius="4" fill="$accent-strong" />
          <rect abs="true" x="33" y="171" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="25" y="155" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="21" y="138" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="19" y="120" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="21" y="102" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="25" y="85" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="33" y="69" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="43" y="55" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="55" y="43" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="69" y="33" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="85" y="25" w="8" h="8" radius="4" fill="$groove" />
          <rect abs="true" x="102" y="21" w="8" h="8" radius="4" fill="$groove" />
        <!-- recessed screen -->
        <frame abs="true" x="44" y="44" w="160" h="160" radius="80">
          <appearance>
            <fill type="color" value="$inner" />
            <effect type="inner-shadow" x="6" y="6" radius="13" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-5" y="-5" radius="11" spread="0" color="$sh-light" />
          </appearance>
        </frame>
        <!-- center readout -->
        <col abs="true" x="44" y="76" w="160" gap="5" align="top-center">
          <text text-style="DialLabel" value="FOCUS" fill="$accent-deep" align="center" />
          <text text-style="TimeBig" value="08:20" fill="$ink" align="center" />
          <text text-style="TimeCap" value="16:40 elapsed" fill="$sub" align="center" />
        </col>
      </frame>

      <!-- SESSION PROGRESS -->
      <col gap="10" align="top-center">
        <row gap="7" align="middle-center">
          <rect w="22" h="6" radius="3" fill="$accent-strong" />
          <rect w="22" h="6" radius="3" fill="$accent-strong" />
          <rect w="30" h="6" radius="3" fill="$accent-deep" />
          <rect w="22" h="6" radius="3" fill="$groove" />
        </row>
        <text text-style="Meta" value="Session 3 of 4  ·  Ends 9:49 AM" fill="$sub" align="center" />
      </col>

      <!-- CONTROLS -->
      <row w="fill" gap="20" p="4 0 0 0" align="middle-center">
        <frame role="button" w="58" h="58" radius="$r-pill">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="5" y="5" radius="11" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-4" y="-4" radius="9" spread="0" color="$sh-light" />
          </appearance>
          <img abs="true" x="17" y="17" src="https://api.iconify.design/material-symbols/restart-alt.svg?color=%23655C6B" w="24" h="24" />
        </frame>
        <frame role="button" w="80" h="80" radius="$r-pill">
          <appearance>
            <fill type="color" value="$accent-strong" />
            <effect type="drop-shadow" x="0" y="10" radius="20" spread="0" color="#B2316859" />
            <effect type="drop-shadow" x="-6" y="-6" radius="12" spread="0" color="#FFFFFF66" />
          </appearance>
          <img abs="true" x="26" y="26" src="https://api.iconify.design/material-symbols/pause.svg?color=%23FFFFFF" w="28" h="28" />
        </frame>
        <frame role="button" w="58" h="58" radius="$r-pill">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="drop-shadow" x="5" y="5" radius="11" spread="0" color="$sh-dark" />
            <effect type="drop-shadow" x="-4" y="-4" radius="9" spread="0" color="$sh-light" />
          </appearance>
          <img abs="true" x="17" y="17" src="https://api.iconify.design/material-symbols/skip-next.svg?color=%23655C6B" w="24" h="24" />
        </frame>
      </row>

      <!-- STATS -->
      <row w="fill" gap="12" p="6 0 0 0" align="top-center">
        <col role="card" w="fill" p="14 10" gap="4" radius="$r-el" align="top-center">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="inner-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="StatNum" value="2h 35m" fill="$ink" align="center" />
          <text text-style="StatLabel" value="FOCUSED" fill="$sub" align="center" />
        </col>
        <col role="card" w="fill" p="14 10" gap="4" radius="$r-el" align="top-center">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="inner-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="StatNum" value="6" fill="$ink" align="center" />
          <text text-style="StatLabel" value="SESSIONS" fill="$sub" align="center" />
        </col>
        <col role="card" w="fill" p="14 10" gap="4" radius="$r-el" align="top-center">
          <appearance>
            <fill type="color" value="$base" />
            <effect type="inner-shadow" x="3" y="3" radius="7" spread="0" color="$sh-dark" />
            <effect type="inner-shadow" x="-2" y="-2" radius="6" spread="0" color="$sh-light" />
          </appearance>
          <text text-style="StatNum" value="78%" fill="$ink" align="center" />
          <text text-style="StatLabel" value="OF GOAL" fill="$sub" align="center" />
        </col>
      </row>

    </col>

    <!-- TAB BAR (last flow child) -->
    <col w="fill" fill="$base" border="1 0 0 0 $line">
      <row role="tab-bar" w="fill" h="64" p="0 12" align="middle-center">
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/material-symbols/timer.svg?color=%23992552" w="23" h="23" />
          <text text-style="TabOn" value="Timer" fill="$accent-deep" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/material-symbols/checklist.svg?color=%23655C6B" w="23" h="23" />
          <text text-style="TabOff" value="Tasks" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/material-symbols/bar-chart.svg?color=%23655C6B" w="23" h="23" />
          <text text-style="TabOff" value="Stats" fill="$sub" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img src="https://api.iconify.design/material-symbols/person.svg?color=%23655C6B" w="23" h="23" />
          <text text-style="TabOff" value="Profile" fill="$sub" align="center" />
        </col>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$groove" />
      </row>
    </col>

  </col>
</gui>

```