---
title: "Grain — Adjust"
platform: ios
slug: grain-photo-adjust
screens: ["media-player"]
domains: ["productivity"]
style: "minimal"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "badge", "card", "slider", "toolbar", "button", "chip"]
score: {clean: 100, consistent: 81, accessible: 74, comprehensible: 65}
url: https://gui.farm/ios/grain-photo-adjust
raw: https://gui.farm/ios/grain-photo-adjust/design.guix
download: https://gui.farm/ios/grain-photo-adjust.gui
---

# Grain — Adjust

A mobile photo editor for tuning exposure, contrast, highlights, shadows and tint against a live histogram.

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

## Source (design.guix)

```xml
<gui version="0.2" name="Grain — Adjust">
  <tokens>
    <color name="bg" value="#08090A" />
    <color name="surface" value="#131417" />
    <color name="surface-2" value="#1C1E22" />
    <color name="glass" value="#14161AE6" />
    <color name="line" value="#2A2D32" />
    <color name="ink" value="#F3F4F6" />
    <color name="body" value="#B6BBC2" />
    <color name="muted" value="#7B818A" />
    <color name="accent" value="#F5C14B" />
    <color name="track" value="#34383E" />
    <color name="thumb" value="#FFFFFF" />
    <number name="r-lg" value="16" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="Status" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Title" font-family="SF Pro Display" font-size="16" font-weight="600" line-height="21" />
    <text-style name="Value" font-family="SF Pro Display" font-size="15" font-weight="600" line-height="20" />
    <text-style name="Label" font-family="SF Pro Display" font-size="13" font-weight="500" line-height="18" />
    <text-style name="Tiny" font-family="SF Pro Display" font-size="11" font-weight="500" line-height="15" />
    <text-style name="Micro" font-family="SF Pro Display" font-size="10" font-weight="700" line-height="13" letter-spacing="0.8" />
  </styles>

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

  <!-- No scroll in .gui: the canvas expands to all content, so the root col hugs
       its children and the action bar is the last flow child. -->
  <col w="393" fill="$bg">

    <!-- iOS status bar : device chrome, deliberately untagged -->
    <row w="fill" h="54" p="0 24" 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.svg?color=%23F3F4F6" w="22" h="13" />
      </row>
    </row>

    <!-- history controls left, tool name centred, reset right -->
    <row role="top-navigation-bar" w="fill" h="52" p="0 14" gap="0" align="middle-left">
      <row w="96" gap="6" align="middle-left">
        <row w="36" h="36" radius="18" align="middle-center">
          <img src="https://api.iconify.design/lucide/undo-2.svg?color=%23F3F4F6" w="20" h="20" />
        </row>
        <row w="36" h="36" radius="18" align="middle-center">
          <img src="https://api.iconify.design/lucide/redo-2.svg?color=%237B818A" w="20" h="20" />
        </row>
      </row>
      <text w="fill" text-style="Title" value="Adjust" fill="$ink" align="center" />
      <row w="96" align="middle-right">
        <text text-style="Label" value="Reset" fill="$muted" />
      </row>
    </row>

    <!-- ============ CANVAS ============ -->
    <frame w="393" h="400" clip="true" fill="$surface">
      <img x="0" y="0" w="393" h="400" fit="cover"
           src="https://images.unsplash.com/photo-1762181702079-40f2f9ac56e4?auto=format&amp;fit=crop&amp;w=786&amp;h=800&amp;q=80" />

      <!-- hold-to-compare -->
      <row x="341" y="16" w="36" h="36" radius="18" align="middle-center">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="#FFFFFF29" w="1" align="inside" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <img src="https://api.iconify.design/lucide/eye.svg?color=%23F3F4F6" w="18" h="18" />
      </row>

      <!-- capture badge -->
      <row role="badge" x="16" y="16" h="26" radius="$r-full" p="0 11" gap="6" align="middle-center">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="#FFFFFF29" w="1" align="inside" />
          <effect type="background-blur" radius="24" />
        </appearance>
        <ellipse w="6" h="6" fill="$accent" />
        <text text-style="Micro" value="RAW · 24 MP" fill="$ink" />
      </row>

      <!-- levels readout : the histogram is a gui.farm bar chart, 24 buckets -->
      <col role="card" x="16" y="304" w="140" h="80" radius="$r-lg" p="10 12" gap="6">
        <appearance>
          <fill type="color" value="$glass" />
          <border color="#FFFFFF1F" w="1" align="inside" />
          <effect type="background-blur" radius="28" />
        </appearance>
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Micro" value="LEVELS" fill="$muted" />
          <text text-style="Micro" value="RGB" fill="$accent" />
        </row>
        <img w="116" h="34"
             src="https://gui.farm/tools/charts/bar-chart.svg?data=1:6,2:9,3:14,4:22,5:34,6:48,7:62,8:74,9:83,10:91,11:96,12:100,13:94,14:85,15:73,16:61,17:52,18:44,19:36,20:28,21:21,22:15,23:10,24:6&amp;bar=%23F3F4F6&amp;radius=1&amp;surface=dark&amp;grid=hide&amp;values=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=232&amp;height=68" />
      </col>
    </frame>

    <!-- ============ ADJUSTMENTS ============
         Track is 361 wide, so the origin sits at x=180 and one unit of travel is
         180px. Every fill and thumb below is placed off that: a +0.65 exposure
         fills 117px right of centre and parks its 18px thumb at 288. -->
    <col w="fill" p="22 16" gap="18">

      <col role="slider" w="361" gap="8">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Label" value="Exposure" fill="$body" />
          <text text-style="Value" value="+0.65" fill="$accent" />
        </row>
        <frame w="361" h="22">
          <rect x="180" y="0" w="1" h="6" fill="$muted" />
          <rect x="0" y="9" w="361" h="4" radius="2" fill="$track" />
          <rect x="180" y="9" w="117" h="4" radius="2" fill="$accent" />
          <ellipse x="288" y="2" w="18" h="18" fill="$thumb" />
        </frame>
      </col>

      <col role="slider" w="361" gap="8">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Label" value="Contrast" fill="$body" />
          <text text-style="Value" value="−0.20" fill="$accent" />
        </row>
        <frame w="361" h="22">
          <rect x="180" y="0" w="1" h="6" fill="$muted" />
          <rect x="0" y="9" w="361" h="4" radius="2" fill="$track" />
          <rect x="144" y="9" w="36" h="4" radius="2" fill="$accent" />
          <ellipse x="135" y="2" w="18" h="18" fill="$thumb" />
        </frame>
      </col>

      <col role="slider" w="361" gap="8">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Label" value="Highlights" fill="$body" />
          <text text-style="Value" value="−0.45" fill="$accent" />
        </row>
        <frame w="361" h="22">
          <rect x="180" y="0" w="1" h="6" fill="$muted" />
          <rect x="0" y="9" w="361" h="4" radius="2" fill="$track" />
          <rect x="99" y="9" w="81" h="4" radius="2" fill="$accent" />
          <ellipse x="90" y="2" w="18" h="18" fill="$thumb" />
        </frame>
      </col>

      <col role="slider" w="361" gap="8">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Label" value="Shadows" fill="$body" />
          <text text-style="Value" value="+0.30" fill="$accent" />
        </row>
        <frame w="361" h="22">
          <rect x="180" y="0" w="1" h="6" fill="$muted" />
          <rect x="0" y="9" w="361" h="4" radius="2" fill="$track" />
          <rect x="180" y="9" w="54" h="4" radius="2" fill="$accent" />
          <ellipse x="225" y="2" w="18" h="18" fill="$thumb" />
        </frame>
      </col>

      <!-- tint reads as a gradient rather than a fill, since the value is a
           position in a colour range and not an amount of anything -->
      <col role="slider" w="361" gap="8">
        <row w="fill" gap="auto" align="middle-left">
          <text text-style="Label" value="Tint" fill="$body" />
          <text text-style="Value" value="+0.22" fill="$accent" />
        </row>
        <frame w="361" h="22">
          <rect x="180" y="0" w="1" h="6" fill="$muted" />
          <rect x="0" y="8" w="361" h="6" radius="3"
                fill="linear-gradient(90deg, #5BD98A 0%, #34383E 50%, #E06BD9 100%)" />
          <ellipse x="211" y="2" w="18" h="18" fill="$thumb" />
        </frame>
      </col>

    </col>

    <!-- ============ TOOL RAIL ============ -->
    <row role="toolbar" w="fill" h="88" p="0 12" gap="7" align="middle-center">
      <col w="68" gap="7" align="middle-center">
        <row w="44" h="44" radius="22" fill="$accent" align="middle-center">
          <img src="https://api.iconify.design/lucide/sun.svg?color=%2308090A" w="20" h="20" />
        </row>
        <text text-style="Tiny" value="Light" fill="$ink" />
      </col>
      <col w="68" gap="7" align="middle-center">
        <row w="44" h="44" radius="22" fill="none" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/droplet.svg?color=%237B818A" w="20" h="20" />
        </row>
        <text text-style="Tiny" value="Color" fill="$muted" />
      </col>
      <col w="68" gap="7" align="middle-center">
        <row w="44" h="44" radius="22" fill="none" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/contrast.svg?color=%237B818A" w="20" h="20" />
        </row>
        <text text-style="Tiny" value="B&amp;W" fill="$muted" />
      </col>
      <col w="68" gap="7" align="middle-center">
        <row w="44" h="44" radius="22" fill="none" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/sparkles.svg?color=%237B818A" w="20" h="20" />
        </row>
        <text text-style="Tiny" value="Effects" fill="$muted" />
      </col>
      <col w="68" gap="7" align="middle-center">
        <row w="44" h="44" radius="22" fill="none" border="1 $line" align="middle-center">
          <img src="https://api.iconify.design/lucide/crop.svg?color=%237B818A" w="20" h="20" />
        </row>
        <text text-style="Tiny" value="Crop" fill="$muted" />
      </col>
    </row>

    <!-- ============ ACTION BAR ============ -->
    <row w="fill" h="76" border="1 0 0 0 $line" p="0 20" gap="0" align="middle-left">
      <row role="button" w="44" h="44" radius="22" fill="none" border="1 $line" align="middle-center">
        <img src="https://api.iconify.design/lucide/x.svg?color=%23B6BBC2" w="19" h="19" />
      </row>
      <row w="fill" align="middle-center">
        <row role="chip" h="38" radius="$r-full" fill="$surface-2" border="1 $line" p="0 14" gap="9" align="middle-center">
          <text text-style="Label" value="Portra 400" fill="$ink" />
          <text text-style="Tiny" value="82" fill="$accent" />
          <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%237B818A" w="15" h="15" />
        </row>
      </row>
      <row role="button" w="44" h="44" radius="22" fill="$accent" align="middle-center">
        <img src="https://api.iconify.design/lucide/check.svg?color=%2308090A" w="20" h="20" />
      </row>
    </row>

    <row w="fill" h="34" align="middle-center">
      <rect w="140" h="5" radius="3" fill="$ink" />
    </row>

  </col>
</gui>

```