---
title: "Blockside - Elm Street Bike Lane Poll"
platform: ios
slug: blockside-elm-street-bike-lane-poll
screens: []
domains: ["social"]
style: "glassmorphism"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "tab-bar"]
score: {clean: 100, consistent: 80, accessible: 38, comprehensible: 30}
url: https://gui.farm/ios/blockside-elm-street-bike-lane-poll
raw: https://gui.farm/ios/blockside-elm-street-bike-lane-poll/design.guix
download: https://gui.farm/ios/blockside-elm-street-bike-lane-poll.gui
---

# Blockside - Elm Street Bike Lane Poll

A dark glassmorphism iOS neighborhood-app screen showing live results of a community poll on whether Elm Street should get a protected bike lane, with proportional vote bars, turnout, and top comments.

- **Live preview:** https://gui.farm/ios/blockside-elm-street-bike-lane-poll
- **Raw source:** https://gui.farm/ios/blockside-elm-street-bike-lane-poll/design.guix
- **Download (.gui):** https://gui.farm/ios/blockside-elm-street-bike-lane-poll.gui

## Source (design.guix)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<gui version="0.2" name="Blockside - Elm Street Bike Lane Poll">
  <tokens>
    <color name="text" value="#F5EEF7" />
    <color name="text-2" value="#C9B9D4" />
    <color name="text-3" value="#9A88A8" />
    <color name="plum" value="#E88CC4" />
    <color name="plum-lead" value="#A2437D" />
    <color name="plum-bar" value="#7C3160" />
    <color name="plum-deep" value="#8C2F63" />
    <color name="plum-dim" value="#E88CC421" />
    <color name="opt-base" value="#241A2B" />
    <color name="ink" value="#1A0912" />
    <color name="glass" value="#FFFFFF12" />
    <color name="glass-line" value="#FFFFFF2B" />
    <color name="glass-line-soft" value="#FFFFFF17" />
    <number name="r-card" value="22" />
    <number name="r-pill" value="999" />
    <number name="r-opt" value="14" />
    <number name="r-sm" value="12" />
  </tokens>

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

  <styles>
    <text-style name="Clock" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style name="NavTitle" font-family="SF Pro Display" font-size="16" font-weight="700" line-height="20" letter-spacing="-0.2" />
    <text-style name="NavSub" font-family="SF Pro Display" font-size="11" font-weight="600" line-height="13" letter-spacing="0.3" />
    <text-style name="Kicker" font-family="SF Pro Display" font-size="11" font-weight="700" line-height="14" letter-spacing="1.4" />
    <text-style name="Author" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style name="Meta" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Q" font-family="SF Pro Display" font-size="21" font-weight="700" line-height="27" letter-spacing="-0.4" />
    <text-style name="OptLabel" font-family="SF Pro Display" font-size="14" font-weight="600" line-height="18" />
    <text-style name="Pct" font-family="SF Pro Display" font-size="16" font-weight="700" line-height="18" letter-spacing="-0.2" />
    <text-style name="Count" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="14" />
    <text-style name="Tag" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="12" letter-spacing="0.4" />
    <text-style name="Btn" font-family="SF Pro Display" font-size="14" font-weight="700" line-height="18" />
    <text-style name="Eng" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="16" />
    <text-style name="CmtBody" font-family="SF Pro Display" font-size="13" font-weight="400" line-height="18" />
    <text-style name="Avatar" font-family="SF Pro Display" font-size="13" font-weight="700" line-height="16" />
    <text-style name="TabLabel" font-family="SF Pro Display" font-size="10" font-weight="600" line-height="12" />
  </styles>

  <col w="393" fill="linear-gradient(180deg, #140A18 0%, #0E0712 55%, #0A050D 100%)">

    <!-- status bar (device chrome, untagged) -->
    <row w="fill" h="24" p="0 22" gap="auto" align="middle-center">
      <text text-style="Clock" value="9:41" color="$text" />
      <row gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal-high.svg?color=%23F5EEF7" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F5EEF7" w="16" h="16" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F5EEF7" w="20" h="20" />
      </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="38" h="38" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
        <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23F5EEF7" w="20" h="20" />
      </row>
      <col gap="1" align="top-center">
        <text text-style="NavTitle" value="Elm Heights" color="$text" align="center" />
        <text text-style="NavSub" value="NEIGHBORS" color="$plum" align="center" />
      </col>
      <row role="button" w="38" h="38" radius="$r-pill" fill="$glass" border="1 $glass-line-soft" align="middle-center">
        <img src="https://api.iconify.design/lucide/share.svg?color=%23F5EEF7" w="17" h="17" />
      </row>
    </row>

    <!-- hero banner: real street photo + legibility scrim -->
    <frame w="393" h="158" clip="true">
      <img x="0" y="0" w="393" h="158" fit="cover"
        src="https://images.unsplash.com/photo-1609959368651-1efbbca988ea?auto=format&amp;fit=crop&amp;w=786&amp;h=316&amp;q=80" />
      <rect x="0" y="0" w="393" h="158"
        fill="linear-gradient(180deg, #140A1866 0%, #140A18A6 58%, #0E0712 100%)" />
      <row x="16" y="16" h="26" p="0 10" radius="$r-pill" gap="6" align="middle-center">
        <appearance>
          <fill type="color" value="#0E0712A6" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="18" />
        </appearance>
        <img src="https://api.iconify.design/lucide/map-pin.svg?color=%23E88CC4" w="13" h="13" />
        <text text-style="Tag" value="ELM ST - 4TH TO 9TH" color="$text" />
      </row>
      <row x="16" y="120" h="24" p="0 9" radius="$r-pill" gap="5" fill="$plum-deep" align="middle-center">
        <img src="https://api.iconify.design/lucide/clock.svg?color=%23F5EEF7" w="12" h="12" />
        <text text-style="Tag" value="CLOSES IN 2 DAYS" color="$text" />
      </row>
    </frame>

    <col w="fill" p="14 16 22 16" gap="12">

      <!-- ───────── Poll card ───────── -->
      <col role="card" w="fill" radius="$r-card" p="16" gap="14" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="32" />
        </appearance>

        <!-- author row -->
        <row w="fill" gap="auto" align="middle-center">
          <row gap="10" align="middle-center">
            <row w="34" h="34" radius="$r-pill" fill="$plum-deep" align="middle-center">
              <text text-style="Avatar" value="PN" color="$text" />
            </row>
            <col gap="1">
              <text text-style="Author" value="Priya Nair" color="$text" />
              <text text-style="Meta" value="Neighborhood Council · 2d" color="$text-3" />
            </col>
          </row>
          <img src="https://api.iconify.design/lucide/ellipsis.svg?color=%239A88A8" w="20" h="20" />
        </row>

        <!-- question -->
        <text text-style="Q" value="Should Elm Street get a protected bike lane between 4th &amp; 9th?" color="$text" />

        <!-- meta -->
        <row w="fill" gap="auto" align="middle-center">
          <row gap="7" align="middle-center">
            <img src="https://api.iconify.design/lucide/users.svg?color=%23C9B9D4" w="14" h="14" />
            <text text-style="Meta" value="1,284 votes" color="$text-2" />
            <text text-style="Meta" value="·" color="$text-3" />
            <text text-style="Meta" value="62% turnout" color="$text-2" />
          </row>
          <row role="badge" h="22" radius="$r-pill" p="0 9" gap="5" fill="$plum-dim" align="middle-center">
            <img src="https://api.iconify.design/lucide/circle-check-big.svg?color=%23E88CC4" w="12" h="12" />
            <text text-style="Tag" value="YOU VOTED" color="$plum" />
          </row>
        </row>

        <!-- stacked summary bar: 155 + 79 + 69 + 26 = 329 -->
        <frame w="fill" h="10" radius="5" clip="true">
          <rect x="0" y="0" w="329" h="10" fill="$opt-base" />
          <rect x="0" y="0" w="155" h="10" fill="$plum-lead" />
          <rect x="155" y="0" w="79" h="10" fill="$plum-bar" />
          <rect x="234" y="0" w="69" h="10" fill="$plum-deep" />
          <rect x="303" y="0" w="26" h="10" fill="#5E2244" />
        </frame>

        <!-- options -->
        <col w="fill" gap="9">

          <!-- Option 1: leading + voted -> fill 155 -->
          <frame w="fill" h="54" radius="$r-opt" clip="true">
            <rect x="0" y="0" w="329" h="54" fill="$opt-base" />
            <rect x="0" y="0" w="155" h="54" fill="$plum-lead" />
            <row x="0" y="0" w="fill" h="54" p="0 14" gap="auto" align="middle-center">
              <row gap="8" align="middle-center">
                <img src="https://api.iconify.design/lucide/circle-check-big.svg?color=%23F5EEF7" w="17" h="17" />
                <text text-style="OptLabel" value="Yes - fully protected lane" color="$text" />
              </row>
              <col gap="1" align="top-right">
                <text text-style="Pct" value="47%" color="$text" align="right" />
                <text text-style="Count" value="604 votes" color="$text-2" align="right" />
              </col>
            </row>
          </frame>

          <!-- Option 2 -> fill 79 -->
          <frame w="fill" h="54" radius="$r-opt" clip="true">
            <rect x="0" y="0" w="329" h="54" fill="$opt-base" />
            <rect x="0" y="0" w="79" h="54" fill="$plum-bar" />
            <row x="0" y="0" w="fill" h="54" p="0 14" gap="auto" align="middle-center">
              <text text-style="OptLabel" value="Yes - painted lane is enough" color="$text" />
              <col gap="1" align="top-right">
                <text text-style="Pct" value="24%" color="$text" align="right" />
                <text text-style="Count" value="308 votes" color="$text-3" align="right" />
              </col>
            </row>
          </frame>

          <!-- Option 3 -> fill 69 -->
          <frame w="fill" h="54" radius="$r-opt" clip="true">
            <rect x="0" y="0" w="329" h="54" fill="$opt-base" />
            <rect x="0" y="0" w="69" h="54" fill="$plum-bar" />
            <row x="0" y="0" w="fill" h="54" p="0 14" gap="auto" align="middle-center">
              <text text-style="OptLabel" value="No - keep parking as is" color="$text" />
              <col gap="1" align="top-right">
                <text text-style="Pct" value="21%" color="$text" align="right" />
                <text text-style="Count" value="270 votes" color="$text-3" align="right" />
              </col>
            </row>
          </frame>

          <!-- Option 4 -> fill 26 -->
          <frame w="fill" h="54" radius="$r-opt" clip="true">
            <rect x="0" y="0" w="329" h="54" fill="$opt-base" />
            <rect x="0" y="0" w="26" h="54" fill="$plum-bar" />
            <row x="0" y="0" w="fill" h="54" p="0 14" gap="auto" align="middle-center">
              <text text-style="OptLabel" value="Need more info" color="$text" />
              <col gap="1" align="top-right">
                <text text-style="Pct" value="8%" color="$text" align="right" />
                <text text-style="Count" value="102 votes" color="$text-3" align="right" />
              </col>
            </row>
          </frame>
        </col>

        <rect role="divider" w="fill" h="1" fill="$glass-line-soft" />

        <!-- engagement -->
        <row w="fill" gap="auto" align="middle-center">
          <row gap="18" align="middle-center">
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/heart.svg?color=%23E88CC4" w="18" h="18" />
              <text text-style="Eng" value="Following" color="$plum" />
            </row>
            <row gap="6" align="middle-center">
              <img src="https://api.iconify.design/lucide/message-circle.svg?color=%23C9B9D4" w="18" h="18" />
              <text text-style="Eng" value="213" color="$text-2" />
            </row>
          </row>
          <row role="button" h="38" radius="$r-pill" p="0 16" gap="7" fill="$plum" align="middle-center">
            <img src="https://api.iconify.design/lucide/repeat-2.svg?color=%231A0912" w="15" h="15" />
            <text text-style="Btn" value="Change vote" color="$ink" />
          </row>
        </row>
      </col>

      <!-- ───────── Comments ───────── -->
      <row w="fill" p="2 2 0 2" gap="auto" align="middle-center">
        <text text-style="Author" value="Top comments" color="$text" />
        <text text-style="Meta" value="See all 213" color="$plum" />
      </row>

      <col role="card" w="fill" radius="$r-card" p="14" gap="10" clip="true">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="$glass-line" w="1" />
          <effect type="background-blur" radius="28" />
        </appearance>
        <row w="fill" gap="10" align="top-left">
          <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=facearea&amp;facepad=2&amp;w=96&amp;h=96&amp;q=80"
            w="34" h="34" radius="$r-pill" fit="cover" border="1 $glass-line" />
          <col w="fill" gap="6">
            <row w="fill" gap="auto" align="middle-center">
              <row gap="7" align="middle-center">
                <text text-style="Author" value="Marcus Bell" color="$text" />
                <row role="badge" h="18" radius="$r-sm" p="0 6" fill="$plum-dim" align="middle-center">
                  <text text-style="Tag" value="RESIDENT" color="$plum" />
                </row>
              </row>
              <text text-style="Meta" value="1d" color="$text-3" />
            </row>
            <text text-style="CmtBody" value="The 4th &amp; Elm crossing has had 3 near-misses this year. A protected lane is overdue - painted lines do not stop turning traffic." color="$text-2" />
            <row gap="16" align="middle-center">
              <row gap="6" align="middle-center">
                <img src="https://api.iconify.design/lucide/arrow-big-up.svg?color=%23E88CC4" w="15" h="15" />
                <text text-style="Count" value="34" color="$text-2" />
              </row>
              <text text-style="Count" value="Reply" color="$text-3" />
            </row>
          </col>
        </row>
      </col>
    </col>

    <!-- tab bar (last flow child) -->
    <row role="tab-bar" w="393" h="64" p="0 6" gap="0" fill="#120A16" border="1 0 0 0 $glass-line-soft" align="middle-center">
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/house.svg?color=%239A88A8" w="22" h="22" />
        <text text-style="TabLabel" value="Home" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/compass.svg?color=%239A88A8" w="22" h="22" />
        <text text-style="TabLabel" value="Explore" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/square-check-big.svg?color=%23E88CC4" w="22" h="22" />
        <text text-style="TabLabel" value="Polls" color="$plum" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/bell.svg?color=%239A88A8" w="22" h="22" />
        <text text-style="TabLabel" value="Alerts" color="$text-3" />
      </col>
      <col w="fill" h="fill" align="middle-center" gap="4">
        <img src="https://api.iconify.design/lucide/user-round.svg?color=%239A88A8" w="22" h="22" />
        <text text-style="TabLabel" value="You" color="$text-3" />
      </col>
    </row>

    <!-- home indicator (device chrome, untagged) -->
    <frame w="393" h="22">
      <rect x="129" y="8" w="134" h="5" radius="3" fill="#FFFFFFCC" />
    </frame>

  </col>
</gui>

```