---
title: "Ampere - EV Charging Session"
platform: ios
slug: ampere-ev-charging-session-ios
screens: ["dashboard"]
domains: ["smart-home"]
style: "minimal"
fonts: ["SF Pro Display"]
roles: ["top-navigation-bar", "button", "card", "badge", "divider", "action-sheet"]
score: {clean: 100, consistent: 68, accessible: 86, comprehensible: 52}
url: https://gui.farm/ios/ampere-ev-charging-session-ios
raw: https://gui.farm/ios/ampere-ev-charging-session-ios/design.guix
download: https://gui.farm/ios/ampere-ev-charging-session-ios.gui
---

# Ampere - EV Charging Session

Live EV charging session monitor showing charge percentage, power draw, kWh added, cost, and a charging-power curve.

- **Live preview:** https://gui.farm/ios/ampere-ev-charging-session-ios
- **Raw source:** https://gui.farm/ios/ampere-ev-charging-session-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/ampere-ev-charging-session-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Ampere - EV Charging Session">
  <tokens>
    <color name="bg" value="#090C10" />
    <color name="surface" value="#121820" />
    <color name="surface-2" value="#1A2330" />
    <color name="text" value="#F6F8FA" />
    <color name="secondary" value="#B7C0CB" />
    <color name="muted" value="#9CA7B4" />
    <color name="line" value="#344252" />
    <color name="green" value="#60E3AD" />
    <color name="green-soft" value="#153A2D" />
    <color name="danger" value="#FFAAA4" />
    <color name="danger-soft" value="#3B2021" />
    <number name="radius-card" value="22" />
    <number name="radius-control" value="14" />
  </tokens>
  <styles>
    <text-style
      name="Display"
      font-family="SF Pro Display"
      font-size="64"
      font-weight="700"
      line-height="66"
      letter-spacing="-2"
    />
    <text-style name="Title" font-family="SF Pro Display" font-size="24" font-weight="700" line-height="29" />
    <text-style name="H2" font-family="SF Pro Display" font-size="18" font-weight="700" line-height="23" />
    <text-style name="Metric" font-family="SF Pro Display" font-size="20" font-weight="700" line-height="30" />
    <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="Caption" font-family="SF Pro Display" font-size="12" font-weight="500" line-height="16" />
    <text-style
      name="Tiny"
      font-family="SF Pro Display"
      font-size="10"
      font-weight="700"
      line-height="13"
      letter-spacing="0.7"
    />
  </styles>
  <fonts>
    <font family="SF Pro Display" source="system" weights="400 500 600 700" styles="normal" />
  </fonts>
  <col w="393" fill="$bg" clip="true">
    <row w="393" h="54" p="14 20 0 20" align="middle-left">
      <text
        w="fill"
        value="9:46"
        font-family="SF Pro Display"
        font-size="14"
        font-weight="600"
        line-height="18"
        color="$text"
      />
      <text
        value="●  ◒  ▰"
        font-family="SF Pro Display"
        font-size="12"
        font-weight="600"
        line-height="16"
        color="$text"
      />
    </row>
    <row w="393" h="58" p="0 20" align="middle-left" role="top-navigation-bar">
      <row w="40" h="40" radius="20" fill="$surface" align="middle-center" role="button">
        <text
          value="‹"
          font-family="SF Pro Display"
          font-size="32"
          font-weight="400"
          line-height="34"
          color="$text"
        />
      </row>
      <text w="fill" value="Charging session" text-style="H2" align="center" color="$text" />
      <row w="40" h="40" radius="20" fill="$surface" align="middle-center" role="button">
        <text
          value="•••"
          font-family="SF Pro Display"
          font-size="17"
          font-weight="700"
          line-height="20"
          color="$text"
        />
      </row>
    </row>
    <col w="393" p="10 20 24 20" gap="16">
      <col w="353" fill="$surface" radius="$radius-card" p="20" gap="18" role="card">
        <row w="313" align="middle-left">
          <row h="30" radius="15" fill="$green-soft" p="0 11" gap="7" align="middle-left" role="badge">
            <rect w="7" h="7" radius="4" fill="$green" />
            <text value="CHARGING" text-style="Tiny" color="$green" />
          </row>
          <text w="fill" value="Orion EV · Bay 07" text-style="Caption" align="right" color="$secondary" />
        </row>
        <col w="313" gap="2" align="top-center">
          <text value="68%" text-style="Display" color="$text" />
          <text value="24 min remaining · ends 10:10 PM" text-style="BodyStrong" color="$secondary" />
        </col>
        <frame w="313" h="28" clip="true">
          <rect x="0" y="7" w="313" h="14" radius="7" fill="$surface-2" />
          <rect x="0" y="7" w="212.84" h="14" radius="7" fill="$green" />
          <rect x="100.16" y="4" w="2" h="20" radius="1" fill="$bg" />
          <rect x="281.7" y="3" w="2" h="22" radius="1" fill="$text" />
        </frame>
        <row w="313" align="top-left">
          <text w="fill" value="32% at plug-in" text-style="Caption" color="$muted" />
          <text value="Target 90%" text-style="Caption" color="$text" />
        </row>
        <line w="313" fill="$line" role="divider" />
        <row w="313" align="top-left" gap="8">
          <col w="fill" gap="3" align="middle-left">
            <text value="POWER" text-style="Tiny" color="$muted" />
            <text value="48 kW" text-style="Metric" color="$text" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="ADDED" text-style="Tiny" color="$muted" />
            <text value="22.4 kWh" text-style="Metric" color="$text" />
          </col>
          <col w="fill" gap="3" align="middle-left">
            <text value="COST" text-style="Tiny" color="$muted" />
            <text value="AED 29.12" text-style="Metric" align="left" color="$text" />
          </col>
        </row>
      </col>
      <col w="353" fill="$surface" radius="$radius-card" p="18" gap="14" role="card">
        <row w="317" align="middle-left">
          <col w="fill" gap="2">
            <text value="Charging power" text-style="H2" color="$text" />
            <text value="Started 9:18 PM · 28 minutes" text-style="Caption" color="$muted" />
          </col>
          <text value="48 kW avg" text-style="BodyStrong" color="$green" />
        </row>
        <img
          src="https://gui.farm/tools/charts/line-chart.svg?data=0:44,6:46,12:48,18:50,24:50.4,28:48&amp;line=%2360E3AD&amp;surface=dark&amp;curve=smooth&amp;area=on&amp;points=show&amp;grid=show&amp;xlabels=hide&amp;ylabels=show&amp;width=634&amp;height=220"
          w="317"
          h="110"
          fit="contain"
        />
        <row w="317" align="middle-left">
          <text w="fill" value="9:18 PM" text-style="Caption" color="$muted" />
          <text value="Now" text-style="Caption" color="$muted" />
        </row>
      </col>
      <row w="353" fill="$surface" radius="$radius-card" p="16" gap="14" align="middle-left" role="card">
        <row w="42" h="42" radius="14" fill="$green-soft" align="middle-center">
          <text
            value="↯"
            font-family="SF Pro Display"
            font-size="23"
            font-weight="700"
            line-height="26"
            color="$green"
          />
        </row>
        <col w="fill" gap="3">
          <text value="Stable high-speed charging" text-style="BodyStrong" color="$text" />
          <text value="Power will taper as the battery nears 90%." text-style="Caption" color="$secondary" />
        </col>
      </row>
    </col>
    <col w="393" fill="$surface-2" radius="26 26 0 0" p="18 20 12 20" gap="14" role="action-sheet">
      <col w="353" gap="5" align="top-center">
        <text value="Stop charging?" text-style="H2" color="$text" />
        <text
          w="313"
          value="Your session will end at 68%. The connector will unlock after billing is finalized."
          text-style="Body"
          align="center"
          color="$secondary"
        />
      </col>
      <row w="353" h="50" radius="$radius-control" fill="$danger-soft" align="middle-center">
        <text value="Stop charging" text-style="BodyStrong" color="$danger" />
      </row>
      <row w="353" h="50" radius="$radius-control" fill="$surface" align="middle-center">
        <text value="Keep charging" text-style="BodyStrong" color="$text" />
      </row>
      <row w="353" h="18" align="bottom-center">
        <rect w="134" h="5" radius="3" fill="$text" />
      </row>
    </col>
  </col>
</gui>
```