---
title: "Wayfarer - Lisbon & Sintra Itinerary"
platform: web
slug: wayfarer-lisbon-sintra-itinerary
screens: []
domains: ["travel"]
style: "flat"
fonts: ["Bricolage Grotesque", "Plus Jakarta Sans", "Space Mono"]
roles: ["top-navigation-bar", "button", "segmented-control", "avatar", "card", "navigation-menu", "divider", "chip", "badge"]
score: {clean: 100, consistent: 79, accessible: 93, comprehensible: 40}
url: https://gui.farm/web/wayfarer-lisbon-sintra-itinerary
raw: https://gui.farm/web/wayfarer-lisbon-sintra-itinerary/design.guix
download: https://gui.farm/web/wayfarer-lisbon-sintra-itinerary.gui
---

# Wayfarer - Lisbon & Sintra Itinerary

A four-day Lisbon & Sintra trip planner with a day-by-day activity timeline (times, durations, costs), a proportional day-at-a-glance strip, a budget breakdown, a route map and a weather forecast.

- **Live preview:** https://gui.farm/web/wayfarer-lisbon-sintra-itinerary
- **Raw source:** https://gui.farm/web/wayfarer-lisbon-sintra-itinerary/design.guix
- **Download (.gui):** https://gui.farm/web/wayfarer-lisbon-sintra-itinerary.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Wayfarer - Lisbon &amp; Sintra Itinerary">
  <tokens>
    <color name="bg" value="#FBF7F4" />
    <color name="surface" value="#FFFFFF" />
    <color name="surface-2" value="#F4ECE7" />
    <color name="soft" value="#FBE3DB" />
    <color name="track" value="#EFE4DC" />
    <color name="line" value="#E7DDD5" />
    <color name="line-strong" value="#D8C7BB" />
    <color name="ink" value="#211A17" />
    <color name="body" value="#4A3B34" />
    <color name="muted" value="#7A665C" />
    <color name="faint" value="#7E6A5F" />
    <color name="accent" value="#E4572E" />
    <color name="accent-strong" value="#C6421B" />
    <color name="accent-deep" value="#A5360F" />
    <color name="white" value="#FFFFFF" />
    <number name="r-sm" value="6" />
    <number name="r-md" value="10" />
    <number name="r-lg" value="16" />
    <number name="r-pill" value="999" />
  </tokens>
  <fonts>
    <font family="Bricolage Grotesque" source="google" weights="700 800" styles="normal" />
    <font family="Plus Jakarta Sans" source="google" weights="400 500 600 700" styles="normal" />
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="Display"
      font-family="Bricolage Grotesque"
      font-size="26"
      font-weight="800"
      line-height="30"
    />
    <text-style
      name="Wordmark"
      font-family="Bricolage Grotesque"
      font-size="17"
      font-weight="700"
      line-height="20"
    />
    <text-style
      name="DayNum"
      font-family="Bricolage Grotesque"
      font-size="30"
      font-weight="800"
      line-height="32"
    />
    <text-style name="H2" font-family="Plus Jakarta Sans" font-size="17" font-weight="600" line-height="22" />
    <text-style name="H3" font-family="Plus Jakarta Sans" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Plus Jakarta Sans" font-size="13" font-weight="400" line-height="19" />
    <text-style
      name="Label"
      font-family="Plus Jakarta Sans"
      font-size="13"
      font-weight="500"
      line-height="18"
    />
    <text-style
      name="LabelB"
      font-family="Plus Jakarta Sans"
      font-size="13"
      font-weight="600"
      line-height="18"
    />
    <text-style
      name="Small"
      font-family="Plus Jakarta Sans"
      font-size="12"
      font-weight="500"
      line-height="16"
    />
    <text-style name="Nav" font-family="Plus Jakarta Sans" font-size="13" font-weight="600" line-height="16" />
    <text-style name="Btn" font-family="Plus Jakarta Sans" font-size="13" font-weight="600" line-height="16" />
    <text-style
      name="Eyebrow"
      font-family="Plus Jakarta Sans"
      font-size="11"
      font-weight="600"
      line-height="14"
    />
    <text-style name="Tiny" font-family="Plus Jakarta Sans" font-size="10" font-weight="600" line-height="13" />
    <text-style name="Time" font-family="Space Mono" font-size="14" font-weight="700" line-height="18" />
    <text-style name="Mono" font-family="Space Mono" font-size="12" font-weight="400" line-height="16" />
    <text-style name="MonoB" font-family="Space Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="Metric" font-family="Space Mono" font-size="22" font-weight="700" line-height="26" />
  </styles>
  <col w="1440" fill="$bg">
    <!-- ===================== TOP NAV ===================== -->
    <row
      w="fill"
      h="60"
      p="0 40"
      gap="18"
      align="middle-left"
      fill="$surface"
      border="0 0 1 0 $line"
      role="top-navigation-bar"
    >
      <row gap="10" align="middle-center">
        <row w="28" h="28" radius="$r-sm" fill="$accent-strong" align="middle-center">
          <img src="https://api.iconify.design/lucide/route.svg?color=%23FFFFFF" w="16" h="16" />
        </row>
        <text text-style="Wordmark" value="Wayfarer" color="$ink" letter-spacing="-0.2" />
      </row>
      <row p="6 11" gap="9" radius="$r-md" fill="$bg" border="1 $line" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/map-pin.svg?color=%23A5360F" w="14" h="14" />
        <text text-style="Label" value="Lisbon &amp; Sintra" color="$ink" />
        <row p="1 6" radius="$r-sm" fill="$surface-2">
          <text text-style="Mono" value="Sep 2026" color="$muted" />
        </row>
        <img src="https://api.iconify.design/lucide/chevrons-up-down.svg?color=%237A665C" w="14" h="14" />
      </row>
      <row w="fill" gap="14" align="middle-right">
        <row
          h="34"
          fill="$bg"
          border="1 $line"
          radius="$r-md"
          p="3"
          gap="2"
          align="middle-left"
          role="segmented-control"
        >
          <row h="26" p="0 13" radius="$r-sm" fill="$accent-strong" align="middle-center">
            <text text-style="Nav" value="Itinerary" color="$white" />
          </row>
          <row h="26" p="0 13" align="middle-center">
            <text text-style="Nav" value="Map" color="$muted" />
          </row>
          <row h="26" p="0 13" align="middle-center">
            <text text-style="Nav" value="Budget" color="$muted" />
          </row>
        </row>
        <row p="9 14" gap="8" radius="$r-md" fill="$accent-strong" align="middle-center" role="button">
          <img src="https://api.iconify.design/lucide/share-2.svg?color=%23FFFFFF" w="15" h="15" />
          <text text-style="Btn" value="Share trip" color="$white" />
        </row>
        <row
          w="34"
          h="34"
          radius="$r-pill"
          fill="$soft"
          border="1 $line-strong"
          align="middle-center"
          role="avatar"
        >
          <text text-style="Tiny" value="JC" color="$accent-deep" />
        </row>
      </row>
    </row>
    <!-- ===================== BODY ===================== -->
    <row w="fill" p="28 40 40 40" gap="28" align="top-left">
      <!-- ============ LEFT COLUMN ============ -->
      <col w="352" gap="20">
        <!-- Trip hero card -->
        <col w="352" fill="$surface" border="1 $line" radius="$r-lg" clip="true">
          <img
            src="https://images.unsplash.com/photo-1753236431862-cd7cbf87d1f4?w=704&amp;h=340&amp;fit=crop&amp;auto=format&amp;q=70"
            w="352"
            h="168"
          />
          <col w="fill" p="16" gap="12">
            <col gap="3">
              <text text-style="Display" value="Lisbon &amp; Sintra" color="$ink" letter-spacing="-0.5" />
              <text
                text-style="Body"
                value="Four days through Alfama, Belem and the hills of Sintra."
                color="$muted"
              />
            </col>
            <row w="fill" gap="10" align="middle-left">
              <row gap="7" align="middle-center">
                <img src="https://api.iconify.design/lucide/calendar.svg?color=%23A5360F" w="14" h="14" />
                <text text-style="Label" value="Sep 12 - 15, 2026" color="$body" />
              </row>
              <ellipse w="3" h="3" fill="$line-strong" />
              <text text-style="Label" value="4 days · 3 nights" color="$body" />
            </row>
          </col>
        </col>
        <!-- Trip stat tiles -->
        <row w="352" gap="11" align="top-left">
          <col w="110" fill="$surface" border="1 $line" radius="$r-md" p="12 12" gap="5" role="card">
            <img src="https://api.iconify.design/lucide/building-2.svg?color=%238A776C" w="16" h="16" />
            <text text-style="Metric" font-size="20" line-height="24" value="2" color="$ink" />
            <text text-style="Small" value="Cities" color="$muted" />
          </col>
          <col w="110" fill="$surface" border="1 $line" radius="$r-md" p="12 12" gap="5" role="card">
            <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="16" h="16" />
            <text text-style="Metric" font-size="20" line-height="24" value="14" color="$ink" />
            <text text-style="Small" value="Stops" color="$muted" />
          </col>
          <col w="110" fill="$surface" border="1 $line" radius="$r-md" p="12 12" gap="5" role="card">
            <img src="https://api.iconify.design/lucide/footprints.svg?color=%238A776C" w="16" h="16" />
            <text text-style="Metric" font-size="20" line-height="24" value="31" color="$ink" />
            <text text-style="Small" value="km walked" color="$muted" />
          </col>
        </row>
        <!-- Day selector -->
        <col w="352" fill="$surface" border="1 $line" radius="$r-lg" p="14" gap="9" role="card">
          <row w="fill" gap="auto" align="middle-left">
            <text
              text-style="Eyebrow"
              value="ITINERARY"
              color="$faint"
              text-case="uppercase"
              letter-spacing="0.8"
            />
            <text text-style="Mono" value="4 days" color="$muted" />
          </row>
          <col w="fill" gap="6" role="navigation-menu">
            <!-- Day 1 active -->
            <row
              w="fill"
              p="10 12"
              gap="12"
              radius="$r-md"
              fill="$soft"
              border="0 0 0 3 $accent"
              align="middle-left"
              role="button"
            >
              <col w="34" align="middle-center" gap="0">
                <text text-style="Tiny" value="FRI" color="$accent-deep" />
                <text text-style="MonoB" value="12" color="$accent-deep" />
              </col>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="Alfama &amp; Baixa" color="$ink" />
                <text text-style="Small" value="Old town, castle &amp; fado" color="$body" />
              </col>
              <text text-style="Mono" value="7" color="$accent-deep" />
            </row>
            <!-- Day 2 -->
            <row w="fill" p="10 12" gap="12" radius="$r-md" align="middle-left" role="button">
              <col w="34" align="middle-center" gap="0">
                <text text-style="Tiny" value="SAT" color="$faint" />
                <text text-style="MonoB" value="13" color="$body" />
              </col>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="Belem &amp; the river" color="$ink" />
                <text text-style="Small" value="Monastery, tower, nata" color="$muted" />
              </col>
              <text text-style="Mono" value="5" color="$muted" />
            </row>
            <!-- Day 3 -->
            <row w="fill" p="10 12" gap="12" radius="$r-md" align="middle-left" role="button">
              <col w="34" align="middle-center" gap="0">
                <text text-style="Tiny" value="SUN" color="$faint" />
                <text text-style="MonoB" value="14" color="$body" />
              </col>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="Sintra day trip" color="$ink" />
                <text text-style="Small" value="Pena Palace &amp; Moorish castle" color="$muted" />
              </col>
              <text text-style="Mono" value="4" color="$muted" />
            </row>
            <!-- Day 4 -->
            <row w="fill" p="10 12" gap="12" radius="$r-md" align="middle-left" role="button">
              <col w="34" align="middle-center" gap="0">
                <text text-style="Tiny" value="MON" color="$faint" />
                <text text-style="MonoB" value="15" color="$body" />
              </col>
              <col w="fill" gap="1">
                <text text-style="LabelB" value="Principe Real" color="$ink" />
                <text text-style="Small" value="Brunch, shops &amp; flight out" color="$muted" />
              </col>
              <text text-style="Mono" value="3" color="$muted" />
            </row>
          </col>
        </col>
        <!-- Budget card -->
        <col w="352" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="13" role="card">
          <row w="fill" gap="auto" align="bottom-left">
            <col gap="2">
              <text
                text-style="Eyebrow"
                value="TRIP BUDGET"
                color="$faint"
                text-case="uppercase"
                letter-spacing="0.8"
              />
              <row gap="7" align="baseline">
                <text text-style="Metric" value="€1,240" color="$ink" />
                <text text-style="Mono" value="of €1,500" color="$muted" />
              </row>
            </col>
            <row p="3 8" radius="$r-pill" fill="$soft" align="middle-center">
              <text text-style="Tiny" value="83% USED" color="$accent-deep" letter-spacing="0.4" />
            </row>
          </row>
          <row w="300" h="8" radius="$r-pill" fill="$track" align="middle-left">
            <rect w="248" h="8" radius="$r-pill" fill="$accent" />
          </row>
          <line fill="$line" role="divider" />
          <!-- Stays -->
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="middle-left">
              <img src="https://api.iconify.design/lucide/bed-double.svg?color=%23A5360F" w="15" h="15" />
              <text w="fill" text-style="Label" value="Stays" color="$body" />
              <text text-style="MonoB" value="€560" color="$ink" />
            </row>
            <row w="300" h="6" radius="$r-pill" fill="$track" align="middle-left">
              <rect w="135" h="6" radius="$r-pill" fill="$accent" />
            </row>
          </col>
          <!-- Food -->
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="middle-left">
              <img src="https://api.iconify.design/lucide/utensils.svg?color=%23A5360F" w="15" h="15" />
              <text w="fill" text-style="Label" value="Food &amp; drink" color="$body" />
              <text text-style="MonoB" value="€300" color="$ink" />
            </row>
            <row w="300" h="6" radius="$r-pill" fill="$track" align="middle-left">
              <rect w="73" h="6" radius="$r-pill" fill="$accent" />
            </row>
          </col>
          <!-- Activities -->
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="middle-left">
              <img src="https://api.iconify.design/lucide/ticket.svg?color=%23A5360F" w="15" h="15" />
              <text w="fill" text-style="Label" value="Activities" color="$body" />
              <text text-style="MonoB" value="€240" color="$ink" />
            </row>
            <row w="300" h="6" radius="$r-pill" fill="$track" align="middle-left">
              <rect w="58" h="6" radius="$r-pill" fill="$accent" />
            </row>
          </col>
          <!-- Transport -->
          <col w="fill" gap="6">
            <row w="fill" gap="8" align="middle-left">
              <img src="https://api.iconify.design/lucide/tram-front.svg?color=%23A5360F" w="15" h="15" />
              <text w="fill" text-style="Label" value="Transport" color="$body" />
              <text text-style="MonoB" value="€140" color="$ink" />
            </row>
            <row w="300" h="6" radius="$r-pill" fill="$track" align="middle-left">
              <rect w="34" h="6" radius="$r-pill" fill="$accent" />
            </row>
          </col>
        </col>
      </col>
      <!-- ============ MAIN COLUMN ============ -->
      <col w="652" gap="20">
        <!-- Day header -->
        <row w="652" gap="16" align="middle-left">
          <text text-style="DayNum" value="Day 1" color="$ink" letter-spacing="-0.6" />
          <col w="fill" gap="2">
            <text text-style="H3" value="Friday, September 12" color="$ink" />
            <text text-style="Small" value="Alfama &amp; Baixa · historic heart of Lisbon" color="$muted" />
          </col>
          <row p="7 11" gap="7" radius="$r-pill" fill="$soft" align="middle-center">
            <img src="https://api.iconify.design/lucide/sun.svg?color=%23A5360F" w="15" h="15" />
            <text text-style="LabelB" value="24°" color="$accent-deep" />
            <text text-style="Small" value="Sunny" color="$accent-deep" />
          </row>
          <row
            w="34"
            h="34"
            radius="$r-md"
            fill="$surface"
            border="1 $line"
            align="middle-center"
            role="button"
          >
            <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%237A665C" w="16" h="16" />
          </row>
          <row
            w="34"
            h="34"
            radius="$r-md"
            fill="$surface"
            border="1 $line"
            align="middle-center"
            role="button"
          >
            <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%237A665C" w="16" h="16" />
          </row>
        </row>
        <!-- Day timeline strip -->
        <col w="652" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="10" role="card">
          <row w="fill" gap="auto" align="middle-left">
            <text
              text-style="Eyebrow"
              value="DAY AT A GLANCE"
              color="$faint"
              text-case="uppercase"
              letter-spacing="0.8"
            />
            <row gap="6" align="middle-center">
              <rect w="18" h="8" radius="$r-sm" fill="$accent" />
              <text text-style="Small" value="planned" color="$muted" />
              <rect w="18" h="8" radius="$r-sm" fill="$track" />
              <text text-style="Small" value="free" color="$muted" />
            </row>
          </row>
          <row w="620" h="12" radius="$r-sm" clip="true" gap="0" align="middle-left">
            <rect w="22" h="12" fill="$track" />
            <rect w="44" h="12" fill="$accent" />
            <rect w="12" h="12" fill="$track" />
            <rect w="66" h="12" fill="$accent" />
            <rect w="11" h="12" fill="$track" />
            <rect w="44" h="12" fill="$accent" />
            <rect w="22" h="12" fill="$track" />
            <rect w="56" h="12" fill="$accent" />
            <rect w="22" h="12" fill="$track" />
            <rect w="77" h="12" fill="$accent" />
            <rect w="23" h="12" fill="$track" />
            <rect w="44" h="12" fill="$accent" />
            <rect w="88" h="12" fill="$track" />
            <rect w="89" h="12" fill="$accent" />
          </row>
          <row w="620" align="middle-left">
            <text text-style="Mono" value="8 AM" color="$faint" />
            <text w="fill" align="center" text-style="Mono" value="3 PM" color="$faint" />
            <text text-style="Mono" value="10 PM" color="$faint" />
          </row>
        </col>
        <!-- ===== EVENT TIMELINE ===== -->
        <col w="652" gap="8">
          <!-- E1 08:30 Breakfast -->
          <row w="652" gap="12" align="top-left">
            <col w="50" align="top-right" gap="1">
              <text text-style="Time" value="08:30" color="$ink" />
              <text text-style="Mono" value="1h" color="$muted" />
            </col>
            <col w="26" align="middle-center" gap="0">
              <rect w="2" h="6" fill="$surface" />
              <row w="26" h="26" radius="$r-pill" fill="$soft" border="2 $accent" align="middle-center">
                <img src="https://api.iconify.design/lucide/coffee.svg?color=%23A5360F" w="13" h="13" />
              </row>
              <rect w="2" h="46" fill="$line-strong" />
            </col>
            <col w="552" fill="$surface" border="1 $line" radius="$r-md" p="12 14" gap="8" role="card">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="H2" value="Breakfast at Fabrica da Nata" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$surface-2" align="middle-center">
                  <text text-style="MonoB" value="€8" color="$accent-deep" />
                </row>
              </row>
              <row gap="7" align="middle-left">
                <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="13" h="13" />
                <text text-style="Small" value="Rua Augusta 275, Baixa" color="$body" />
                <ellipse w="3" h="3" fill="$line-strong" />
                <text text-style="Small" value="4 min walk from hotel" color="$muted" />
              </row>
              <row gap="8" align="middle-left">
                <row
                  p="3 8"
                  gap="6"
                  radius="$r-sm"
                  fill="$surface-2"
                  border="1 $line"
                  align="middle-center"
                  role="chip"
                >
                  <img src="https://api.iconify.design/lucide/utensils.svg?color=%237A665C" w="12" h="12" />
                  <text text-style="Small" value="Food" color="$muted" />
                </row>
              </row>
            </col>
          </row>
          <!-- E2 09:45 Castelo -->
          <row w="652" gap="12" align="top-left">
            <col w="50" align="top-right" gap="1">
              <text text-style="Time" value="09:45" color="$ink" />
              <text text-style="Mono" value="1h 30m" color="$muted" />
            </col>
            <col w="26" align="middle-center" gap="0">
              <rect w="2" h="6" fill="$line-strong" />
              <row w="26" h="26" radius="$r-pill" fill="$soft" border="2 $accent" align="middle-center">
                <img src="https://api.iconify.design/lucide/castle.svg?color=%23A5360F" w="13" h="13" />
              </row>
              <rect w="2" h="46" fill="$line-strong" />
            </col>
            <col w="552" fill="$surface" border="1 $line" radius="$r-md" p="12 14" gap="8" role="card">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="H2" value="Castelo de Sao Jorge" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$surface-2" align="middle-center">
                  <text text-style="MonoB" value="€15" color="$accent-deep" />
                </row>
              </row>
              <row gap="7" align="middle-left">
                <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="13" h="13" />
                <text text-style="Small" value="R. de Santa Cruz do Castelo" color="$body" />
                <ellipse w="3" h="3" fill="$line-strong" />
                <text text-style="Small" value="Best views over the Tejo" color="$muted" />
              </row>
              <row gap="8" align="middle-left">
                <row
                  p="3 8"
                  gap="6"
                  radius="$r-sm"
                  fill="$surface-2"
                  border="1 $line"
                  align="middle-center"
                  role="chip"
                >
                  <img src="https://api.iconify.design/lucide/landmark.svg?color=%237A665C" w="12" h="12" />
                  <text text-style="Small" value="Sightseeing" color="$muted" />
                </row>
                <row p="3 8" gap="6" radius="$r-sm" fill="$soft" align="middle-center" role="badge">
                  <img src="https://api.iconify.design/lucide/check.svg?color=%23A5360F" w="12" h="12" />
                  <text text-style="Small" value="Ticket booked" color="$accent-deep" />
                </row>
              </row>
            </col>
          </row>
          <!-- E3 11:30 Tram -->
          <row w="652" gap="12" align="top-left">
            <col w="50" align="top-right" gap="1">
              <text text-style="Time" value="11:30" color="$ink" />
              <text text-style="Mono" value="1h" color="$muted" />
            </col>
            <col w="26" align="middle-center" gap="0">
              <rect w="2" h="6" fill="$line-strong" />
              <row w="26" h="26" radius="$r-pill" fill="$soft" border="2 $accent" align="middle-center">
                <img src="https://api.iconify.design/lucide/tram-front.svg?color=%23A5360F" w="13" h="13" />
              </row>
              <rect w="2" h="46" fill="$line-strong" />
            </col>
            <col w="552" fill="$surface" border="1 $line" radius="$r-md" p="12 14" gap="8" role="card">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="H2" value="Ride Tram 28 through Alfama" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$surface-2" align="middle-center">
                  <text text-style="MonoB" value="€3" color="$accent-deep" />
                </row>
              </row>
              <row gap="7" align="middle-left">
                <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="13" h="13" />
                <text text-style="Small" value="Board at Miradouro de Santa Luzia" color="$body" />
                <ellipse w="3" h="3" fill="$line-strong" />
                <text text-style="Small" value="Ride to Graca" color="$muted" />
              </row>
              <row gap="8" align="middle-left">
                <row
                  p="3 8"
                  gap="6"
                  radius="$r-sm"
                  fill="$surface-2"
                  border="1 $line"
                  align="middle-center"
                  role="chip"
                >
                  <img src="https://api.iconify.design/lucide/tram-front.svg?color=%237A665C" w="12" h="12" />
                  <text text-style="Small" value="Transport" color="$muted" />
                </row>
              </row>
            </col>
          </row>
          <!-- E4 13:00 Lunch -->
          <row w="652" gap="12" align="top-left">
            <col w="50" align="top-right" gap="1">
              <text text-style="Time" value="13:00" color="$ink" />
              <text text-style="Mono" value="1h 15m" color="$muted" />
            </col>
            <col w="26" align="middle-center" gap="0">
              <rect w="2" h="6" fill="$line-strong" />
              <row w="26" h="26" radius="$r-pill" fill="$soft" border="2 $accent" align="middle-center">
                <img src="https://api.iconify.design/lucide/utensils.svg?color=%23A5360F" w="13" h="13" />
              </row>
              <rect w="2" h="46" fill="$line-strong" />
            </col>
            <col w="552" fill="$surface" border="1 $line" radius="$r-md" p="12 14" gap="8" role="card">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="H2" value="Lunch at Time Out Market" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$surface-2" align="middle-center">
                  <text text-style="MonoB" value="€22" color="$accent-deep" />
                </row>
              </row>
              <row gap="7" align="middle-left">
                <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="13" h="13" />
                <text text-style="Small" value="Mercado da Ribeira, Cais do Sodre" color="$body" />
                <ellipse w="3" h="3" fill="$line-strong" />
                <text text-style="Small" value="Try the bifana" color="$muted" />
              </row>
              <row gap="8" align="middle-left">
                <row
                  p="3 8"
                  gap="6"
                  radius="$r-sm"
                  fill="$surface-2"
                  border="1 $line"
                  align="middle-center"
                  role="chip"
                >
                  <img src="https://api.iconify.design/lucide/utensils.svg?color=%237A665C" w="12" h="12" />
                  <text text-style="Small" value="Food" color="$muted" />
                </row>
              </row>
            </col>
          </row>
          <!-- E5 14:45 Walk -->
          <row w="652" gap="12" align="top-left">
            <col w="50" align="top-right" gap="1">
              <text text-style="Time" value="14:45" color="$ink" />
              <text text-style="Mono" value="1h 45m" color="$muted" />
            </col>
            <col w="26" align="middle-center" gap="0">
              <rect w="2" h="6" fill="$line-strong" />
              <row w="26" h="26" radius="$r-pill" fill="$soft" border="2 $accent" align="middle-center">
                <img src="https://api.iconify.design/lucide/footprints.svg?color=%23A5360F" w="13" h="13" />
              </row>
              <rect w="2" h="46" fill="$line-strong" />
            </col>
            <col w="552" fill="$surface" border="1 $line" radius="$r-md" p="12 14" gap="8" role="card">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="H2" value="Wander Alfama &amp; Se Cathedral" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$surface-2" align="middle-center">
                  <text text-style="Small" value="Free" color="$muted" />
                </row>
              </row>
              <row gap="7" align="middle-left">
                <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="13" h="13" />
                <text text-style="Small" value="Se de Lisboa to Largo das Portas do Sol" color="$body" />
              </row>
              <row gap="8" align="middle-left">
                <row
                  p="3 8"
                  gap="6"
                  radius="$r-sm"
                  fill="$surface-2"
                  border="1 $line"
                  align="middle-center"
                  role="chip"
                >
                  <img src="https://api.iconify.design/lucide/footprints.svg?color=%237A665C" w="12" h="12" />
                  <text text-style="Small" value="Walk" color="$muted" />
                </row>
              </row>
            </col>
          </row>
          <!-- E6 17:00 Sunset -->
          <row w="652" gap="12" align="top-left">
            <col w="50" align="top-right" gap="1">
              <text text-style="Time" value="17:00" color="$ink" />
              <text text-style="Mono" value="1h" color="$muted" />
            </col>
            <col w="26" align="middle-center" gap="0">
              <rect w="2" h="6" fill="$line-strong" />
              <row w="26" h="26" radius="$r-pill" fill="$soft" border="2 $accent" align="middle-center">
                <img src="https://api.iconify.design/lucide/sunset.svg?color=%23A5360F" w="13" h="13" />
              </row>
              <rect w="2" h="46" fill="$line-strong" />
            </col>
            <col w="552" fill="$surface" border="1 $line" radius="$r-md" p="12 14" gap="8" role="card">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="H2" value="Sunset at Senhora do Monte" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$surface-2" align="middle-center">
                  <text text-style="Small" value="Free" color="$muted" />
                </row>
              </row>
              <row gap="7" align="middle-left">
                <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="13" h="13" />
                <text text-style="Small" value="Miradouro da Senhora do Monte, Graca" color="$body" />
                <ellipse w="3" h="3" fill="$line-strong" />
                <text text-style="Small" value="Arrive 20 min early" color="$muted" />
              </row>
              <row gap="8" align="middle-left">
                <row
                  p="3 8"
                  gap="6"
                  radius="$r-sm"
                  fill="$surface-2"
                  border="1 $line"
                  align="middle-center"
                  role="chip"
                >
                  <img src="https://api.iconify.design/lucide/camera.svg?color=%237A665C" w="12" h="12" />
                  <text text-style="Small" value="Viewpoint" color="$muted" />
                </row>
              </row>
            </col>
          </row>
          <!-- E7 20:00 Fado -->
          <row w="652" gap="12" align="top-left">
            <col w="50" align="top-right" gap="1">
              <text text-style="Time" value="20:00" color="$ink" />
              <text text-style="Mono" value="2h" color="$muted" />
            </col>
            <col w="26" align="middle-center" gap="0">
              <rect w="2" h="6" fill="$line-strong" />
              <row w="26" h="26" radius="$r-pill" fill="$accent" border="2 $accent" align="middle-center">
                <img src="https://api.iconify.design/lucide/music.svg?color=%23FFFFFF" w="13" h="13" />
              </row>
              <rect w="2" h="6" fill="$surface" />
            </col>
            <col w="552" fill="$surface" border="1 $accent" radius="$r-md" p="12 14" gap="8" role="card">
              <row w="fill" gap="8" align="middle-left">
                <text w="fill" text-style="H2" value="Fado dinner at Clube de Fado" color="$ink" />
                <row p="3 8" radius="$r-pill" fill="$soft" align="middle-center">
                  <text text-style="MonoB" value="€45" color="$accent-deep" />
                </row>
              </row>
              <row gap="7" align="middle-left">
                <img src="https://api.iconify.design/lucide/map-pin.svg?color=%238A776C" w="13" h="13" />
                <text text-style="Small" value="R. de Sao Joao da Praca 94, Alfama" color="$body" />
                <ellipse w="3" h="3" fill="$line-strong" />
                <text text-style="Small" value="Reservation for 2" color="$muted" />
              </row>
              <row gap="8" align="middle-left">
                <row
                  p="3 8"
                  gap="6"
                  radius="$r-sm"
                  fill="$surface-2"
                  border="1 $line"
                  align="middle-center"
                  role="chip"
                >
                  <img src="https://api.iconify.design/lucide/music.svg?color=%237A665C" w="12" h="12" />
                  <text text-style="Small" value="Nightlife" color="$muted" />
                </row>
                <row p="3 8" gap="6" radius="$r-sm" fill="$soft" align="middle-center" role="badge">
                  <img src="https://api.iconify.design/lucide/check.svg?color=%23A5360F" w="12" h="12" />
                  <text text-style="Small" value="Reserved 20:00" color="$accent-deep" />
                </row>
              </row>
            </col>
          </row>
        </col>
      </col>
      <!-- ============ RIGHT RAIL ============ -->
      <col w="300" gap="16">
        <!-- Map card -->
        <col w="300" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="12" role="card">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="H3" value="Today's route" color="$ink" />
            <img src="https://api.iconify.design/lucide/navigation.svg?color=%23A5360F" w="16" h="16" />
          </row>
          <img
            src="https://gui.farm/tools/map-generator.png?from=Castelo+de+Sao+Jorge,Lisbon&amp;to=Praca+do+Comercio,Lisbon&amp;mode=light&amp;color=coral&amp;line=dotted&amp;ratio=4:3&amp;width=560"
            w="268"
            h="201"
            radius="$r-md"
          />
          <row w="fill" gap="10" align="middle-left">
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/route.svg?color=%238A776C" w="14" h="14" />
              <text text-style="Label" value="3.2 km" color="$body" />
            </row>
            <ellipse w="3" h="3" fill="$line-strong" />
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/footprints.svg?color=%238A776C" w="14" h="14" />
              <text text-style="Label" value="48 min walk" color="$body" />
            </row>
          </row>
        </col>
        <!-- Coming up: Sintra -->
        <col w="300" fill="$surface" border="1 $line" radius="$r-lg" clip="true" role="card">
          <img
            src="https://images.unsplash.com/photo-1539680698717-7f361cb58e44?w=560&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=70"
            w="300"
            h="120"
          />
          <col w="fill" p="14" gap="6">
            <row w="fill" gap="auto" align="middle-left">
              <text
                text-style="Eyebrow"
                value="COMING UP · DAY 3"
                color="$faint"
                text-case="uppercase"
                letter-spacing="0.8"
              />
              <text text-style="Mono" value="Sun 14" color="$muted" />
            </row>
            <text text-style="H3" value="Sintra day trip" color="$ink" />
            <text
              text-style="Body"
              value="Pena Palace, the Moorish Castle and Quinta da Regaleira."
              color="$muted"
            />
            <row gap="7" align="middle-left">
              <img src="https://api.iconify.design/lucide/train-front.svg?color=%23A5360F" w="14" h="14" />
              <text text-style="Small" value="Train from Rossio, 40 min" color="$body" />
            </row>
          </col>
        </col>
        <!-- Weather forecast -->
        <col w="300" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="12" role="card">
          <text
            text-style="Eyebrow"
            value="4-DAY FORECAST"
            color="$faint"
            text-case="uppercase"
            letter-spacing="0.8"
          />
          <row w="fill" gap="0" align="top-left">
            <col w="67" gap="7" align="middle-center">
              <text text-style="Small" value="Fri" color="$muted" />
              <img src="https://api.iconify.design/lucide/sun.svg?color=%23A5360F" w="20" h="20" />
              <text text-style="MonoB" value="24°" color="$ink" />
            </col>
            <col w="67" gap="7" align="middle-center">
              <text text-style="Small" value="Sat" color="$muted" />
              <img src="https://api.iconify.design/lucide/sun.svg?color=%23A5360F" w="20" h="20" />
              <text text-style="MonoB" value="26°" color="$ink" />
            </col>
            <col w="67" gap="7" align="middle-center">
              <text text-style="Small" value="Sun" color="$muted" />
              <img src="https://api.iconify.design/lucide/cloud-sun.svg?color=%238A776C" w="20" h="20" />
              <text text-style="MonoB" value="23°" color="$ink" />
            </col>
            <col w="67" gap="7" align="middle-center">
              <text text-style="Small" value="Mon" color="$muted" />
              <img src="https://api.iconify.design/lucide/cloud-sun.svg?color=%238A776C" w="20" h="20" />
              <text text-style="MonoB" value="22°" color="$ink" />
            </col>
          </row>
        </col>
        <!-- Reminders -->
        <col w="300" fill="$surface" border="1 $line" radius="$r-lg" p="16" gap="11" role="card">
          <row w="fill" gap="auto" align="middle-left">
            <text
              text-style="Eyebrow"
              value="REMINDERS"
              color="$faint"
              text-case="uppercase"
              letter-spacing="0.8"
            />
            <text text-style="Mono" value="1 / 3" color="$muted" />
          </row>
          <row w="fill" gap="10" align="top-left">
            <img src="https://api.iconify.design/lucide/square-check.svg?color=%23A5360F" w="17" h="17" />
            <text w="fill" text-style="Body" value="Buy a 24h Carris ticket for Tram 28" color="$muted" />
          </row>
          <line fill="$line" role="divider" />
          <row w="fill" gap="10" align="top-left">
            <img src="https://api.iconify.design/lucide/square.svg?color=%238A776C" w="17" h="17" />
            <text w="fill" text-style="Body" value="Reserve Pena Palace timed entry, 10:30" color="$ink" />
          </row>
          <line fill="$line" role="divider" />
          <row w="fill" gap="10" align="top-left">
            <img src="https://api.iconify.design/lucide/square.svg?color=%238A776C" w="17" h="17" />
            <text w="fill" text-style="Body" value="Confirm fado table for Fri night" color="$ink" />
          </row>
        </col>
      </col>
    </row>
  </col>
</gui>
```