---
title: "Wayline — Choose Seats"
platform: ios
slug: wayline-seat-selection-ios
screens: []
domains: ["booking", "travel"]
style: "minimal"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "badge", "segmented-control", "card", "divider"]
score: {clean: 100, consistent: 89, accessible: 81, comprehensible: 19}
url: https://gui.farm/ios/wayline-seat-selection-ios
raw: https://gui.farm/ios/wayline-seat-selection-ios/design.guix
download: https://gui.farm/ios/wayline-seat-selection-ios.gui
---

# Wayline — Choose Seats

An iOS flight-booking screen for selecting adjacent aircraft seats and reviewing seat fees.

- **Live preview:** https://gui.farm/ios/wayline-seat-selection-ios
- **Raw source:** https://gui.farm/ios/wayline-seat-selection-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/wayline-seat-selection-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Wayline — Choose Seats">
  <tokens>
    <color name="canvas" value="#F4F7F8" />
    <color name="surface" value="#FFFFFF" />
    <color name="ink" value="#14262B" />
    <color name="secondary" value="#52636A" />
    <color name="line" value="#D6E0E3" />
    <color name="accent" value="#116B61" />
    <color name="accent-soft" value="#D9EEE9" />
    <color name="unavailable" value="#E6ECEE" />
    <color name="unavailable-ink" value="#586970" />
    <color name="on-accent" value="#FFFFFF" />
    <number name="r-sm" value="10" />
    <number name="r-md" value="16" />
    <number name="r-lg" value="22" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Nav" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Title" font-family="SF Pro Display" font-size="24" font-weight="700" line-height="30" letter-spacing="-0.3" />
    <text-style name="Section" font-family="SF Pro Display" font-size="17" font-weight="700" line-height="22" />
    <text-style name="Body" font-family="SF Pro Display" font-size="15" font-weight="400" line-height="20" />
    <text-style name="BodyStrong" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Label" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="18" />
    <text-style name="Caption" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Micro" font-family="SF Pro Display" font-size="11" font-weight="600" line-height="14" />
  </styles>
  <fonts><font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" /></fonts>
  <col w="393" fill="$canvas">
    <row w="fill" h="54" p="14 20 0 20" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2314262B" w="15" h="15" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2314262B" w="15" h="15" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2314262B" w="18" h="18" />
      </row>
    </row>
    <row role="top-navigation-bar" w="fill" h="52" p="0 12" gap="auto" align="middle-left" fill="$canvas">
      <row role="button" w="44" h="44" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/lucide/chevron-left.svg?color=%2314262B" w="24" h="24" /></row>
      <text text-style="Nav" value="Choose seats" fill="$ink" />
      <row role="button" w="44" h="44" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/lucide/info.svg?color=%2314262B" w="21" h="21" /></row>
    </row>
    <col w="fill" p="8 16 24 16" gap="18">
      <col w="361" gap="6">
        <row w="fill" gap="auto" align="bottom-left">
          <col gap="2"><text text-style="Title" value="Dubai to Kochi" fill="$ink" /><text text-style="Body" value="WL 431 · Today, 10:25 PM" fill="$secondary" /></col>
          <row role="badge" h="28" p="0 10" radius="$r-full" fill="$accent-soft" align="middle-center"><text text-style="Caption" value="3h 45m" fill="$accent" /></row>
        </row>
      </col>
      <row role="segmented-control" w="361" h="58" p="3" radius="$r-md" fill="$surface" border="1 $line" gap="3" align="middle-left">
        <col role="button" w="174" h="50" p="0 12" radius="13" fill="$accent-soft" gap="1" align="middle-left"><text text-style="BodyStrong" value="Anika Rao" fill="$ink" /><text text-style="Caption" value="21A · AED 85" fill="$accent" /></col>
        <col role="button" w="174" h="50" p="0 12" radius="13" gap="1" align="middle-left"><text text-style="BodyStrong" value="Dev Rao" fill="$ink" /><text text-style="Caption" value="21B · AED 85" fill="$secondary" /></col>
      </row>
      <col role="card" w="361" radius="$r-lg" fill="$surface" border="1 $line" clip="true">
        <row w="fill" h="62" p="0 16" gap="auto" align="middle-left">
          <col gap="2"><text text-style="Section" value="Economy cabin" fill="$ink" /><text text-style="Caption" value="Rows 18 to 22 · front of aircraft" fill="$secondary" /></col>
          <row role="badge" h="28" p="0 10" radius="$r-full" fill="$canvas" align="middle-center"><text text-style="Caption" value="AED 85" fill="$ink" /></row>
        </row>
        <line role="divider" w="fill" fill="$line" />
        <col w="fill" p="16 16 18 16" gap="14" align="top-center">
          <row w="329" gap="16" align="middle-left">
            <row gap="6" align="middle-left"><rect w="14" h="14" radius="4" fill="$accent" /><text text-style="Micro" value="Selected" fill="$secondary" /></row>
            <row gap="6" align="middle-left"><rect w="14" h="14" radius="4" fill="$surface" border="1 $line" /><text text-style="Micro" value="Available" fill="$secondary" /></row>
            <row gap="6" align="middle-left"><rect w="14" h="14" radius="4" fill="$unavailable" /><text text-style="Micro" value="Unavailable" fill="$secondary" /></row>
          </row>
          <col w="296" gap="10" align="top-center">
            <row w="296" h="32" radius="$r-full" fill="$canvas" gap="8" align="middle-center"><img src="https://api.iconify.design/lucide/plane.svg?color=%23116B61" w="17" h="17" /><text text-style="Caption" value="FRONT" fill="$accent" /></row>
            <row w="296" h="18" align="middle-left">
              <row w="124" gap="8" align="middle-center"><text w="36" align="center" text-style="Micro" value="A" fill="$secondary" /><text w="36" align="center" text-style="Micro" value="B" fill="$secondary" /><text w="36" align="center" text-style="Micro" value="C" fill="$secondary" /></row>
              <row w="48" align="middle-center"><text text-style="Micro" value="ROW" fill="$secondary" /></row>
              <row w="124" gap="8" align="middle-center"><text w="36" align="center" text-style="Micro" value="D" fill="$secondary" /><text w="36" align="center" text-style="Micro" value="E" fill="$secondary" /><text w="36" align="center" text-style="Micro" value="F" fill="$secondary" /></row>
            </row>
            <row w="296" h="36" align="middle-left">
              <row w="124" gap="8"><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><row w="36" h="36" radius="$r-sm" fill="$unavailable" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23586970" w="15" h="15" /></row><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /></row>
              <row w="48" align="middle-center"><text text-style="Label" value="18" fill="$secondary" /></row>
              <row w="124" gap="8"><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><row w="36" h="36" radius="$r-sm" fill="$unavailable" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23586970" w="15" h="15" /></row></row>
            </row>
            <row w="296" h="36" align="middle-left">
              <row w="124" gap="8"><row w="36" h="36" radius="$r-sm" fill="$unavailable" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23586970" w="15" h="15" /></row><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /></row>
              <row w="48" align="middle-center"><text text-style="Label" value="19" fill="$secondary" /></row>
              <row w="124" gap="8"><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><row w="36" h="36" radius="$r-sm" fill="$unavailable" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23586970" w="15" h="15" /></row><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /></row>
            </row>
            <row w="296" h="26" radius="$r-sm" fill="$canvas" p="0 10" align="middle-left"><text w="fill" text-style="Micro" value="EXIT" fill="$accent" /><text text-style="Micro" value="EXTRA LEGROOM" fill="$secondary" /><text w="fill" align="right" text-style="Micro" value="EXIT" fill="$accent" /></row>
            <row w="296" h="36" align="middle-left">
              <row w="124" gap="8"><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $accent" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $accent" /><row w="36" h="36" radius="$r-sm" fill="$unavailable" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23586970" w="15" h="15" /></row></row>
              <row w="48" align="middle-center"><text text-style="Label" value="20" fill="$secondary" /></row>
              <row w="124" gap="8"><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $accent" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $accent" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $accent" /></row>
            </row>
            <row w="296" h="36" align="middle-left">
              <row w="124" gap="8"><row w="36" h="36" radius="$r-sm" fill="$accent" align="middle-center"><text text-style="Micro" value="85" fill="$on-accent" /></row><row w="36" h="36" radius="$r-sm" fill="$accent" align="middle-center"><text text-style="Micro" value="85" fill="$on-accent" /></row><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /></row>
              <row w="48" align="middle-center"><text text-style="Label" value="21" fill="$secondary" /></row>
              <row w="124" gap="8"><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><row w="36" h="36" radius="$r-sm" fill="$unavailable" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23586970" w="15" h="15" /></row></row>
            </row>
            <row w="296" h="36" align="middle-left">
              <row w="124" gap="8"><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /></row>
              <row w="48" align="middle-center"><text text-style="Label" value="22" fill="$secondary" /></row>
              <row w="124" gap="8"><row w="36" h="36" radius="$r-sm" fill="$unavailable" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23586970" w="15" h="15" /></row><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /><rect w="36" h="36" radius="$r-sm" fill="$surface" border="1 $line" /></row>
            </row>
          </col>
        </col>
      </col>
      <row role="card" w="361" p="14 16" radius="$r-md" fill="$accent-soft" gap="12" align="middle-left">
        <row w="36" h="36" radius="$r-full" fill="$surface" align="middle-center"><img src="https://api.iconify.design/lucide/users.svg?color=%23116B61" w="18" h="18" /></row>
        <col w="fill" gap="1"><text text-style="BodyStrong" value="2 seats selected" fill="$ink" /><text text-style="Caption" value="21A and 21B · Standard" fill="$secondary" /></col>
        <text text-style="BodyStrong" value="AED 170" fill="$accent" />
      </row>
    </col>
    <col w="fill" fill="$surface" border="1 $line" p="12 16 8 16" gap="10">
      <row w="361" h="54" gap="12" align="middle-left">
        <col w="fill" gap="1"><text text-style="Caption" value="Seat total" fill="$secondary" /><text text-style="Section" value="AED 170" fill="$ink" /></col>
        <row role="button" w="184" h="52" radius="$r-full" fill="$accent" gap="8" align="middle-center"><text text-style="BodyStrong" value="Continue" fill="$on-accent" /><img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23FFFFFF" w="19" h="19" /></row>
      </row>
      <row w="fill" h="18" align="middle-center"><rect w="128" h="5" radius="3" fill="$ink" /></row>
    </col>
  </col>
</gui>
```