---
title: "Loupe — Photo Editor"
platform: ios
slug: loupe-photo-editor
screens: []
domains: ["productivity"]
style: "minimal"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "slider", "segmented-control"]
score: {clean: 99, consistent: 78, accessible: 100, comprehensible: 86}
url: https://gui.farm/ios/loupe-photo-editor
raw: https://gui.farm/ios/loupe-photo-editor/design.guix
download: https://gui.farm/ios/loupe-photo-editor.gui
---

# Loupe — Photo Editor

A dark iOS photo‑editing screen for fine‑tuning a shot with a stack of signed exposure, tone and colour sliders.

- **Live preview:** https://gui.farm/ios/loupe-photo-editor
- **Raw source:** https://gui.farm/ios/loupe-photo-editor/design.guix
- **Download (.gui):** https://gui.farm/ios/loupe-photo-editor.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Loupe — Photo Editor">
  <tokens>
    <color name="surface" value="#0E0F12" />
    <color name="panel" value="#17191E" />
    <color name="elevate" value="#2E323A" />
    <color name="track" value="#2A2E35" />
    <color name="hairline" value="#3A3E46" />
    <color name="ink" value="#F3F4F6" />
    <color name="muted" value="#AAB0B8" />
    <color name="accent" value="#F0B429" />
    <color name="thumb" value="#FFFFFF" />
    <color name="home" value="#5C6169" />
    <color name="scrim" value="#0A0B0DCC" />
  </tokens>

  <styles>
    <text-style name="Status" 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="17" font-weight="600" line-height="22" />
    <text-style name="NavAction" font-family="SF Pro Display" font-size="16" font-weight="500" line-height="21" />
    <text-style name="NavDone" font-family="SF Pro Display" font-size="16" font-weight="600" line-height="21" />
    <text-style name="Section" font-family="SF Pro Display" font-size="20" font-weight="700" line-height="25" />
    <text-style name="Label" font-family="SF Pro Display" font-size="15" font-weight="500" line-height="20" />
    <text-style name="Value" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Small" font-family="SF Pro Display" font-size="13" font-weight="600" line-height="17" />
    <text-style name="Tab" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="16" />
  </styles>

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

  <col w="393" fill="$surface">

    <!-- status bar : device chrome, untagged -->
    <row w="393" h="54" p="16 20 0 20" gap="auto" align="middle-left">
      <text text-style="Status" value="9:41" fill="$ink" />
      <row gap="7" align="middle-right">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23F3F4F6" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23F3F4F6" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%23F3F4F6" w="22" h="22" />
      </row>
    </row>

    <!-- top navigation bar : Cancel / Edit / Done -->
    <row role="top-navigation-bar" w="393" h="50" p="0 16" gap="auto" align="middle-left">
      <row role="button" w="72" align="middle-left">
        <text text-style="NavAction" value="Cancel" fill="$muted" />
      </row>
      <text w="fill" text-style="NavTitle" value="Edit" fill="$ink" align="center" />
      <row role="button" w="72" align="middle-right">
        <text w="fill" text-style="NavDone" value="Done" fill="$accent" align="right" />
      </row>
    </row>

    <!-- hero preview : verified Unsplash photograph -->
    <frame w="393" h="452" clip="true" fill="#000000">
      <img x="0" y="0" w="393" h="452" fit="cover"
           src="https://images.unsplash.com/photo-1759830849296-b4339df60c58?auto=format&amp;fit=crop&amp;w=786&amp;h=904&amp;q=85" />
      <row role="button" x="341" y="16" w="36" h="36" radius="18" fill="$scrim" align="middle-center">
        <img src="https://api.iconify.design/lucide/rotate-ccw.svg?color=%23F3F4F6" w="18" h="18" />
      </row>
    </frame>

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

      <row w="361" gap="auto" align="middle-left">
        <text text-style="Section" value="Adjust" fill="$ink" />
        <row gap="16" align="middle-right">
          <row role="button" gap="6" align="middle-center">
            <img src="https://api.iconify.design/lucide/wand-2.svg?color=%23F0B429" w="16" h="16" />
            <text text-style="Small" value="Auto" fill="$accent" />
          </row>
          <row role="button" align="middle-center">
            <text text-style="Small" value="Reset" fill="$muted" />
          </row>
        </row>
      </row>

      <!-- Exposure  +0.60 EV : offset 0.30*180 = 54, thumb centre 234 -->
      <col role="slider" w="361" gap="9">
        <row w="361" gap="auto" align="middle-left">
          <row gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/sun.svg?color=%23AAB0B8" w="16" h="16" />
            <text text-style="Label" value="Exposure" fill="$ink" />
          </row>
          <text text-style="Value" value="+0.60 EV" fill="$ink" align="right" />
        </row>
        <frame w="361" h="20" clip="true">
          <rect x="0" y="8" w="361" h="4" radius="2" fill="$track" />
          <rect x="179" y="4" w="2" h="12" radius="1" fill="$hairline" />
          <rect x="180" y="8" w="54" h="4" radius="2" fill="$accent" />
          <ellipse x="224" y="0" w="20" h="20" fill="$thumb" />
        </frame>
      </col>

      <!-- Contrast  +25 : offset 0.25*180 = 45, thumb centre 225 -->
      <col role="slider" w="361" gap="9">
        <row w="361" gap="auto" align="middle-left">
          <row gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/contrast.svg?color=%23AAB0B8" w="16" h="16" />
            <text text-style="Label" value="Contrast" fill="$ink" />
          </row>
          <text text-style="Value" value="+25" fill="$ink" align="right" />
        </row>
        <frame w="361" h="20" clip="true">
          <rect x="0" y="8" w="361" h="4" radius="2" fill="$track" />
          <rect x="179" y="4" w="2" h="12" radius="1" fill="$hairline" />
          <rect x="180" y="8" w="45" h="4" radius="2" fill="$accent" />
          <ellipse x="215" y="0" w="20" h="20" fill="$thumb" />
        </frame>
      </col>

      <!-- Highlights  −40 : offset 0.40*180 = 72 left, thumb centre 108 -->
      <col role="slider" w="361" gap="9">
        <row w="361" gap="auto" align="middle-left">
          <row gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/sun-dim.svg?color=%23AAB0B8" w="16" h="16" />
            <text text-style="Label" value="Highlights" fill="$ink" />
          </row>
          <text text-style="Value" value="−40" fill="$ink" align="right" />
        </row>
        <frame w="361" h="20" clip="true">
          <rect x="0" y="8" w="361" h="4" radius="2" fill="$track" />
          <rect x="179" y="4" w="2" h="12" radius="1" fill="$hairline" />
          <rect x="108" y="8" w="72" h="4" radius="2" fill="$accent" />
          <ellipse x="98" y="0" w="20" h="20" fill="$thumb" />
        </frame>
      </col>

      <!-- Shadows  +35 : offset 0.35*180 = 63, thumb centre 243 -->
      <col role="slider" w="361" gap="9">
        <row w="361" gap="auto" align="middle-left">
          <row gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/moon.svg?color=%23AAB0B8" w="16" h="16" />
            <text text-style="Label" value="Shadows" fill="$ink" />
          </row>
          <text text-style="Value" value="+35" fill="$ink" align="right" />
        </row>
        <frame w="361" h="20" clip="true">
          <rect x="0" y="8" w="361" h="4" radius="2" fill="$track" />
          <rect x="179" y="4" w="2" h="12" radius="1" fill="$hairline" />
          <rect x="180" y="8" w="63" h="4" radius="2" fill="$accent" />
          <ellipse x="233" y="0" w="20" h="20" fill="$thumb" />
        </frame>
      </col>

      <!-- Saturation  −15 : offset 0.15*180 = 27 left, thumb centre 153 -->
      <col role="slider" w="361" gap="9">
        <row w="361" gap="auto" align="middle-left">
          <row gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/droplet.svg?color=%23AAB0B8" w="16" h="16" />
            <text text-style="Label" value="Saturation" fill="$ink" />
          </row>
          <text text-style="Value" value="−15" fill="$ink" align="right" />
        </row>
        <frame w="361" h="20" clip="true">
          <rect x="0" y="8" w="361" h="4" radius="2" fill="$track" />
          <rect x="179" y="4" w="2" h="12" radius="1" fill="$hairline" />
          <rect x="153" y="8" w="27" h="4" radius="2" fill="$accent" />
          <ellipse x="143" y="0" w="20" h="20" fill="$thumb" />
        </frame>
      </col>

      <!-- Warmth  +50 : offset 0.50*180 = 90, thumb centre 270 -->
      <col role="slider" w="361" gap="9">
        <row w="361" gap="auto" align="middle-left">
          <row gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/thermometer-sun.svg?color=%23AAB0B8" w="16" h="16" />
            <text text-style="Label" value="Warmth" fill="$ink" />
          </row>
          <text text-style="Value" value="+50" fill="$ink" align="right" />
        </row>
        <frame w="361" h="20" clip="true">
          <rect x="0" y="8" w="361" h="4" radius="2" fill="$track" />
          <rect x="179" y="4" w="2" h="12" radius="1" fill="$hairline" />
          <rect x="180" y="8" w="90" h="4" radius="2" fill="$accent" />
          <ellipse x="260" y="0" w="20" h="20" fill="$thumb" />
        </frame>
      </col>

    </col>

    <!-- mode selector : viewport-fixed bar, last flow child -->
    <row w="393" h="64" p="8 16 0 16" fill="$surface" align="top-center">
      <row role="segmented-control" w="361" h="40" radius="10" fill="$panel" p="4" gap="4" align="middle-center">
        <row w="fill" h="32" radius="8" fill="$elevate" gap="6" align="middle-center">
          <img src="https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23F3F4F6" w="16" h="16" />
          <text text-style="Tab" value="Adjust" fill="$ink" />
        </row>
        <row w="fill" h="32" radius="8" gap="6" align="middle-center">
          <img src="https://api.iconify.design/lucide/image.svg?color=%23AAB0B8" w="16" h="16" />
          <text text-style="Tab" value="Filters" fill="$muted" />
        </row>
        <row w="fill" h="32" radius="8" gap="6" align="middle-center">
          <img src="https://api.iconify.design/lucide/crop.svg?color=%23AAB0B8" w="16" h="16" />
          <text text-style="Tab" value="Crop" fill="$muted" />
        </row>
      </row>
    </row>

    <!-- home indicator : device chrome, untagged -->
    <frame w="393" h="34" clip="true">
      <rect x="127" y="14" w="140" h="5" radius="3" fill="$home" />
    </frame>

  </col>
</gui>

```