---
title: "Hammer Live Auction, Lot 24"
platform: ios
slug: hammer-live-auction-lot-24
screens: []
domains: ["ecommerce"]
style: "brutalist"
fonts: ["JetBrains Mono", "SF Pro Display"]
roles: ["top-navigation-bar", "button", "badge", "chip", "card", "divider", "table", "toolbar"]
score: {clean: 100, consistent: 82, accessible: 82, comprehensible: 58}
url: https://gui.farm/ios/hammer-live-auction-lot-24
raw: https://gui.farm/ios/hammer-live-auction-lot-24/design.guix
download: https://gui.farm/ios/hammer-live-auction-lot-24.gui
---

# Hammer Live Auction, Lot 24

A dark brutalist iOS live-auction lot screen where a collector tracks the current bid, countdown, bid history, and estimate position, then places the next bid on a vintage chronograph.

- **Live preview:** https://gui.farm/ios/hammer-live-auction-lot-24
- **Raw source:** https://gui.farm/ios/hammer-live-auction-lot-24/design.guix
- **Download (.gui):** https://gui.farm/ios/hammer-live-auction-lot-24.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Hammer Live Auction, Lot 24">
  <tokens>
    <color name="bg" value="#0F0F12" />
    <color name="slab" value="#17171B" />
    <color name="raised" value="#242430" />
    <color name="ink" value="#F4F1EA" />
    <color name="muted" value="#B0ABA0" />
    <color name="line" value="#33333C" />
    <color name="scarlet" value="#F23A22" />
    <color name="scarlet-ink" value="#FF6E57" />
  </tokens>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
    <font family="JetBrains Mono" source="google" weights="500 700 800" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Wordmark" font-family="JetBrains Mono" font-size="17" font-weight="800" line-height="20" letter-spacing="1" />
    <text-style name="NavLabel" font-family="JetBrains Mono" font-size="12" font-weight="700" line-height="15" letter-spacing="0.6" />
    <text-style name="LotTag" font-family="JetBrains Mono" font-size="13" font-weight="800" line-height="16" letter-spacing="0.5" />
    <text-style name="Title" font-family="SF Pro Display" font-size="26" font-weight="700" line-height="30" letter-spacing="-0.4" />
    <text-style name="Sub" font-family="SF Pro Display" font-size="14" font-weight="500" line-height="19" />
    <text-style name="Label" font-family="JetBrains Mono" font-size="11" font-weight="700" line-height="14" letter-spacing="0.7" />
    <text-style name="BidNum" font-family="JetBrains Mono" font-size="37" font-weight="800" line-height="40" letter-spacing="-1" />
    <text-style name="Count" font-family="JetBrains Mono" font-size="24" font-weight="800" line-height="26" />
    <text-style name="CountUnit" font-family="JetBrains Mono" font-size="10" font-weight="700" line-height="13" letter-spacing="1" />
    <text-style name="H2" font-family="SF Pro Display" font-size="17" font-weight="700" line-height="22" />
    <text-style name="Mono" font-family="JetBrains Mono" font-size="12" font-weight="500" line-height="17" />
    <text-style name="MonoB" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="Body" font-family="SF Pro Display" font-size="14" font-weight="400" line-height="20" />
    <text-style name="BtnLabel" font-family="JetBrains Mono" font-size="15" font-weight="800" line-height="18" letter-spacing="0.5" />
    <text-style name="Handle" font-family="JetBrains Mono" font-size="13" font-weight="700" line-height="16" />
  </styles>

  <col w="393" fill="$bg" clip="true">

    <!-- status bar (device chrome, untagged) -->
    <row w="393" h="54" p="16 20 0 20" align="middle-left">
      <text w="fill" value="9:41" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" color="$ink" />
      <text value="●  ◒  ▰" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" color="$ink" />
    </row>

    <!-- top navigation -->
    <row w="393" h="58" p="0 16" gap="10" align="middle-left" fill="$bg" border-bottom="2 $ink" role="top-navigation-bar">
      <col w="40" h="40" fill="$slab" border="2 $ink" align="middle-center" role="button">
        <img src="https://api.iconify.design/lucide/arrow-left.svg?color=%23F4F1EA" w="18" h="18" />
      </col>
      <col w="fill" gap="2" align="middle-left">
        <text value="HAMMER" text-style="Wordmark" color="$ink" />
        <text value="MODERN DESIGN &amp; HOROLOGY" text-style="Label" color="$muted" />
      </col>
      <row p="7 10" gap="7" fill="$scarlet" border="2 $ink" align="middle-center" role="badge">
        <rect w="7" h="7" fill="$bg" />
        <text value="LIVE 342" text-style="NavLabel" color="$bg" />
      </row>
    </row>

    <!-- hero lot photograph -->
    <img src="https://images.unsplash.com/photo-1708651145401-6be804cd02d4?w=1200&amp;q=80&amp;auto=format&amp;fit=crop" w="393" h="300" fit="cover" />

    <!-- lot tag / estimate strip -->
    <row w="393" p="11 20" gap="10" fill="$scarlet" border-bottom="2 $ink" align="middle-left">
      <text value="LOT 24 / 60" text-style="LotTag" color="$bg" />
      <text w="fill" value="EST. $18,000 TO $24,000" text-style="LotTag" color="$bg" align="right" />
    </row>

    <!-- body -->
    <col w="393" p="20" gap="16">

      <!-- title block -->
      <col w="353" gap="6">
        <text value="Heuer Autavia 'Rindt'" text-style="Title" color="$ink" />
        <text value="1969 · Ref. 2446 · Stainless-steel chronograph, 40mm" text-style="Sub" color="$muted" />
      </col>

      <!-- status row -->
      <row w="353" gap="8" align="middle-left">
        <row p="7 11" gap="7" fill="$scarlet" border="2 $ink" align="middle-center" role="badge">
          <img src="https://api.iconify.design/lucide/trending-up.svg?color=%230F0F12" w="13" h="13" />
          <text value="OUTBID" text-style="Label" color="$bg" />
        </row>
        <row p="7 11" fill="none" border="2 $ink" align="middle-center" role="chip">
          <text value="RESERVE MET" text-style="Label" color="$ink" />
        </row>
        <row w="fill" align="middle-right">
          <text value="17 BIDS" text-style="Label" color="$muted" />
        </row>
      </row>

      <!-- current bid + countdown -->
      <col w="353" border="2 $ink" p="18" gap="14" role="card">
        <appearance>
          <fill type="color" value="#17171B" />
          <effect type="drop-shadow" x="6" y="6" radius="0" spread="0" color="#F23A22" />
        </appearance>
        <col w="317" gap="4">
          <text value="CURRENT BID" text-style="Label" color="$muted" />
          <text value="$21,500" text-style="BidNum" color="$ink" />
          <text value="Next bid $22,500 · +$1,000 increment" text-style="Mono" color="$scarlet-ink" />
        </col>
        <line w="317" fill="$line" thickness="2" role="divider" />
        <row w="317" gap="8" align="middle-left">
          <text w="fill" value="CLOSES IN" text-style="Label" color="$muted" />
          <col w="52" h="50" fill="$bg" border="2 $ink" gap="2" align="middle-center">
            <text value="00" text-style="Count" color="$ink" />
            <text value="HRS" text-style="CountUnit" color="$muted" />
          </col>
          <col w="52" h="50" fill="$bg" border="2 $ink" gap="2" align="middle-center">
            <text value="04" text-style="Count" color="$ink" />
            <text value="MIN" text-style="CountUnit" color="$muted" />
          </col>
          <col w="52" h="50" fill="$scarlet" border="2 $ink" gap="2" align="middle-center">
            <text value="12" text-style="Count" color="$bg" />
            <text value="SEC" text-style="CountUnit" color="$bg" />
          </col>
        </row>
      </col>

      <!-- estimate position bar -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="12" role="card">
        <row w="321" align="middle-left">
          <text w="fill" value="WHERE THE BID SITS" text-style="Label" color="$muted" />
          <text value="58% OF EST. RANGE" text-style="Label" color="$scarlet-ink" align="right" />
        </row>
        <frame w="321" h="26" clip="true">
          <rect x="0" y="9" w="321" h="8" fill="$raised" />
          <rect x="0" y="9" w="187" h="8" fill="$scarlet" />
          <rect x="53" y="3" w="2" h="20" fill="$ink" />
          <rect x="186" y="1" w="3" h="24" fill="$ink" />
        </frame>
        <row w="321" align="middle-left">
          <text w="fill" value="LOW $18,000" text-style="Mono" color="$muted" />
          <text w="fill" value="HIGH $24,000" text-style="Mono" color="$muted" align="right" />
        </row>
        <text w="321" value="Reserve $19,000 met · current hammer $21,500" text-style="Mono" color="$ink" />
      </col>

      <!-- bid activity -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="14" role="card">
        <row w="321" gap="10" align="middle-left">
          <col w="fill" gap="2">
            <text value="Bid activity" text-style="H2" color="$ink" />
            <text value="17 bids · last 12 minutes" text-style="Mono" color="$muted" />
          </col>
          <row p="6 9" fill="none" border="2 $scarlet" align="middle-center" role="badge">
            <text value="HEATING UP" text-style="Label" color="$scarlet-ink" />
          </row>
        </row>
        <img src="https://gui.farm/tools/charts/bar-chart.svg?data=12m:1,10m:2,8m:3,6m:3,4m:4,2m:4&amp;bar=%23F23A22&amp;surface=dark&amp;radius=0&amp;grid=hide&amp;xlabels=show&amp;ylabels=hide&amp;values=hide&amp;width=642&amp;height=180" w="321" h="90" fit="contain" />
        <line w="321" fill="$line" thickness="2" role="divider" />
        <col w="321" gap="0" role="table">
          <row w="321" p="10 0" gap="10" align="middle-left" border-bottom="2 $line">
            <row p="4 7" fill="$scarlet" border="2 $ink" align="middle-center">
              <text value="TOP" text-style="Label" color="$bg" />
            </row>
            <text w="fill" value="m_sørensen" text-style="Handle" color="$ink" />
            <text value="$21,500" text-style="MonoB" color="$ink" />
            <text w="44" value="2m" text-style="Mono" color="$muted" align="right" />
          </row>
          <row w="321" p="10 0" gap="10" align="middle-left" border-bottom="2 $line">
            <row p="4 7" fill="none" border="2 $muted" align="middle-center">
              <text value="YOU" text-style="Label" color="$muted" />
            </row>
            <text w="fill" value="your bid" text-style="Handle" color="$muted" />
            <text value="$20,500" text-style="MonoB" color="$muted" />
            <text w="44" value="6m" text-style="Mono" color="$muted" align="right" />
          </row>
          <row w="321" p="10 0" gap="10" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="k_tanaka" text-style="Handle" color="$ink" />
            <text value="$19,500" text-style="MonoB" color="$ink" />
            <text w="44" value="9m" text-style="Mono" color="$muted" align="right" />
          </row>
          <row w="321" p="10 0" gap="10" align="middle-left" border-bottom="2 $line">
            <text w="fill" value="a_okonkwo" text-style="Handle" color="$ink" />
            <text value="$18,500" text-style="MonoB" color="$ink" />
            <text w="44" value="13m" text-style="Mono" color="$muted" align="right" />
          </row>
          <row w="321" p="10 0" gap="10" align="middle-left">
            <text w="fill" value="opening bid" text-style="Handle" color="$muted" />
            <text value="$18,000" text-style="MonoB" color="$muted" />
            <text w="44" value="16m" text-style="Mono" color="$muted" align="right" />
          </row>
        </col>
      </col>

      <!-- lot details -->
      <col w="353" fill="$slab" border="2 $ink" p="16" gap="12" role="card">
        <text value="Lot details" text-style="H2" color="$ink" />
        <text w="321" value="A sharp, single-owner Autavia from the Rindt era, recently serviced with its original bezel and a crisp reverse-panda dial." text-style="Body" color="$muted" />
        <line w="321" fill="$line" thickness="2" role="divider" />
        <row w="321" gap="10" align="top-left">
          <text w="120" value="MOVEMENT" text-style="Label" color="$muted" />
          <text w="fill" value="Valjoux 72, manual wind" text-style="Body" color="$ink" align="right" />
        </row>
        <row w="321" gap="10" align="top-left">
          <text w="120" value="CASE" text-style="Label" color="$muted" />
          <text w="fill" value="40mm steel, screw-back" text-style="Body" color="$ink" align="right" />
        </row>
        <row w="321" gap="10" align="top-left">
          <text w="120" value="CONDITION" text-style="Label" color="$muted" />
          <text w="fill" value="Excellent · serviced Mar 2024" text-style="Body" color="$ink" align="right" />
        </row>
        <row w="321" gap="10" align="top-left">
          <text w="120" value="PROVENANCE" text-style="Label" color="$muted" />
          <text w="fill" value="Single owner, Geneva" text-style="Body" color="$ink" align="right" />
        </row>
        <row w="321" gap="10" align="top-left">
          <text w="120" value="INCLUDES" text-style="Label" color="$muted" />
          <text w="fill" value="Box &amp; service papers" text-style="Body" color="$ink" align="right" />
        </row>
      </col>

    </col>

    <!-- sticky bid bar (last flow child) -->
    <col w="393" fill="$slab" border-top="2 $ink" p="14 20 10 20" gap="11" role="toolbar">
      <row w="353" gap="8" align="middle-left">
        <col w="fill" p="10 0" fill="$bg" border="2 $ink" align="middle-center" role="button">
          <text value="+$500" text-style="MonoB" color="$ink" />
        </col>
        <col w="fill" p="10 0" fill="$bg" border="2 $ink" align="middle-center" role="button">
          <text value="+$1,000" text-style="MonoB" color="$ink" />
        </col>
        <col w="fill" p="10 0" fill="$bg" border="2 $ink" align="middle-center" role="button">
          <text value="CUSTOM" text-style="MonoB" color="$muted" />
        </col>
      </row>
      <row w="353" h="56" fill="$scarlet" border="2 $ink" p="0 16" gap="10" align="middle-left" role="button">
        <img src="https://api.iconify.design/lucide/gavel.svg?color=%230F0F12" w="20" h="20" />
        <text value="PLACE BID" text-style="BtnLabel" color="$bg" />
        <text w="fill" value="$22,500" text-style="BtnLabel" color="$bg" align="right" />
      </row>
      <text w="353" value="+22% buyer's premium · est. total $27,450" text-style="Mono" color="$muted" align="center" />
      <row w="353" h="14" align="bottom-center">
        <rect w="134" h="5" fill="$ink" />
      </row>
    </col>

  </col>
</gui>
```