---
title: "Toko Max: Go Unlimited"
platform: ios
slug: toko-max-go-unlimited
screens: ["paywall"]
domains: ["education"]
style: null
fonts: ["SF Pro Display", "Space Grotesk"]
roles: ["top-navigation-bar", "button", "badge", "card", "divider", "avatar", "hyperlink"]
score: {clean: 100, consistent: 80, accessible: 84, comprehensible: 32}
url: https://gui.farm/ios/toko-max-go-unlimited
raw: https://gui.farm/ios/toko-max-go-unlimited/design.guix
download: https://gui.farm/ios/toko-max-go-unlimited.gui
---

# Toko Max: Go Unlimited

A dark Memphis-style iOS subscription paywall for the language-learning app Toko, where a Portuguese learner compares annual and monthly plans and starts a 7-day free trial.

- **Live preview:** https://gui.farm/ios/toko-max-go-unlimited
- **Raw source:** https://gui.farm/ios/toko-max-go-unlimited/design.guix
- **Download (.gui):** https://gui.farm/ios/toko-max-go-unlimited.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Toko Max: Go Unlimited">
  <tokens>
    <color name="bg" value="#151221" />
    <color name="slab" value="#221D33" />
    <color name="raised" value="#2E2842" />
    <color name="ink" value="#F7F3E9" />
    <color name="ink-dark" value="#171223" />
    <color name="muted" value="#B6AECB" />
    <color name="line" value="#3B3552" />
    <color name="marigold" value="#F5B301" />
    <color name="marigold-ink" value="#FFC933" />
    <color name="coral" value="#FF5D5D" />
    <color name="teal" value="#17C4A9" />
    <color name="lilac" value="#B98CFF" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Clock" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
    <text-style
      name="NavLink"
      font-family="Space Grotesk"
      font-size="13"
      font-weight="600"
      line-height="16"
      letter-spacing="0.3"
    />
    <text-style
      name="Eyebrow"
      font-family="Space Grotesk"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="1.4"
    />
    <text-style
      name="Hero"
      font-family="Space Grotesk"
      font-size="32"
      font-weight="700"
      line-height="36"
      letter-spacing="-0.8"
    />
    <text-style name="Subhead" font-family="SF Pro Display" font-size="15" font-weight="400" line-height="21" />
    <text-style
      name="RatingNum"
      font-family="Space Grotesk"
      font-size="14"
      font-weight="700"
      line-height="18"
    />
    <text-style
      name="RatingSub"
      font-family="SF Pro Display"
      font-size="13"
      font-weight="500"
      line-height="18"
    />
    <text-style
      name="Label"
      font-family="Space Grotesk"
      font-size="11"
      font-weight="700"
      line-height="14"
      letter-spacing="1"
    />
    <text-style
      name="BadgeSm"
      font-family="Space Grotesk"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.8"
    />
    <text-style
      name="BigPct"
      font-family="Space Grotesk"
      font-size="30"
      font-weight="700"
      line-height="32"
      letter-spacing="-1"
    />
    <text-style name="MetaB" font-family="Space Grotesk" font-size="13" font-weight="700" line-height="16" />
    <text-style name="Meta" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="FeatTitle"
      font-family="Space Grotesk"
      font-size="15"
      font-weight="700"
      line-height="19"
    />
    <text-style name="FeatSub" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Quote" font-family="SF Pro Display" font-size="15" font-weight="500" line-height="21" />
    <text-style name="Name" font-family="Space Grotesk" font-size="14" font-weight="700" line-height="17" />
    <text-style
      name="PlanName"
      font-family="Space Grotesk"
      font-size="14"
      font-weight="700"
      line-height="17"
      letter-spacing="0.2"
    />
    <text-style
      name="Price"
      font-family="Space Grotesk"
      font-size="26"
      font-weight="700"
      line-height="28"
      letter-spacing="-0.6"
    />
    <text-style
      name="PriceUnit"
      font-family="Space Grotesk"
      font-size="13"
      font-weight="600"
      line-height="16"
    />
    <text-style
      name="PriceSub"
      font-family="SF Pro Display"
      font-size="11"
      font-weight="500"
      line-height="15"
    />
    <text-style
      name="Btn"
      font-family="Space Grotesk"
      font-size="16"
      font-weight="700"
      line-height="20"
      letter-spacing="0.2"
    />
    <text-style name="Fine" font-family="SF Pro Display" font-size="12" font-weight="400" line-height="17" />
    <text-style
      name="FineLink"
      font-family="Space Grotesk"
      font-size="12"
      font-weight="600"
      line-height="17"
      letter-spacing="0.3"
    />
  </styles>
  <col w="393" fill="$bg" clip="true">
    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="54" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="Clock" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F7F3E9" w="17" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F7F3E9" w="17" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F7F3E9" w="22" h="16" />
      </row>
    </row>
    <!-- top navigation -->
    <row
      w="393"
      h="56"
      p="0 20"
      gap="10"
      align="middle-left"
      fill="$bg"
      border-bottom="2 $line"
      role="top-navigation-bar"
    >
      <col w="38" h="38" fill="$slab" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/x.svg?color=%23F7F3E9" w="18" h="18" />
      </col>
      <text w="fill" value="TOKO" text-style="Eyebrow" color="$ink" align="center" />
      <row h="34" p="0 12" gap="6" fill="$slab" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/rotate-ccw.svg?color=%23F7F3E9" w="13" h="13" />
        <text value="Restore" text-style="NavLink" color="$ink" />
      </row>
    </row>
    <col w="393" p="22 20 26 20" gap="18">
      <!-- hero -->
      <col w="353" gap="14">
        <frame w="353" h="32" clip="true">
          <row x="0" y="1" p="6 11" gap="7" fill="$coral" border="2 $ink" align="middle-center" role="badge">
            <img src="https://api.iconify.design/lucide/sparkles.svg?color=%23171223" w="13" h="13" />
            <text value="TOKO MAX" text-style="Eyebrow" color="$ink-dark" />
          </row>
        </frame>
        <col w="353" gap="0">
          <text value="Fluent Portuguese," text-style="Hero" color="$ink" />
          <text value="no daily limits." text-style="Hero" color="$marigold-ink" />
        </col>
        <text
          w="353"
          value="Toko Max unlocks unlimited lessons, offline mode, and smart review built around the words you are about to forget."
          text-style="Subhead"
          color="$muted"
        />
        <row w="353" gap="9" align="middle-left">
          <row gap="1" align="middle-center">
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="16" h="16" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="16" h="16" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="16" h="16" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="16" h="16" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="16" h="16" />
          </row>
          <text value="4.8" text-style="RatingNum" color="$ink" />
          <text value="· 2.1M learners worldwide" text-style="RatingSub" color="$muted" />
        </row>
      </col>
      <!-- progress teaser -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="13" role="card">
        <row w="317" gap="10" align="middle-left">
          <text w="fill" value="YOUR PORTUGUESE" text-style="Label" color="$muted" />
          <row p="4 9" gap="6" fill="$raised" border="2 $ink" align="middle-center" role="badge">
            <text value="A2" text-style="BadgeSm" color="$muted" />
            <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23FFC933" w="12" h="12" />
            <text value="B1" text-style="BadgeSm" color="$marigold-ink" />
          </row>
        </row>
        <row w="317" gap="12" align="bottom-left">
          <text value="62%" text-style="BigPct" color="$marigold-ink" />
          <col w="fill" gap="2" align="bottom-left">
            <text value="of the way to your B1 goal" text-style="MetaB" color="$ink" />
            <text value="1,240 words learned so far" text-style="Meta" color="$muted" />
          </col>
        </row>
        <col w="fill" h="20" fill="$raised" border="2 $ink" clip="true">
          <frame w="313" h="16" clip="true">
            <rect x="0" y="0" w="313" h="16" fill="$raised" />
            <rect x="0" y="0" w="194.06" fill="$marigold" />
          </frame>
        </col>
      </col>
      <!-- features -->
      <col w="353" fill="$slab" border="2 $ink" role="card" clip="true">
        <row w="fill" h="72" p="0 16" gap="13" align="middle-left">
          <col w="40" h="40" fill="$teal" border="2 $ink" align="middle-center">
            <img src="https://api.iconify.design/lucide/infinity.svg?color=%23171223" w="21" h="21" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="Unlimited lessons" text-style="FeatTitle" color="$ink" />
            <text
              value="No hearts, no daily cap. Practice as much as you want."
              text-style="FeatSub"
              color="$muted"
            />
          </col>
        </row>
        <line w="321" fill="$line" thickness="1" role="divider" />
        <row w="fill" h="72" p="0 16" gap="13" align="middle-left">
          <col w="40" h="40" fill="$coral" border="2 $ink" align="middle-center">
            <img src="https://api.iconify.design/lucide/download.svg?color=%23171223" w="20" h="20" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="Offline mode" text-style="FeatTitle" color="$ink" />
            <text value="Download units for the subway or a long flight." text-style="FeatSub" color="$muted" />
          </col>
        </row>
        <line w="321" fill="$line" thickness="1" role="divider" />
        <row w="fill" h="72" p="0 16" gap="13" align="middle-left">
          <col w="40" h="40" fill="$marigold" border="2 $ink" align="middle-center">
            <img src="https://api.iconify.design/lucide/brain.svg?color=%23171223" w="20" h="20" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="Smart review" text-style="FeatTitle" color="$ink" />
            <text
              value="Toko resurfaces each word right before you forget it."
              text-style="FeatSub"
              color="$muted"
            />
          </col>
        </row>
        <line w="321" fill="$line" thickness="1" role="divider" />
        <row w="fill" h="72" p="0 16" gap="13" align="middle-left">
          <col w="40" h="40" fill="$lilac" border="2 $ink" align="middle-center">
            <img src="https://api.iconify.design/lucide/shield.svg?color=%23171223" w="20" h="20" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="Streak Shield" text-style="FeatTitle" color="$ink" />
            <text value="Miss a day and your 148-day streak stays safe." text-style="FeatSub" color="$muted" />
          </col>
        </row>
      </col>
      <!-- testimonial -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="12" role="card">
        <row w="317" gap="12" align="middle-left">
          <col w="46" h="46" fill="$teal" border="2 $ink" align="middle-center" role="avatar">
            <text value="MR" text-style="Name" color="$ink-dark" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="Marina R." text-style="Name" color="$ink" />
            <text value="Learning Portuguese · 9 months in" text-style="Meta" color="$muted" />
          </col>
          <row gap="1" align="middle-center">
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="13" h="13" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="13" h="13" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="13" h="13" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="13" h="13" />
            <img src="https://api.iconify.design/mdi/star.svg?color=%23F5B301" w="13" h="13" />
          </row>
        </row>
        <text
          w="317"
          value="Bounced off three other apps first. The offline lessons on my subway commute are what finally pushed me into B1."
          text-style="Quote"
          color="$ink"
        />
      </col>
      <!-- plan selector -->
      <col w="353" gap="12">
        <row w="353" gap="10" align="middle-left">
          <text w="fill" value="CHOOSE YOUR PLAN" text-style="Label" color="$muted" />
          <row p="4 9" gap="6" fill="$raised" border="2 $ink" align="middle-center" role="badge">
            <img src="https://api.iconify.design/lucide/gift.svg?color=%23FFC933" w="12" h="12" />
            <text value="7-DAY FREE TRIAL" text-style="BadgeSm" color="$marigold-ink" />
          </row>
        </row>
        <row w="353" gap="13" align="top-left">
          <col w="170" fill="$marigold" border="2 $ink" p="14" gap="10" align="top-left">
            <appearance>
              <fill type="color" value="#F5B301" />
              <effect type="drop-shadow" x="5" y="5" radius="0" spread="0" color="#FF5D5D" />
            </appearance>
            <row w="138" gap="8" align="middle-left">
              <row p="3 7" fill="$ink-dark" align="middle-center" role="badge">
                <text value="SAVE 33%" text-style="BadgeSm" color="$marigold-ink" />
              </row>
              <col w="fill" align="middle-right">
                <col w="22" h="22" fill="$ink-dark" border="2 $ink-dark" align="middle-center">
                  <img src="https://api.iconify.design/lucide/check.svg?color=%23F5B301" w="15" h="15" />
                </col>
              </col>
            </row>
            <text value="Annual" text-style="PlanName" color="$ink-dark" />
            <row w="138" gap="3" align="bottom-left">
              <text value="$7.99" text-style="Price" color="$ink-dark" />
              <text value="/mo" text-style="PriceUnit" color="$ink-dark" />
            </row>
            <text value="Billed $95.88 per year" text-style="PriceSub" color="$ink-dark" />
          </col>
          <col w="170" fill="$slab" border="2 $ink" p="14" gap="10" align="top-left">
            <row w="138" align="middle-right">
              <ellipse w="22" h="22" fill="$raised" border="2 $line" />
            </row>
            <text value="Monthly" text-style="PlanName" color="$ink" />
            <row w="138" gap="3" align="bottom-left">
              <text value="$11.99" text-style="Price" color="$ink" />
              <text value="/mo" text-style="PriceUnit" color="$muted" />
            </row>
            <text value="Billed monthly" text-style="PriceSub" color="$muted" />
          </col>
        </row>
      </col>
      <!-- call to action -->
      <col w="353" gap="12">
        <row w="353" h="58" fill="$marigold" border="2 $ink" gap="9" align="middle-center" role="button">
          <appearance>
            <fill type="color" value="#F5B301" />
            <effect type="drop-shadow" x="5" y="5" radius="0" spread="0" color="#FF5D5D" />
          </appearance>
          <text value="Start my 7-day free trial" text-style="Btn" color="$ink-dark" />
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23171223" w="19" h="19" />
        </row>
        <text
          w="353"
          value="Free for 7 days, then $95.88 per year ($7.99/mo). Cancel anytime in Settings before the trial ends."
          text-style="Fine"
          color="$muted"
          align="center"
        />
        <row w="353" gap="8" align="middle-center">
          <text value="Restore" text-style="FineLink" color="$marigold-ink" role="hyperlink" />
          <text value="·" text-style="FineLink" color="$line" />
          <text value="Terms" text-style="FineLink" color="$marigold-ink" role="hyperlink" />
          <text value="·" text-style="FineLink" color="$line" />
          <text value="Privacy" text-style="FineLink" color="$marigold-ink" role="hyperlink" />
        </row>
      </col>
    </col>
    <!-- home indicator (device chrome, untagged) -->
    <row w="393" h="24" align="bottom-center">
      <rect w="134" h="5" fill="$ink" />
    </row>
  </col>
</gui>
```