---
title: "Slate — Settings"
platform: android
slug: slate-settings
screens: ["settings"]
domains: ["productivity"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "avatar", "badge", "button", "slider", "segmented-control", "tab-bar"]
score: {clean: 100, consistent: 86, accessible: 95, comprehensible: 45}
url: https://gui.farm/android/slate-settings
raw: https://gui.farm/android/slate-settings/design.guix
download: https://gui.farm/android/slate-settings.gui
---

# Slate — Settings

An Android Material 3 dark settings screen with an account header, a segmented storage-usage meter, and display, notification and general preference controls.

- **Live preview:** https://gui.farm/android/slate-settings
- **Raw source:** https://gui.farm/android/slate-settings/design.guix
- **Download (.gui):** https://gui.farm/android/slate-settings.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Slate — Settings">
  <tokens>
    <color name="surface" value="#141218" />
    <color name="surface-container" value="#211F26" />
    <color name="on-surface" value="#E6E0E9" />
    <color name="on-surface-variant" value="#CAC4D0" />
    <color name="outline-variant" value="#49454F" />
    <color name="primary" value="#D0BCFF" />
    <color name="on-primary" value="#381E72" />
    <color name="primary-container" value="#4F378B" />
    <color name="on-primary-container" value="#EADDFF" />
    <color name="error" value="#F2B8B5" />
    <color name="seg-photos" value="#C4B0FF" />
    <color name="seg-videos" value="#8FD3C8" />
    <color name="seg-audio" value="#F5C98A" />
    <color name="seg-docs" value="#9EC9FF" />
    <color name="track" value="#3A3843" />
    <number name="r-xs" value="4" />
    <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="400" line-height="28" />
    <text-style name="Numeral" font-family="Roboto" font-size="28" font-weight="400" line-height="34" />
    <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="Section"
      font-family="Roboto"
      font-size="11"
      font-weight="500"
      line-height="16"
      letter-spacing="0.5"
    />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$surface">
    <!-- system status bar : device chrome, untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelMedium" 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=%23E6E0E9"
          w="15"
          h="15"
        />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23E6E0E9" w="15" h="15" />
        <img
          src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23E6E0E9"
          w="15"
          h="15"
        />
      </row>
    </row>
    <!-- M3 small top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 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=%23E6E0E9"
          w="24"
          h="24"
        />
      </row>
      <text w="fill" text-style="TitleLarge" value="Settings" fill="$on-surface" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img
          src="https://api.iconify.design/material-symbols/search-rounded.svg?color=%23E6E0E9"
          w="24"
          h="24"
        />
      </row>
    </row>
    <!-- ACCOUNT HEADER -->
    <col w="360" p="4 16 8 16">
      <row role="card" w="328" radius="$r-lg" fill="$surface-container" p="14" gap="14" align="middle-left">
        <frame role="avatar" w="56" h="56" radius="28" clip="true">
          <img
            x="0"
            y="0"
            w="56"
            h="56"
            fit="cover"
            src="https://images.unsplash.com/photo-1705645930353-0e335311ef20?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=80"
          />
        </frame>
        <col w="fill" gap="3">
          <row w="fill" gap="8" align="middle-left">
            <text text-style="TitleMedium" value="Jordan Vance" fill="$on-surface" />
            <row role="badge" h="20" radius="$r-xs" fill="$primary-container" p="0 8" align="middle-center">
              <text text-style="Section" value="PRO" fill="$on-primary-container" />
            </row>
          </row>
          <text text-style="BodyMedium" value="jordan.vance@slate.app" fill="$on-surface-variant" />
        </col>
        <img
          src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23CAC4D0"
          w="24"
          h="24"
        />
      </row>
    </col>
    <!-- STORAGE -->
    <col w="360" p="0 16 8 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="14" gap="14">
        <row w="300" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Storage" fill="$on-surface" />
          <row
            role="button"
            h="32"
            radius="$r-full"
            fill="none"
            border="1 $outline-variant"
            p="0 14"
            align="middle-center"
          >
            <text text-style="LabelLarge" value="Manage" fill="$primary" />
          </row>
        </row>
        <row w="300" gap="auto" align="bottom-left">
          <row gap="6" align="bottom-left">
            <text text-style="Numeral" value="150 GB" fill="$on-surface" />
            <col h="34" gap="0" align="bottom-left">
              <text text-style="BodyMedium" value="of 200 GB used" fill="$on-surface-variant" />
            </col>
          </row>
          <col h="34" gap="0" align="bottom-right">
            <text text-style="LabelMedium" value="50 GB free" fill="$on-surface-variant" />
          </col>
        </row>
        <!-- segmented usage bar : widths encode GB at 1.5px per GB -->
        <frame w="300" h="10" radius="5" clip="true">
          <row w="300" h="10" gap="0" align="middle-left">
            <rect w="108" h="10" fill="$seg-photos" />
            <rect w="66" h="10" fill="$seg-videos" />
            <rect w="24" h="10" fill="$seg-audio" />
            <rect w="27" h="10" fill="$seg-docs" />
            <rect w="75" h="10" fill="$track" />
          </row>
        </frame>
        <!-- legend : two per row -->
        <col w="300" gap="10">
          <row w="300" gap="8" align="middle-left">
            <row w="146" gap="8" align="middle-left">
              <ellipse w="9" h="9" fill="$seg-photos" />
              <text w="fill" text-style="BodyMedium" value="Photos" fill="$on-surface-variant" />
              <text text-style="LabelMedium" value="72 GB" fill="$on-surface" />
            </row>
            <row w="146" gap="8" align="middle-left">
              <ellipse w="9" h="9" fill="$seg-videos" />
              <text w="fill" text-style="BodyMedium" value="Videos" fill="$on-surface-variant" />
              <text text-style="LabelMedium" value="44 GB" fill="$on-surface" />
            </row>
          </row>
          <row w="300" gap="8" align="middle-left">
            <row w="146" gap="8" align="middle-left">
              <ellipse w="9" h="9" fill="$seg-audio" />
              <text w="fill" text-style="BodyMedium" value="Audio" fill="$on-surface-variant" />
              <text text-style="LabelMedium" value="16 GB" fill="$on-surface" />
            </row>
            <row w="146" gap="8" align="middle-left">
              <ellipse w="9" h="9" fill="$seg-docs" />
              <text w="fill" text-style="BodyMedium" value="Documents" fill="$on-surface-variant" />
              <text text-style="LabelMedium" value="18 GB" fill="$on-surface" />
            </row>
          </row>
        </col>
      </col>
    </col>
    <!-- DISPLAY -->
    <col w="360" p="8 16 0 16" gap="8">
      <text text-style="Section" value="DISPLAY" fill="$primary" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="18">
        <!-- brightness : fill width encodes 65% of the 300px track -->
        <col w="300" gap="10">
          <row w="300" gap="auto" align="middle-left">
            <row gap="8" align="middle-left">
              <img
                src="https://api.iconify.design/material-symbols/brightness-6-rounded.svg?color=%23CAC4D0"
                w="20"
                h="20"
              />
              <text text-style="BodyLarge" value="Brightness" fill="$on-surface" />
            </row>
            <text text-style="LabelLarge" value="65%" fill="$on-surface-variant" />
          </row>
          <frame role="slider" w="300" h="24">
            <rect x="0" y="9" w="300" h="6" radius="3" fill="$track" />
            <rect x="0" y="9" w="195" h="6" radius="3" fill="$primary" />
            <ellipse x="185" y="2" w="20" h="20" fill="$primary" />
          </frame>
        </col>
        <line w="300" fill="$outline-variant" />
        <!-- appearance : 3 equal segments of 100px -->
        <col w="300" gap="10">
          <text text-style="BodyLarge" value="Appearance" fill="$on-surface" />
          <row
            role="segmented-control"
            w="300"
            h="40"
            radius="$r-full"
            fill="none"
            border="1 $outline-variant"
            clip="true"
            align="middle-left"
          >
            <row w="100" h="40" align="middle-center">
              <text text-style="LabelLarge" value="System" fill="$on-surface-variant" />
            </row>
            <row w="100" h="40" align="middle-center">
              <text text-style="LabelLarge" value="Light" fill="$on-surface-variant" />
            </row>
            <row w="100" h="40" fill="$primary-container" gap="6" align="middle-center">
              <img
                src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23EADDFF"
                w="18"
                h="18"
              />
              <text text-style="LabelLarge" value="Dark" fill="$on-primary-container" />
            </row>
          </row>
        </col>
        <line w="300" fill="$outline-variant" />
        <!-- True Tone toggle : untagged (no confirmed switch role) -->
        <row w="300" gap="auto" align="middle-left">
          <col w="fill" gap="1">
            <text text-style="BodyLarge" value="True Tone" fill="$on-surface" />
            <text text-style="BodyMedium" value="Adapt display to ambient light" fill="$on-surface-variant" />
          </col>
          <frame w="52" h="32">
            <rect x="0" y="4" w="52" h="24" radius="12" fill="$primary" />
            <ellipse x="24" y="6" w="20" h="20" fill="$on-primary" />
          </frame>
        </row>
      </col>
    </col>
    <!-- NOTIFICATIONS -->
    <col w="360" p="16 16 0 16" gap="8">
      <text text-style="Section" value="NOTIFICATIONS" fill="$primary" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="6 14" gap="0">
        <row w="300" h="56" gap="14" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/notifications-outline-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
          <text w="fill" text-style="BodyLarge" value="Push notifications" fill="$on-surface" />
          <frame w="52" h="32">
            <rect x="0" y="4" w="52" h="24" radius="12" fill="$primary" />
            <ellipse x="24" y="6" w="20" h="20" fill="$on-primary" />
          </frame>
        </row>
        <line w="300" fill="$outline-variant" />
        <row w="300" h="56" gap="14" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/volume-up-outline-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
          <text w="fill" text-style="BodyLarge" value="Sound" fill="$on-surface" />
          <text text-style="BodyMedium" value="Chime" fill="$on-surface-variant" />
          <img
            src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
        </row>
        <line w="300" fill="$outline-variant" />
        <row w="300" h="56" gap="14" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/bedtime-outline-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
          <text w="fill" text-style="BodyLarge" value="Do Not Disturb" fill="$on-surface" />
          <text text-style="BodyMedium" value="22:00 – 07:00" fill="$on-surface-variant" />
          <img
            src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
        </row>
      </col>
    </col>
    <!-- GENERAL -->
    <col w="360" p="16 16 0 16" gap="8">
      <text text-style="Section" value="GENERAL" fill="$primary" p="0 0 0 4" />
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="6 14" gap="0">
        <row w="300" h="56" gap="14" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/lock-outline-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
          <text w="fill" text-style="BodyLarge" value="Privacy &amp; Security" fill="$on-surface" />
          <img
            src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
        </row>
        <line w="300" fill="$outline-variant" />
        <row w="300" h="56" gap="14" align="middle-left">
          <img
            src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
          <text w="fill" text-style="BodyLarge" value="Help &amp; Support" fill="$on-surface" />
          <img
            src="https://api.iconify.design/material-symbols/chevron-right-rounded.svg?color=%23CAC4D0"
            w="22"
            h="22"
          />
        </row>
      </col>
    </col>
    <!-- SIGN OUT -->
    <col w="360" p="20 16 24 16">
      <row
        role="button"
        w="328"
        h="48"
        radius="$r-full"
        fill="none"
        border="1 $outline-variant"
        gap="8"
        align="middle-center"
      >
        <img
          src="https://api.iconify.design/material-symbols/logout-rounded.svg?color=%23F2B8B5"
          w="20"
          h="20"
        />
        <text text-style="LabelLarge" value="Sign out" fill="$error" />
      </row>
    </col>
    <!-- M3 bottom navigation : Settings active -->
    <row role="tab-bar" w="fill" h="80" fill="$surface-container" p="12 0 16 0" gap="auto" align="top-center">
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/home-outline-rounded.svg?color=%23CAC4D0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Home" fill="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/folder-outline-rounded.svg?color=%23CAC4D0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Files" fill="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/group-outline-rounded.svg?color=%23CAC4D0"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Shared" fill="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$primary-container" align="middle-center">
          <img
            src="https://api.iconify.design/material-symbols/settings-rounded.svg?color=%23EADDFF"
            w="24"
            h="24"
          />
        </row>
        <text text-style="LabelMedium" value="Settings" fill="$on-surface" />
      </col>
    </row>
  </col>
</gui>
```