---
title: "Meridian — Set Up Your Pipeline"
platform: web
slug: meridian-set-up-your-pipeline
screens: ["empty-state"]
domains: ["crm"]
style: "brutalist"
fonts: ["JetBrains Mono", "Space Grotesk"]
roles: ["card", "item-indicator", "button", "chip", "top-navigation-bar", "search-bar", "avatar", "sidebar", "navigation-menu", "divider", "breadcrumb", "toolbar", "badge"]
score: {clean: 100, consistent: 74, accessible: 94, comprehensible: 54}
url: https://gui.farm/web/meridian-set-up-your-pipeline
raw: https://gui.farm/web/meridian-set-up-your-pipeline/design.guix
download: https://gui.farm/web/meridian-set-up-your-pipeline.gui
---

# Meridian — Set Up Your Pipeline

A dark brutalist first-run empty state for a CRM, guiding a new user to add a first deal, import contacts, and pick a starter pipeline template.

- **Live preview:** https://gui.farm/web/meridian-set-up-your-pipeline
- **Raw source:** https://gui.farm/web/meridian-set-up-your-pipeline/design.guix
- **Download (.gui):** https://gui.farm/web/meridian-set-up-your-pipeline.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Meridian — Set Up Your Pipeline">
  <tokens>
    <color name="bg" value="#14111C" />
    <color name="panel" value="#1C1826" />
    <color name="raised" value="#241F30" />
    <color name="ink" value="#F4F0E6" />
    <color name="muted" value="#A79FB2" />
    <color name="violet" value="#7C3AED" />
    <color name="violet-2" value="#6D28D9" />
    <color name="violet-bright" value="#B69CFF" />
    <color name="line" value="#322B40" />
    <number name="r0" value="0" />
  </tokens>
  <fonts>
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="500 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Word" font-family="JetBrains Mono" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Tab" font-family="JetBrains Mono" font-size="12" font-weight="700" line-height="15" />
    <text-style name="PageTitle" font-family="Space Grotesk" font-size="30" font-weight="700" line-height="34" />
    <text-style name="Hero" font-family="Space Grotesk" font-size="26" font-weight="700" line-height="30" />
    <text-style name="H2" font-family="Space Grotesk" font-size="18" font-weight="700" line-height="22" />
    <text-style name="CardTitle" font-family="Space Grotesk" font-size="15" font-weight="700" line-height="19" />
    <text-style name="StatNum" font-family="Space Grotesk" font-size="30" font-weight="700" line-height="32" />
    <text-style name="IdxNum" font-family="JetBrains Mono" font-size="15" font-weight="700" line-height="18" />
    <text-style name="Body" font-family="JetBrains Mono" font-size="13" font-weight="500" line-height="19" />
    <text-style name="Mono" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style name="MonoB" font-family="JetBrains Mono" font-size="12" font-weight="700" line-height="15" />
    <text-style name="Label" font-family="JetBrains Mono" font-size="11" font-weight="700" line-height="14" />
    <text-style name="Code" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="16" />
  </styles>

  <components>
    <!-- ===== StatTile: an empty-state metric card ===== -->
    <component name="StatTile" id="comp-stat">
      <props>
        <prop name="label" type="text" target="st-label" />
        <prop name="value" type="text" target="st-value" />
        <prop name="sub" type="text" target="st-sub" />
      </props>
      <col w="fill" p="16" gap="8" fill="$panel" border="2 $ink" role="card">
        <row w="fill" gap="8" align="middle-left">
          <text id="st-label" text-style="Label" value="DEALS" color="$muted" text-case="uppercase" letter-spacing="0.6" />
          <row w="fill" align="middle-right">
            <rect w="8" h="8" fill="$violet" />
          </row>
        </row>
        <text id="st-value" text-style="StatNum" value="0" color="$ink" />
        <text id="st-sub" text-style="Mono" value="NOTHING TO SHOW YET" color="$muted" text-case="uppercase" letter-spacing="0.4" />
      </col>
    </component>

    <!-- ===== SetupStep: one row in the get-started checklist ===== -->
    <component name="SetupStep" id="comp-step">
      <props>
        <prop name="num" type="text" target="sp-num" />
        <prop name="title" type="text" target="sp-title" />
        <prop name="desc" type="text" target="sp-desc" />
        <prop name="cta" type="text" target="sp-cta" />
      </props>
      <row w="fill" p="14 16" gap="14" fill="$panel" border="2 $ink" align="middle-left">
        <col w="36" h="36" fill="$bg" border="2 $ink" align="middle-center" role="item-indicator">
          <text id="sp-num" text-style="IdxNum" value="01" color="$violet-bright" />
        </col>
        <col w="fill" gap="3">
          <text id="sp-title" text-style="CardTitle" value="Add your first deal" color="$ink" />
          <text id="sp-desc" text-style="Mono" value="Create a card and drop it into a pipeline stage." color="$muted" />
        </col>
        <row p="9 14" gap="7" fill="$violet" border="2 $ink" align="middle-center" role="button">
          <text id="sp-cta" text-style="MonoB" value="START" color="$ink" text-case="uppercase" letter-spacing="0.5" />
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23F4F0E6" w="14" h="14" />
        </row>
      </row>
    </component>

    <!-- ===== TemplateCard: a starter pipeline template ===== -->
    <component name="TemplateCard" id="comp-tpl">
      <props>
        <prop name="code" type="text" target="tp-code" />
        <prop name="title" type="text" target="tp-title" />
        <prop name="desc" type="text" target="tp-desc" />
        <prop name="meta" type="text" target="tp-meta" />
      </props>
      <col w="fill" p="14" gap="11" fill="$panel" border="2 $ink" role="card">
        <row w="fill" gap="10" align="middle-left">
          <col w="44" h="30" fill="$violet" border="2 $ink" align="middle-center">
            <text id="tp-code" text-style="Code" value="SAL" color="$ink" />
          </col>
          <text id="tp-title" text-style="CardTitle" value="Sales Pipeline" color="$ink" w="fill" />
        </row>
        <text id="tp-desc" text-style="Mono" value="Leads to closed-won, six stages." color="$muted" />
        <row w="fill" gap="8" align="middle-left">
          <text id="tp-meta" text-style="Label" value="6 STAGES" color="$muted" text-case="uppercase" letter-spacing="0.5" />
          <row w="fill" align="middle-right">
            <row p="5 9" gap="6" fill="none" border="2 $violet-bright" align="middle-center" role="chip">
              <text text-style="Label" value="USE" color="$violet-bright" letter-spacing="0.6" />
              <img src="https://api.iconify.design/lucide/plus.svg?color=%23B69CFF" w="13" h="13" />
            </row>
          </row>
        </row>
      </col>
    </component>
  </components>

  <!-- ============================ ROOT ============================ -->
  <col w="1440" fill="$bg">

    <!-- ===================== TOP NAV ===================== -->
    <row w="fill" h="64" p="0 28" gap="24" align="middle-left" fill="$panel" border-bottom="2 $ink" role="top-navigation-bar">
      <row gap="10" align="middle-center">
        <col w="30" h="30" fill="$violet" border="2 $ink" align="middle-center">
          <img src="https://api.iconify.design/lucide/git-branch-plus.svg?color=%23F4F0E6" w="17" h="17" />
        </col>
        <text text-style="Word" value="MERIDIAN" color="$ink" letter-spacing="1" />
      </row>
      <row h="fill" gap="0" align="middle-left">
        <row p="0 16" h="64" align="middle-center" border-bottom="4 $violet">
          <text text-style="Tab" value="HOME" color="$ink" text-case="uppercase" letter-spacing="0.6" />
        </row>
        <row p="0 16" h="64" align="middle-center">
          <text text-style="Tab" value="DEALS" color="$muted" text-case="uppercase" letter-spacing="0.6" />
        </row>
        <row p="0 16" h="64" align="middle-center">
          <text text-style="Tab" value="CONTACTS" color="$muted" text-case="uppercase" letter-spacing="0.6" />
        </row>
        <row p="0 16" h="64" align="middle-center">
          <text text-style="Tab" value="REPORTS" color="$muted" text-case="uppercase" letter-spacing="0.6" />
        </row>
      </row>
      <row w="fill" gap="14" align="middle-right">
        <row w="248" p="9 12" gap="9" fill="$bg" border="2 $ink" align="middle-left" role="search-bar">
          <img src="https://api.iconify.design/lucide/search.svg?color=%23A79FB2" w="15" h="15" />
          <text text-style="Mono" value="Search deals, people, companies" color="$muted" />
        </row>
        <col w="38" h="38" fill="$panel" border="2 $ink" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%23A79FB2" w="17" h="17" />
        </col>
        <col w="38" h="38" fill="$panel" border="2 $ink" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/circle-help.svg?color=%23A79FB2" w="17" h="17" />
        </col>
        <col w="38" h="38" fill="$violet" border="2 $ink" align="middle-center" role="avatar">
          <text text-style="MonoB" value="DO" color="$ink" />
        </col>
      </row>
    </row>

    <!-- ===================== BODY ===================== -->
    <row w="fill" p="24" gap="24" align="top-left">

      <!-- ============ SIDEBAR ============ -->
      <col w="248" fill="$panel" border="2 $ink" p="16" gap="18" role="sidebar">
        <col w="fill" gap="6" role="navigation-menu">
          <row w="fill" p="10 12" gap="11" fill="$violet" border="2 $ink" align="middle-left">
            <img src="https://api.iconify.design/lucide/house.svg?color=%23F4F0E6" w="17" h="17" />
            <text text-style="MonoB" value="Home" color="$ink" />
          </row>
          <row w="fill" p="10 12" gap="11" align="middle-left">
            <img src="https://api.iconify.design/lucide/handshake.svg?color=%23A79FB2" w="17" h="17" />
            <text text-style="Mono" value="Deals" color="$muted" />
            <row w="fill" align="middle-right">
              <text text-style="Label" value="0" color="$muted" />
            </row>
          </row>
          <row w="fill" p="10 12" gap="11" align="middle-left">
            <img src="https://api.iconify.design/lucide/users.svg?color=%23A79FB2" w="17" h="17" />
            <text text-style="Mono" value="Contacts" color="$muted" />
            <row w="fill" align="middle-right">
              <text text-style="Label" value="0" color="$muted" />
            </row>
          </row>
          <row w="fill" p="10 12" gap="11" align="middle-left">
            <img src="https://api.iconify.design/lucide/building-2.svg?color=%23A79FB2" w="17" h="17" />
            <text text-style="Mono" value="Companies" color="$muted" />
            <row w="fill" align="middle-right">
              <text text-style="Label" value="0" color="$muted" />
            </row>
          </row>
          <row w="fill" p="10 12" gap="11" align="middle-left">
            <img src="https://api.iconify.design/lucide/square-check-big.svg?color=%23A79FB2" w="17" h="17" />
            <text text-style="Mono" value="Tasks" color="$muted" />
            <row w="fill" align="middle-right">
              <text text-style="Label" value="0" color="$muted" />
            </row>
          </row>
          <row w="fill" p="10 12" gap="11" align="middle-left">
            <img src="https://api.iconify.design/lucide/chart-no-axes-column.svg?color=%23A79FB2" w="17" h="17" />
            <text text-style="Mono" value="Reports" color="$muted" />
          </row>
        </col>

        <line fill="$line" thickness="2" role="divider" />

        <col w="fill" gap="10" p="14" fill="$bg" border="2 $violet-bright">
          <row w="fill" gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/zap.svg?color=%23B69CFF" w="15" h="15" />
            <text text-style="Label" value="FREE TRIAL" color="$violet-bright" letter-spacing="0.6" />
          </row>
          <text text-style="MonoB" value="11 days left" color="$ink" />
          <col w="fill" h="8" fill="$panel" border="2 $ink">
            <rect w="52" h="4" fill="$violet" />
          </col>
          <text text-style="Mono" value="Seats: 1 of 3 used" color="$muted" />
          <row w="fill" p="9 12" gap="7" fill="$violet" border="2 $ink" align="middle-center" role="button">
            <text text-style="MonoB" value="UPGRADE PLAN" color="$ink" letter-spacing="0.5" />
          </row>
        </col>
      </col>

      <!-- ============ MAIN ============ -->
      <col w="1120" gap="20">

        <!-- breadcrumb -->
        <row gap="8" align="middle-left" role="breadcrumb">
          <text text-style="Label" value="NORTHWIND TRADING" color="$muted" letter-spacing="0.6" />
          <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23A79FB2" w="13" h="13" />
          <text text-style="Label" value="GET STARTED" color="$violet-bright" letter-spacing="0.6" />
        </row>

        <!-- toolbar / page header -->
        <row w="fill" gap="16" align="middle-left" role="toolbar">
          <col gap="6">
            <text text-style="PageTitle" value="Your pipeline is empty" color="$ink" />
            <text text-style="Body" value="Set up Meridian in a few steps, then your deals and contacts land here." color="$muted" />
          </col>
          <row w="fill" gap="10" align="middle-right">
            <row p="8 12" gap="8" fill="$panel" border="2 $ink" align="middle-center" role="badge">
              <ellipse w="8" h="8" fill="$violet-bright" />
              <text text-style="Label" value="SETUP 0 OF 6" color="$ink" letter-spacing="0.5" />
            </row>
          </row>
        </row>

        <!-- empty stat tiles -->
        <grid cols="3" gap="16" w="1120">
          <instance component="comp-stat" label="OPEN DEALS" value="0" sub="ADD ONE TO BEGIN" />
          <instance component="comp-stat" label="PIPELINE VALUE" value="$0" sub="NO REVENUE TRACKED" />
          <instance component="comp-stat" label="CONTACTS" value="0" sub="IMPORT TO POPULATE" />
        </grid>

        <!-- empty-state hero -->
        <col w="1120" p="34" gap="18" align="middle-center" border="2 $ink" role="card">
          <appearance>
            <fill type="color" value="#1C1826" />
            <effect type="drop-shadow" x="7" y="7" radius="0" spread="0" color="#7C3AED" />
          </appearance>
          <col w="66" h="66" fill="$violet" border="2 $ink" align="middle-center">
            <img src="https://api.iconify.design/lucide/kanban.svg?color=%23F4F0E6" w="34" h="34" />
          </col>
          <col gap="7" align="middle-center">
            <text text-style="Hero" value="No deals in your pipeline yet" color="$ink" align="center" />
            <text text-style="Body" value="Add a deal by hand or import your book of business from a CSV. It takes about two minutes." color="$muted" align="center" w="560" />
          </col>
          <row gap="12" align="middle-center">
            <row p="12 18" gap="9" border="2 $ink" align="middle-center" role="button">
              <appearance>
                <fill type="color" value="#7C3AED" />
                <effect type="drop-shadow" x="4" y="4" radius="0" spread="0" color="#14111C" />
              </appearance>
              <img src="https://api.iconify.design/lucide/plus.svg?color=%23F4F0E6" w="17" h="17" />
              <text text-style="MonoB" value="ADD YOUR FIRST DEAL" color="$ink" letter-spacing="0.5" />
            </row>
            <row p="12 18" gap="9" fill="$bg" border="2 $ink" align="middle-center" role="button">
              <img src="https://api.iconify.design/lucide/upload.svg?color=%23B69CFF" w="17" h="17" />
              <text text-style="MonoB" value="IMPORT FROM CSV" color="$violet-bright" letter-spacing="0.5" />
            </row>
          </row>
        </col>

        <!-- checklist + templates -->
        <row w="1120" gap="16" align="top-left">

          <!-- setup checklist -->
          <col w="688" gap="12">
            <row w="fill" gap="10" align="middle-left">
              <text text-style="H2" value="Finish setting up" color="$ink" />
              <row w="fill" align="middle-right">
                <text text-style="Label" value="EST. 8 MIN" color="$muted" letter-spacing="0.6" />
              </row>
            </row>
            <instance component="comp-step" num="01" title="Add your first deal" desc="Create a card and drop it into a pipeline stage." cta="START" />
            <instance component="comp-step" num="02" title="Import your contacts" desc="Upload a CSV or sync from Google to fill your address book." cta="IMPORT" />
            <instance component="comp-step" num="03" title="Connect your inbox" desc="Log emails automatically by linking Gmail or Outlook." cta="CONNECT" />
            <instance component="comp-step" num="04" title="Customize pipeline stages" desc="Rename the six default stages to match how your team sells." cta="EDIT" />
            <instance component="comp-step" num="05" title="Invite your team" desc="Bring in up to two teammates on the free trial." cta="INVITE" />
            <instance component="comp-step" num="06" title="Set a monthly target" desc="Pick a revenue goal so the dashboard has something to chart." cta="SET" />
          </col>

          <!-- starter templates -->
          <col w="416" gap="12">
            <text text-style="H2" value="Start from a template" color="$ink" />
            <grid cols="2" gap="12" w="416">
              <instance component="comp-tpl" code="SAL" title="Sales Pipeline" desc="Leads to closed-won, six stages." meta="6 STAGES" />
              <instance component="comp-tpl" code="FND" title="Fundraising" desc="Investor outreach to term sheet." meta="5 STAGES" />
              <instance component="comp-tpl" code="REC" title="Recruiting" desc="Applied to hired, with interviews." meta="7 STAGES" />
              <instance component="comp-tpl" code="CS" title="Customer Success" desc="Onboarding to renewal tracking." meta="4 STAGES" />
            </grid>
            <row w="fill" p="14" gap="11" fill="$bg" border="2 $ink" align="middle-left">
              <img src="https://api.iconify.design/lucide/library-big.svg?color=%23B69CFF" w="18" h="18" />
              <col w="fill" gap="2">
                <text text-style="MonoB" value="Browse all 24 templates" color="$ink" />
                <text text-style="Mono" value="Real estate, agencies, SaaS." color="$muted" />
              </col>
              <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23A79FB2" w="16" h="16" />
            </row>
          </col>
        </row>

        <!-- footer help strip -->
        <row w="1120" p="16 18" gap="12" fill="$panel" border="2 $ink" align="middle-left">
          <img src="https://api.iconify.design/lucide/life-buoy.svg?color=%23B69CFF" w="18" h="18" />
          <text text-style="Body" value="New to Meridian? Book a 15-minute onboarding call and we will set up your first pipeline with you." color="$muted" w="fill" />
          <row p="9 14" gap="7" fill="$bg" border="2 $violet-bright" align="middle-center" role="button">
            <text text-style="MonoB" value="BOOK A CALL" color="$violet-bright" letter-spacing="0.5" />
          </row>
        </row>

      </col>
    </row>
  </col>
</gui>

```