---
title: "Driftbox — Transfer Queue"
platform: ios
slug: driftbox-transfer-queue-ios
screens: ["file-upload"]
domains: ["productivity"]
style: "minimal"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "badge", "card", "context-menu", "divider", "toolbar"]
score: {clean: 100, consistent: 79, accessible: 100, comprehensible: 50}
url: https://gui.farm/ios/driftbox-transfer-queue-ios
raw: https://gui.farm/ios/driftbox-transfer-queue-ios/design.guix
download: https://gui.farm/ios/driftbox-transfer-queue-ios.gui
---

# Driftbox — Transfer Queue

Cloud file transfer queue with active uploads, progress bars, storage usage, and per-transfer controls.

- **Live preview:** https://gui.farm/ios/driftbox-transfer-queue-ios
- **Raw source:** https://gui.farm/ios/driftbox-transfer-queue-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/driftbox-transfer-queue-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Driftbox — Transfer Queue">
  <tokens>
    <color name="bg" value="#0D1117" />
    <color name="surface" value="#151B23" />
    <color name="surface-raised" value="#1D2631" />
    <color name="surface-soft" value="#202B36" />
    <color name="text" value="#F4F7FA" />
    <color name="secondary" value="#AAB5C2" />
    <color name="muted" value="#8E9BA9" />
    <color name="line" value="#334251" />
    <color name="track" value="#2A3642" />
    <color name="accent" value="#62D4A9" />
    <color name="accent-soft" value="#173A31" />
    <color name="blue" value="#82B6FF" />
    <color name="blue-soft" value="#1A3048" />
    <color name="amber" value="#F0C36E" />
    <color name="amber-soft" value="#3A3020" />
    <color name="danger" value="#FF9AA2" />
    <color name="on-accent" value="#07110D" />
    <number name="edge" value="16" />
    <number name="r-sm" value="10" />
    <number name="r-md" value="14" />
    <number name="r-lg" value="20" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Status" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" />
    <text-style name="NavTitle" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Hero" font-family="SF Pro Display" font-size="30" font-weight="700" line-height="36" />
    <text-style name="Section" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="18" letter-spacing="0.4" />
    <text-style name="Title" font-family="SF Pro Display" font-size="16" font-weight="600" line-height="21" />
    <text-style name="Body" font-family="SF Pro Display" font-size="15" font-weight="400" line-height="21" />
    <text-style name="Label" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Caption" font-family="SF Pro Display" font-size="12" font-weight="400" line-height="17" />
    <text-style name="Percent" font-family="SF Pro Display" font-size="22" font-weight="700" line-height="27" />
  </styles>

  <fonts>
    <font family="SF Pro Display" source="system" weights="400 600 700" styles="normal" />
  </fonts>

  <col w="393" fill="$bg" clip="true">
    <!-- device chrome, intentionally untagged -->
    <row w="fill" h="28" p="0 18" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" color="$text" />
      <row gap="6" align="middle-right">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/signal.svg" w="15" h="15" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/wifi.svg" w="15" h="15" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/battery-full.svg" w="18" h="18" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="60" p="0 12" gap="8" align="middle-left">
      <row role="button" w="44" h="44" radius="$r-pill" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/x.svg" w="22" h="22" />
      </row>
      <text w="fill" text-style="NavTitle" value="Transfers" color="$text" align="center" />
      <row role="button" w="44" h="44" radius="$r-pill" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/info.svg" w="22" h="22" />
      </row>
    </row>

    <col w="393" p="10 16 28 16" gap="24">
      <col w="361" gap="8">
        <row w="fill" gap="auto" align="bottom-left">
          <col gap="3">
            <text text-style="Hero" value="Moving 6.2 GB" color="$text" />
            <text text-style="Body" value="3 active · 2 waiting" color="$secondary" />
          </col>
          <row role="badge" h="28" radius="$r-pill" fill="$accent-soft" p="0 10" gap="6" align="middle-center">
            <ellipse w="7" h="7" fill="$accent" />
            <text text-style="Label" value="On Wi-Fi" color="$accent" />
          </row>
        </row>
      </col>

      <col role="card" w="361" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="13">
        <row w="fill" gap="auto" align="middle-left">
          <row gap="10" align="middle-left">
            <row w="38" h="38" radius="$r-sm" fill="$accent-soft" align="middle-center">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/hard-drive.svg" w="20" h="20" />
            </row>
            <col gap="1">
              <text text-style="Title" value="Cloud storage" color="$text" />
              <text text-style="Caption" value="20 GB of 25 GB used" color="$secondary" />
            </col>
          </row>
          <text text-style="Percent" value="80%" color="$accent" />
        </row>
        <frame w="329" h="8" radius="4" clip="true">
          <rect x="0" y="0" w="329" h="8" fill="$track" />
          <rect x="0" y="0" w="263.2" h="8" radius="4" fill="$accent" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Caption" value="5 GB available" color="$secondary" />
          <text text-style="Caption" value="Upgrade storage" color="$accent" />
        </row>
      </col>

      <col w="361" gap="12">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Section" value="ACTIVE TRANSFERS" color="$secondary" />
          <row role="button" h="34" radius="$r-pill" p="0 10" gap="6" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/pause-circle.svg" w="17" h="17" />
            <text text-style="Label" value="Pause all" color="$text" />
          </row>
        </row>

        <frame w="361" h="436" clip="true">
          <col role="card" x="0" y="0" w="361" fill="$surface" border="1 $line" radius="$r-md" p="14" gap="12">
            <row w="333" gap="12" align="middle-left">
              <row w="44" h="44" radius="$r-sm" fill="$accent-soft" align="middle-center">
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/archive.svg" w="22" h="22" />
              </row>
              <col w="233" gap="2">
                <text text-style="Title" value="Brand toolkit.zip" color="$text" w="233" />
                <text text-style="Caption" value="1.8 GB of 2.5 GB · 4 min left" color="$secondary" w="233" />
              </col>
              <row role="button" w="32" h="44" radius="$r-pill" align="middle-center">
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/more-horizontal.svg" w="20" h="20" />
              </row>
            </row>
            <frame w="333" h="6" radius="3" clip="true">
              <rect x="0" y="0" w="333" h="6" fill="$track" />
              <rect x="0" y="0" w="239.76" h="6" radius="3" fill="$accent" />
            </frame>
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="Caption" value="Uploading to Design Systems" color="$secondary" />
              <text text-style="Label" value="72%" color="$accent" />
            </row>
          </col>

          <col role="card" x="0" y="140" w="361" fill="$surface" border="1 $blue" radius="$r-md" p="14" gap="12">
            <row w="333" gap="12" align="middle-left">
              <row w="44" h="44" radius="$r-sm" fill="$blue-soft" align="middle-center">
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/film.svg" w="22" h="22" />
              </row>
              <col w="233" gap="2">
                <text text-style="Title" value="Research clips.mov" color="$text" w="233" />
                <text text-style="Caption" value="540 MB of 1.2 GB · 9 min left" color="$secondary" w="233" />
              </col>
              <row role="button" w="32" h="44" radius="$r-pill" fill="$surface-soft" align="middle-center">
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/more-horizontal.svg" w="20" h="20" />
              </row>
            </row>
            <frame w="333" h="6" radius="3" clip="true">
              <rect x="0" y="0" w="333" h="6" fill="$track" />
              <rect x="0" y="0" w="149.85" h="6" radius="3" fill="$blue" />
            </frame>
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="Caption" value="Uploading to Research" color="$secondary" />
              <text text-style="Label" value="45%" color="$blue" />
            </row>
          </col>

          <col role="card" x="0" y="280" w="361" fill="$surface" border="1 $line" radius="$r-md" p="14" gap="12">
            <row w="333" gap="12" align="middle-left">
              <row w="44" h="44" radius="$r-sm" fill="$amber-soft" align="middle-center">
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/file-text.svg" w="22" h="22" />
              </row>
              <col w="233" gap="2">
                <text text-style="Title" value="Field notes.pdf" color="$text" w="233" />
                <text text-style="Caption" value="8.4 MB · Processing preview" color="$secondary" w="233" />
              </col>
              <row role="button" w="32" h="44" radius="$r-pill" align="middle-center">
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/more-horizontal.svg" w="20" h="20" />
              </row>
            </row>
            <frame w="333" h="6" radius="3" clip="true">
              <rect x="0" y="0" w="333" h="6" fill="$amber" />
            </frame>
            <row w="fill" gap="auto" align="middle-left">
              <text text-style="Caption" value="Upload complete" color="$secondary" />
              <text text-style="Label" value="100%" color="$amber" />
            </row>
          </col>

          <col role="context-menu" x="129" y="208" w="216" fill="$surface-raised" border="1 $line" radius="$r-md" p="6" gap="2">
            <row w="204" h="40" radius="$r-sm" p="0 10" gap="10" align="middle-left">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/pause.svg" w="18" h="18" />
              <text text-style="Body" value="Pause transfer" color="$text" />
            </row>
            <row w="204" h="40" radius="$r-sm" fill="$accent-soft" p="0 10" gap="10" align="middle-left">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/arrow-up.svg" w="18" h="18" />
              <text text-style="Body" value="Prioritize" color="$accent" />
            </row>
            <row w="204" h="40" radius="$r-sm" p="0 10" gap="10" align="middle-left">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/link.svg" w="18" h="18" />
              <text text-style="Body" value="Copy file link" color="$text" />
            </row>
            <line w="204" fill="$line" />
            <row w="204" h="40" radius="$r-sm" p="0 10" gap="10" align="middle-left">
              <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/trash-2.svg" w="18" h="18" />
              <text text-style="Body" value="Cancel transfer" color="$danger" />
            </row>
          </col>
        </frame>
      </col>

      <col w="361" gap="10">
        <text text-style="Section" value="WAITING" color="$secondary" />
        <col role="card" w="361" fill="$surface" border="1 $line" radius="$r-md" clip="true">
          <row w="361" h="68" p="0 14" gap="12" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/clock-3.svg" w="20" h="20" />
            <col w="fill" gap="2">
              <text text-style="Title" value="Interview audio.m4a" color="$text" />
              <text text-style="Caption" value="624 MB · Starts next" color="$secondary" />
            </col>
            <row role="badge" h="24" radius="$r-pill" fill="$surface-soft" p="0 9" align="middle-center">
              <text text-style="Label" value="#1" color="$secondary" />
            </row>
          </row>
          <line role="divider" w="361" fill="$line" />
          <row w="361" h="68" p="0 14" gap="12" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/clock-3.svg" w="20" h="20" />
            <col w="fill" gap="2">
              <text text-style="Title" value="Workshop scans.pdf" color="$text" />
              <text text-style="Caption" value="190 MB · Waiting" color="$secondary" />
            </col>
            <row role="badge" h="24" radius="$r-pill" fill="$surface-soft" p="0 9" align="middle-center">
              <text text-style="Label" value="#2" color="$secondary" />
            </row>
          </row>
        </col>
      </col>
    </col>

    <!-- fixed action region, last flow child -->
    <col role="toolbar" w="393" fill="$surface" border="1 $line" p="12 16 0 16" gap="10">
      <row w="361" gap="12">
        <row role="button" w="112" h="50" radius="$r-pill" border="1 $line" gap="7" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/pause.svg" w="18" h="18" />
          <text text-style="Label" value="Pause" color="$text" />
        </row>
        <row role="button" w="237" h="50" radius="$r-pill" fill="$accent" gap="8" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/59ca5360-2a5d-4fca-a9d1-b33a631c2726/plus.svg" w="19" h="19" />
          <text text-style="Label" value="Add files" color="$on-accent" />
        </row>
      </row>
      <row w="361" h="24" align="middle-center">
        <rect w="134" h="5" radius="3" fill="$text" />
      </row>
    </col>
  </col>
</gui>
```