---
title: "Gatehouse — Access Review"
platform: web
slug: gatehouse-access-review-web
screens: []
domains: ["developer-tools"]
style: "minimal"
fonts: ["Inter", "IBM Plex Mono"]
roles: ["top-navigation-bar", "search-bar", "button", "avatar", "sidebar", "navigation-menu", "badge", "card", "divider", "select", "checkbox", "toolbar"]
score: {clean: 100, consistent: 76, accessible: 99, comprehensible: 58}
url: https://gui.farm/web/gatehouse-access-review-web
raw: https://gui.farm/web/gatehouse-access-review-web/design.guix
download: https://gui.farm/web/gatehouse-access-review-web.gui
---

# Gatehouse — Access Review

An administrator workspace for reviewing temporary production access, evaluating risk, setting duration, and recording an approval decision.

- **Live preview:** https://gui.farm/web/gatehouse-access-review-web
- **Raw source:** https://gui.farm/web/gatehouse-access-review-web/design.guix
- **Download (.gui):** https://gui.farm/web/gatehouse-access-review-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Gatehouse — Access Review">
  <tokens>
    <color name="bg" value="#F7F8FA" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-soft" value="#F2F4F7" />
    <color name="ink" value="#101828" />
    <color name="body" value="#344054" />
    <color name="muted" value="#667085" />
    <color name="line" value="#D0D5DD" />
    <color name="line-soft" value="#E4E7EC" />
    <color name="navy" value="#193153" />
    <color name="navy-soft" value="#E9EFF7" />
    <color name="blue" value="#175CD3" />
    <color name="blue-soft" value="#EFF4FF" />
    <color name="green" value="#027A48" />
    <color name="green-soft" value="#ECFDF3" />
    <color name="amber" value="#B54708" />
    <color name="amber-soft" value="#FFFAEB" />
    <color name="red" value="#B42318" />
    <color name="red-soft" value="#FEF3F2" />
    <color name="purple" value="#6941C6" />
    <color name="purple-soft" value="#F4F3FF" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="16" />
    <number name="r-pill" value="999" />
  </tokens>
  <styles>
    <text-style name="Brand" font-family="Inter" font-size="17" font-weight="700" line-height="22" />
    <text-style name="PageTitle" font-family="Inter" font-size="28" font-weight="700" line-height="36" />
    <text-style name="Heading" font-family="Inter" font-size="18" font-weight="600" line-height="26" />
    <text-style name="Title" font-family="Inter" font-size="15" font-weight="600" line-height="21" />
    <text-style name="Body" font-family="Inter" font-size="14" font-weight="400" line-height="20" />
    <text-style name="Label" font-family="Inter" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Caption" font-family="Inter" font-size="12" font-weight="400" line-height="17" />
    <text-style
      name="Micro"
      font-family="IBM Plex Mono"
      font-size="11"
      font-weight="500"
      line-height="16"
      letter-spacing="0.4"
    />
    <text-style name="Score" font-family="IBM Plex Mono" font-size="28" font-weight="600" line-height="34" />
  </styles>
  <fonts>
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="500 600" styles="normal" />
  </fonts>
  <col w="1440" fill="$bg" clip="true">
    <row
      role="top-navigation-bar"
      w="1440"
      h="64"
      fill="$surface"
      border="0 0 1 0 $line"
      p="0 20"
      gap="20"
      align="middle-left"
    >
      <row w="220" gap="10" align="middle-left">
        <row w="32" h="32" radius="$r-sm" fill="$navy" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/shield-check.svg" w="18" h="18" />
        </row>
        <text text-style="Brand" value="Gatehouse" color="$ink" />
      </row>
      <row
        role="search-bar"
        w="420"
        h="38"
        fill="$surface-soft"
        radius="$r-sm"
        p="0 12"
        gap="9"
        align="middle-left"
      >
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/search.svg" w="17" h="17" />
        <text w="fill" text-style="Body" value="Search people, groups, or requests" color="$muted" />
        <text text-style="Micro" value="⌘ K" color="$muted" />
      </row>
      <row w="fill" gap="12" align="middle-right">
        <row role="button" w="38" h="38" radius="$r-pill" border="1 $line" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/bell.svg" w="18" h="18" />
        </row>
        <row role="avatar" w="34" h="34" radius="$r-pill" fill="$navy-soft" align="middle-center">
          <text text-style="Label" value="AR" color="$navy" />
        </row>
        <col gap="0">
          <text text-style="Label" value="Ari Rao" color="$ink" />
          <text text-style="Caption" value="Security admin" color="$muted" />
        </col>
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/chevron-down.svg" w="16" h="16" />
      </row>
    </row>
    <row w="1440" h="824">
      <col role="sidebar" w="240" h="824" fill="$navy" p="20 14" gap="24">
        <col role="navigation-menu" w="212" gap="4">
          <row w="212" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/layout-dashboard.svg" w="18" h="18" />
            <text text-style="Body" value="Overview" color="#D5DDEC" />
          </row>
          <row w="212" h="42" radius="$r-sm" fill="#FFFFFF1A" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/inbox.svg" w="18" h="18" />
            <text w="fill" text-style="Title" value="Access requests" color="#FFFFFF" />
            <row role="badge" h="22" radius="$r-pill" fill="#FFFFFF" p="0 8" align="middle-center">
              <text text-style="Caption" value="12" color="$navy" />
            </row>
          </row>
          <row w="212" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/users.svg" w="18" h="18" />
            <text text-style="Body" value="Directory" color="#D5DDEC" />
          </row>
          <row w="212" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/key-round.svg" w="18" h="18" />
            <text text-style="Body" value="Roles &amp; policies" color="#D5DDEC" />
          </row>
          <row w="212" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/scroll-text.svg" w="18" h="18" />
            <text text-style="Body" value="Audit log" color="#D5DDEC" />
          </row>
        </col>
        <col w="212" h="fill" gap="auto">
          <col role="card" w="212" radius="$r-md" fill="#FFFFFF12" border="1 #FFFFFF24" p="14" gap="8">
            <text text-style="Micro" value="POLICY COVERAGE" color="#B9C5D8" />
            <text text-style="Heading" value="96.4%" color="#FFFFFF" />
            <text text-style="Caption" value="2 resources need an owner" color="#D5DDEC" />
          </col>
          <row w="212" h="42" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/settings.svg" w="18" h="18" />
            <text text-style="Body" value="Settings" color="#D5DDEC" />
          </row>
        </col>
      </col>
      <col w="1200" h="824" p="40 32" gap="32">
        <row w="fill" gap="auto" align="middle-left">
          <row role="button" h="36" radius="$r-sm" border="1 $line" p="0 12" gap="7" align="middle-center">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/arrow-left.svg" w="16" h="16" />
            <text text-style="Label" value="Queue" color="$body" />
          </row>
          <row
            role="badge"
            h="30"
            radius="$r-pill"
            fill="$amber-soft"
            border="1 #FEDF89"
            p="0 10"
            gap="7"
            align="middle-center"
          >
            <ellipse w="7" h="7" fill="$amber" />
            <text text-style="Label" value="Review due in 42 min" color="$amber" />
          </row>
        </row>
        <row w="1136" gap="24" align="top-left">
          <col w="760" gap="20">
            <col w="760" gap="5">
              <text text-style="PageTitle" value="Temporary production access" color="$ink" />
              <text text-style="Body" value="Request GH-2048 · Submitted today at 08:42 UTC" color="$muted" />
            </col>
            <row
              role="card"
              w="760"
              fill="$surface"
              border="1 $line-soft"
              radius="$r-lg"
              p="20"
              gap="18"
              align="middle-left"
            >
              <row role="avatar" w="52" h="52" radius="$r-pill" fill="$purple-soft" align="middle-center">
                <text text-style="Heading" value="MK" color="$purple" />
              </row>
              <col w="fill" gap="4">
                <row gap="8" align="middle-left">
                  <text text-style="Heading" value="Maya Kim" color="$ink" />
                  <row role="badge" h="22" radius="$r-pill" fill="$green-soft" p="0 8" align="middle-center">
                    <text text-style="Caption" value="Employee" color="$green" />
                  </row>
                </row>
                <text text-style="Body" value="Senior platform engineer · Runtime Operations" color="$body" />
                <text
                  text-style="Caption"
                  value="Manager: Theo Martin · Tenure: 2 years, 4 months"
                  color="$muted"
                />
              </col>
              <col gap="8">
                <row gap="7" align="middle-right">
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/building-2.svg" w="15" h="15" />
                  <text text-style="Caption" value="Cedar Labs" color="$muted" />
                </row>
                <row gap="7" align="middle-right">
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/laptop.svg" w="15" h="15" />
                  <text text-style="Caption" value="Managed macOS" color="$muted" />
                </row>
                <row gap="7" align="middle-right">
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/map-pin.svg" w="15" h="15" />
                  <text text-style="Caption" value="Dubai, AE" color="$muted" />
                </row>
              </col>
            </row>
            <col role="card" w="760" fill="$surface" border="1 $line-soft" radius="$r-lg" p="20" gap="16">
              <row w="fill" gap="auto" align="middle-left">
                <col gap="3">
                  <text text-style="Heading" value="Risk assessment" color="$ink" />
                  <text
                    text-style="Caption"
                    value="Calculated from identity, device, scope, and policy signals"
                    color="$muted"
                  />
                </col>
                <row gap="8" align="bottom-right">
                  <text text-style="Score" value="37" color="$amber" />
                  <text text-style="Label" value="/ 100 · Moderate" color="$amber" />
                </row>
              </row>
              <frame w="720" h="10" radius="5" clip="true">
                <rect x="0" y="0" w="720" h="10" fill="$surface-soft" />
                <rect x="0" y="0" w="266.4" h="10" radius="5" fill="$amber" />
              </frame>
              <row w="720" gap="10">
                <row
                  role="badge"
                  h="28"
                  radius="$r-pill"
                  fill="$green-soft"
                  p="0 10"
                  gap="6"
                  align="middle-center"
                >
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/circle-check.svg" w="15" h="15" />
                  <text text-style="Caption" value="Managed device" color="$green" />
                </row>
                <row
                  role="badge"
                  h="28"
                  radius="$r-pill"
                  fill="$green-soft"
                  p="0 10"
                  gap="6"
                  align="middle-center"
                >
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/circle-check.svg" w="15" h="15" />
                  <text text-style="Caption" value="MFA verified" color="$green" />
                </row>
                <row
                  role="badge"
                  h="28"
                  radius="$r-pill"
                  fill="$amber-soft"
                  p="0 10"
                  gap="6"
                  align="middle-center"
                >
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/triangle-alert.svg" w="15" h="15" />
                  <text text-style="Caption" value="Production write access" color="$amber" />
                </row>
              </row>
            </col>
            <col w="760" gap="10">
              <row w="fill" gap="auto" align="middle-left">
                <text text-style="Heading" value="Requested permissions" color="$ink" />
                <text text-style="Caption" value="3 scopes · 2 resources" color="$muted" />
              </row>
              <col role="card" w="760" fill="$surface" border="1 $line-soft" radius="$r-lg" clip="true">
                <row w="760" p="16 20" gap="14" align="middle-left">
                  <row w="40" h="40" radius="$r-sm" fill="$blue-soft" align="middle-center">
                    <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/database.svg" w="20" h="20" />
                  </row>
                  <col w="fill" gap="3">
                    <row gap="8" align="middle-left">
                      <text text-style="Title" value="Production database" color="$ink" />
                      <row role="badge" h="22" radius="$r-pill" fill="$red-soft" p="0 8" align="middle-center">
                        <text text-style="Caption" value="Write" color="$red" />
                      </row>
                    </row>
                    <text
                      text-style="Caption"
                      value="aurora-prod-eu · Read records and run migrations"
                      color="$muted"
                    />
                  </col>
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/chevron-right.svg" w="18" h="18" />
                </row>
                <line role="divider" w="760" fill="$line-soft" />
                <row w="760" p="16 20" gap="14" align="middle-left">
                  <row w="40" h="40" radius="$r-sm" fill="$purple-soft" align="middle-center">
                    <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/square-terminal.svg" w="20" h="20" />
                  </row>
                  <col w="fill" gap="3">
                    <row gap="8" align="middle-left">
                      <text text-style="Title" value="Runtime console" color="$ink" />
                      <row
                        role="badge"
                        h="22"
                        radius="$r-pill"
                        fill="$amber-soft"
                        p="0 8"
                        align="middle-center"
                      >
                        <text text-style="Caption" value="Execute" color="$amber" />
                      </row>
                    </row>
                    <text
                      text-style="Caption"
                      value="cedar-prod · Open shell sessions and restart services"
                      color="$muted"
                    />
                  </col>
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/chevron-right.svg" w="18" h="18" />
                </row>
                <line role="divider" w="760" fill="$line-soft" />
                <row w="760" p="16 20" gap="14" align="middle-left">
                  <row w="40" h="40" radius="$r-sm" fill="$green-soft" align="middle-center">
                    <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/cloud.svg" w="20" h="20" />
                  </row>
                  <col w="fill" gap="3">
                    <row gap="8" align="middle-left">
                      <text text-style="Title" value="Deployment logs" color="$ink" />
                      <row
                        role="badge"
                        h="22"
                        radius="$r-pill"
                        fill="$green-soft"
                        p="0 8"
                        align="middle-center"
                      >
                        <text text-style="Caption" value="Read" color="$green" />
                      </row>
                    </row>
                    <text
                      text-style="Caption"
                      value="All production services · View logs and traces"
                      color="$muted"
                    />
                  </col>
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/chevron-right.svg" w="18" h="18" />
                </row>
              </col>
            </col>
          </col>
          <col w="352" gap="16">
            <col role="card" w="352" fill="$surface" border="1 $line-soft" radius="$r-lg" p="18" gap="16">
              <text text-style="Heading" value="Approval settings" color="$ink" />
              <col w="316" gap="7">
                <text text-style="Label" value="Granted role" color="$body" />
                <row
                  role="select"
                  w="fill"
                  h="42"
                  border="1 $line"
                  radius="$r-sm"
                  p="0 12"
                  gap="auto"
                  align="middle-left"
                >
                  <text text-style="Body" value="Temporary production operator" color="$ink" />
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/chevron-down.svg" w="16" h="16" />
                </row>
              </col>
              <col w="316" gap="7">
                <text text-style="Label" value="Access duration" color="$body" />
                <row
                  role="select"
                  w="fill"
                  h="42"
                  border="1 $line"
                  radius="$r-sm"
                  p="0 12"
                  gap="auto"
                  align="middle-left"
                >
                  <row gap="8" align="middle-left">
                    <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/calendar-clock.svg" w="17" h="17" />
                    <text text-style="Body" value="8 hours" color="$ink" />
                  </row>
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/chevron-down.svg" w="16" h="16" />
                </row>
                <text text-style="Caption" value="Auto-revokes today at 17:12 UTC" color="$muted" />
              </col>
              <line w="316" fill="$line-soft" />
              <row role="checkbox" w="316" gap="10" align="top-left">
                <row w="20" h="20" radius="5" fill="$navy" align="middle-center">
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/check.svg" w="14" h="14" />
                </row>
                <col w="286" gap="2">
                  <text text-style="Label" value="Require MFA reauthentication" color="$ink" />
                  <text text-style="Caption" value="Prompt before the first privileged action" color="$muted" />
                </col>
              </row>
              <row role="checkbox" w="316" gap="10" align="top-left">
                <row w="20" h="20" radius="5" fill="$navy" align="middle-center">
                  <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/check.svg" w="14" h="14" />
                </row>
                <col w="286" gap="2">
                  <text text-style="Label" value="Record console sessions" color="$ink" />
                  <text text-style="Caption" value="Retain terminal activity for 90 days" color="$muted" />
                </col>
              </row>
            </col>
            <col role="card" w="352" fill="$amber-soft" border="1 #FEDF89" radius="$r-lg" p="16" gap="10">
              <row gap="9" align="middle-left">
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/shield-alert.svg" w="20" h="20" />
                <text text-style="Title" value="Policy exception" color="$red" />
              </row>
              <text
                w="320"
                text-style="Body"
                value="Database write access normally requires two approvers. Incident INC-384 activates the emergency single-approver path."
                color="$body"
              />
              <row role="button" h="34" radius="$r-sm" border="1 #FEC84B" p="0 10" align="middle-center">
                <text text-style="Label" value="View incident" color="$amber" />
              </row>
            </col>
            <col role="card" w="352" fill="$surface" border="1 $line-soft" radius="$r-lg" p="18" gap="14">
              <row gap="auto" w="fill" align="middle-left">
                <text text-style="Heading" value="Request history" color="$ink" />
                <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/history.svg" w="18" h="18" />
              </row>
              <row w="316" gap="10" align="top-left">
                <ellipse w="9" h="9" fill="$green" />
                <col w="297" gap="2">
                  <text text-style="Label" value="Manager approved" color="$ink" />
                  <text text-style="Caption" value="Theo Martin · 09:04 UTC" color="$muted" />
                </col>
              </row>
              <row w="316" gap="10" align="top-left">
                <ellipse w="9" h="9" fill="$blue" />
                <col w="297" gap="2">
                  <text text-style="Label" value="Policy engine evaluated" color="$ink" />
                  <text text-style="Caption" value="Risk score 37 · 08:43 UTC" color="$muted" />
                </col>
              </row>
              <row w="316" gap="10" align="top-left">
                <ellipse w="9" h="9" fill="$muted" />
                <col w="297" gap="2">
                  <text text-style="Label" value="Request submitted" color="$ink" />
                  <text text-style="Caption" value="Maya Kim · 08:42 UTC" color="$muted" />
                </col>
              </row>
            </col>
          </col>
        </row>
      </col>
    </row>
    <row
      role="toolbar"
      w="1440"
      h="76"
      fill="$surface"
      border="1 0 0 0 $line"
      p="0 28"
      gap="16"
      align="middle-right"
    >
      <row w="fill" gap="8" align="middle-left">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/message-square-text.svg" w="18" h="18" />
        <text
          text-style="Body"
          value="Decision and settings will be written to the audit log."
          color="$muted"
        />
      </row>
      <row role="button" h="42" radius="$r-sm" border="1 $line" p="0 18" gap="8" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/x.svg" w="17" h="17" />
        <text text-style="Label" value="Deny request" color="$body" />
      </row>
      <row role="button" h="42" radius="$r-sm" fill="$navy" p="0 18" gap="8" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/79f90800-5326-47cf-9165-ed3d224febf7/user-check.svg" w="17" h="17" />
        <text text-style="Label" value="Approve for 8 hours" color="#FFFFFF" />
      </row>
    </row>
  </col>
</gui>
```