---
title: "Bulletin · Lisboa, This Afternoon"
platform: ios
slug: bulletin-lisboa-this-afternoon
screens: ["weather"]
domains: []
style: "brutalist"
fonts: ["SF Pro Display", "Space Grotesk", "JetBrains Mono"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "tab-bar"]
score: {clean: 100, consistent: 83, accessible: 73, comprehensible: 24}
url: https://gui.farm/ios/bulletin-lisboa-this-afternoon
raw: https://gui.farm/ios/bulletin-lisboa-this-afternoon/design.guix
download: https://gui.farm/ios/bulletin-lisboa-this-afternoon.gui
---

# Bulletin · Lisboa, This Afternoon

A brutalist iOS weather screen for Lisbon showing current conditions, a 2x2 metrics grid, an hourly strip, a 7-day forecast with min-max temperature range bars, and a daylight tracker.

- **Live preview:** https://gui.farm/ios/bulletin-lisboa-this-afternoon
- **Raw source:** https://gui.farm/ios/bulletin-lisboa-this-afternoon/design.guix
- **Download (.gui):** https://gui.farm/ios/bulletin-lisboa-this-afternoon.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Bulletin · Lisboa, This Afternoon">
  <tokens>
    <color name="paper" value="#F0EADD" />
    <color name="card" value="#FBF7EF" />
    <color name="ink" value="#16130F" />
    <color name="muted" value="#5A5348" />
    <color name="line" value="#D6CDBB" />
    <color name="rose" value="#E11667" />
    <color name="rose-strong" value="#C7135A" />
    <color name="rose-deep" value="#B01257" />
    <color name="white" value="#FFFFFF" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Space Grotesk" source="google" weights="500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="400 500 700 800" styles="normal" />
  </fonts>
  <styles>
    <text-style
      name="StatusTime"
      font-family="SF Pro Display"
      font-size="15"
      font-weight="600"
      line-height="18"
    />
    <text-style
      name="NavTitle"
      font-family="Space Grotesk"
      font-size="16"
      font-weight="700"
      line-height="19"
      letter-spacing="0.2"
    />
    <text-style
      name="NavSub"
      font-family="JetBrains Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1"
    />
    <text-style
      name="Label"
      font-family="JetBrains Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="1.2"
    />
    <text-style
      name="CondBig"
      font-family="Space Grotesk"
      font-size="20"
      font-weight="700"
      line-height="24"
      letter-spacing="0.2"
    />
    <text-style
      name="TempHero"
      font-family="JetBrains Mono"
      font-size="88"
      font-weight="800"
      line-height="88"
      letter-spacing="-3"
    />
    <text-style
      name="HiLo"
      font-family="JetBrains Mono"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="0.2"
    />
    <text-style name="Body" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="H2" font-family="Space Grotesk" font-size="16" font-weight="700" line-height="20" />
    <text-style
      name="TileValue"
      font-family="JetBrains Mono"
      font-size="22"
      font-weight="700"
      line-height="24"
      letter-spacing="-0.5"
    />
    <text-style
      name="DayLabel"
      font-family="JetBrains Mono"
      font-size="12"
      font-weight="700"
      line-height="15"
      letter-spacing="0.4"
    />
    <text-style
      name="Temp"
      font-family="JetBrains Mono"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="-0.2"
    />
    <text-style
      name="HourTime"
      font-family="JetBrains Mono"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.3"
    />
    <text-style
      name="HourTemp"
      font-family="JetBrains Mono"
      font-size="14"
      font-weight="700"
      line-height="17"
      letter-spacing="-0.3"
    />
    <text-style
      name="BtnLabel"
      font-family="Space Grotesk"
      font-size="13"
      font-weight="700"
      line-height="16"
      letter-spacing="0.3"
    />
    <text-style
      name="TabLabel"
      font-family="JetBrains Mono"
      font-size="9"
      font-weight="700"
      line-height="12"
      letter-spacing="0.5"
    />
  </styles>
  <col w="393" fill="$paper" clip="true">
    <row w="393" h="54" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="StatusTime" color="$ink" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2316130F" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2316130F" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2316130F" w="20" h="16" />
      </row>
    </row>
    <row
      w="393"
      h="58"
      p="0 16"
      gap="10"
      align="middle-left"
      fill="$paper"
      border-bottom="2 $ink"
      role="top-navigation-bar"
    >
      <col w="40" h="40" fill="$card" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/menu.svg?color=%2316130F" w="18" h="18" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="LISBOA" text-style="NavTitle" color="$ink" />
        <text value="ALFAMA · 38.7°N" text-style="NavSub" color="$muted" />
      </col>
      <col w="40" h="40" fill="$card" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/plus.svg?color=%2316130F" w="18" h="18" />
      </col>
    </row>
    <col w="393" p="20" gap="16">
      <col w="353" fill="$card" border="2 $ink" p="16" gap="14" role="card">
        <appearance>
          <fill type="color" value="#FBF7EF" />
          <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#E11667" />
        </appearance>
        <img
          src="https://images.unsplash.com/photo-1748279944004-f1d733dc711b?w=642&amp;h=240&amp;fit=crop&amp;auto=format&amp;q=70"
          w="321"
          h="120"
        />
        <row w="321" gap="10" align="middle-left">
          <col w="fill" gap="3" align="middle-left">
            <text value="MOSTLY SUNNY" text-style="CondBig" color="$ink" />
            <text value="ALFAMA, LISBOA · PT" text-style="Label" color="$muted" />
          </col>
          <row p="5 9" gap="5" fill="$rose-strong" align="middle-center" role="badge">
            <img src="https://api.iconify.design/lucide/radio.svg?color=%23FFFFFF" w="12" h="12" />
            <text value="LIVE" text-style="Label" color="$white" />
          </row>
        </row>
        <row w="321" gap="12" align="bottom-left">
          <text w="fill" value="28°" text-style="TempHero" color="$ink" />
          <col w="96" gap="6" align="bottom-right">
            <text w="96" value="H 31°" text-style="HiLo" color="$ink" align="right" />
            <text w="96" value="L 19°" text-style="HiLo" color="$muted" align="right" />
            <row w="96" p="5 8" gap="5" fill="$paper" border="2 $ink" align="middle-center" role="badge">
              <img src="https://api.iconify.design/lucide/thermometer.svg?color=%23B01257" w="12" h="12" />
              <text value="FEELS 30°" text-style="Label" color="$rose-deep" />
            </row>
          </col>
        </row>
        <text
          w="321"
          value="Clear skies over the Tejo, staying dry and warm through the evening commute."
          text-style="Body"
          color="$muted"
        />
      </col>
      <col w="fill" fill="$card" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="Right now" text-style="H2" color="$ink" />
          <text value="4 READINGS" text-style="Label" color="$muted" align="right" />
        </row>
        <line w="321" fill="$ink" thickness="2" role="divider" />
        <col w="321" gap="9">
          <row w="321" gap="9" align="middle-left">
            <col w="156" h="hug" fill="$paper" border="2 $ink" p="11 12" gap="6" align="top-left">
              <row w="132" gap="6" align="middle-left">
                <img src="https://api.iconify.design/lucide/thermometer.svg?color=%235A5348" w="15" h="15" />
                <text w="fill" value="FEELS LIKE" text-style="Label" color="$muted" />
              </row>
              <text value="30°" text-style="TileValue" color="$ink" />
              <text value="2° ABOVE ACTUAL" text-style="Label" color="$muted" />
            </col>
            <col w="156" h="hug" fill="$paper" border="2 $ink" p="11 12" gap="6" align="top-left">
              <row w="132" gap="6" align="middle-left">
                <img src="https://api.iconify.design/lucide/wind.svg?color=%235A5348" w="15" h="15" />
                <text w="fill" value="WIND" text-style="Label" color="$muted" />
              </row>
              <text value="14 km/h" text-style="TileValue" color="$ink" />
              <text value="NW · GUSTS 22" text-style="Label" color="$muted" />
            </col>
          </row>
          <row w="321" gap="9" align="top-left" h="hug">
            <col w="156" h="fill" fill="$paper" border="2 $ink" p="11 12" gap="6" align="top-left">
              <row w="132" gap="6" align="middle-left">
                <img src="https://api.iconify.design/lucide/droplets.svg?color=%235A5348" w="15" h="15" />
                <text w="fill" value="HUMIDITY" text-style="Label" color="$muted" />
              </row>
              <text value="58%" text-style="TileValue" color="$ink" />
              <text value="DEW POINT 19°" text-style="Label" color="$muted" />
            </col>
            <col w="156" h="hug" fill="$paper" border="2 $rose" p="11 12" gap="6" align="top-left">
              <row w="132" gap="6" align="middle-left">
                <img src="https://api.iconify.design/lucide/sun.svg?color=%23B01257" w="15" h="15" />
                <text w="fill" value="UV INDEX" text-style="Label" color="$rose-deep" />
              </row>
              <text value="8" text-style="TileValue" color="$rose-deep" />
              <text value="VERY HIGH · PEAK 2PM" text-style="Label" color="$rose-deep" />
            </col>
          </row>
        </col>
      </col>
      <col w="fill" fill="$card" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="Next hours" text-style="H2" color="$ink" />
          <text value="SAT 16 AUG" text-style="Label" color="$muted" align="right" />
        </row>
        <line w="321" fill="$ink" thickness="2" role="divider" />
        <row w="321" gap="3" align="top-center">
          <col w="51" gap="7" align="middle-center">
            <text value="NOW" text-style="HourTime" color="$rose-deep" />
            <img src="https://api.iconify.design/lucide/sun.svg?color=%2316130F" w="20" h="20" />
            <text value="28°" text-style="HourTemp" color="$ink" />
            <rect w="26" h="3" fill="$rose" />
            <text value="0%" text-style="HourTime" color="$muted" />
          </col>
          <col w="51" gap="7" align="middle-center">
            <text value="15:00" text-style="HourTime" color="$muted" />
            <img src="https://api.iconify.design/lucide/sun.svg?color=%2316130F" w="20" h="20" />
            <text value="30°" text-style="HourTemp" color="$ink" />
            <rect w="26" h="3" fill="$line" />
            <text value="0%" text-style="HourTime" color="$muted" />
          </col>
          <col w="51" gap="7" align="middle-center">
            <text value="16:00" text-style="HourTime" color="$muted" />
            <img src="https://api.iconify.design/lucide/sun.svg?color=%2316130F" w="20" h="20" />
            <text value="31°" text-style="HourTemp" color="$ink" />
            <rect w="26" h="3" fill="$line" />
            <text value="5%" text-style="HourTime" color="$muted" />
          </col>
          <col w="51" gap="7" align="middle-center">
            <text value="17:00" text-style="HourTime" color="$muted" />
            <img src="https://api.iconify.design/lucide/sun.svg?color=%2316130F" w="20" h="20" />
            <text value="30°" text-style="HourTemp" color="$ink" />
            <rect w="26" h="3" fill="$line" />
            <text value="10%" text-style="HourTime" color="$muted" />
          </col>
          <col w="51" gap="7" align="middle-center">
            <text value="18:00" text-style="HourTime" color="$muted" />
            <img src="https://api.iconify.design/lucide/cloud-sun.svg?color=%2316130F" w="20" h="20" />
            <text value="28°" text-style="HourTemp" color="$ink" />
            <rect w="26" h="3" fill="$line" />
            <text value="15%" text-style="HourTime" color="$muted" />
          </col>
          <col w="51" gap="7" align="middle-center">
            <text value="19:00" text-style="HourTime" color="$muted" />
            <img src="https://api.iconify.design/lucide/cloud-sun.svg?color=%2316130F" w="20" h="20" />
            <text value="25°" text-style="HourTemp" color="$ink" />
            <rect w="26" h="3" fill="$line" />
            <text value="20%" text-style="HourTime" color="$muted" />
          </col>
        </row>
      </col>
      <col w="fill" fill="$card" border="2 $ink" p="16" gap="13" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="7-day forecast" text-style="H2" color="$ink" />
          <text value="°C · 14 to 34" text-style="Label" color="$muted" align="right" />
        </row>
        <line w="321" fill="$ink" thickness="2" role="divider" />
        <col w="321" gap="14">
          <row w="fill" gap="10" align="middle-left">
            <text w="44" value="TODAY" text-style="DayLabel" color="$rose-deep" />
            <img src="https://api.iconify.design/lucide/sun.svg?color=%2316130F" w="17" h="17" />
            <text w="27" value="19°" text-style="Temp" color="$muted" align="right" />
            <frame w="fill" h="14" clip="true">
              <rect x="0" y="0" w="187" h="14" fill="$line" />
              <rect x="27" y="0" w="112" h="14" fill="$rose" />
            </frame>
            <text w="27" value="31°" text-style="Temp" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-left">
            <text w="44" value="SUN" text-style="DayLabel" color="$ink" />
            <img src="https://api.iconify.design/lucide/sun.svg?color=%2316130F" w="17" h="17" />
            <text w="27" value="20°" text-style="Temp" color="$muted" align="right" />
            <frame w="fill" h="14" clip="true">
              <rect x="0" y="0" w="fill" h="14" fill="$line" />
              <rect x="26" y="0" w="122" h="14" fill="$rose" />
            </frame>
            <text w="27" value="33°" text-style="Temp" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-left">
            <text w="44" value="MON" text-style="DayLabel" color="$ink" />
            <img src="https://api.iconify.design/lucide/cloud-sun.svg?color=%2316130F" w="17" h="17" />
            <text w="27" value="21°" text-style="Temp" color="$muted" align="right" />
            <frame w="fill" h="14" clip="true">
              <rect x="0" y="0" w="187" h="14" fill="$line" />
              <rect x="35" y="0" w="103" h="14" fill="$rose" />
            </frame>
            <text w="27" value="32°" text-style="Temp" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-left">
            <text w="44" value="TUE" text-style="DayLabel" color="$ink" />
            <img src="https://api.iconify.design/lucide/cloud.svg?color=%2316130F" w="17" h="17" />
            <text w="27" value="19°" text-style="Temp" color="$muted" align="right" />
            <frame w="fill" h="14" clip="true">
              <rect x="0" y="0" w="187" h="14" fill="$line" />
              <rect x="47" y="0" w="84" h="14" fill="$rose" />
            </frame>
            <text w="27" value="28°" text-style="Temp" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-left">
            <text w="44" value="WED" text-style="DayLabel" color="$ink" />
            <img src="https://api.iconify.design/lucide/cloud-drizzle.svg?color=%2316130F" w="17" h="17" />
            <text w="27" value="18°" text-style="Temp" color="$muted" align="right" />
            <frame w="fill" h="14" clip="true">
              <rect x="0" y="0" w="187" h="14" fill="$line" />
              <rect x="37" y="0" w="75" h="14" fill="$rose" />
            </frame>
            <text w="27" value="26°" text-style="Temp" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-left">
            <text w="44" value="THU" text-style="DayLabel" color="$ink" />
            <img src="https://api.iconify.design/lucide/cloud-sun.svg?color=%2316130F" w="17" h="17" />
            <text w="27" value="17°" text-style="Temp" color="$muted" align="right" />
            <frame w="fill" h="14" clip="true">
              <rect x="0" y="0" w="fill" h="14" fill="$line" />
              <rect x="28" y="0" w="94" h="14" fill="$rose" />
            </frame>
            <text w="27" value="27°" text-style="Temp" color="$ink" align="right" />
          </row>
          <row w="fill" gap="10" align="middle-left">
            <text w="44" value="FRI" text-style="DayLabel" color="$ink" />
            <img src="https://api.iconify.design/lucide/sun.svg?color=%2316130F" w="17" h="17" />
            <text w="27" value="18°" text-style="Temp" color="$muted" align="right" />
            <frame w="fill" h="14" clip="true">
              <rect x="0" y="0" w="187" h="14" fill="$line" />
              <rect x="37" y="0" w="112" h="14" fill="$rose" />
            </frame>
            <text w="27" value="30°" text-style="Temp" color="$ink" align="right" />
          </row>
        </col>
      </col>
      <col w="fill" fill="$card" border="2 $ink" p="16" gap="13" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="Daylight" text-style="H2" color="$ink" />
          <text value="13H 49M" text-style="Label" color="$muted" align="right" />
        </row>
        <line w="321" fill="$ink" thickness="2" role="divider" />
        <row w="321" gap="10" align="middle-left">
          <row w="fill" gap="7" align="middle-left">
            <img src="https://api.iconify.design/lucide/sunrise.svg?color=%2316130F" w="18" h="18" />
            <col gap="2" align="middle-left">
              <text value="SUNRISE" text-style="Label" color="$muted" />
              <text value="06:42" text-style="Temp" color="$ink" />
            </col>
          </row>
          <row gap="7" align="middle-right">
            <col gap="2" align="middle-right">
              <text w="60" value="SUNSET" text-style="Label" color="$muted" align="right" />
              <text w="60" value="20:31" text-style="Temp" color="$ink" align="right" />
            </col>
            <img src="https://api.iconify.design/lucide/sunset.svg?color=%2316130F" w="18" h="18" />
          </row>
        </row>
        <frame w="321" h="10" clip="true">
          <rect x="0" y="0" w="321" h="10" fill="$line" />
          <rect x="0" y="0" w="177" h="10" fill="$rose" />
          <rect x="173" y="0" w="8" h="10" fill="$ink" />
        </frame>
        <row w="321" align="middle-left">
          <text w="fill" value="Now 14:20 · WEST" text-style="Sub" color="$ink" />
          <text value="55% of daylight elapsed" text-style="Sub" color="$muted" align="right" />
        </row>
      </col>
      <text
        w="353"
        value="Source Instituto Português do Mar e da Atmosfera. Updated 14:20 WEST."
        text-style="Sub"
        color="$muted"
        align="center"
      />
    </col>
    <col w="393" fill="$card" border-top="2 $ink" p="12 20 8 20" gap="10" role="tab-bar">
      <row w="353" align="top-center">
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/cloud-sun.svg?color=%23B01257" w="22" h="22" />
          <text value="TODAY" text-style="TabLabel" color="$rose-deep" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/radar.svg?color=%235A5348" w="22" h="22" />
          <text value="RADAR" text-style="TabLabel" color="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/map-pin.svg?color=%235A5348" w="22" h="22" />
          <text value="CITIES" text-style="TabLabel" color="$muted" />
        </col>
        <col w="fill" gap="4" align="middle-center">
          <img src="https://api.iconify.design/lucide/settings.svg?color=%235A5348" w="22" h="22" />
          <text value="SETTINGS" text-style="TabLabel" color="$muted" />
        </col>
      </row>
      <row w="353" h="14" align="bottom-center">
        <rect w="134" h="5" fill="$ink" />
      </row>
    </col>
  </col>
</gui>
```