---
title: "Meridian Live Flight Map"
platform: ios
slug: meridian-live-flight-map
screens: ["map-view"]
domains: ["travel"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["top-navigation-bar", "button", "badge", "action-sheet", "card"]
score: {clean: 100, consistent: 82, accessible: 79, comprehensible: 80}
url: https://gui.farm/ios/meridian-live-flight-map
raw: https://gui.farm/ios/meridian-live-flight-map/design.guix
download: https://gui.farm/ios/meridian-live-flight-map.gui
---

# Meridian Live Flight Map

iOS live flight-tracking screen with a full-bleed DXB–LHR route map, real-time status card, and share action sheet in a premium dark-and-gold aviation style.

- **Live preview:** https://gui.farm/ios/meridian-live-flight-map
- **Raw source:** https://gui.farm/ios/meridian-live-flight-map/design.guix
- **Download (.gui):** https://gui.farm/ios/meridian-live-flight-map.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Meridian Live Flight Map">
  <tokens>
    <color name="night" value="#141715" />
    <color name="night-2" value="#20241F" />
    <color name="paper" value="#F5F2EA" />
    <color name="surface" value="#FCFAF5" />
    <color name="surface-2" value="#EAE6DD" />
    <color name="ink" value="#171A18" />
    <color name="muted" value="#6F706A" />
    <color name="line" value="#DDD8CD" />
    <color name="gold" value="#D9B65D" />
    <color name="gold-soft" value="#F1E5C5" />
    <color name="map-text" value="#F5F2EA" />
    <number name="radius-card" value="16" />
    <number name="radius-sheet" value="28" />
  </tokens>
  <styles>
    <text-style name="Title" font-family="SF Pro" font-size="22" line-height="28" font-weight="700" />
    <text-style name="Headline" font-family="SF Pro" font-size="17" line-height="22" font-weight="600" />
    <text-style name="Body" font-family="SF Pro" font-size="15" line-height="20" font-weight="400" />
    <text-style name="Footnote" font-family="SF Pro" font-size="13" line-height="18" font-weight="400" />
    <text-style name="Caption" font-family="SF Pro" font-size="11" line-height="13" font-weight="500" />
  </styles>
  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>
  <frame w="390" h="844" fill="$night" clip>
    <img x="0" y="0" w="390" h="454" fit="cover" src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/dxb-lhr-map.png" />
    <rect x="0" y="0" w="390" h="118" fill="linear-gradient(180deg, #141715EE 0%, #14171500 100%)" />
    <rect x="0" y="330" w="390" h="124" fill="linear-gradient(0deg, #141715CC 0%, #14171500 100%)" />
    <row x="22" y="12" w="346" h="35" gap="249" align="middle-center">
      <text
        value="9:41"
        font-family="SF Pro"
        font-size="15"
        line-height="18"
        font-weight="600"
        color="$map-text"
      />
      <row gap="6" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/signal.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/wifi-light.svg" w="16" h="16" />
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/battery.svg" w="20" h="16" />
      </row>
    </row>
    <row role="top-navigation-bar" x="16" y="55" w="358" h="44" gap="69" align="middle-center">
      <row role="button" w="44" h="44" radius="999" fill="#141715CC" border="1 #F5F2EA33" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/chevron-left.svg" w="22" h="22" />
      </row>
      <col w="132" gap="1" align="middle-center">
        <text
          value="MD101"
          font-family="SF Pro"
          font-size="17"
          line-height="22"
          font-weight="700"
          color="$map-text"
          align="center"
        />
        <text value="Dubai to London" text-style="Caption" color="#F5F2EABB" align="center" />
      </col>
      <row role="button" w="44" h="44" radius="999" fill="#141715CC" border="1 #F5F2EA33" align="middle-center">
        <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/share.svg" w="19" h="19" />
      </row>
    </row>
    <row
      role="badge"
      x="122"
      y="118"
      h="32"
      radius="999"
      fill="#141715D9"
      border="1 #F5F2EA33"
      p="0 12"
      gap="7"
      align="middle-center"
    >
      <ellipse w="7" h="7" fill="$gold" />
      <text
        value="LIVE  ·  3H 42M LEFT"
        font-family="SF Pro"
        font-size="11"
        line-height="13"
        font-weight="700"
        letter-spacing="0.4"
        color="$map-text"
      />
    </row>
    <row
      x="202"
      y="260"
      w="42"
      h="42"
      radius="999"
      fill="$gold"
      border="3 $night"
      align="middle-center"
      transform="rotate(-28)"
    >
      <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/plane-dark.svg" w="20" h="20" />
    </row>
    <col x="20" y="357" gap="2">
      <text
        value="Over Turkey"
        font-family="SF Pro"
        font-size="13"
        line-height="18"
        font-weight="600"
        color="$map-text"
      />
      <text
        value="10,668 m · 899 km/h"
        font-family="SF Pro"
        font-size="11"
        line-height="13"
        font-weight="500"
        color="#F5F2EBAA"
      />
    </col>
    <col
      role="action-sheet"
      x="0"
      y="430"
      w="390"
      h="414"
      fill="$paper"
      radius="$radius-sheet"
      p="10 18 10 18"
      gap="12"
    >
      <row w="fill" h="5" align="middle-center">
        <rect w="42" h="5" radius="999" fill="#C8C2B7" />
      </row>
      <row w="fill" h="48" gap="12" align="middle-left">
        <row w="44" h="44" radius="14" fill="$night" align="middle-center">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/plane-gold.svg" w="21" h="21" />
        </row>
        <col w="fill" gap="2">
          <text value="Meridian Air · MD101" text-style="Headline" color="$ink" />
          <text value="Long-haul widebody" text-style="Footnote" color="$muted" />
        </col>
        <row role="badge" h="28" radius="999" fill="$gold-soft" p="0 10" align="middle-center">
          <text value="ON TIME" text-style="Caption" color="$ink" />
        </row>
      </row>
      <row w="fill" h="62" gap="auto" align="bottom-left">
        <col gap="2">
          <text
            value="14:30"
            font-family="SF Pro"
            font-size="25"
            line-height="30"
            font-weight="700"
            font-feature="&quot;tnum&quot;"
            color="$ink"
          />
          <text value="DXB  ·  Dubai" text-style="Footnote" color="$muted" />
        </col>
        <col gap="4" align="middle-center">
          <text value="7h 40m" text-style="Caption" color="$muted" align="center" />
          <row w="134" gap="5" align="middle-center">
            <ellipse w="6" h="6" fill="$gold" />
            <line fill="$line" />
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/plane-gold.svg" w="15" h="15" />
            <line fill="$line" />
            <ellipse w="6" h="6" fill="$night" />
          </row>
        </col>
        <col gap="2" align="bottom-right">
          <text
            value="19:10"
            font-family="SF Pro"
            font-size="25"
            line-height="30"
            font-weight="700"
            font-feature="&quot;tnum&quot;"
            color="$ink"
            align="right"
          />
          <text value="LHR  ·  London" text-style="Footnote" color="$muted" align="right" />
        </col>
      </row>
      <col w="fill" gap="6">
        <row w="fill" h="8" radius="999" fill="$surface-2" clip>
          <rect w="214" h="8" radius="999" fill="$gold" />
        </row>
        <row w="fill" gap="auto" align="middle-center">
          <text value="4h 08m flown" text-style="Caption" color="$muted" />
          <text value="3,228 km remaining" text-style="Caption" color="$muted" />
        </row>
      </col>
      <row w="fill" h="86" gap="10" align="stretch">
        <col role="card" w="220" h="86" radius="$radius-card" fill="$surface" border="1 $line" p="12" gap="7">
          <row w="fill" gap="auto" align="middle-center">
            <text value="Arrival" text-style="Caption" color="$muted" />
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/map-pin.svg" w="16" h="16" />
          </row>
          <row w="fill" gap="auto" align="bottom-center">
            <col gap="1">
              <text value="Terminal 3" text-style="Headline" color="$ink" />
              <text value="Gate shown after landing" text-style="Caption" color="$muted" />
            </col>
            <text value="19:10" text-style="Headline" color="$ink" font-feature="&quot;tnum&quot;" />
          </row>
        </col>
        <col role="card" w="124" h="86" radius="$radius-card" fill="$night" p="12" gap="7">
          <text value="On board" text-style="Caption" color="#F5F2EBAA" />
          <row gap="7" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/wifi.svg" w="17" h="17" />
            <text value="Wi-Fi" text-style="Footnote" color="$paper" />
          </row>
          <row gap="7" align="middle-left">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/5666fbe6-8b92-4047-aad5-adc99cc36e7b/luggage.svg" w="17" h="17" />
            <text value="Seat 18A" text-style="Footnote" color="$paper" />
          </row>
        </col>
      </row>
      <row role="button" w="fill" h="50" radius="14" fill="$night" gap="8" align="middle-center">
        <text
          value="View flight details"
          font-family="SF Pro"
          font-size="17"
          line-height="22"
          font-weight="600"
          color="$paper"
        />
      </row>
      <row w="fill" h="20" align="bottom-center">
        <rect w="134" h="5" radius="999" fill="$ink" />
      </row>
    </col>
  </frame>
</gui>

```