---
title: "Novaton — Downloads & Storage"
platform: android
slug: novaton-downloads-storage-android
screens: ["settings"]
domains: ["music"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "divider", "button", "segmented-control", "slider"]
score: {clean: 100, consistent: 91, accessible: 98, comprehensible: 45}
url: https://gui.farm/android/novaton-downloads-storage-android
raw: https://gui.farm/android/novaton-downloads-storage-android/design.guix
download: https://gui.farm/android/novaton-downloads-storage-android.gui
---

# Novaton — Downloads & Storage

An Android music-app storage screen with a device-storage breakdown bar, remove-downloads and clear-cache actions, download-quality control, and playback toggles.

- **Live preview:** https://gui.farm/android/novaton-downloads-storage-android
- **Raw source:** https://gui.farm/android/novaton-downloads-storage-android/design.guix
- **Download (.gui):** https://gui.farm/android/novaton-downloads-storage-android.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Novaton — Downloads &amp; Storage">
  <tokens>
    <color name="surface" value="#FCFDF6" />
    <color name="surface-container" value="#EDF1E7" />
    <color name="on-surface" value="#191D17" />
    <color name="on-surface-variant" value="#404942" />
    <color name="outline" value="#707972" />
    <color name="outline-variant" value="#C0C9BF" />
    <color name="primary" value="#256A4B" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="secondary-container" value="#CFE9D6" />
    <color name="on-secondary-container" value="#0C1F16" />
    <color name="tertiary" value="#3C6472" />
    <color name="neutral-fill" value="#5B635C" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="16" font-weight="400" line-height="24" />
    <text-style name="BodyMedium" font-family="Roboto" font-size="14" font-weight="400" line-height="20" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="16" />
    <text-style name="SectionHeader" font-family="Roboto" font-size="14" font-weight="500" line-height="20" letter-spacing="0.1" />
  </styles>

  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>

  <col w="360" fill="$surface" align="top-center">

    <!-- system status bar : device chrome, deliberately untagged -->
    <row w="360" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelSmall" value="9:41" fill="$on-surface" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23191D17" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23191D17" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23191D17" w="15" h="15" />
      </row>
    </row>

    <!-- M3 top app bar -->
    <row role="top-navigation-bar" w="360" h="64" p="0 4 0 4" gap="4" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/arrow-back-rounded.svg?color=%23191D17" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Downloads &amp; storage" fill="$on-surface" />
    </row>

    <!-- content -->
    <col w="360" p="6 0 28 0" gap="18" align="top-center">

      <!-- ============ STORAGE SUMMARY CARD ============ -->
      <col role="card" w="320" radius="$r-lg" fill="$surface-container" p="18 16 16 16" gap="14">

        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Device storage" fill="$on-surface" />
          <text text-style="LabelLarge" value="50 GB free" fill="$on-surface-variant" />
        </row>

        <!-- stacked usage bar : 288px track = 128 GB at 2.25 px/GB -->
        <row w="fill" h="12" radius="$r-full" clip="true" gap="0" align="middle-left">
          <row w="135" h="fill" fill="$neutral-fill" />
          <row w="33" h="fill" fill="$primary" />
          <row w="7" h="fill" fill="$tertiary" />
          <row w="113" h="fill" fill="$outline-variant" />
        </row>

        <!-- legend : two columns of category + size -->
        <col w="fill" gap="10">
          <row w="fill" gap="auto" align="middle-left">
            <row w="150" gap="8" align="middle-left">
              <ellipse w="10" h="10" fill="$neutral-fill" />
              <text w="fill" text-style="BodyMedium" value="Other apps" fill="$on-surface-variant" />
              <text text-style="LabelLarge" value="60 GB" fill="$on-surface" />
            </row>
            <row w="130" gap="8" align="middle-left">
              <ellipse w="10" h="10" fill="$primary" />
              <text w="fill" text-style="BodyMedium" value="Downloads" fill="$on-surface-variant" />
              <text text-style="LabelLarge" value="14.8 GB" fill="$on-surface" />
            </row>
          </row>
          <row w="fill" gap="auto" align="middle-left">
            <row w="150" gap="8" align="middle-left">
              <ellipse w="10" h="10" fill="$tertiary" />
              <text w="fill" text-style="BodyMedium" value="Cache" fill="$on-surface-variant" />
              <text text-style="LabelLarge" value="3.2 GB" fill="$on-surface" />
            </row>
            <row w="130" gap="8" align="middle-left">
              <ellipse w="10" h="10" fill="$outline-variant" />
              <text w="fill" text-style="BodyMedium" value="Free" fill="$on-surface-variant" />
              <text text-style="LabelLarge" value="50 GB" fill="$on-surface" />
            </row>
          </row>
        </col>

        <text text-style="BodyMedium" value="78 GB used of 128 GB" fill="$on-surface-variant" />

        <line role="divider" w="fill" fill="$outline-variant" />

        <!-- action rows : description left, pill button right -->
        <row w="fill" gap="12" align="middle-left">
          <col w="fill" gap="2">
            <text text-style="BodyLarge" value="Remove all downloads" fill="$on-surface" />
            <text text-style="BodyMedium" value="Frees 14.8 GB of offline songs" fill="$on-surface-variant" />
          </col>
          <row role="button" h="36" radius="$r-full" border="1 $outline" p="0 16" align="middle-center">
            <text text-style="LabelLarge" value="Remove" fill="$primary" />
          </row>
        </row>

        <row w="fill" gap="12" align="middle-left">
          <col w="fill" gap="2">
            <text text-style="BodyLarge" value="Clear cache" fill="$on-surface" />
            <text text-style="BodyMedium" value="Frees 3.2 GB of temporary files" fill="$on-surface-variant" />
          </col>
          <row role="button" h="36" radius="$r-full" fill="$secondary-container" p="0 16" align="middle-center">
            <text text-style="LabelLarge" value="Clear" fill="$on-secondary-container" />
          </row>
        </row>

      </col>

      <!-- ============ DOWNLOADS SECTION ============ -->
      <text w="320" text-style="SectionHeader" value="DOWNLOADS" fill="$primary" />

      <col role="card" w="320" radius="$r-lg" fill="$surface-container" p="16" gap="16">

        <col w="fill" gap="10">
          <text text-style="BodyLarge" value="Download quality" fill="$on-surface" />
          <!-- M3 single-select segmented button : 3 x 96 = 288 -->
          <row role="segmented-control" w="fill" h="40" radius="$r-full" border="1 $outline" clip="true" align="middle-left">
            <row w="96" h="fill" align="middle-center">
              <text text-style="LabelLarge" value="Normal" fill="$on-surface" />
            </row>
            <line w="1" h="40" fill="$outline" />
            <row w="95" h="fill" fill="$secondary-container" gap="6" align="middle-center">
              <img src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%230C1F16" w="18" h="18" />
              <text text-style="LabelLarge" value="High" fill="$on-secondary-container" />
            </row>
            <line w="1" h="40" fill="$outline" />
            <row w="95" h="fill" align="middle-center">
              <text text-style="LabelLarge" value="Very high" fill="$on-surface" />
            </row>
          </row>
        </col>

        <line role="divider" w="fill" fill="$outline-variant" />

        <row w="fill" gap="12" align="middle-center">
          <col w="fill" gap="2">
            <text text-style="BodyLarge" value="Download over Wi-Fi only" fill="$on-surface" />
            <text text-style="BodyMedium" value="Avoids using mobile data" fill="$on-surface-variant" />
          </col>
          <!-- M3 switch, on : untagged (no confirmed role) -->
          <row w="52" h="32" radius="$r-full" fill="$primary" p="0 4" align="middle-right">
            <ellipse w="24" h="24" fill="$on-primary" />
          </row>
        </row>

      </col>

      <!-- ============ PLAYBACK SECTION ============ -->
      <text w="320" text-style="SectionHeader" value="PLAYBACK" fill="$primary" />

      <col role="card" w="320" radius="$r-lg" fill="$surface-container" p="16" gap="14">

        <col role="slider" w="fill" gap="10">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="BodyLarge" value="Crossfade" fill="$on-surface" />
            <text text-style="LabelLarge" value="4.5 s" fill="$primary" />
          </row>
          <!-- slider track 288px, 0-12s : 4.5s fills 108px, thumb centre at 108 -->
          <frame w="288" h="24">
            <row x="0" y="10" w="288" h="4" radius="$r-full" fill="$outline-variant" />
            <row x="0" y="10" w="108" h="4" radius="$r-full" fill="$primary" />
            <ellipse x="98" y="2" w="20" h="20" fill="$primary" />
          </frame>
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelMedium" value="0 s" fill="$on-surface-variant" />
            <text text-style="LabelMedium" value="12 s" fill="$on-surface-variant" />
          </row>
        </col>

        <line role="divider" w="fill" fill="$outline-variant" />

        <row w="fill" gap="12" align="middle-center">
          <col w="fill" gap="2">
            <text text-style="BodyLarge" value="Gapless playback" fill="$on-surface" />
            <text text-style="BodyMedium" value="No silence between tracks" fill="$on-surface-variant" />
          </col>
          <row w="52" h="32" radius="$r-full" fill="$primary" p="0 4" align="middle-right">
            <ellipse w="24" h="24" fill="$on-primary" />
          </row>
        </row>

      </col>

    </col>

    <!-- Android gesture navigation handle : device chrome, untagged -->
    <row w="360" h="24" align="middle-center">
      <row w="108" h="4" radius="$r-full" fill="$outline-variant" />
    </row>

  </col>
</gui>

```