---
title: "Relay/Pricing"
platform: web
slug: relay-saas-pricing-page-web
screens: ["pricing"]
domains: ["saas"]
style: "minimal"
fonts: ["Geist", "Geist Mono"]
roles: ["top-navigation-bar", "button", "segmented-control", "card", "badge", "table", "accordion"]
score: {clean: 100, consistent: 79, accessible: 98, comprehensible: 64}
url: https://gui.farm/web/relay-saas-pricing-page-web
raw: https://gui.farm/web/relay-saas-pricing-page-web/design.guix
download: https://gui.farm/web/relay-saas-pricing-page-web.gui
---

# Relay/Pricing

A SaaS pricing page for Relay with tiered plans and feature comparison.

- **Live preview:** https://gui.farm/web/relay-saas-pricing-page-web
- **Raw source:** https://gui.farm/web/relay-saas-pricing-page-web/design.guix
- **Download (.gui):** https://gui.farm/web/relay-saas-pricing-page-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Relay/Pricing">
  <tokens>
    <color name="bg" value="#FFFFFF" /><color name="surface" value="#F6F7F8" /><color name="card" value="#FFFFFF" />
    <color name="ink" value="#0A0A0C" /><color name="text-2" value="#55585F" /><color name="text-3" value="#9094A0" />
    <color name="border" value="#E4E6EA" /><color name="primary" value="#1B4DFF" /><color name="primary-soft" value="#EAF0FF" />
    <number name="r-sm" value="6" /><number name="r-md" value="8" />
  </tokens>
  <fonts><font family="Geist" source="google" weights="400 500 600 700" styles="normal" /><font family="Geist Mono" source="google" weights="400 500" styles="normal" /></fonts>
  <col w="1440" fill="$bg">
    <row role="top-navigation-bar" w="fill" h="64" p="0 120" gap="auto" align="middle-center" fill="$bg" border-bottom="1 $border">
      <row gap="9" align="middle-center"><rect w="22" h="22" radius="5" fill="$ink" /><text value="Relay" font-family="Geist" font-size="17" font-weight="600" color="$ink" letter-spacing="-0.3" /></row>
      <row gap="28" align="middle-center"><text value="Product" font-family="Geist" font-size="14" font-weight="500" color="$text-2" /><text value="Pricing" font-family="Geist" font-size="14" font-weight="500" color="$ink" /><text value="Docs" font-family="Geist" font-size="14" font-weight="500" color="$text-2" /></row>
      <row role="button" h="38" p="0 16" radius="$r-sm" fill="$ink" align="middle-center"><text value="Start free" font-family="Geist" font-size="13" font-weight="600" color="#FFFFFF" /></row>
    </row>
    <col w="fill" p="72 120 44" align="top-center" gap="22">
      <col w="680" align="top-center" gap="14">
        <text w="fill" value="Pricing that scales with your pipeline." font-family="Geist" font-size="44" font-weight="600" line-height="50" letter-spacing="-1.4" color="$ink" align="center" />
        <text w="500" value="Unlimited builds on every plan. Pay only for the concurrency you use." font-family="Geist" font-size="17" font-weight="400" line-height="26" color="$text-2" align="center" />
      </col>
      <row role="segmented-control" gap="0" radius="$r-sm" border="1 $border" align="middle-center">
        <col p="8 18" radius="$r-sm" fill="$ink" align="middle-center"><text value="Monthly" font-family="Geist" font-size="13" font-weight="600" color="#FFFFFF" /></col>
        <col p="8 18" align="middle-center"><text value="Annual  -20%" font-family="Geist" font-size="13" font-weight="500" color="$text-2" /></col>
      </row>
    </col>
    <row w="fill" p="0 120 56" gap="20" align="top-center">
      <col role="card" w="fill" radius="$r-md" p="28" gap="16" fill="$card" border="1 $border">
        <text value="Solo" font-family="Geist" font-size="15" font-weight="600" color="$ink" />
        <row gap="3" align="bottom-left"><text value="$0" font-family="Geist Mono" font-size="38" font-weight="500" color="$ink" /><text value="/mo" font-family="Geist" font-size="14" color="$text-3" /></row>
        <text value="For hobby projects." font-family="Geist" font-size="13" color="$text-2" />
        <row role="button" w="fill" h="42" radius="$r-sm" fill="$surface" border="1 $border" align="middle-center"><text value="Start free" font-family="Geist" font-size="14" font-weight="600" color="$ink" /></row>
      </col>
      <col role="card" w="fill" radius="$r-md" p="28" gap="16" fill="$card" border="2 $primary">
        <row gap="auto" w="fill" align="middle-center"><text value="Team" font-family="Geist" font-size="15" font-weight="600" color="$ink" /><row role="badge" p="2 9" radius="$r-sm" fill="$primary-soft" align="middle-center"><text value="Popular" font-family="Geist" font-size="11" font-weight="600" color="$primary" /></row></row>
        <row gap="3" align="bottom-left"><text value="$24" font-family="Geist Mono" font-size="38" font-weight="500" color="$ink" /><text value="/user/mo" font-family="Geist" font-size="14" color="$text-3" /></row>
        <text value="For teams shipping daily." font-family="Geist" font-size="13" color="$text-2" />
        <row role="button" w="fill" h="42" radius="$r-sm" fill="$primary" align="middle-center"><text value="Start trial" font-family="Geist" font-size="14" font-weight="600" color="#FFFFFF" /></row>
      </col>
      <col role="card" w="fill" radius="$r-md" p="28" gap="16" fill="$card" border="1 $border">
        <text value="Enterprise" font-family="Geist" font-size="15" font-weight="600" color="$ink" />
        <text value="Custom" font-family="Geist Mono" font-size="38" font-weight="500" color="$ink" />
        <text value="For scale and compliance." font-family="Geist" font-size="13" color="$text-2" />
        <row role="button" w="fill" h="42" radius="$r-sm" fill="$surface" border="1 $border" align="middle-center"><text value="Contact sales" font-family="Geist" font-size="14" font-weight="600" color="$ink" /></row>
      </col>
    </row>
    <col w="fill" p="0 120 56" gap="0">
      <col role="table" w="fill" border="1 $border" radius="$r-md" clip>
        <row w="fill" p="12 20" gap="0" fill="$surface" border-bottom="1 $border" align="middle-center">
          <text value="COMPARE PLANS" font-family="Geist Mono" font-size="11" font-weight="500" color="$text-3" w="fill" letter-spacing="0.5" />
          <text value="Solo" font-family="Geist" font-size="13" font-weight="600" color="$ink" w="140" align="center" />
          <text value="Team" font-family="Geist" font-size="13" font-weight="600" color="$primary" w="140" align="center" />
          <text value="Enterprise" font-family="Geist" font-size="13" font-weight="600" color="$ink" w="140" align="center" />
        </row>
        <row w="fill" p="13 20" gap="0" border-bottom="1 $border" align="middle-center">
          <text value="Concurrent runners" font-family="Geist" font-size="14" color="$ink" w="fill" />
          <text value="1" font-family="Geist Mono" font-size="13" color="$text-2" w="140" align="center" />
          <text value="8" font-family="Geist Mono" font-size="13" color="$ink" w="140" align="center" />
          <text value="Custom" font-family="Geist Mono" font-size="13" color="$text-2" w="140" align="center" />
        </row>
        <row w="fill" p="13 20" gap="0" border-bottom="1 $border" align="middle-center">
          <text value="Unlimited builds" font-family="Geist" font-size="14" color="$ink" w="fill" />
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%231B4DFF" w="16" h="16" /></row>
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%231B4DFF" w="16" h="16" /></row>
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%231B4DFF" w="16" h="16" /></row>
        </row>
        <row w="fill" p="13 20" gap="0" border-bottom="1 $border" align="middle-center">
          <text value="SSO and SAML" font-family="Geist" font-size="14" color="$ink" w="fill" />
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/minus.svg?color=%239094A0" w="16" h="16" /></row>
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%231B4DFF" w="16" h="16" /></row>
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%231B4DFF" w="16" h="16" /></row>
        </row>
        <row w="fill" p="13 20" gap="0" border-bottom="1 $border" align="middle-center">
          <text value="Audit logs" font-family="Geist" font-size="14" color="$ink" w="fill" />
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/minus.svg?color=%239094A0" w="16" h="16" /></row>
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/minus.svg?color=%239094A0" w="16" h="16" /></row>
          <row w="140" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%231B4DFF" w="16" h="16" /></row>
        </row>
        <row w="fill" p="13 20" gap="0" align="middle-center">
          <text value="Support" font-family="Geist" font-size="14" color="$ink" w="fill" />
          <text value="Community" font-family="Geist" font-size="12" color="$text-2" w="140" align="center" />
          <text value="Priority" font-family="Geist" font-size="12" color="$ink" w="140" align="center" />
          <text value="Dedicated" font-family="Geist" font-size="12" color="$text-2" w="140" align="center" />
        </row>
      </col>
    </col>
    <col w="fill" p="0 120 64" gap="18" align="top-center">
      <text value="Common questions" font-family="Geist" font-size="26" font-weight="600" letter-spacing="-0.5" color="$ink" align="center" />
      <col role="accordion" w="720" gap="0" border-top="1 $border">
        <row w="fill" p="16 0" gap="auto" align="middle-center" border-bottom="1 $border"><text value="How are seats counted?" font-family="Geist" font-size="15" font-weight="500" color="$ink" /><img src="https://api.iconify.design/lucide/plus.svg?color=%239094A0" w="17" h="17" /></row>
        <row w="fill" p="16 0" gap="auto" align="middle-center" border-bottom="1 $border"><text value="What if I exceed my concurrency?" font-family="Geist" font-size="15" font-weight="500" color="$ink" /><img src="https://api.iconify.design/lucide/plus.svg?color=%239094A0" w="17" h="17" /></row>
        <row w="fill" p="16 0" gap="auto" align="middle-center"><text value="Can I self-host the runners?" font-family="Geist" font-size="15" font-weight="500" color="$ink" /><img src="https://api.iconify.design/lucide/plus.svg?color=%239094A0" w="17" h="17" /></row>
      </col>
    </col>
    <col w="fill" p="36 120 44" border-top="1 $border"><row w="fill" gap="auto" align="middle-center"><text value="Relay" font-family="Geist" font-size="15" font-weight="600" color="$ink" /><text value="© 2026 Relay CI" font-family="Geist Mono" font-size="12" color="$text-3" /></row></col>
  </col>
</gui>
```