---
title: "Quarry — Command Center"
platform: web
slug: quarry-command-center-web
screens: []
domains: ["developer-tools"]
style: "minimal"
fonts: ["Geist", "JetBrains Mono"]
roles: ["top-navigation-bar", "search-bar", "button", "avatar", "sidebar", "navigation-menu", "badge", "card", "divider"]
score: {clean: 100, consistent: 87, accessible: 82, comprehensible: 40}
url: https://gui.farm/web/quarry-command-center-web
raw: https://gui.farm/web/quarry-command-center-web/design.guix
download: https://gui.farm/web/quarry-command-center-web.gui
---

# Quarry — Command Center

A desktop developer command center for finding deployment actions, destinations, and workspace commands.

- **Live preview:** https://gui.farm/web/quarry-command-center-web
- **Raw source:** https://gui.farm/web/quarry-command-center-web/design.guix
- **Download (.gui):** https://gui.farm/web/quarry-command-center-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Quarry — Command Center">
  <tokens>
    <color name="bg" value="#0B0D10" />
    <color name="surface" value="#11151A" />
    <color name="surface-raised" value="#171C22" />
    <color name="surface-hover" value="#202730" />
    <color name="selected" value="#18352F" />
    <color name="line" value="#303843" />
    <color name="line-soft" value="#252C34" />
    <color name="text" value="#F4F7FA" />
    <color name="text-secondary" value="#B8C1CB" />
    <color name="muted" value="#929EAB" />
    <color name="accent" value="#59D6B0" />
    <color name="on-accent" value="#07251D" />
    <number name="r-sm" value="6" />
    <number name="r-md" value="10" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Brand" font-family="Geist" font-size="16" font-weight="650" line-height="22" />
    <text-style name="Title" font-family="Geist" font-size="22" font-weight="600" line-height="28" letter-spacing="-0.3" />
    <text-style name="Heading" font-family="Geist" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Geist" font-size="14" font-weight="400" line-height="20" />
    <text-style name="BodyStrong" font-family="Geist" font-size="14" font-weight="550" line-height="20" />
    <text-style name="Label" font-family="Geist" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Micro" font-family="Geist" font-size="11" font-weight="550" line-height="15" />
    <text-style name="Code" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Key" font-family="JetBrains Mono" font-size="10" font-weight="600" line-height="14" />
  </styles>
  <fonts>
    <font family="Geist" source="google" weights="400 500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="500 600" styles="normal" />
  </fonts>

  <col w="1280" fill="$bg">
    <frame w="1280" h="800" clip="true">
      <rect x="0" y="0" w="1280" h="800" fill="$bg" />

      <row role="top-navigation-bar" x="0" y="0" w="1280" h="56" fill="$surface" border="0 0 1 0 $line-soft" p="0 18" gap="16" align="middle-left">
        <row w="202" gap="10" align="middle-left">
          <row w="28" h="28" radius="8" fill="$accent" align="middle-center">
            <img src="https://api.iconify.design/lucide/blocks.svg?color=%2307251D" w="17" h="17" />
          </row>
          <text text-style="Brand" value="Quarry" fill="$text" />
        </row>
        <row role="search-bar" w="420" h="34" radius="$r-sm" fill="$surface-raised" border="1 $line" p="0 10" gap="8" align="middle-left">
          <img src="https://api.iconify.design/lucide/search.svg?color=%23929EAB" w="16" h="16" />
          <text w="fill" text-style="Label" value="Search workspace" fill="$muted" />
          <row h="20" radius="4" fill="$surface-hover" border="1 $line" p="0 6" align="middle-center"><text text-style="Key" value="⌘ K" fill="$text-secondary" /></row>
        </row>
        <row w="fill" gap="12" align="middle-right">
          <row role="button" w="34" h="34" radius="$r-sm" align="middle-center"><img src="https://api.iconify.design/lucide/bell.svg?color=%23B8C1CB" w="18" h="18" /></row>
          <row role="avatar" w="30" h="30" radius="$r-full" fill="$selected" align="middle-center"><text text-style="Micro" value="AK" fill="$accent" /></row>
        </row>
      </row>

      <col role="sidebar" x="0" y="56" w="220" h="744" fill="$surface" border="0 1 0 0 $line-soft" p="20 12" gap="24">
        <col role="navigation-menu" w="196" gap="4">
          <row w="196" h="36" radius="$r-sm" fill="$surface-hover" p="0 10" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/layout-dashboard.svg?color=%23F4F7FA" w="17" h="17" /><text text-style="BodyStrong" value="Overview" fill="$text" /></row>
          <row w="196" h="36" radius="$r-sm" p="0 10" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/git-branch.svg?color=%23929EAB" w="17" h="17" /><text text-style="Body" value="Branches" fill="$text-secondary" /></row>
          <row w="196" h="36" radius="$r-sm" p="0 10" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/rocket.svg?color=%23929EAB" w="17" h="17" /><text text-style="Body" value="Deployments" fill="$text-secondary" /></row>
          <row w="196" h="36" radius="$r-sm" p="0 10" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/activity.svg?color=%23929EAB" w="17" h="17" /><text text-style="Body" value="Observability" fill="$text-secondary" /></row>
        </col>
        <col w="196" gap="8">
          <text text-style="Micro" value="WORKSPACE" fill="$muted" />
          <row w="196" h="36" p="0 10" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/box.svg?color=%23929EAB" w="17" h="17" /><text w="fill" text-style="Body" value="Atlas API" fill="$text-secondary" /><row role="badge" h="20" radius="$r-full" fill="$surface-hover" p="0 7" align="middle-center"><text text-style="Micro" value="12" fill="$text-secondary" /></row></row>
          <row w="196" h="36" p="0 10" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/box.svg?color=%23929EAB" w="17" h="17" /><text w="fill" text-style="Body" value="Beacon Web" fill="$text-secondary" /></row>
          <row w="196" h="36" p="0 10" gap="10" align="middle-left"><img src="https://api.iconify.design/lucide/box.svg?color=%23929EAB" w="17" h="17" /><text w="fill" text-style="Body" value="Courier Jobs" fill="$text-secondary" /></row>
        </col>
      </col>

      <col x="220" y="56" w="1060" h="744" p="34 40" gap="28">
        <row w="fill" gap="auto" align="middle-left">
          <col gap="4"><text text-style="Title" value="Atlas API" fill="$text" /><text text-style="Body" value="Production workspace" fill="$text-secondary" /></col>
          <row role="button" h="36" radius="$r-sm" fill="$surface-raised" border="1 $line" p="0 12" gap="8" align="middle-center"><img src="https://api.iconify.design/lucide/plus.svg?color=%23B8C1CB" w="16" h="16" /><text text-style="Label" value="New deployment" fill="$text-secondary" /></row>
        </row>
        <row w="980" gap="16">
          <col role="card" w="306" h="128" radius="$r-md" fill="$surface" border="1 $line-soft" p="16" gap="14"><row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="Requests" fill="$text-secondary" /><img src="https://api.iconify.design/lucide/activity.svg?color=%23929EAB" w="17" h="17" /></row><text text-style="Title" value="84.6k" fill="$text" /><text text-style="Micro" value="+7.4% this week" fill="$accent" /></col>
          <col role="card" w="306" h="128" radius="$r-md" fill="$surface" border="1 $line-soft" p="16" gap="14"><row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="P95 latency" fill="$text-secondary" /><img src="https://api.iconify.design/lucide/gauge.svg?color=%23929EAB" w="17" h="17" /></row><text text-style="Title" value="182 ms" fill="$text" /><text text-style="Micro" value="-16 ms since Monday" fill="$accent" /></col>
          <col role="card" w="336" h="128" radius="$r-md" fill="$surface" border="1 $line-soft" p="16" gap="14"><row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="Current release" fill="$text-secondary" /><row role="badge" h="22" radius="$r-full" fill="$selected" p="0 8" align="middle-center"><text text-style="Micro" value="HEALTHY" fill="$accent" /></row></row><text text-style="BodyStrong" value="v2.18.4" fill="$text" /><text text-style="Micro" value="deployed 34 minutes ago" fill="$text-secondary" /></col>
        </row>
        <col role="card" w="980" radius="$r-md" fill="$surface" border="1 $line-soft" clip="true">
          <row w="fill" h="44" p="0 16" gap="auto" align="middle-left"><text text-style="Heading" value="Recent activity" fill="$text" /><text text-style="Label" value="View all" fill="$text-secondary" /></row>
          <line role="divider" w="fill" fill="$line-soft" />
          <row w="fill" h="54" p="0 16" gap="12" align="middle-left"><img src="https://api.iconify.design/lucide/git-commit-horizontal.svg?color=%23929EAB" w="18" h="18" /><text w="fill" text-style="Body" value="Cache headers updated on main" fill="$text-secondary" /><text text-style="Code" value="8c9e1b7" fill="$muted" /><text text-style="Label" value="12 min" fill="$muted" /></row>
          <line w="fill" fill="$line-soft" />
          <row w="fill" h="54" p="0 16" gap="12" align="middle-left"><img src="https://api.iconify.design/lucide/rocket.svg?color=%23929EAB" w="18" h="18" /><text w="fill" text-style="Body" value="v2.18.4 promoted to production" fill="$text-secondary" /><text text-style="Code" value="iad1" fill="$muted" /><text text-style="Label" value="34 min" fill="$muted" /></row>
        </col>
      </col>

      <rect x="0" y="0" w="1280" h="800" fill="#050607B8" />

      <col x="180" y="96" w="920" radius="$r-lg" fill="$surface-raised" border="1 $line" clip="true">
        <row role="search-bar" w="920" h="72" p="0 18" gap="12" align="middle-left">
          <img src="https://api.iconify.design/lucide/search.svg?color=%2359D6B0" w="22" h="22" />
          <text w="fill" text-style="Heading" value="deploy" fill="$text" />
          <row h="24" radius="$r-sm" fill="$surface-hover" border="1 $line" p="0 8" align="middle-center"><text text-style="Key" value="ESC" fill="$text-secondary" /></row>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <row w="920" align="top-left">
          <col w="600" p="10" gap="2">
            <row w="580" h="28" p="0 10" align="middle-left"><text text-style="Micro" value="COMMANDS" fill="$muted" /></row>
            <row w="580" h="56" radius="$r-md" fill="$selected" p="0 12" gap="12" align="middle-left">
              <row w="34" h="34" radius="$r-sm" fill="$accent" align="middle-center"><img src="https://api.iconify.design/lucide/rocket.svg?color=%2307251D" w="18" h="18" /></row>
              <col w="fill" gap="1"><text text-style="BodyStrong" value="Deploy current branch" fill="$text" /><text text-style="Label" value="Atlas API / feature/cache-headers" fill="$text-secondary" /></col>
              <row h="24" radius="$r-sm" fill="$surface-hover" p="0 7" align="middle-center"><text text-style="Key" value="↵" fill="$text-secondary" /></row>
            </row>
            <row w="580" h="52" radius="$r-md" p="0 12" gap="12" align="middle-left"><row w="34" h="34" radius="$r-sm" fill="$surface-hover" align="middle-center"><img src="https://api.iconify.design/lucide/git-pull-request-create.svg?color=%23B8C1CB" w="18" h="18" /></row><text w="fill" text-style="Body" value="Create preview deployment" fill="$text-secondary" /><row h="24" radius="$r-sm" fill="$surface-hover" p="0 7" align="middle-center"><text text-style="Key" value="⌘ D" fill="$text-secondary" /></row></row>
            <row w="580" h="52" radius="$r-md" p="0 12" gap="12" align="middle-left"><row w="34" h="34" radius="$r-sm" fill="$surface-hover" align="middle-center"><img src="https://api.iconify.design/lucide/history.svg?color=%23B8C1CB" w="18" h="18" /></row><text w="fill" text-style="Body" value="Open deployment history" fill="$text-secondary" /><row h="24" radius="$r-sm" fill="$surface-hover" p="0 7" align="middle-center"><text text-style="Key" value="G D" fill="$text-secondary" /></row></row>
            <row w="580" h="52" radius="$r-md" p="0 12" gap="12" align="middle-left"><row w="34" h="34" radius="$r-sm" fill="$surface-hover" align="middle-center"><img src="https://api.iconify.design/lucide/rotate-ccw.svg?color=%23B8C1CB" w="18" h="18" /></row><text w="fill" text-style="Body" value="Rollback production release" fill="$text-secondary" /></row>
            <row w="580" h="28" p="8 10 0 10" align="middle-left"><text text-style="Micro" value="RECENT DESTINATIONS" fill="$muted" /></row>
            <row w="580" h="52" radius="$r-md" p="0 12" gap="12" align="middle-left"><row w="34" h="34" radius="$r-sm" fill="$surface-hover" align="middle-center"><img src="https://api.iconify.design/lucide/server.svg?color=%23B8C1CB" w="18" h="18" /></row><col w="fill" gap="1"><text text-style="Body" value="Production / iad1" fill="$text-secondary" /><text text-style="Label" value="Atlas API" fill="$muted" /></col></row>
            <row w="580" h="52" radius="$r-md" p="0 12" gap="12" align="middle-left"><row w="34" h="34" radius="$r-sm" fill="$surface-hover" align="middle-center"><img src="https://api.iconify.design/lucide/server.svg?color=%23B8C1CB" w="18" h="18" /></row><col w="fill" gap="1"><text text-style="Body" value="Staging / fra1" fill="$text-secondary" /><text text-style="Label" value="Beacon Web" fill="$muted" /></col></row>
          </col>
          <rect w="1" h="442" fill="$line" />
          <col w="319" p="20" gap="20">
            <col w="279" gap="8">
              <row w="fill" gap="auto" align="middle-left"><text text-style="Micro" value="PREVIEW" fill="$muted" /><row role="badge" h="22" radius="$r-full" fill="$selected" p="0 8" align="middle-center"><text text-style="Micro" value="SAFE" fill="$accent" /></row></row>
              <text text-style="Heading" value="Deploy feature/cache-headers" fill="$text" />
              <text text-style="Body" value="Create a production deployment from the latest commit on this branch." fill="$text-secondary" />
            </col>
            <col role="card" w="279" radius="$r-md" fill="$surface" border="1 $line-soft" p="14" gap="12">
              <row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="Target" fill="$muted" /><text text-style="Code" value="production" fill="$text" /></row>
              <row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="Region" fill="$muted" /><text text-style="Code" value="iad1" fill="$text" /></row>
              <row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="Commit" fill="$muted" /><text text-style="Code" value="8c9e1b7" fill="$text" /></row>
              <line role="divider" w="fill" fill="$line-soft" />
              <row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="Est. duration" fill="$muted" /><text text-style="Code" value="2m 40s" fill="$accent" /></row>
            </col>
            <col gap="8"><text text-style="Label" value="Before running" fill="$muted" /><row gap="8" align="middle-left"><img src="https://api.iconify.design/lucide/check-circle-2.svg?color=%2359D6B0" w="16" h="16" /><text text-style="Label" value="Tests passed, 184 checks" fill="$text-secondary" /></row><row gap="8" align="middle-left"><img src="https://api.iconify.design/lucide/check-circle-2.svg?color=%2359D6B0" w="16" h="16" /><text text-style="Label" value="No pending migrations" fill="$text-secondary" /></row></col>
            <row role="button" w="279" h="40" radius="$r-md" fill="$accent" gap="8" align="middle-center"><img src="https://api.iconify.design/lucide/rocket.svg?color=%2307251D" w="17" h="17" /><text text-style="BodyStrong" value="Run command" fill="$on-accent" /></row>
          </col>
        </row>
        <line w="fill" fill="$line" />
        <row w="920" h="44" p="0 14" gap="16" align="middle-left">
          <row gap="6" align="middle-left"><row w="22" h="22" radius="4" fill="$surface-hover" align="middle-center"><text text-style="Key" value="↑↓" fill="$text-secondary" /></row><text text-style="Label" value="Navigate" fill="$muted" /></row>
          <row gap="6" align="middle-left"><row w="22" h="22" radius="4" fill="$surface-hover" align="middle-center"><text text-style="Key" value="↵" fill="$text-secondary" /></row><text text-style="Label" value="Run" fill="$muted" /></row>
          <text w="fill" text-style="Label" value="7 results" fill="$muted" align="right" />
        </row>
      </col>
    </frame>
  </col>
</gui>
```