---
title: "Harbor — Report Post"
platform: ios
slug: harbor-report-post-ios
screens: ["form"]
domains: ["social"]
style: "minimal"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "stepper", "card", "avatar", "badge", "checkbox", "divider", "banner", "action-sheet"]
score: {clean: 100, consistent: 87, accessible: 100, comprehensible: 62}
url: https://gui.farm/ios/harbor-report-post-ios
raw: https://gui.farm/ios/harbor-report-post-ios/design.guix
download: https://gui.farm/ios/harbor-report-post-ios.gui
---

# Harbor — Report Post

A dark iOS trust-and-safety workflow for selecting a reporting reason, hiding harmful content, and continuing through a confirmation sheet.

- **Live preview:** https://gui.farm/ios/harbor-report-post-ios
- **Raw source:** https://gui.farm/ios/harbor-report-post-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/harbor-report-post-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Harbor — Report Post">
  <tokens>
    <color name="bg" value="#0D1110" /><color name="surface" value="#161B19" /><color name="surface-high" value="#202724" /><color name="line" value="#39423E" /><color name="text" value="#F2F6F3" /><color name="secondary" value="#B5C0BA" /><color name="accent" value="#9DD8BC" /><color name="on-accent" value="#0B2418" /><color name="accent-soft" value="#244638" /><color name="on-accent-soft" value="#D8F4E5" /><color name="danger" value="#FFB4AB" /><color name="danger-soft" value="#4B2927" />
    <number name="r-sm" value="10" /><number name="r-md" value="16" /><number name="r-lg" value="24" /><number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Status" font-family="SF Pro Display" font-size="12" font-weight="600" line-height="16" /><text-style name="Nav" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="22" /><text-style name="Title" font-family="SF Pro Display" font-size="28" font-weight="700" line-height="34" letter-spacing="-0.4" /><text-style name="Section" font-family="SF Pro Display" font-size="17" font-weight="600" line-height="23" /><text-style name="Body" font-family="SF Pro Display" font-size="15" font-weight="400" line-height="21" /><text-style name="BodyStrong" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="21" /><text-style name="Label" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="18" /><text-style name="Caption" font-family="SF Pro Display" font-size="12" font-weight="400" line-height="17" />
  </styles>
  <fonts><font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" /></fonts>
  <col w="393" fill="$bg">
    <row w="fill" h="54" p="14 20 0 20" gap="auto" align="middle-left"><text text-style="Status" value="9:41" fill="$text" /><row gap="6" align="middle-right"><img src="https://api.iconify.design/lucide/signal.svg?color=%23F2F6F3" w="15" h="15" /><img src="https://api.iconify.design/lucide/wifi.svg?color=%23F2F6F3" w="15" h="15" /><img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F2F6F3" w="18" h="18" /></row></row>
    <row role="top-navigation-bar" w="fill" h="52" p="0 12" gap="auto" align="middle-left"><row role="button" w="44" h="44" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/lucide/chevron-left.svg?color=%23F2F6F3" w="24" h="24" /></row><text text-style="Nav" value="Report post" fill="$text" /><row role="button" w="44" h="44" radius="$r-full" align="middle-center"><img src="https://api.iconify.design/lucide/x.svg?color=%23B5C0BA" w="21" h="21" /></row></row>
    <col w="fill" p="10 16 24 16" gap="20">
      <col role="stepper" w="361" gap="9"><row w="fill" gap="auto" align="middle-left"><text text-style="Label" value="STEP 2 OF 3" fill="$accent" /><text text-style="Caption" value="Choose a reason" fill="$secondary" /></row><row w="361" gap="8"><rect w="115" h="5" radius="3" fill="$accent" /><rect w="115" h="5" radius="3" fill="$accent" /><rect w="115" h="5" radius="3" fill="$surface-high" /></row></col>
      <col w="361" gap="6"><text text-style="Title" value="What’s happening?" fill="$text" /><text text-style="Body" value="Your report is private. We won’t tell the account who submitted it." fill="$secondary" /></col>
      <row role="card" w="361" radius="$r-md" fill="$surface" border="1 $line" p="14" gap="12" align="middle-left"><row role="avatar" w="44" h="44" radius="$r-full" fill="$accent-soft" align="middle-center"><text text-style="Label" value="RL" fill="$on-accent-soft" /></row><col w="fill" gap="2"><row gap="7" align="middle-left"><text text-style="BodyStrong" value="river.light" fill="$text" /><row role="badge" h="20" radius="$r-full" fill="$surface-high" p="0 7" align="middle-center"><text text-style="Caption" value="POST" fill="$secondary" /></row></row><text text-style="Caption" value="Shared 18 minutes ago" fill="$secondary" /></col><img src="https://api.iconify.design/lucide/message-square-text.svg?color=%23B5C0BA" w="22" h="22" /></row>
      <col w="361" gap="10"><text text-style="Section" value="Select one reason" fill="$text" />
        <col role="card" w="361" radius="$r-md" fill="$surface" border="1 $line" clip="true">
          <row w="fill" min-h="62" p="14 16" gap="12" align="middle-left"><row role="checkbox" w="24" h="24" radius="$r-full" fill="$accent" align="middle-center"><img src="https://api.iconify.design/lucide/check.svg?color=%230B2418" w="16" h="16" /></row><col w="fill" gap="2"><text text-style="BodyStrong" value="Harassment or bullying" fill="$text" /><text text-style="Caption" value="Targeted insults, threats, or repeated unwanted contact" fill="$secondary" /></col></row>
          <line role="divider" w="fill" fill="$line" /><row w="fill" h="56" p="0 16" gap="12" align="middle-left"><ellipse w="24" h="24" fill="none" border="1 $line" /><text w="fill" text-style="Body" value="Hate speech or symbols" fill="$text" /><img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23B5C0BA" w="18" h="18" /></row>
          <line role="divider" w="fill" fill="$line" /><row w="fill" h="56" p="0 16" gap="12" align="middle-left"><ellipse w="24" h="24" fill="none" border="1 $line" /><text w="fill" text-style="Body" value="Violence or dangerous activity" fill="$text" /><img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23B5C0BA" w="18" h="18" /></row>
          <line role="divider" w="fill" fill="$line" /><row w="fill" h="56" p="0 16" gap="12" align="middle-left"><ellipse w="24" h="24" fill="none" border="1 $line" /><text w="fill" text-style="Body" value="Scam or false information" fill="$text" /><img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23B5C0BA" w="18" h="18" /></row>
          <line role="divider" w="fill" fill="$line" /><row w="fill" h="56" p="0 16" gap="12" align="middle-left"><ellipse w="24" h="24" fill="none" border="1 $line" /><text w="fill" text-style="Body" value="Something else" fill="$text" /><img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23B5C0BA" w="18" h="18" /></row>
        </col>
      </col>
      <row role="banner" w="361" radius="$r-md" fill="$danger-soft" p="14" gap="11" align="top-left"><img src="https://api.iconify.design/lucide/shield-alert.svg?color=%23FFB4AB" w="20" h="20" /><col w="fill" gap="3"><text text-style="BodyStrong" value="Is someone in immediate danger?" fill="$danger" /><text text-style="Caption" value="Contact local emergency services first. A report here does not send an emergency alert." fill="$danger" /></col></row>
      <col w="361" gap="10"><text text-style="Section" value="After you report" fill="$text" /><row role="card" w="361" radius="$r-md" fill="$surface" border="1 $line" p="14" gap="12" align="middle-left"><row w="40" h="40" radius="$r-sm" fill="$accent-soft" align="middle-center"><img src="https://api.iconify.design/lucide/eye-off.svg?color=%23D8F4E5" w="20" h="20" /></row><col w="fill" gap="2"><text text-style="BodyStrong" value="Hide this post now" fill="$text" /><text text-style="Caption" value="Remove it from your feed while our team reviews it." fill="$secondary" /></col><row role="checkbox" w="46" h="28" radius="$r-full" fill="$accent" p="2" align="middle-right"><ellipse w="24" h="24" fill="$on-accent" /></row></row></col>
    </col>
    <col role="action-sheet" w="fill" radius="24 24 0 0" fill="$surface-high" border="1 0 0 0 $line" p="10 16 8 16" gap="14">
      <row w="fill" h="10" align="middle-center"><rect w="40" h="5" radius="3" fill="$secondary" /></row>
      <col w="361" gap="5"><text text-style="Section" value="Ready to continue?" fill="$text" /><text text-style="Body" value="You selected Harassment or bullying. You can add details on the next step." fill="$secondary" /></col>
      <row role="button" w="361" h="52" radius="$r-full" fill="$accent" gap="8" align="middle-center"><text text-style="BodyStrong" value="Continue report" fill="$on-accent" /><img src="https://api.iconify.design/lucide/arrow-right.svg?color=%230B2418" w="19" h="19" /></row>
      <row role="button" w="361" h="44" radius="$r-full" align="middle-center"><text text-style="BodyStrong" value="Cancel" fill="$secondary" /></row>
      <row w="fill" h="18" align="middle-center"><rect w="128" h="5" radius="3" fill="$text" /></row>
    </col>
  </col>
</gui>
```