---
title: "Overtone - Chromatic Tuner, D3"
platform: android
slug: overtone-chromatic-tuner-d3
screens: []
domains: ["music"]
style: "neumorphic"
fonts: ["Roboto", "Roboto Mono"]
roles: ["top-navigation-bar", "button", "badge", "card", "tab-bar"]
score: {clean: 96, consistent: 70, accessible: 68, comprehensible: 27}
url: https://gui.farm/android/overtone-chromatic-tuner-d3
raw: https://gui.farm/android/overtone-chromatic-tuner-d3/design.guix
download: https://gui.farm/android/overtone-chromatic-tuner-d3.gui
---

# Overtone - Chromatic Tuner, D3

A neumorphic dark-theme Android chromatic tuner where a guitarist tuning the D string reads the detected note and octave, a cents-deviation meter showing 18 cents flat, per-string tuning progress, a pitch-stability trace, and the A=440 reference.

- **Live preview:** https://gui.farm/android/overtone-chromatic-tuner-d3
- **Raw source:** https://gui.farm/android/overtone-chromatic-tuner-d3/design.guix
- **Download (.gui):** https://gui.farm/android/overtone-chromatic-tuner-d3.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Overtone - Chromatic Tuner, D3">
  <mode name="theme" values="light dark" default="dark" />
  <tokens>
    <color name="bg" value="#1A181D" />
    <color name="base" value="#232028" />
    <color name="well" value="#17151B" />
    <color name="sh-dark" value="#100E13" />
    <color name="sh-light" value="#322D3B" />
    <color name="track" value="#322E39" />
    <color name="ink" value="#F4EFF3" />
    <color name="sub" value="#BDB2C0" />
    <color name="faint" value="#9A8FA6" />
    <color name="accent" value="#EA6E92" />
    <color name="accent-text" value="#F5A9BE" />
    <color name="accent-ink" value="#2A0F17" />
    <number name="r-pill" value="999" />
    <number name="r-card" value="22" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Eyebrow"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1.6"
    />
    <text-style
      name="NavTitle"
      font-family="Roboto"
      font-size="16"
      font-weight="700"
      line-height="20"
      letter-spacing="-0.2"
    />
    <text-style name="NavSub" font-family="Roboto" font-size="12" font-weight="500" line-height="15" />
    <text-style
      name="Note"
      font-family="Roboto"
      font-size="104"
      font-weight="800"
      line-height="104"
      letter-spacing="-3"
    />
    <text-style
      name="Octave"
      font-family="Roboto"
      font-size="30"
      font-weight="700"
      line-height="34"
      letter-spacing="-0.5"
    />
    <text-style name="NeighNote" font-family="Roboto" font-size="17" font-weight="700" line-height="21" />
    <text-style
      name="StatusPill"
      font-family="Roboto"
      font-size="12"
      font-weight="800"
      line-height="15"
      letter-spacing="1.2"
    />
    <text-style name="FreqBig" font-family="Roboto Mono" font-size="15" font-weight="600" line-height="19" />
    <text-style
      name="FreqCap"
      font-family="Roboto"
      font-size="11"
      font-weight="600"
      line-height="14"
      letter-spacing="0.6"
    />
    <text-style
      name="CentBig"
      font-family="Roboto Mono"
      font-size="34"
      font-weight="700"
      line-height="36"
      letter-spacing="-1"
    />
    <text-style
      name="CentUnit"
      font-family="Roboto"
      font-size="11"
      font-weight="800"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style name="MeterLbl" font-family="Roboto Mono" font-size="11" font-weight="600" line-height="14" />
    <text-style
      name="CardTitle"
      font-family="Roboto"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="0.2"
    />
    <text-style name="StrOn" font-family="Roboto" font-size="17" font-weight="800" line-height="20" />
    <text-style name="StrOff" font-family="Roboto" font-size="16" font-weight="700" line-height="18" />
    <text-style name="StrSci" font-family="Roboto Mono" font-size="11" font-weight="600" line-height="14" />
    <text-style name="RefVal" font-family="Roboto Mono" font-size="15" font-weight="700" line-height="18" />
    <text-style
      name="RefCap"
      font-family="Roboto"
      font-size="11"
      font-weight="600"
      line-height="14"
      letter-spacing="0.4"
    />
    <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="400 500 600 700 800" styles="normal" />
    <font family="Roboto Mono" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <!-- 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=%23F4EFF3"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23F4EFF3" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23F4EFF3"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" h="60" p="0 18" gap="auto" align="middle-left" fill="$bg">
      <frame role="button" w="42" h="42" 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="11"
          y="11"
          src="https://api.iconify.design/material-symbols/mic-rounded.svg?color=%23EA6E92"
          w="20"
          h="20"
        />
      </frame>
      <col gap="2" align="middle-center">
        <text text-style="NavTitle" value="Chromatic Tuner" fill="$ink" align="center" />
        <text text-style="NavSub" value="Guitar, Standard" fill="$sub" align="center" />
      </col>
      <frame role="button" w="42" h="42" 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="11"
          y="11"
          src="https://api.iconify.design/material-symbols/tune-rounded.svg?color=%23BDB2C0"
          w="20"
          h="20"
        />
      </frame>
    </row>
    <col w="fill" p="10 20 20 20" gap="24" align="top-center">
      <!-- Note display -->
      <col w="fill" gap="12" align="top-center">
        <row w="fill" gap="16" align="middle-center">
          <text text-style="NeighNote" value="C#" fill="$faint" />
          <row gap="4" align="bottom-center">
            <text text-style="Note" value="D" fill="$ink" />
            <col gap="0" align="bottom-left" pb="16">
              <text text-style="Octave" value="3" fill="$accent-text" />
            </col>
          </row>
          <text text-style="NeighNote" value="D#" fill="$faint" />
        </row>
        <row gap="10" align="middle-center">
          <row role="badge" p="8 14" radius="$r-pill" gap="7" align="middle-center">
            <appearance>
              <fill type="color" value="$base" />
              <effect type="inner-shadow" x="2" y="2" radius="5" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
            </appearance>
            <img
              src="https://api.iconify.design/material-symbols/arrow-upward-rounded.svg?color=%23EA6E92"
              w="15"
              h="15"
            />
            <text text-style="StatusPill" value="FLAT, TIGHTEN" fill="$accent-text" />
          </row>
        </row>
      </col>
      <!-- Cents meter card -->
      <col role="card" w="fill" p="18 16 16 16" gap="12" radius="$r-card" align="top-center">
        <appearance>
          <fill type="color" value="$base" />
          <effect type="drop-shadow" x="8" y="8" radius="18" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-6" y="-6" radius="14" spread="0" color="$sh-light" />
        </appearance>
        <row w="fill" gap="auto" align="middle-left">
          <col gap="2" align="middle-left">
            <text text-style="CentBig" value="-18" fill="$accent" />
            <text text-style="CentUnit" value="CENTS" fill="$faint" />
          </col>
          <col gap="3" align="middle-right">
            <text text-style="FreqBig" value="145.3 Hz" fill="$ink" align="right" />
            <text text-style="FreqCap" value="target 146.8 Hz" fill="$sub" align="right" />
          </col>
        </row>
        <!-- meter -->
        <frame w="288" h="44">
          <!-- in-tune zone -->
          <rect abs="true" x="130" y="2" w="28" h="40" radius="8" fill="#EA6E921F" />
          <rect abs="true" x="3" y="11" w="2" h="22" radius="1" fill="$faint" />
          <rect abs="true" x="17" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="31" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="45" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="59" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="73" y="11" w="2" h="22" radius="1" fill="$faint" />
          <rect abs="true" x="87" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="101" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="115" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="129" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="157" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="171" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="185" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="199" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="213" y="11" w="2" h="22" radius="1" fill="$faint" />
          <rect abs="true" x="227" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="241" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="255" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="269" y="16" w="2" h="12" radius="1" fill="$track" />
          <rect abs="true" x="283" y="11" w="2" h="22" radius="1" fill="$faint" />
          <!-- center reference (0 cents) -->
          <rect abs="true" x="143" y="4" w="2" h="36" radius="1" fill="$sub" />
          <!-- live indicator (-18 cents) -->
          <rect abs="true" x="92" y="0" w="4" h="44" radius="2" fill="$accent" />
          <ellipse abs="true" x="88" y="-4" w="12" h="12" fill="$accent" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="MeterLbl" value="-50" fill="$faint" />
          <text text-style="MeterLbl" value="-25" fill="$faint" />
          <text text-style="MeterLbl" value="0" fill="$sub" align="center" />
          <text text-style="MeterLbl" value="+25" fill="$faint" />
          <text text-style="MeterLbl" value="+50" fill="$faint" />
        </row>
      </col>
      <!-- String selector -->
      <col w="fill" gap="12" align="top-center">
        <row w="fill" gap="auto" p="0 2" align="middle-left">
          <text text-style="Eyebrow" text-case="uppercase" value="STRINGS" fill="$faint" />
          <text text-style="Eyebrow" text-case="uppercase" value="2 OF 6 TUNED" fill="$accent-text" />
        </row>
        <row w="fill" gap="0" align="top-left">
          <col w="fill" gap="6" align="top-center">
            <frame w="40" h="40" radius="20">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
              </appearance>
              <text abs="true" x="0" y="11" w="40" text-style="StrOff" value="E" fill="$ink" align="center" />
              <frame abs="true" x="26" y="-2" w="16" h="16" radius="8">
                <appearance>
                  <fill type="color" value="$accent" />
                </appearance>
                <img
                  abs="true"
                  x="2"
                  y="2"
                  src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%232A0F17"
                  w="12"
                  h="12"
                />
              </frame>
            </frame>
            <text text-style="StrSci" value="E2" fill="$sub" align="center" />
          </col>
          <col w="fill" gap="6" align="top-center">
            <frame w="40" h="40" radius="20">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
              </appearance>
              <text abs="true" x="0" y="11" w="40" text-style="StrOff" value="A" fill="$ink" align="center" />
              <frame abs="true" x="26" y="-2" w="16" h="16" radius="8">
                <appearance>
                  <fill type="color" value="$accent" />
                </appearance>
                <img
                  abs="true"
                  x="2"
                  y="2"
                  src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%232A0F17"
                  w="12"
                  h="12"
                />
              </frame>
            </frame>
            <text text-style="StrSci" value="A2" fill="$sub" align="center" />
          </col>
          <col w="fill" gap="6" align="top-center">
            <frame w="40" h="40" radius="20">
              <appearance>
                <fill type="color" value="$accent" />
                <effect type="drop-shadow" x="0" y="4" radius="11" spread="0" color="#EA6E9259" />
              </appearance>
              <text
                abs="true"
                x="0"
                y="10"
                w="40"
                text-style="StrOn"
                value="D"
                fill="$accent-ink"
                align="center"
              />
            </frame>
            <text text-style="StrSci" value="D3" fill="$accent-text" align="center" />
          </col>
          <col w="fill" gap="6" align="top-center">
            <frame w="40" h="40" radius="20">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
              </appearance>
              <text abs="true" x="0" y="11" w="40" text-style="StrOff" value="G" fill="$sub" align="center" />
            </frame>
            <text text-style="StrSci" value="G3" fill="$faint" align="center" />
          </col>
          <col w="fill" gap="6" align="top-center">
            <frame w="40" h="40" radius="20">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
              </appearance>
              <text abs="true" x="0" y="11" w="40" text-style="StrOff" value="B" fill="$sub" align="center" />
            </frame>
            <text text-style="StrSci" value="B3" fill="$faint" align="center" />
          </col>
          <col w="fill" gap="6" align="top-center">
            <frame w="40" h="40" radius="20">
              <appearance>
                <fill type="color" value="$base" />
                <effect type="inner-shadow" x="3" y="3" radius="6" spread="0" color="$sh-dark" />
                <effect type="inner-shadow" x="-2" y="-2" radius="5" spread="0" color="$sh-light" />
              </appearance>
              <text abs="true" x="0" y="11" w="40" text-style="StrOff" value="E" fill="$sub" align="center" />
            </frame>
            <text text-style="StrSci" value="E4" fill="$faint" align="center" />
          </col>
        </row>
      </col>
      <!-- Pitch stability trace -->
      <col role="card" w="fill" p="14 16 16 16" gap="10" radius="$r-card" align="top-center">
        <appearance>
          <fill type="color" value="$base" />
          <effect type="drop-shadow" x="8" y="8" radius="18" spread="0" color="$sh-dark" />
          <effect type="drop-shadow" x="-6" y="-6" radius="14" spread="0" color="$sh-light" />
        </appearance>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="CardTitle" value="Pitch, last 3 seconds" fill="$ink" />
          <text text-style="FreqCap" value="settling" fill="$accent-text" />
        </row>
        <frame w="288" h="52" radius="12">
          <appearance>
            <fill type="color" value="$well" />
            <effect type="inner-shadow" x="0" y="2" radius="5" spread="0" color="$sh-dark" />
          </appearance>
          <img
            abs="true"
            x="4"
            y="4"
            src="https://gui.farm/tools/charts/line-chart.svg?data=0:-6,1:-13,2:-22,3:-15,4:-21,5:-17,6:-18&amp;line=%23EA6E92&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=hide&amp;grid=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=600&amp;height=110"
            w="280"
            h="44"
            fit="cover"
            radius="10"
            clip="true"
          />
        </frame>
      </col>
      <!-- Reference / instrument row -->
      <row w="fill" gap="12" align="middle-center">
        <row role="card" w="fill" h="56" p="0 8 0 14" gap="8" radius="18" align="middle-left">
          <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>
          <col w="fill" gap="2" align="middle-left">
            <text text-style="RefCap" value="REFERENCE" fill="$faint" />
            <text text-style="RefVal" value="A = 440 Hz" fill="$ink" />
          </col>
          <frame role="button" w="34" h="34" radius="17">
            <appearance>
              <fill type="color" value="$base" />
              <effect type="inner-shadow" x="2" y="2" radius="5" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
            </appearance>
            <img
              abs="true"
              x="7"
              y="7"
              src="https://api.iconify.design/material-symbols/remove-rounded.svg?color=%23BDB2C0"
              w="20"
              h="20"
            />
          </frame>
          <frame role="button" w="34" h="34" radius="17">
            <appearance>
              <fill type="color" value="$base" />
              <effect type="inner-shadow" x="2" y="2" radius="5" spread="0" color="$sh-dark" />
              <effect type="inner-shadow" x="-2" y="-2" radius="4" spread="0" color="$sh-light" />
            </appearance>
            <img
              abs="true"
              x="7"
              y="7"
              src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23EA6E92"
              w="20"
              h="20"
            />
          </frame>
        </row>
      </row>
    </col>
    <!-- Bottom tab bar (viewport-fixed, last flow child) -->
    <col w="fill" fill="$bg" border="1 0 0 0 $sh-dark">
      <row role="tab-bar" w="fill" h="62" p="0 14" align="middle-center">
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/graphic-eq-rounded.svg?color=%23EA6E92"
            w="23"
            h="23"
          />
          <text text-style="TabOn" value="Tuner" fill="$accent" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/queue-music-rounded.svg?color=%239A8FA6"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Tunings" fill="$faint" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/timer-rounded.svg?color=%239A8FA6"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Metronome" fill="$faint" align="center" />
        </col>
        <col w="fill" gap="4" align="top-center">
          <img
            src="https://api.iconify.design/material-symbols/settings-rounded.svg?color=%239A8FA6"
            w="23"
            h="23"
          />
          <text text-style="TabOff" value="Settings" fill="$faint" align="center" />
        </col>
      </row>
      <row w="fill" h="22" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$track" />
      </row>
    </col>
  </col>
</gui>
```