---
title: "Ember Sign In"
platform: ios
slug: ember-signin
screens: ["login"]
domains: ["ai-chat"]
style: "skeuomorphic"
fonts: ["SF Pro"]
roles: ["badge", "button", "card", "segmented-control", "text-field", "divider", "hyperlink"]
score: {clean: 100, consistent: 71, accessible: 100, comprehensible: 54}
url: https://gui.farm/ios/ember-signin
raw: https://gui.farm/ios/ember-signin/design.guix
download: https://gui.farm/ios/ember-signin.gui
---

# Ember Sign In

A skeuomorphic iOS sign-in screen for Ember, a personal AI companion app, with tactile OAuth provider buttons, an email field, and encrypted cross-device value props.

- **Live preview:** https://gui.farm/ios/ember-signin
- **Raw source:** https://gui.farm/ios/ember-signin/design.guix
- **Download (.gui):** https://gui.farm/ios/ember-signin.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Ember Sign In">
  <tokens>
    <color name="bg" value="#E6E4DF" />
    <color name="panel" value="#FBFAF8" />
    <color name="panel-2" value="#EFEEEA" />
    <color name="ink" value="#20222A" />
    <color name="ink-2" value="#5C616B" />
    <color name="ink-3" value="#6C717B" />
    <color name="hair" value="#D8D6D0" />
    <color name="hair-2" value="#CFCDC7" />
    <color name="clay-1" value="#C0623A" />
    <color name="clay-2" value="#97481F" />
    <color name="clay-text" value="#8A3F1E" />
    <color name="clay-tint" value="#F0DDD1" />
    <number name="r-card" value="22" />
    <number name="r-field" value="14" />
    <number name="r-btn" value="14" />
    <number name="r-chip" value="14" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Wordmark" font-family="SF Pro" font-size="30" font-weight="700" line-height="34" letter-spacing="-0.4" />
    <text-style name="Tagline"  font-family="SF Pro" font-size="16" font-weight="400" line-height="22" />
    <text-style name="Title"    font-family="SF Pro" font-size="17" font-weight="600" line-height="22" />
    <text-style name="Sub"      font-family="SF Pro" font-size="13" font-weight="400" line-height="18" />
    <text-style name="FieldHint" font-family="SF Pro" font-size="16" font-weight="400" line-height="20" />
    <text-style name="BtnLabel" font-family="SF Pro" font-size="16" font-weight="600" line-height="20" />
    <text-style name="SegLabel" font-family="SF Pro" font-size="15" font-weight="600" line-height="18" />
    <text-style name="Micro"    font-family="SF Pro" font-size="11" font-weight="700" line-height="13" letter-spacing="0.4" />
    <text-style name="Legal"    font-family="SF Pro" font-size="12" font-weight="400" line-height="17" />
    <text-style name="LegalLink" font-family="SF Pro" font-size="12" font-weight="600" line-height="17" />
    <text-style name="Divider"  font-family="SF Pro" font-size="13" font-weight="500" line-height="16" />
  </styles>

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

  <components>
    <!-- A single value-proposition row: tactile glazed icon chip + title + subtitle -->
    <component name="BenefitRow" id="comp-benefit">
      <props>
        <prop name="t"  type="text" target="b-title" />
        <prop name="s"  type="text" target="b-sub" />
        <prop name="i1" type="visible" target="b-ic1" />
        <prop name="i2" type="visible" target="b-ic2" />
        <prop name="i3" type="visible" target="b-ic3" />
        <prop name="bg" type="visible" target="b-badge" />
      </props>
      <row w="fill" p="12 14" gap="14" align="middle-left">
        <col w="44" h="44" radius="$r-chip" fill="$clay-tint" align="middle-center" border="1 #E4C7B6">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #F6E3D7 0%, #EAD0BF 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFB0" />
            <effect type="drop-shadow" x="0" y="2" radius="5" spread="0" color="#8A3F1E1F" />
          </appearance>
          <frame w="22" h="22">
            <img id="b-ic1" x="0" y="0" src="https://api.iconify.design/lucide/brain.svg?color=%238A3F1E" w="22" h="22" />
            <img id="b-ic2" x="0" y="0" src="https://api.iconify.design/lucide/shield-check.svg?color=%238A3F1E" w="22" h="22" />
            <img id="b-ic3" x="0" y="0" src="https://api.iconify.design/lucide/monitor-smartphone.svg?color=%238A3F1E" w="22" h="22" />
          </frame>
        </col>
        <col w="fill" gap="3">
          <row w="fill" gap="8" align="middle-left">
            <text id="b-title" text-style="Title" value="Remembers what matters" color="$ink" />
            <row id="b-badge" role="badge" p="2 7" radius="$r-pill" fill="$clay-tint" align="middle-center" border="1 #E4C7B6">
              <text text-style="Micro" text-case="uppercase" value="Encrypted" color="$clay-text" />
            </row>
          </row>
          <text id="b-sub" text-style="Sub" value="Ember picks up right where you left off" color="$ink-2" />
        </col>
      </row>
    </component>

    <!-- A tactile ceramic OAuth provider button -->
    <component name="AuthButton" id="comp-auth">
      <props>
        <prop name="lbl" type="text" target="a-label" />
        <prop name="a"   type="visible" target="a-apple" />
        <prop name="g"   type="visible" target="a-google" />
        <prop name="m"   type="visible" target="a-ms" />
      </props>
      <row role="button" w="fill" h="54" radius="$r-btn" fill="$panel" align="middle-center" gap="10" border="1 $hair-2">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FFFFFF 0%, #F0EEE9 100%)" />
          <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFFCC" />
          <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#2A241C1F" />
        </appearance>
        <frame w="20" h="20">
          <img id="a-apple"  x="0" y="0" src="https://api.iconify.design/simple-icons/apple.svg?color=%2320222A" w="20" h="20" />
          <img id="a-google" x="0" y="0" src="https://api.iconify.design/logos/google-icon.svg" w="20" h="20" />
          <img id="a-ms"     x="0" y="0" src="https://api.iconify.design/logos/microsoft-icon.svg" w="20" h="20" />
        </frame>
        <text id="a-label" text-style="BtnLabel" value="Continue with Apple" color="$ink" />
      </row>
    </component>
  </components>

  <col w="390" fill="$bg" pb="34" gap="0">

    <!-- Status bar (device chrome, untagged) -->
    <row w="fill" h="47" p="0 22" align="middle-left" gap="auto">
      <text value="9:41" font-family="SF Pro" font-size="15" font-weight="600" color="$ink" />
      <row gap="7" align="middle-center">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%2320222A" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%2320222A" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery-full.svg?color=%2320222A" w="24" h="17" />
      </row>
    </row>

    <!-- Brand block -->
    <col w="fill" p="14 24 0" gap="14" align="top-center">
      <frame w="76" h="76" radius="22">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(160deg, #C86B41 0%, #A24E24 55%, #8A3F1E 100%)" />
          <effect type="inner-shadow" x="0" y="2" radius="1" spread="0" color="#FFD9C240" />
          <effect type="drop-shadow" x="0" y="6" radius="16" spread="0" color="#7A3A1A40" />
        </appearance>
        <ellipse x="15" y="12" w="46" h="26" fill="#FFFFFF1F" />
        <img x="22" y="22" src="https://api.iconify.design/lucide/sparkles.svg?color=%23FFFFFF" w="32" h="32" />
      </frame>
      <col gap="5" align="middle-center">
        <text text-style="Wordmark" value="Ember" color="$ink" align="center" />
        <text text-style="Tagline" value="Your thoughtful AI companion" color="$ink-2" align="center" />
      </col>
    </col>

    <!-- Content -->
    <col w="fill" p="22 20 0" gap="16">

      <!-- Value proposition card -->
      <col role="card" w="fill" radius="$r-card" fill="$panel" p="4" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FEFDFB 0%, #F6F4EF 100%)" />
          <effect type="drop-shadow" x="0" y="8" radius="22" spread="0" color="#2A241C14" />
        </appearance>
        <instance component="comp-benefit" t="Remembers what matters" s="Ember picks up right where you left off" i1="true" i2="false" i3="false" bg="false" />
        <line fill="$hair" />
        <instance component="comp-benefit" t="Private by design" s="Your conversations stay encrypted on your device" i1="false" i2="true" i3="false" bg="true" />
        <line fill="$hair" />
        <instance component="comp-benefit" t="One mind, every device" s="iPhone, iPad, and Mac stay perfectly in sync" i1="false" i2="false" i3="true" bg="false" />
      </col>

      <!-- Auth card -->
      <col role="card" w="fill" radius="$r-card" fill="$panel" p="18" gap="14" border="1 $hair">
        <appearance>
          <fill type="linear-gradient" value="linear-gradient(180deg, #FEFDFB 0%, #F5F3EE 100%)" />
          <effect type="drop-shadow" x="0" y="10" radius="26" spread="0" color="#2A241C1A" />
        </appearance>

        <!-- Segmented control -->
        <row role="segmented-control" w="fill" h="44" radius="$r-pill" fill="$panel-2" p="4" gap="4" align="middle-center" border="1 $hair">
          <col w="fill" h="36" radius="$r-pill" align="middle-center">
            <appearance>
              <fill type="linear-gradient" value="linear-gradient(180deg, #C0623A 0%, #97481F 100%)" />
              <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF4D" />
              <effect type="drop-shadow" x="0" y="2" radius="6" spread="0" color="#7A3A1A3D" />
            </appearance>
            <text text-style="SegLabel" value="Sign in" color="#FFFFFF" />
          </col>
          <col w="fill" h="36" radius="$r-pill" align="middle-center">
            <text text-style="SegLabel" value="Create account" color="$ink-2" />
          </col>
        </row>

        <!-- Email field (active, filled) -->
        <row role="text-field" w="fill" h="52" radius="$r-field" fill="$panel-2" p="0 15" gap="10" align="middle-left" border="1.5 $clay-1">
          <img src="https://api.iconify.design/lucide/mail.svg?color=%235C616B" w="18" h="18" />
          <text w="fill" text-style="FieldHint" value="maya.okonkwo@hey.com" color="$ink" />
          <rect w="2" h="20" radius="1" fill="$clay-1" />
        </row>

        <!-- Primary CTA -->
        <row role="button" w="fill" h="54" radius="$r-btn" align="middle-center" gap="8" fill="$clay-2">
          <appearance>
            <fill type="linear-gradient" value="linear-gradient(180deg, #C0623A 0%, #97481F 100%)" />
            <effect type="inner-shadow" x="0" y="1" radius="0" spread="0" color="#FFFFFF59" />
            <effect type="drop-shadow" x="0" y="5" radius="12" spread="0" color="#7A3A1A52" />
          </appearance>
          <text text-style="BtnLabel" value="Continue" color="#FFFFFF" />
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23FFFFFF" w="18" h="18" />
        </row>

        <!-- Divider -->
        <row role="divider" w="fill" gap="12" align="middle-center" p="2 0">
          <line fill="$hair" />
          <text text-style="Divider" value="or continue with" color="$ink-2" />
          <line fill="$hair" />
        </row>

        <!-- OAuth provider stack -->
        <col w="fill" gap="10">
          <instance component="comp-auth" lbl="Continue with Apple" a="true" g="false" m="false" />
          <instance component="comp-auth" lbl="Continue with Google" a="false" g="true" m="false" />
          <instance component="comp-auth" lbl="Continue with Microsoft" a="false" g="false" m="true" />
        </col>
      </col>

    </col>

    <!-- Legal footer -->
    <col w="fill" p="18 28 6" gap="9" align="middle-center">
      <text w="fill" text-style="Legal" value="By continuing, you agree to Ember's" color="$ink-2" align="center" />
      <row gap="5" align="middle-center">
        <text role="hyperlink" text-style="LegalLink" value="Terms of Service" color="$clay-text" decoration="underline" decoration-color="#C9A896" />
        <text text-style="Legal" value="and" color="$ink-2" />
        <text role="hyperlink" text-style="LegalLink" value="Privacy Policy" color="$clay-text" decoration="underline" decoration-color="#C9A896" />
      </row>
      <row gap="6" align="middle-center" p="4 0 0">
        <text text-style="Legal" value="Trouble signing in?" color="$ink-2" />
        <text role="hyperlink" text-style="LegalLink" value="Get help" color="$clay-text" decoration="underline" decoration-color="#C9A896" />
      </row>
    </col>

  </col>
</gui>

```