---
title: "Pacifica Airways Boarding Pass"
platform: ios
slug: pacifica-airways-boarding-pass
screens: ["boarding-pass"]
domains: ["travel"]
style: "retro"
fonts: ["Space Grotesk", "Space Mono", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "hyperlink"]
score: {clean: 84, consistent: 73, accessible: 58, comprehensible: 12}
url: https://gui.farm/ios/pacifica-airways-boarding-pass
raw: https://gui.farm/ios/pacifica-airways-boarding-pass/design.guix
download: https://gui.farm/ios/pacifica-airways-boarding-pass.gui
---

# Pacifica Airways Boarding Pass

A retro, jet-age Pacifica Airways boarding pass for the LAX to HNL flight, showing the route, gate, seat, boarding zone and times, and a scannable barcode.

- **Live preview:** https://gui.farm/ios/pacifica-airways-boarding-pass
- **Raw source:** https://gui.farm/ios/pacifica-airways-boarding-pass/design.guix
- **Download (.gui):** https://gui.farm/ios/pacifica-airways-boarding-pass.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Pacifica Airways Boarding Pass">
  <tokens>
    <color name="bg" value="#F4EBD9" />
    <color name="surface" value="#FBF6EC" />
    <color name="surface-2" value="#F1E6CF" />
    <color name="ink" value="#23180B" />
    <color name="ink-2" value="#5A4A30" />
    <color name="amber" value="#E6A128" />
    <color name="amber-ink" value="#8A5A05" />
    <color name="header-sub" value="#4A3208" />
    <color name="teal" value="#0E5C52" />
    <color name="hair" value="#E2D3B4" />
    <color name="hair-2" value="#D8C7A3" />
    <number name="r-card" value="20" />
    <number name="r-md" value="14" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Code" font-family="Space Grotesk" font-size="46" font-weight="700" line-height="46" letter-spacing="-1" />
    <text-style name="Wordmark" font-family="Space Grotesk" font-size="20" font-weight="700" line-height="22" letter-spacing="0.5" />
    <text-style name="ValueLg" font-family="Space Grotesk" font-size="22" font-weight="700" line-height="26" />
    <text-style name="BtnLabel" font-family="Space Grotesk" font-size="16" font-weight="700" line-height="20" letter-spacing="0.6" />
    <text-style name="ValueMono" font-family="Space Mono" font-size="16" font-weight="700" line-height="20" />
    <text-style name="Duration" font-family="Space Mono" font-size="13" font-weight="700" line-height="16" letter-spacing="0.3" />
    <text-style name="NavTitle" font-family="Space Mono" font-size="13" font-weight="700" line-height="16" letter-spacing="1" />
    <text-style name="City" font-family="Space Mono" font-size="12" font-weight="400" line-height="15" letter-spacing="0.3" />
    <text-style name="Meta" font-family="Space Mono" font-size="12" font-weight="400" line-height="16" letter-spacing="0.2" />
    <text-style name="Label" font-family="Space Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="0.8" />
    <text-style name="Eyebrow" font-family="Space Mono" font-size="10" font-weight="700" line-height="12" letter-spacing="1.2" />
    <text-style name="Badge" font-family="Space Mono" font-size="10" font-weight="700" line-height="12" letter-spacing="0.6" />
    <text-style name="StatusTime" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
  </styles>

  <fonts>
    <font family="Space Grotesk" source="google" weights="500 700" styles="normal" />
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
    <font family="SF Pro Display" source="system" weights="400 600 700" styles="normal" />
  </fonts>

  <col w="393" fill="$bg" pb="0" gap="0">

    <!-- Status bar (device chrome, untagged) -->
    <row w="393" h="47" p="14 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="StatusTime" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2323180B" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2323180B" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2323180B" w="24" h="17" />
      </row>
    </row>

    <!-- Top navigation -->
    <row role="top-navigation-bar" w="fill" h="52" p="0 12" gap="auto" align="middle-center">
      <row role="button" w="44" h="44" align="middle-center">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%2323180B" w="24" h="24" />
      </row>
      <text value="BOARDING PASS" text-style="NavTitle" color="$ink" />
      <row role="button" w="44" h="44" align="middle-center">
        <img src="https://api.iconify.design/lucide/share.svg?color=%2323180B" w="20" h="20" />
      </row>
    </row>

    <col w="fill" p="8 16 22 16" gap="16">

      <!-- BOARDING PASS CARD -->
      <col role="card" w="fill" fill="$surface" radius="$r-card" border="1 $hair" clip="true" gap="0">
        <appearance>
          <effect type="drop-shadow" x="0" y="10" radius="26" spread="0" color="#4A320818" />
        </appearance>

        <!-- Amber header stub -->
        <col w="fill" fill="$amber" p="18 18 20 18" gap="18">
          <row w="fill" gap="auto" align="middle-center">
            <row gap="10" align="middle-center">
              <frame w="30" h="30">
                <ellipse w="30" h="30" fill="$ink" />
                <img x="6" y="6" src="https://api.iconify.design/lucide/plane.svg?color=%23E6A128" w="18" h="18" />
              </frame>
              <col gap="1">
                <text value="PACIFICA" text-style="Wordmark" color="$ink" />
                <text value="AIRWAYS · EST 1962" text-style="Eyebrow" color="$header-sub" />
              </col>
            </row>
            <col gap="6" align="middle-right">
              <text value="NONSTOP SERVICE" text-style="Eyebrow" color="$header-sub" align="right" />
              <row role="badge" fill="$ink" p="3 9" radius="$r-pill" align="middle-center">
                <text value="MAIN CABIN" text-style="Badge" color="$amber" />
              </row>
            </col>
          </row>

          <!-- Route -->
          <row w="fill" gap="auto" align="middle-center">
            <col gap="4" align="top-left">
              <text value="LAX" text-style="Code" color="$ink" />
              <text value="Los Angeles" text-style="City" color="$header-sub" />
            </col>
            <col gap="5" align="middle-center" pt="4">
              <img src="https://api.iconify.design/lucide/plane.svg?color=%2323180B" w="22" h="22" />
              <text value="5h 45m" text-style="Duration" color="$ink" />
              <text value="SEG 1 OF 1" text-style="Eyebrow" color="$header-sub" />
            </col>
            <col gap="4" align="top-right">
              <text value="HNL" text-style="Code" color="$ink" align="right" />
              <text value="Honolulu" text-style="City" color="$header-sub" align="right" />
            </col>
          </row>
        </col>

        <!-- Perforation tear-line -->
        <frame w="361" h="24" fill="$surface">
          <ellipse x="-12" y="0" w="24" h="24" fill="$bg" />
          <ellipse x="349" y="0" w="24" h="24" fill="$bg" />
          <rect x="20" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="36" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="52" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="68" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="84" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="100" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="116" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="132" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="148" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="164" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="180" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="196" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="212" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="228" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="244" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="260" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="276" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="292" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="308" y="11" w="9" h="2" radius="1" fill="$hair-2" />
          <rect x="324" y="11" w="9" h="2" radius="1" fill="$hair-2" />
        </frame>

        <!-- Detail body -->
        <col w="fill" p="4 18 18 18" gap="16">

          <row w="fill" gap="12" align="top-left">
            <col w="fill" gap="5" align="top-left">
              <text value="GATE" text-style="Label" color="$ink-2" />
              <text value="B7" text-style="ValueLg" color="$ink" />
            </col>
            <col w="fill" gap="5" align="top-center">
              <text value="BOARDING" text-style="Label" color="$ink-2" align="center" />
              <text value="9:05 AM" text-style="ValueMono" color="$ink" align="center" />
            </col>
            <col w="fill" gap="6" align="top-right">
              <text value="ZONE" text-style="Label" color="$ink-2" align="right" />
              <row gap="3" align="middle-right">
                <rect w="14" h="6" radius="2" fill="$amber" />
                <rect w="14" h="6" radius="2" fill="$amber" />
                <rect w="14" h="6" radius="2" fill="$surface-2" />
                <rect w="14" h="6" radius="2" fill="$surface-2" />
                <rect w="14" h="6" radius="2" fill="$surface-2" />
                <rect w="14" h="6" radius="2" fill="$surface-2" />
              </row>
              <text value="ZONE 2 OF 6" text-style="Meta" color="$amber-ink" align="right" />
            </col>
          </row>

          <line role="divider" w="fill" fill="$hair" />

          <row w="fill" gap="12" align="top-left">
            <col w="fill" gap="5" align="top-left">
              <text value="PASSENGER" text-style="Label" color="$ink-2" />
              <text value="R. OKONKWO" text-style="ValueMono" color="$ink" />
            </col>
            <col w="fill" gap="5" align="top-center">
              <text value="SEAT" text-style="Label" color="$ink-2" align="center" />
              <text value="14A" text-style="ValueLg" color="$ink" align="center" />
            </col>
            <col w="fill" gap="5" align="top-right">
              <text value="CLASS" text-style="Label" color="$ink-2" align="right" />
              <text value="ECONOMY" text-style="ValueMono" color="$ink" align="right" />
            </col>
          </row>

          <line role="divider" w="fill" fill="$hair" />

          <!-- Boarding times strip -->
          <col w="fill" gap="10">
            <row w="fill" gap="auto" align="middle-center">
              <text value="BOARDING TIMELINE" text-style="Label" color="$ink-2" />
              <row role="badge" fill="$teal" p="3 9" radius="$r-pill" gap="5" align="middle-center">
                <ellipse w="6" h="6" fill="#BEE8DF" />
                <text value="ON TIME" text-style="Badge" color="$surface" />
              </row>
            </row>
            <row w="fill" gap="12" align="top-left">
              <col w="fill" gap="4" align="top-left">
                <text value="BOARDS" text-style="Eyebrow" color="$ink-2" />
                <text value="9:05 AM" text-style="ValueMono" color="$ink" />
              </col>
              <col w="fill" gap="4" align="top-center">
                <text value="GATE CLOSES" text-style="Eyebrow" color="$ink-2" align="center" />
                <text value="9:25 AM" text-style="ValueMono" color="$ink" align="center" />
              </col>
              <col w="fill" gap="4" align="top-right">
                <text value="DEPARTS" text-style="Eyebrow" color="$ink-2" align="right" />
                <text value="9:35 AM" text-style="ValueMono" color="$amber-ink" align="right" />
              </col>
            </row>
          </col>

          <line role="divider" w="fill" fill="$hair" />

          <row w="fill" gap="auto" align="middle-center">
            <text value="FLIGHT PA 118" text-style="Meta" color="$ink" />
            <text value="SAT 15 AUG 2026" text-style="Meta" color="$ink-2" />
            <text value="PNR 6QX4T2" text-style="Meta" color="$ink-2" />
          </row>

          <!-- Barcode -->
          <col w="fill" gap="10" align="middle-center" pt="2">
            <frame w="297" h="58">
              <rect x="0.0" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="4.69" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="10.94" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="15.63" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="18.76" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="26.57" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="29.7" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="34.39" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="40.64" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="45.33" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="50.02" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="56.27" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="60.96" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="65.65" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="68.78" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="75.03" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="79.72" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="84.41" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="90.66" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="95.35" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="98.48" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="103.17" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="109.42" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="114.11" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="118.8" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="125.05" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="128.18" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="132.87" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="139.12" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="143.81" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="148.5" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="153.19" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="156.32" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="162.57" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="167.26" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="171.95" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="178.2" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="182.89" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="186.02" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="190.71" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="196.96" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="201.65" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="207.9" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="212.59" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="217.28" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="220.41" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="226.66" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="231.35" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="236.04" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="242.29" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="246.98" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="250.11" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="254.79" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="261.05" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="265.74" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="271.99" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="276.68" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="279.81" y="0" w="3.13" h="58" fill="$ink" />
              <rect x="284.49" y="0" w="4.69" h="58" fill="$ink" />
              <rect x="290.75" y="0" w="1.56" h="58" fill="$ink" />
              <rect x="295.44" y="0" w="1.56" h="58" fill="$ink" />
            </frame>
            <text value="PA 118  ·  LAX &gt; HNL  ·  SEQ 042  ·  ETKT 0812246170" text-style="Meta" color="$ink-2" align="center" />
          </col>

        </col>
      </col>

      <!-- Primary action -->
      <row role="button" w="fill" h="54" fill="$amber" radius="$r-md" gap="10" align="middle-center">
        <appearance>
          <effect type="drop-shadow" x="0" y="4" radius="12" spread="0" color="#8A5A0533" />
        </appearance>
        <img src="https://api.iconify.design/lucide/plane-takeoff.svg?color=%2323180B" w="20" h="20" />
        <text value="BOARDING NOW · ZONE 2" text-style="BtnLabel" color="$ink" />
      </row>

      <row w="fill" gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/map.svg?color=%230E5C52" w="15" h="15" />
        <text role="hyperlink" value="View terminal map &amp; gate directions" text-style="Label" color="$teal" />
      </row>

    </col>

    <!-- Home indicator (device chrome, untagged) -->
    <row w="393" h="28" align="middle-center">
      <rect w="140" h="5" radius="3" fill="$hair-2" />
    </row>

  </col>
</gui>
```