---
title: "Fern/Onboarding"
platform: ios
slug: fern-mobile-onboarding-flow-ios
screens: ["onboarding"]
domains: []
style: "minimal"
fonts: ["SF Pro", "Inter"]
roles: ["hyperlink", "item-indicator", "button"]
score: {clean: 100, consistent: 80, accessible: 100, comprehensible: 33}
url: https://gui.farm/ios/fern-mobile-onboarding-flow-ios
raw: https://gui.farm/ios/fern-mobile-onboarding-flow-ios/design.guix
download: https://gui.farm/ios/fern-mobile-onboarding-flow-ios.gui
---

# Fern/Onboarding

A multi-step iOS onboarding flow introducing the Fern app to new users.

- **Live preview:** https://gui.farm/ios/fern-mobile-onboarding-flow-ios
- **Raw source:** https://gui.farm/ios/fern-mobile-onboarding-flow-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/fern-mobile-onboarding-flow-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Fern/Onboarding">
  <tokens>
    <color name="bg" value="#F7FAF3" /><color name="card" value="#FFFFFF" /><color name="ink" value="#182013" />
    <color name="text-2" value="#566051" /><color name="text-3" value="#93A08C" /><color name="border" value="#E4ECDC" />
    <color name="primary" value="#4B8A3F" />
    <number name="r-lg" value="24" />
  </tokens>
  <fonts><font family="Inter" source="google" weights="400 500 600 700" styles="normal" /></fonts>
  <col w="390" h="844" fill="$bg">
    <!-- iOS Status Bar -->
    <row w="390" h="47" p="0 20" align="middle-left" gap="auto">
      <text value="9:41" font-family="SF Pro" font-size="15" font-weight="600" color="$ink" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/lucide/signal.svg?color=%23182013" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/wifi.svg?color=%23182013" w="17" h="17" />
        <img src="https://api.iconify.design/lucide/battery.svg?color=%23182013" w="22" h="13" />
      </row>
    </row>
    <row w="fill" p="10 22 0" gap="auto" align="middle-center">
      <rect w="1" h="1" fill="$bg" />
      <text role="hyperlink" value="Skip" font-family="Inter" font-size="15" font-weight="500" color="$text-3" />
    </row>
    <col w="fill" p="20 22 0">
      <img src="https://picsum.photos/seed/fernplant/700/760" w="fill" h="420" fit="cover" radius="$r-lg" />
    </col>
    <col w="fill" p="36 30 0" gap="14" align="top-center">
      <text w="fill" value="Never forget to water again." font-family="Inter" font-size="28" font-weight="700" color="$ink" align="center" letter-spacing="-0.5" />
      <text w="300" value="Fern learns each plant's rhythm and reminds you at the right time, not too much and not too little." font-family="Inter" font-size="16" font-weight="400" line-height="24" color="$text-2" align="center" />
    </col>
    <col w="fill" h="fill" p="0 30 40" gap="24" align="bottom-center">
      <row role="item-indicator" gap="8" align="middle-center">
        <ellipse w="7" h="7" fill="$text-3" />
        <rect w="22" h="7" radius="999" fill="$primary" />
        <ellipse w="7" h="7" fill="$text-3" />
      </row>
      <row role="button" w="fill" h="54" radius="999" fill="$primary" align="middle-center"><text value="Continue" font-family="Inter" font-size="16" font-weight="600" color="#FFFFFF" /></row>
    </col>
  </col>
</gui>
```