---
title: "Quill Pro — Upgrade"
platform: android
slug: quill-pro-paywall
screens: ["paywall"]
domains: ["productivity"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "badge", "card"]
score: {clean: 100, consistent: 86, accessible: 97, comprehensible: 25}
url: https://gui.farm/android/quill-pro-paywall
raw: https://gui.farm/android/quill-pro-paywall/design.guix
download: https://gui.farm/android/quill-pro-paywall.gui
---

# Quill Pro — Upgrade

Writing app Pro upgrade paywall with a feature list, testimonial, and annual/monthly plan toggle.

- **Live preview:** https://gui.farm/android/quill-pro-paywall
- **Raw source:** https://gui.farm/android/quill-pro-paywall/design.guix
- **Download (.gui):** https://gui.farm/android/quill-pro-paywall.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Quill Pro — Upgrade">
  <tokens>
    <color name="surface" value="#FFFFFF" />
    <color name="surface-container" value="#F4F1FA" />
    <color name="surface-selected" value="#EDE7FB" />
    <color name="on-surface" value="#1C1B1F" />
    <color name="on-surface-variant" value="#49454F" />
    <color name="outline" value="#CAC4D0" />
    <color name="outline-variant" value="#E7E0EC" />
    <color name="primary" value="#6D28D9" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="bar-neutral" value="#C9C2D4" />
    <number name="r-xs" value="6" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Wordmark" font-family="Roboto" font-size="22" font-weight="700" line-height="28" />
    <text-style name="Display" font-family="Roboto" font-size="26" font-weight="700" line-height="32" />
    <text-style name="Price" font-family="Roboto" font-size="20" font-weight="700" line-height="26" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="CTALabel" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="BodyLarge" font-family="Roboto" font-size="15" font-weight="400" line-height="22" />
    <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="700" line-height="16" letter-spacing="0.6" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$surface">
    <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=%231C1B1F" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231C1B1F" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231C1B1F" w="15" h="15" />
      </row>
    </row>

    <row role="top-navigation-bar" w="fill" h="56" p="0 8 0 4" gap="auto" align="middle-left">
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/close-rounded.svg?color=%231C1B1F" w="24" h="24" />
      </row>
      <row role="button" h="40" radius="$r-full" p="0 12" align="middle-center">
        <text text-style="LabelLarge" value="Restore" fill="$primary" />
      </row>
    </row>

    <col w="360" p="8 20 0 20" gap="10">
      <row gap="8" align="middle-left">
        <text text-style="Wordmark" value="Quill" fill="$on-surface" />
        <row role="badge" h="22" radius="$r-xs" fill="$primary" p="0 8" align="middle-center">
          <text text-style="Section" value="PRO" fill="$on-primary" />
        </row>
      </row>
      <text text-style="Display" value="Write without limits." fill="$on-surface" />
      <text w="320" text-style="BodyLarge" value="Everything in Quill, unlocked. Built for the way you actually work." fill="$on-surface-variant" />
    </col>

    <col w="360" p="16 20 2 20" gap="6">
      <row gap="8" align="middle-left">
        <row gap="4" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236D28D9" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236D28D9" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236D28D9" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236D28D9" w="16" h="16" />
          <img src="https://api.iconify.design/material-symbols/star-rounded.svg?color=%236D28D9" w="16" h="16" />
        </row>
        <text text-style="LabelLarge" value="4.9" fill="$on-surface" />
        <text text-style="BodyMedium" value="· 12,480 ratings" fill="$on-surface-variant" />
      </row>
      <text w="320" text-style="BodyMedium" value="&quot;The only writing app that gets out of my way. Worth every cent.&quot;" fill="$on-surface" />
      <text text-style="LabelMedium" value="Maya R., novelist" fill="$on-surface-variant" />
    </col>

    <col w="360" p="18 20 4 20" gap="14">
      <row gap="12" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%236D28D9" w="22" h="22" />
        <text text-style="BodyLarge" value="Unlimited documents &amp; folders" fill="$on-surface" />
      </row>
      <row gap="12" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%236D28D9" w="22" h="22" />
        <text text-style="BodyLarge" value="Offline access on all your devices" fill="$on-surface" />
      </row>
      <row gap="12" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%236D28D9" w="22" h="22" />
        <text text-style="BodyLarge" value="Version history &amp; instant backup" fill="$on-surface" />
      </row>
      <row gap="12" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%236D28D9" w="22" h="22" />
        <text text-style="BodyLarge" value="Focus mode, themes &amp; custom fonts" fill="$on-surface" />
      </row>
      <row gap="12" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/check-circle-rounded.svg?color=%236D28D9" w="22" h="22" />
        <text text-style="BodyLarge" value="Priority support, always" fill="$on-surface" />
      </row>
    </col>

    <col w="360" p="16 16 6 16">
      <col role="card" w="328" radius="$r-lg" fill="$surface-container" p="16 14" gap="14">
        <text text-style="TitleMedium" value="Save $59.89 a year with Annual" fill="$on-surface" />
        <col w="300" gap="6">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelLarge" value="Annual" fill="$on-surface" />
            <text text-style="LabelLarge" value="$59.99 / yr" fill="$on-surface" />
          </row>
          <rect w="150" h="10" radius="5" fill="$primary" />
        </col>
        <col w="300" gap="6">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="LabelLarge" value="Monthly" fill="$on-surface-variant" />
            <text text-style="LabelLarge" value="$119.88 / yr" fill="$on-surface-variant" />
          </row>
          <rect w="300" h="10" radius="5" fill="$bar-neutral" />
        </col>
      </col>
    </col>

    <col w="360" p="8 16 0 16" gap="10">
      <col role="card" w="328" radius="$r-lg" fill="$surface-selected" border="2 $primary" p="14">
        <row w="fill" gap="12" align="middle-left">
          <frame w="22" h="22">
            <ellipse w="22" h="22" fill="$primary" />
            <img x="4" y="4" src="https://api.iconify.design/material-symbols/check-rounded.svg?color=%23FFFFFF" w="14" h="14" />
          </frame>
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Annual" fill="$on-surface" />
            <text text-style="BodyMedium" value="$5.00 / month, billed yearly" fill="$on-surface-variant" />
          </col>
          <col gap="4" align="top-right">
            <row role="badge" h="20" radius="$r-xs" fill="$primary" p="0 8" align="middle-center">
              <text text-style="Section" value="SAVE 50%" fill="$on-primary" />
            </row>
            <text text-style="Price" value="$59.99" fill="$on-surface" />
          </col>
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $outline" p="14">
        <row w="fill" gap="12" align="middle-left">
          <ellipse w="22" h="22" fill="$surface" border="2 $outline" />
          <col w="fill" gap="2">
            <text text-style="TitleMedium" value="Monthly" fill="$on-surface" />
            <text text-style="BodyMedium" value="billed monthly" fill="$on-surface-variant" />
          </col>
          <text text-style="Price" value="$9.99" fill="$on-surface" />
        </row>
      </col>
    </col>

    <col w="360" fill="$surface" p="14 16 16 16" gap="12">
      <line w="328" fill="$outline-variant" />
      <text w="328" text-style="BodyMedium" value="7-day free trial, then $59.99/year. Cancel anytime." fill="$on-surface-variant" align="middle-center" />
      <row role="button" w="328" h="56" radius="$r-full" fill="$primary" gap="8" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/bolt-rounded.svg?color=%23FFFFFF" w="20" h="20" />
        <text text-style="CTALabel" value="Start 7-day free trial" fill="$on-primary" />
      </row>
      <row gap="14" align="middle-center">
        <row role="button" p="2 4" align="middle-center">
          <text text-style="LabelMedium" value="Terms of Service" fill="$primary" />
        </row>
        <text text-style="LabelMedium" value="·" fill="$on-surface-variant" />
        <row role="button" p="2 4" align="middle-center">
          <text text-style="LabelMedium" value="Privacy Policy" fill="$primary" />
        </row>
      </row>
    </col>
  </col>
</gui>

```