---
title: "Halstead Rexall - Amoxicillin 500 mg, Rx 4471082"
platform: ios
slug: halstead-rexall-amoxicillin-500-mg-rx-4471082
screens: []
domains: ["healthcare"]
style: "retro"
fonts: ["SF Pro Display", "Space Mono", "Bricolage Grotesque"]
roles: ["top-navigation-bar", "card", "button"]
score: {clean: 100, consistent: 71, accessible: 82, comprehensible: 23}
url: https://gui.farm/ios/halstead-rexall-amoxicillin-500-mg-rx-4471082
raw: https://gui.farm/ios/halstead-rexall-amoxicillin-500-mg-rx-4471082/design.guix
download: https://gui.farm/ios/halstead-rexall-amoxicillin-500-mg-rx-4471082.gui
---

# Halstead Rexall - Amoxicillin 500 mg, Rx 4471082

A retro iOS prescription-label detail screen where an antibiotics patient mid-course reviews their Amoxicillin dispensing details, directions, dose-time schedule, course progress, refills, insurance cost, and safety warnings.

- **Live preview:** https://gui.farm/ios/halstead-rexall-amoxicillin-500-mg-rx-4471082
- **Raw source:** https://gui.farm/ios/halstead-rexall-amoxicillin-500-mg-rx-4471082/design.guix
- **Download (.gui):** https://gui.farm/ios/halstead-rexall-amoxicillin-500-mg-rx-4471082.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Halstead Rexall - Amoxicillin 500 mg, Rx 4471082">
  <fonts>
    <font family="Bricolage Grotesque" source="google" weights="600 700 800" styles="normal" />
    <font family="Space Mono" source="google" weights="400 700" styles="normal" />
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <styles>
    <text-style name="Status" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="18" />
    <text-style name="NavTitle" font-family="Space Mono" font-size="13" font-weight="700" line-height="16" letter-spacing="1.5" />
    <text-style name="NavMeta" font-family="Space Mono" font-size="11" font-weight="400" line-height="13" letter-spacing="0.5" />
    <text-style name="Kicker" font-family="Space Mono" font-size="11" font-weight="700" line-height="13" letter-spacing="1.2" />
    <text-style name="MedName" font-family="Bricolage Grotesque" font-size="34" font-weight="800" line-height="36" letter-spacing="-0.5" />
    <text-style name="MedSub" font-family="Space Mono" font-size="14" font-weight="700" line-height="18" letter-spacing="0.2" />
    <text-style name="Sig" font-family="Space Mono" font-size="16" font-weight="700" line-height="23" />
    <text-style name="ValueLg" font-family="Bricolage Grotesque" font-size="20" font-weight="700" line-height="24" />
    <text-style name="BigNum" font-family="Bricolage Grotesque" font-size="30" font-weight="800" line-height="32" letter-spacing="-0.5" />
    <text-style name="DataVal" font-family="Space Mono" font-size="13" font-weight="700" line-height="16" />
    <text-style name="RowLabel" font-family="Space Mono" font-size="12" font-weight="400" line-height="15" />
    <text-style name="RowValue" font-family="Bricolage Grotesque" font-size="15" font-weight="700" line-height="19" />
    <text-style name="Meta" font-family="Space Mono" font-size="11" font-weight="400" line-height="14" />
    <text-style name="Chip" font-family="Space Mono" font-size="12" font-weight="700" line-height="14" />
    <text-style name="Warn" font-family="Space Mono" font-size="12" font-weight="400" line-height="17" />
    <text-style name="Button" font-family="Space Mono" font-size="15" font-weight="700" line-height="18" letter-spacing="1" />
  </styles>
  <tokens>
    <color name="paper" value="#F5F0E8" />
    <color name="card" value="#FCF9F3" />
    <color name="ink" value="#17131A" />
    <color name="muted" value="#6E645A" />
    <color name="magenta" value="#D4176B" />
    <color name="magenta-deep" value="#A6135A" />
    <color name="magenta-pale" value="#FBE6F0" />
    <color name="hair" value="#E7DDCE" />
    <color name="track" value="#EBE3D5" />
    <color name="onmag" value="#FFFFFF" />
  </tokens>

  <col w="393" fill="$paper" pb="0" gap="0">

    <!-- Status bar (device chrome, untagged) -->
    <row w="393" h="47" p="14 20 0 20" align="middle-left">
      <text w="fill" value="9:41" text-style="Status" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2317131A" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2317131A" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2317131A" w="22" h="17" />
      </row>
    </row>

    <!-- Nav bar -->
    <row role="top-navigation-bar" w="fill" h="52" p="0 16" gap="auto" align="middle-center">
      <img src="https://api.iconify.design/lucide/chevron-left.svg?color=%2317131A" w="24" h="24" />
      <col gap="1" align="middle-center">
        <text value="PRESCRIPTION" text-style="NavTitle" color="$ink" />
        <text value="Rx 4471082" text-style="NavMeta" color="$muted" />
      </col>
      <img src="https://api.iconify.design/lucide/printer.svg?color=%2317131A" w="22" h="22" />
    </row>

    <!-- Content -->
    <col w="393" p="16 20 24 20" gap="14">

      <!-- Label hero card -->
      <col role="card" w="fill" fill="$card" radius="14" border="1 $hair" clip="true" gap="0">
        <rect w="fill" h="6" fill="$magenta" />
        <col w="fill" p="14 18 16 18" gap="14">
          <row w="fill" gap="auto" align="middle-left">
            <text value="HALSTEAD REXALL PHARMACY" text-style="Kicker" color="$muted" />
            <text value="NDC 0093-3109-01" text-style="Kicker" color="$muted" />
          </row>
          <row w="fill" gap="12" align="middle-left">
            <col w="fill" gap="4">
              <text value="Amoxicillin" text-style="MedName" color="$ink" />
              <text value="500 mg · Capsule" text-style="MedSub" color="$magenta-deep" />
              <text value="Generic for Amoxil" text-style="Meta" color="$muted" />
            </col>
            <col gap="5" align="middle-center">
              <frame w="72" h="72" radius="10" clip="true" border="1 $hair">
                <img src="https://images.unsplash.com/photo-1549477752-31cd7327aed0?w=200&amp;h=200&amp;fit=crop&amp;q=70" w="72" h="72" fit="cover" />
              </frame>
              <text value="93 3109" text-style="Meta" color="$muted" />
            </col>
          </row>
          <col w="fill" fill="$magenta-pale" radius="10" p="12 14" gap="6">
            <text value="DIRECTIONS" text-style="Kicker" color="$magenta-deep" />
            <text w="fill" value="Take 1 capsule by mouth 3 times daily until all medication is gone." text-style="Sig" color="$ink" />
          </col>
        </col>
      </col>

      <!-- Course progress card -->
      <col role="card" w="fill" fill="$card" radius="14" border="1 $hair" p="16 18" gap="12">
        <row w="fill" gap="auto" align="middle-left">
          <col gap="3">
            <text value="COURSE PROGRESS" text-style="Kicker" color="$muted" />
            <text value="Day 3 of 10" text-style="ValueLg" color="$ink" />
          </col>
          <col gap="3" align="middle-right">
            <text value="21 doses left" text-style="DataVal" color="$magenta-deep" align="right" />
            <text value="9 of 30 taken" text-style="Meta" color="$muted" align="right" />
          </col>
        </row>
        <frame w="317" h="10" radius="5" fill="$track" clip="true">
          <rect x="0" y="0" w="95" h="10" radius="5" fill="$magenta" />
        </frame>
        <row w="fill" gap="8" align="middle-left">
          <row fill="$paper" radius="8" border="1 $hair" p="7 10" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/sunrise.svg?color=%23A6135A" w="14" h="14" />
            <text value="8:00 AM" text-style="Chip" color="$ink" />
          </row>
          <row fill="$paper" radius="8" border="1 $hair" p="7 10" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/sun.svg?color=%23A6135A" w="14" h="14" />
            <text value="2:00 PM" text-style="Chip" color="$ink" />
          </row>
          <row fill="$paper" radius="8" border="1 $hair" p="7 10" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/moon.svg?color=%23A6135A" w="14" h="14" />
            <text value="8:00 PM" text-style="Chip" color="$ink" />
          </row>
        </row>
      </col>

      <!-- Details card -->
      <col role="card" w="fill" fill="$card" radius="14" border="1 $hair" clip="true" gap="0">
        <col w="fill" p="2 18" gap="0">
          <row w="fill" gap="auto" align="middle-left" p="13 0">
            <text value="Quantity" text-style="RowLabel" color="$muted" />
            <text value="30 capsules" text-style="RowValue" color="$ink" align="right" />
          </row>
          <rect w="fill" h="1" fill="$hair" />
          <row w="fill" gap="auto" align="middle-left" p="13 0">
            <text value="Days supply" text-style="RowLabel" color="$muted" />
            <text value="10 days" text-style="RowValue" color="$ink" align="right" />
          </row>
          <rect w="fill" h="1" fill="$hair" />
          <row w="fill" gap="auto" align="middle-left" p="13 0">
            <text value="Date filled" text-style="RowLabel" color="$muted" />
            <text value="Aug 14, 2026" text-style="RowValue" color="$ink" align="right" />
          </row>
          <rect w="fill" h="1" fill="$hair" />
          <row w="fill" gap="auto" align="middle-left" p="13 0">
            <text value="Discard after" text-style="RowLabel" color="$muted" />
            <text value="Feb 14, 2027" text-style="RowValue" color="$ink" align="right" />
          </row>
          <rect w="fill" h="1" fill="$hair" />
          <row w="fill" gap="auto" align="middle-left" p="13 0">
            <text value="Prescriber" text-style="RowLabel" color="$muted" />
            <text value="Ana Reyes, MD" text-style="RowValue" color="$ink" align="right" />
          </row>
          <rect w="fill" h="1" fill="$hair" />
          <row w="fill" gap="auto" align="middle-left" p="13 0">
            <text value="Pharmacy" text-style="RowLabel" color="$muted" />
            <text value="(215) 555-0148" text-style="RowValue" color="$ink" align="right" />
          </row>
        </col>
      </col>

      <!-- Refills card -->
      <col role="card" w="fill" fill="$card" radius="14" border="1 $hair" p="16 18" gap="12">
        <row w="fill" gap="auto" align="middle-left">
          <col gap="3">
            <text value="REFILLS" text-style="Kicker" color="$muted" />
            <text value="1 of 2 remaining" text-style="ValueLg" color="$ink" />
          </col>
          <row gap="6" align="middle-center">
            <rect w="34" h="10" radius="5" fill="$magenta" />
            <rect w="34" h="10" radius="5" fill="$track" border="1 $hair" />
          </row>
        </row>
        <rect w="fill" h="1" fill="$hair" />
        <row w="fill" gap="auto" align="middle-left">
          <text value="Refill available now" text-style="Meta" color="$muted" />
          <text value="Expires Aug 14, 2027" text-style="Meta" color="$muted" align="right" />
        </row>
      </col>

      <!-- Cost card -->
      <col role="card" w="fill" fill="$card" radius="14" border="1 $hair" p="16 18" gap="11">
        <row w="fill" gap="auto" align="middle-left">
          <text value="YOUR COST" text-style="Kicker" color="$muted" />
          <text value="Aetna · Tier 1" text-style="Meta" color="$muted" align="right" />
        </row>
        <row w="fill" gap="auto" align="baseline">
          <text value="You pay today" text-style="RowValue" color="$ink" />
          <text value="$6.20" text-style="BigNum" color="$magenta-deep" align="right" />
        </row>
        <frame w="317" h="8" radius="4" fill="$track" clip="true">
          <rect x="0" y="0" w="238" h="8" radius="4" fill="$magenta" />
        </frame>
        <row w="fill" gap="auto" align="middle-left">
          <text value="Plan covers 75% ($18.60)" text-style="Meta" color="$muted" />
          <text value="Retail $24.80" text-style="Meta" color="$muted" align="right" />
        </row>
      </col>

      <!-- Auxiliary warnings -->
      <col w="fill" fill="$magenta-pale" radius="14" p="14 16" gap="11">
        <text value="AUXILIARY LABELS" text-style="Kicker" color="$magenta-deep" />
        <row w="fill" gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/circle-alert.svg?color=%23A6135A" w="16" h="16" />
          <text w="fill" value="Take until all gone, even if you feel better." text-style="Warn" color="$ink" />
        </row>
        <row w="fill" gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/circle-alert.svg?color=%23A6135A" w="16" h="16" />
          <text w="fill" value="May reduce the effectiveness of birth control." text-style="Warn" color="$ink" />
        </row>
        <row w="fill" gap="10" align="middle-left">
          <img src="https://api.iconify.design/lucide/circle-alert.svg?color=%23A6135A" w="16" h="16" />
          <text w="fill" value="Call your doctor if you notice rash, hives, or swelling." text-style="Warn" color="$ink" />
        </row>
      </col>

    </col>

    <!-- Action bar (last flow child) -->
    <rect w="393" h="1" fill="$hair" />
    <row w="393" p="12 20" gap="10" fill="$card" align="middle-center">
      <row w="fill" role="button" fill="$magenta" radius="12" p="15 0" gap="8" align="middle-center">
        <img src="https://api.iconify.design/lucide/refresh-cw.svg?color=%23FFFFFF" w="18" h="18" />
        <text value="REQUEST REFILL" text-style="Button" color="$onmag" />
      </row>
      <row role="button" fill="$paper" radius="12" border="2 $magenta" p="15 16" gap="6" align="middle-center">
        <img src="https://api.iconify.design/lucide/message-circle.svg?color=%23A6135A" w="18" h="18" />
      </row>
    </row>

    <!-- Home indicator (device chrome, untagged) -->
    <frame w="393" h="26" clip="true">
      <rect fill="$ink" w="140" h="5" radius="3" x="127" y="10" />
    </frame>

  </col>
</gui>
```