---
title: "Vireo — Personal Loan"
platform: android
slug: vireo-personal-loan
screens: ["calculator"]
domains: ["fintech"]
style: "minimal"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "card", "badge", "slider", "chip", "divider", "banner", "button"]
score: {clean: 100, consistent: 86, accessible: 100, comprehensible: 49}
url: https://gui.farm/android/vireo-personal-loan
raw: https://gui.farm/android/vireo-personal-loan/design.guix
download: https://gui.farm/android/vireo-personal-loan.gui
---

# Vireo — Personal Loan

Personal loan calculator with amount and term controls, an estimated monthly payment, and a principal/interest breakdown.

- **Live preview:** https://gui.farm/android/vireo-personal-loan
- **Raw source:** https://gui.farm/android/vireo-personal-loan/design.guix
- **Download (.gui):** https://gui.farm/android/vireo-personal-loan.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Vireo — Personal Loan">
  <tokens>
    <color name="bg" value="#F4F1FB" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-low" value="#EAE4F7" />
    <color name="line" value="#E4DDF2" />
    <color name="ink" value="#1B1533" />
    <color name="body" value="#47415C" />
    <color name="muted" value="#6A6484" />
    <color name="primary" value="#6D28D9" />
    <color name="primary-strong" value="#5B21B6" />
    <color name="primary-soft" value="#C4B5FD" />
    <color name="primary-container" value="#EDE9FE" />
    <color name="on-primary" value="#FFFFFF" />
    <color name="on-primary-container" value="#4C1D95" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="20" />
    <number name="r-xl" value="24" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Display" font-family="Roboto" font-size="34" font-weight="500" line-height="40" letter-spacing="-0.6" />
    <text-style name="Headline" font-family="Roboto" font-size="24" font-weight="500" line-height="30" letter-spacing="-0.3" />
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="500" line-height="28" letter-spacing="-0.2" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" 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" />
  </styles>
  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>
  <col w="360" fill="$bg">
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%231B1533" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%231B1533" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%231B1533" w="15" h="15" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="64" p="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=%231B1533" w="24" h="24" />
      </row>
      <text w="fill" text-style="TitleLarge" value="Personal loan" fill="$ink" />
      <row w="48" h="48" radius="$r-full" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/help-outline-rounded.svg?color=%2347415C" w="24" h="24" />
      </row>
    </row>
    <col w="fill" p="8 16 28 16" gap="20">
      <col role="card" w="328" radius="$r-xl" fill="$primary" p="20" gap="14">
        <row w="fill" gap="auto" align="top-left">
          <col gap="4">
            <text text-style="LabelMedium" value="ESTIMATED MONTHLY" fill="$on-primary" />
            <text text-style="Display" value="$562.08" fill="$on-primary" />
          </col>
          <row role="badge" h="26" radius="$r-full" fill="$primary-container" p="0 10" gap="5" align="middle-center">
            <img src="https://api.iconify.design/material-symbols/verified-rounded.svg?color=%234C1D95" w="14" h="14" />
            <text text-style="LabelMedium" value="PRE-QUALIFIED" fill="$on-primary-container" />
          </row>
        </row>
        <row w="fill" gap="6" align="middle-left">
          <img src="https://api.iconify.design/material-symbols/lock-clock-rounded.svg?color=%23FFFFFF" w="16" h="16" />
          <text text-style="BodyMedium" value="24 monthly payments · 11.5% fixed APR" fill="$on-primary" />
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Loan amount" fill="$ink" />
          <text text-style="Headline" value="$12,000" fill="$primary-strong" />
        </row>
        <frame role="slider" w="296" h="28">
          <rect x="0" y="11" w="296" h="6" radius="3" fill="$surface-low" />
          <rect x="0" y="11" w="66" h="6" radius="3" fill="$primary" />
          <ellipse x="54" y="2" w="24" h="24" fill="$primary" border="3 $surface" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="LabelMedium" value="$1,000" fill="$muted" />
          <text text-style="LabelMedium" value="$50,000" fill="$muted" />
        </row>
      </col>
      <col w="328" gap="10">
        <text text-style="TitleMedium" value="Repayment term" fill="$ink" />
        <row w="fill" gap="8">
          <row role="chip" w="fill" h="44" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <text text-style="LabelLarge" value="12 mo" fill="$ink" />
          </row>
          <row role="chip" w="fill" h="44" radius="$r-full" fill="$primary" align="middle-center">
            <text text-style="LabelLarge" value="24 mo" fill="$on-primary" />
          </row>
          <row role="chip" w="fill" h="44" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <text text-style="LabelLarge" value="36 mo" fill="$ink" />
          </row>
        </row>
        <row w="fill" gap="8">
          <row role="chip" w="fill" h="44" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <text text-style="LabelLarge" value="48 mo" fill="$ink" />
          </row>
          <row role="chip" w="fill" h="44" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <text text-style="LabelLarge" value="60 mo" fill="$ink" />
          </row>
          <row role="chip" w="fill" h="44" radius="$r-full" fill="$surface" border="1 $line" align="middle-center">
            <text text-style="LabelLarge" value="72 mo" fill="$ink" />
          </row>
        </row>
      </col>
      <col role="card" w="328" radius="$r-lg" fill="$surface" border="1 $line" p="16" gap="14">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Cost breakdown" fill="$ink" />
          <text text-style="LabelMedium" value="OVER 24 MONTHS" fill="$muted" />
        </row>
        <row w="296" h="14" radius="7" fill="$surface-low" clip="true">
          <rect w="263" h="14" fill="$primary" />
          <rect w="33" h="14" fill="$primary-soft" />
        </row>
        <row w="fill" gap="16" align="middle-left">
          <row gap="6" align="middle-left">
            <ellipse w="10" h="10" fill="$primary" />
            <text text-style="LabelMedium" value="Principal 89.0%" fill="$body" />
          </row>
          <row gap="6" align="middle-left">
            <ellipse w="10" h="10" fill="$primary-soft" />
            <text text-style="LabelMedium" value="Interest 11.0%" fill="$body" />
          </row>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Principal" fill="$body" />
          <text text-style="LabelLarge" value="$12,000.00" fill="$ink" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="Total interest" fill="$body" />
          <text text-style="LabelLarge" value="$1,490.01" fill="$ink" />
        </row>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="BodyMedium" value="APR (fixed)" fill="$body" />
          <text text-style="LabelLarge" value="11.5%" fill="$ink" />
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="TitleMedium" value="Total payable" fill="$ink" />
          <text text-style="TitleLarge" value="$13,490.01" fill="$primary-strong" />
        </row>
      </col>
      <row role="banner" w="328" radius="$r-md" fill="$primary-container" p="12 14" gap="10" align="middle-left">
        <img src="https://api.iconify.design/material-symbols/info-rounded.svg?color=%235B21B6" w="20" h="20" />
        <text w="fill" text-style="BodyMedium" value="This is your pre-qualified fixed rate. Your final APR is confirmed at approval." fill="$on-primary-container" />
      </row>
    </col>
    <col w="fill" fill="$surface" border="1 0 0 0 $line">
      <row w="fill" h="76" p="0 16" gap="12" align="middle-left">
        <col w="fill" gap="1">
          <text text-style="LabelMedium" value="EST. MONTHLY" fill="$muted" />
          <text text-style="TitleLarge" value="$562.08" fill="$ink" />
        </col>
        <row role="button" h="52" radius="$r-full" fill="$primary" p="0 24" gap="8" align="middle-center">
          <text text-style="LabelLarge" value="Apply now" fill="$on-primary" />
          <img src="https://api.iconify.design/material-symbols/arrow-forward-rounded.svg?color=%23FFFFFF" w="19" h="19" />
        </row>
      </row>
      <row w="fill" h="24" align="middle-center">
        <rect w="108" h="4" radius="2" fill="$muted" />
      </row>
    </col>
  </col>
</gui>

```