---
title: "Echo — iOS Voice Recorder"
platform: ios
slug: echo-voice-recorder
screens: ["media-player"]
domains: ["productivity"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["top-navigation-bar", "button", "card", "badge", "segmented-control", "tab-bar"]
score: {clean: 99, consistent: 67, accessible: 83, comprehensible: 42}
url: https://gui.farm/ios/echo-voice-recorder
raw: https://gui.farm/ios/echo-voice-recorder/design.guix
download: https://gui.farm/ios/echo-voice-recorder.gui
---

# Echo — iOS Voice Recorder

A focused iOS voice recorder with live waveform visualization, recording controls, audio modes, and quick access to recent recordings.

- **Live preview:** https://gui.farm/ios/echo-voice-recorder
- **Raw source:** https://gui.farm/ios/echo-voice-recorder/design.guix
- **Download (.gui):** https://gui.farm/ios/echo-voice-recorder.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Echo — iOS Voice Recorder">
  <tokens>
    <color name="bg" value="#F4F4F6" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-2" value="#ECECF0" />
    <color name="text" value="#111114" />
    <color name="muted" value="#74747C" />
    <color name="line" value="#E0E0E5" />
    <color name="accent" value="#FF375F" />
    <color name="accent-soft" value="#FFE7EC" />
    <color name="blue" value="#0A84FF" />
    <number name="radius-card" value="22" />
    <number name="radius-small" value="14" />
    <number name="radius-pill" value="999" />
  </tokens>
  <styles>
    <text-style
      name="LargeTitle"
      font-family="SF Pro"
      font-size="34"
      font-weight="700"
      line-height="40"
      letter-spacing="-0.8"
    />
    <text-style
      name="Title"
      font-family="SF Pro"
      font-size="22"
      font-weight="700"
      line-height="28"
      letter-spacing="-0.3"
    />
    <text-style
      name="Timer"
      font-family="SF Pro"
      font-size="44"
      font-weight="600"
      line-height="50"
      letter-spacing="-1.0"
    />
    <text-style name="Body" font-family="SF Pro" font-size="16" font-weight="400" line-height="22" />
    <text-style name="BodyStrong" font-family="SF Pro" font-size="16" font-weight="600" line-height="22" />
    <text-style name="Caption" font-family="SF Pro" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Tiny" font-family="SF Pro" font-size="11" font-weight="600" line-height="14" />
  </styles>
  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="390" fill="$bg">
    <!-- iOS status bar -->
    <row w="390" h="54" p="14 20 0 20" align="middle-left">
      <text w="fill" value="9:41" font-family="SF Pro" font-size="14" font-weight="600" color="$text" />
      <row gap="7" align="middle-left">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23111114" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23111114" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23111114" w="20" h="20" />
      </row>
    </row>
    <!-- Navigation -->
    <row role="top-navigation-bar" w="390" h="64" p="0 20" align="middle-left">
      <text w="fill" value="Recorder" text-style="LargeTitle" color="$text" />
      <row role="button" w="38" h="38" radius="19" fill="$surface-2" align="middle-center">
        <img src="https://api.iconify.design/lucide/settings-2.svg?color=%23111114" w="18" h="18" />
      </row>
    </row>
    <col w="390" p="8 20 26 20" gap="18">
      <!-- Recording hero -->
      <col role="card" w="350" fill="$surface" radius="$radius-card" p="16" gap="18">
        <row w="314" align="middle-left">
          <col w="fill" gap="3">
            <text value="READY TO RECORD" text-style="Tiny" color="$accent" />
            <text value="New Recording" text-style="Title" color="$text" />
          </col>
          <row role="badge" h="30" p="0 11" radius="15" fill="$accent-soft" gap="6" align="middle-left">
            <ellipse w="7" h="7" fill="$accent" />
            <text value="Lossless" text-style="Caption" color="$accent" />
          </row>
        </row>
        <!-- Waveform -->
        <frame w="314" h="118" clip="true">
          <line x="0" y="59" w="314" fill="$line" />
          <rect x="6" y="48" w="3" h="22" radius="2" fill="$muted" />
          <rect x="16" y="38" w="3" h="42" radius="2" fill="$muted" />
          <rect x="26" y="28" w="3" h="62" radius="2" fill="$muted" />
          <rect x="36" y="44" w="3" h="30" radius="2" fill="$muted" />
          <rect x="46" y="35" w="3" h="48" radius="2" fill="$muted" />
          <rect x="56" y="22" w="3" h="74" radius="2" fill="$muted" />
          <rect x="66" y="42" w="3" h="34" radius="2" fill="$muted" />
          <rect x="76" y="31" w="3" h="56" radius="2" fill="$muted" />
          <rect x="86" y="18" w="3" h="82" radius="2" fill="$muted" />
          <rect x="96" y="40" w="3" h="38" radius="2" fill="$muted" />
          <rect x="106" y="32" w="3" h="54" radius="2" fill="$muted" />
          <rect x="116" y="24" w="3" h="70" radius="2" fill="$muted" />
          <rect x="126" y="45" w="3" h="28" radius="2" fill="$muted" />
          <rect x="136" y="36" w="3" h="46" radius="2" fill="$muted" />
          <rect x="146" y="26" w="3" h="66" radius="2" fill="$muted" />
          <rect x="156" y="41" w="3" h="36" radius="2" fill="$muted" />
          <rect x="166" y="33" w="3" h="52" radius="2" fill="$muted" />
          <rect x="176" y="20" w="3" h="78" radius="2" fill="$muted" />
          <rect x="186" y="39" w="3" h="40" radius="2" fill="$muted" />
          <rect x="196" y="30" w="3" h="58" radius="2" fill="$muted" />
          <rect x="206" y="23" w="3" h="72" radius="2" fill="$muted" />
          <rect x="216" y="43" w="3" h="32" radius="2" fill="$muted" />
          <rect x="226" y="34" w="3" h="50" radius="2" fill="$muted" />
          <rect x="236" y="27" w="3" h="64" radius="2" fill="$muted" />
          <rect x="246" y="42" w="3" h="34" radius="2" fill="$muted" />
          <rect x="256" y="31" w="3" h="56" radius="2" fill="$muted" />
          <rect x="266" y="19" w="3" h="80" radius="2" fill="$muted" />
          <rect x="276" y="37" w="3" h="44" radius="2" fill="$muted" />
          <rect x="286" y="29" w="3" h="60" radius="2" fill="$muted" />
          <rect x="296" y="44" w="3" h="30" radius="2" fill="$muted" />
          <rect x="306" y="50" w="3" h="18" radius="2" fill="$muted" />
        </frame>
        <col w="314" gap="4" align="middle-center">
          <text value="00:00:00" text-style="Timer" color="$text" />
          <text value="Tap to start recording" text-style="Caption" color="$muted" />
        </col>
        <!-- Primary record control -->
        <row w="314" h="92" align="middle-center">
          <row role="button" w="82" h="82" radius="41" fill="$accent-soft" align="middle-center">
            <row w="64" h="64" radius="32" fill="$accent" align="middle-center">
              <ellipse w="22" h="22" fill="#FFFFFF" />
            </row>
          </row>
        </row>
        <row role="segmented-control" w="314" h="38" p="3" fill="$surface-2" radius="11" gap="2">
          <row w="102" h="32" radius="9" fill="$surface" align="middle-center">
            <text value="Standard" text-style="Caption" color="$text" />
          </row>
          <row w="102" h="32" radius="9" align="middle-center">
            <text value="Interview" text-style="Caption" color="$muted" />
          </row>
          <row w="102" h="32" radius="9" align="middle-center">
            <text value="Music" text-style="Caption" color="$muted" />
          </row>
        </row>
      </col>
      <!-- Storage / input summary -->
      <row w="350" gap="10">
        <col role="card" w="170" h="hug" fill="$surface" radius="$radius-small" p="14" gap="4">
          <row align="middle-left" gap="7">
            <img src="https://api.iconify.design/lucide/mic-2.svg?color=%230A84FF" w="17" h="17" />
            <text value="INPUT" text-style="Tiny" color="$blue" />
          </row>
          <text value="iPhone Microphon." text-style="BodyStrong" color="$text" />
          <text value="Automatic gain" text-style="Caption" color="$muted" />
        </col>
        <col role="card" w="170" h="hug" fill="$surface" radius="$radius-small" p="14" gap="4">
          <row align="middle-left" gap="7">
            <img src="https://api.iconify.design/lucide/hard-drive.svg?color=%2374747C" w="17" h="17" />
            <text value="STORAGE" text-style="Tiny" color="$muted" />
          </row>
          <text value="18h 42m available" text-style="BodyStrong" color="$text" />
          <text value="Synced to iCloud" text-style="Caption" color="$muted" />
        </col>
      </row>
      <!-- Recordings section -->
      <col w="350" gap="10">
        <row w="350" align="middle-left">
          <text w="fill" value="Recent recordings" text-style="Title" color="$text" />
          <text value="See All" text-style="BodyStrong" color="$blue" />
        </row>
        <col role="card" w="350" fill="$surface" radius="$radius-card" p="4 16" gap="0">
          <row role="list-item" w="318" h="76" align="middle-left" gap="12">
            <row w="42" h="42" radius="13" fill="$accent-soft" align="middle-center">
              <img src="https://api.iconify.design/lucide/mic.svg?color=%23FF375F" w="20" h="20" />
            </row>
            <col w="fill" gap="3">
              <text value="Product sync — Friday" text-style="BodyStrong" color="$text" />
              <text value="Today, 8:54 AM · 18:32" text-style="Caption" color="$muted" />
            </col>
            <row role="button" w="32" h="32" radius="16" fill="$surface-2" align="middle-center">
              <img src="https://api.iconify.design/lucide/play.svg?color=%23111114" w="15" h="15" />
            </row>
          </row>
          <line w="318" fill="$line" />
          <row role="list-item" w="318" h="76" align="middle-left" gap="12">
            <row w="42" h="42" radius="13" fill="$surface-2" align="middle-center">
              <img src="https://api.iconify.design/lucide/audio-waveform.svg?color=%2374747C" w="20" h="20" />
            </row>
            <col w="fill" gap="3">
              <text value="Coffee shop idea" text-style="BodyStrong" color="$text" />
              <text value="Yesterday · 02:14" text-style="Caption" color="$muted" />
            </col>
            <row role="button" w="32" h="32" radius="16" fill="$surface-2" align="middle-center">
              <img src="https://api.iconify.design/lucide/play.svg?color=%23111114" w="15" h="15" />
            </row>
          </row>
          <line w="318" fill="$line" />
          <row role="list-item" w="318" h="76" align="middle-left" gap="12">
            <row w="42" h="42" radius="13" fill="$surface-2" align="middle-center">
              <img src="https://api.iconify.design/lucide/audio-waveform.svg?color=%2374747C" w="20" h="20" />
            </row>
            <col w="fill" gap="3">
              <text value="Client interview" text-style="BodyStrong" color="$text" />
              <text value="5 Aug · 41:08" text-style="Caption" color="$muted" />
            </col>
            <row role="button" w="32" h="32" radius="16" fill="$surface-2" align="middle-center">
              <img src="https://api.iconify.design/lucide/play.svg?color=%23111114" w="15" h="15" />
            </row>
          </row>
        </col>
      </col>
    </col>
    <!-- Bottom tab bar -->
    <col w="390" fill="$surface" border-top="1 $line">
      <row role="tab-bar" w="390" h="58" align="middle-left">
        <col w="130" h="56" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/mic-2.svg?color=%23FF375F" w="22" h="22" />
          <text value="Record" font-family="SF Pro" font-size="10" font-weight="700" color="$accent" />
        </col>
        <col w="130" h="56" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/list-music.svg?color=%2374747C" w="22" h="22" />
          <text value="Library" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" />
        </col>
        <col w="130" h="56" gap="3" align="middle-center">
          <img src="https://api.iconify.design/lucide/folder.svg?color=%2374747C" w="22" h="22" />
          <text value="Folders" font-family="SF Pro" font-size="10" font-weight="500" color="$muted" />
        </col>
      </row>
      <row w="390" h="24" align="middle-center">
        <rect w="134" h="5" radius="3" fill="$text" />
      </row>
    </col>
  </col>
</gui>
```