---
title: "Beacon Recovery Code"
platform: android
slug: beacon-recovery-code-android
screens: []
domains: ["saas"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "text-field", "card", "divider", "toast", "toolbar"]
score: {clean: 100, consistent: 86, accessible: 100, comprehensible: 50}
url: https://gui.farm/android/beacon-recovery-code-android
raw: https://gui.farm/android/beacon-recovery-code-android/design.guix
download: https://gui.farm/android/beacon-recovery-code-android.gui
---

# Beacon Recovery Code

Six-digit account-recovery verification with alternate secure methods and resend feedback.

- **Live preview:** https://gui.farm/android/beacon-recovery-code-android
- **Raw source:** https://gui.farm/android/beacon-recovery-code-android/design.guix
- **Download (.gui):** https://gui.farm/android/beacon-recovery-code-android.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Beacon Recovery Code">
  <tokens>
    <color name="bg" value="#F7F9F6" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-soft" value="#EDF2EE" />
    <color name="ink" value="#17211B" />
    <color name="ink-secondary" value="#4C5B52" />
    <color name="outline" value="#708077" />
    <color name="line" value="#D6DED8" />
    <color name="primary" value="#176644" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="primary-container" value="#D5EDDE" />
    <color name="on-primary-container" value="#153F2E" />
    <color name="toast" value="#151515" />
    <number name="edge" value="16" />
    <number name="radius-sm" value="8" />
    <number name="radius-md" value="12" />
    <number name="radius-lg" value="20" />
    <number name="radius-pill" value="999" />
    <number name="touch" value="48" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Title" font-family="Roboto" font-size="22" font-weight="500" line-height="28" />
    <text-style name="Headline" font-family="Roboto" font-size="28" font-weight="500" line-height="36" />
    <text-style name="Body" 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="Label" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="Digit" font-family="Roboto" font-size="20" font-weight="500" line-height="24" />
    <text-style name="Caption" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500" styles="normal" />
  </fonts>
  <col w="360" fill="$bg" clip="true">
    <row w="fill" h="24" p="0 16" align="middle-center" gap="auto">
      <text text-style="Status" value="9:41" color="$ink" />
      <row gap="4" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/signal-cellular-alt-rounded.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/wifi-rounded.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/battery-full-rounded.svg" w="18" h="18" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="0 16" align="middle-center" gap="12">
      <row role="button" w="$touch" h="$touch" align="middle-center" radius="$radius-pill">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/arrow-back-rounded.svg" w="24" h="24" />
      </row>
      <text text-style="Title" value="Account recovery" color="$ink" w="fill" />
      <row role="button" w="$touch" h="$touch" align="middle-center" radius="$radius-pill">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/help-outline-rounded.svg" w="24" h="24" />
      </row>
    </row>
    <col w="fill" p="8 16 24 16" gap="24">
      <col w="fill" gap="8">
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="Caption" value="VERIFY IDENTITY" color="$primary" />
          <text text-style="Caption" value="Step 2 of 3" color="$ink-secondary" />
        </row>
        <row w="328" gap="8">
          <rect w="104" h="4" radius="$radius-pill" fill="$primary" />
          <rect w="104" h="4" radius="$radius-pill" fill="$primary" />
          <rect w="104" h="4" radius="$radius-pill" fill="$line" />
        </row>
      </col>
      <col w="328" gap="12">
        <row w="72" h="72" radius="$radius-lg" fill="$primary-container" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/shield-lock-outline-rounded.svg" w="36" h="36" />
        </row>
        <col w="328" gap="8">
          <text text-style="Headline" value="Enter your recovery code" color="$ink" w="328" />
          <text
            text-style="Body"
            value="We sent a 6-digit code to j•••@cedarlabs.ae. It expires in 10 minutes."
            color="$ink-secondary"
            w="328"
          />
        </col>
      </col>
      <col w="328" gap="12">
        <row w="328" gap="10" align="middle-center">
          <row
            role="text-field"
            w="46"
            h="56"
            fill="$surface"
            border="2 $primary"
            radius="$radius-sm"
            align="middle-center"
          >
            <text text-style="Digit" value="8" color="$ink" />
          </row>
          <row
            role="text-field"
            w="46"
            h="56"
            fill="$surface"
            border="2 $primary"
            radius="$radius-sm"
            align="middle-center"
          >
            <text text-style="Digit" value="4" color="$ink" />
          </row>
          <row
            role="text-field"
            w="46"
            h="56"
            fill="$surface"
            border="2 $primary"
            radius="$radius-sm"
            align="middle-center"
          >
            <text text-style="Digit" value="2" color="$ink" />
          </row>
          <row
            role="text-field"
            w="46"
            h="56"
            fill="$surface"
            border="1 $outline"
            radius="$radius-sm"
            align="middle-center"
          >
            <text text-style="Digit" value="9" color="$ink" />
          </row>
          <row
            role="text-field"
            w="46"
            h="56"
            fill="$surface"
            border="1 $outline"
            radius="$radius-sm"
            align="middle-center"
          >
            <text text-style="Digit" value="3" color="$ink" />
          </row>
          <row
            role="text-field"
            w="46"
            h="56"
            fill="$surface"
            border="1 $outline"
            radius="$radius-sm"
            align="middle-center"
          >
            <text text-style="Digit" value="1" color="$ink" />
          </row>
        </row>
        <row w="fill" gap="auto" align="middle-center">
          <text text-style="BodyMedium" value="Didn't receive it?" color="$ink-secondary" />
          <row role="button" h="40" p="0 12" radius="$radius-pill" align="middle-center">
            <text text-style="Label" value="Resend in 00:42" color="$primary" />
          </row>
        </row>
      </col>
      <col role="card" w="328" fill="$surface" border="1 $line" radius="$radius-md" clip="true">
        <row w="328" p="16" gap="12" align="middle-center">
          <row w="40" h="40" radius="$radius-md" fill="$surface-soft" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/phonelink-lock-rounded.svg" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="Label" value="Approve from a trusted device" color="$ink" w="fill" />
            <text
              text-style="BodyMedium"
              value="Send a secure prompt to Pixel 9"
              color="$ink-secondary"
              w="fill"
            />
          </col>
          <row role="button" w="32" h="40" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/chevron-right-rounded.svg" w="24" h="24" />
          </row>
        </row>
        <line role="divider" w="328" fill="$line" />
        <row w="328" p="16" gap="12" align="middle-center">
          <row w="40" h="40" radius="$radius-md" fill="$surface-soft" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/key-rounded.svg" w="22" h="22" />
          </row>
          <col w="fill" gap="2">
            <text text-style="Label" value="Use a backup code" color="$ink" w="fill" />
            <text
              text-style="BodyMedium"
              value="Enter one of your saved codes"
              color="$ink-secondary"
              w="fill"
            />
          </col>
          <row role="button" w="32" h="40" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/chevron-right-rounded.svg" w="24" h="24" />
          </row>
        </row>
      </col>
      <row
        role="toast"
        w="328"
        min-h="52"
        fill="$toast"
        radius="$radius-md"
        p="12 16"
        gap="10"
        align="middle-center"
      >
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/check-circle-rounded.svg" w="22" h="22" />
        <text
          text-style="BodyMedium"
          value="New code sent to your recovery email"
          color="$on-primary"
          w="264"
        />
      </row>
    </col>
    <col role="toolbar" w="360" fill="$surface" border="1 $line" p="16" gap="10">
      <row role="button" w="328" h="52" fill="$primary" radius="$radius-pill" align="middle-center" gap="8">
        <text text-style="Label" value="Verify code" color="$on-primary" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/762db422-2a9b-4822-a056-23749373067b/arrow-forward-rounded.svg" w="20" h="20" />
      </row>
      <row w="328" h="24" align="middle-center">
        <rect w="108" h="4" radius="$radius-pill" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```